diff --git a/src/components/actionSheet/actionSheet.js b/src/components/actionSheet/actionSheet.ts similarity index 78% rename from src/components/actionSheet/actionSheet.js rename to src/components/actionSheet/actionSheet.ts index 1114908fcf..eacd66f421 100644 --- a/src/components/actionSheet/actionSheet.js +++ b/src/components/actionSheet/actionSheet.ts @@ -9,8 +9,64 @@ import 'material-design-icons-iconfont'; import '../../styles/scrollstyles.scss'; import '../../components/listview/listview.scss'; -function getOffsets(elems) { - const results = []; +interface OptionItem { + asideText?: string; + divider?: boolean; + icon?: string; + id?: string; + innerText?: string; + name?: string; + secondaryText?: string; + selected?: boolean; + textContent?: string; + value?: string; +} + +interface Options { + items: OptionItem[]; + border?: boolean; + callback?: (id: string) => void; + dialogClass?: string; + enableHistory?: boolean; + entryAnimationDuration?: number; + entryAnimation?: string; + exitAnimationDuration?: number; + exitAnimation?: string; + menuItemClass?: string; + offsetLeft?: number; + offsetTop?: number; + positionTo?: Element | null; + positionY?: string; + resolveOnClick?: boolean | (string | null)[]; + shaded?: boolean; + showCancel?: boolean; + text?: string; + timeout?: number; + title?: string; +} + +interface Offset { + top: number; + left: number; + width: number; + height: number; +} + +interface DialogOptions { + autoFocus?: boolean; + enableHistory?: boolean; + entryAnimationDuration?: number; + entryAnimation?: string; + exitAnimationDuration?: number; + exitAnimation?: string; + modal?: boolean; + removeOnClose?: boolean; + scrollY?: boolean; + size?: string; +} + +function getOffsets(elems: Element[]): Offset[] { + const results: Offset[] = []; if (!document) { return results; @@ -30,12 +86,12 @@ function getOffsets(elems) { return results; } -function getPosition(options, dlg) { +function getPosition(positionTo: Element, options: Options, dlg: HTMLElement) { const windowSize = dom.getWindowSize(); const windowHeight = windowSize.innerHeight; const windowWidth = windowSize.innerWidth; - const pos = getOffsets([options.positionTo])[0]; + const pos = getOffsets([positionTo])[0]; if (options.positionY !== 'top') { pos.top += (pos.height || 0) / 2; @@ -71,19 +127,22 @@ function getPosition(options, dlg) { return pos; } -function centerFocus(elem, horiz, on) { +function centerFocus(elem: Element, horiz: boolean, on: boolean) { import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); + }).catch(e => { + console.warn('Error in centerFocus', e); }); } -export function show(options) { +/* eslint-disable-next-line sonarjs/cognitive-complexity */ +export function show(options: Options) { // items // positionTo // showCancel // title - const dialogOptions = { + const dialogOptions: DialogOptions = { removeOnClose: true, enableHistory: options.enableHistory, scrollY: false @@ -239,7 +298,10 @@ export function show(options) { dlg.innerHTML = html; if (layoutManager.tv) { - centerFocus(dlg.querySelector('.actionSheetScroller'), false, true); + const scroller = dlg.querySelector('.actionSheetScroller'); + if (scroller) { + centerFocus(scroller, false, true); + } } const btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet'); @@ -249,9 +311,9 @@ export function show(options) { }); } - let selectedId; + let selectedId: string | null = null; - let timeout; + let timeout: ReturnType | undefined; if (options.timeout) { timeout = setTimeout(function () { dialogHelper.close(dlg); @@ -259,16 +321,16 @@ export function show(options) { } return new Promise(function (resolve, reject) { - let isResolved; + let isResolved = false; dlg.addEventListener('click', function (e) { - const actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem'); + const actionSheetMenuItem = dom.parentWithClass(e.target as HTMLElement, 'actionSheetMenuItem'); if (actionSheetMenuItem) { selectedId = actionSheetMenuItem.getAttribute('data-id'); if (options.resolveOnClick) { - if (options.resolveOnClick.indexOf) { + if (Array.isArray(options.resolveOnClick)) { if (options.resolveOnClick.indexOf(selectedId) !== -1) { resolve(selectedId); isResolved = true; @@ -285,12 +347,15 @@ export function show(options) { dlg.addEventListener('close', function () { if (layoutManager.tv) { - centerFocus(dlg.querySelector('.actionSheetScroller'), false, false); + const scroller = dlg.querySelector('.actionSheetScroller'); + if (scroller) { + centerFocus(scroller, false, false); + } } if (timeout) { clearTimeout(timeout); - timeout = null; + timeout = undefined; } if (!isResolved) { @@ -306,13 +371,15 @@ export function show(options) { } }); - dialogHelper.open(dlg); + dialogHelper.open(dlg).catch(e => { + console.warn('DialogHelper.open error', e); + }); - const pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options, dlg) : null; + const pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options.positionTo, options, dlg) : null; if (pos) { dlg.style.position = 'fixed'; - dlg.style.margin = 0; + dlg.style.margin = '0'; dlg.style.left = pos.left + 'px'; dlg.style.top = pos.top + 'px'; } diff --git a/src/scripts/scrollHelper.js b/src/scripts/scrollHelper.ts similarity index 81% rename from src/scripts/scrollHelper.js rename to src/scripts/scrollHelper.ts index 9f6a870ed3..174510d26a 100644 --- a/src/scripts/scrollHelper.js +++ b/src/scripts/scrollHelper.ts @@ -2,17 +2,17 @@ import focusManager from '../components/focusManager'; import dom from './dom'; import '../styles/scrollstyles.scss'; -function getBoundingClientRect(elem) { +function getBoundingClientRect(elem: Element) { // Support: BlackBerry 5, iOS 3 (original iPhone) // If we don't have gBCR, just use 0,0 rather than error if (elem.getBoundingClientRect) { return elem.getBoundingClientRect(); } else { - return { top: 0, left: 0 }; + return { top: 0, left: 0, width: undefined, height: undefined }; } } -export function getPosition(scrollContainer, item, horizontal) { +export function getPosition(scrollContainer: HTMLElement, item: HTMLElement, horizontal: boolean) { const slideeOffset = getBoundingClientRect(scrollContainer); const itemOffset = getBoundingClientRect(item); @@ -41,7 +41,7 @@ export function getPosition(scrollContainer, item, horizontal) { }; } -export function toCenter(container, elem, horizontal, skipWhenVisible) { +export function toCenter(container: HTMLElement, elem: HTMLElement, horizontal: boolean, skipWhenVisible?: boolean) { const pos = getPosition(container, elem, horizontal); if (skipWhenVisible && pos.isVisible) { @@ -61,7 +61,7 @@ export function toCenter(container, elem, horizontal, skipWhenVisible) { } } -export function toStart(container, elem, horizontal, skipWhenVisible) { +export function toStart(container: HTMLElement, elem: HTMLElement, horizontal: boolean, skipWhenVisible?: boolean) { const pos = getPosition(container, elem, horizontal); if (skipWhenVisible && pos.isVisible) { @@ -81,7 +81,7 @@ export function toStart(container, elem, horizontal, skipWhenVisible) { } } -function centerOnFocus(e, scrollSlider, horizontal) { +function centerOnFocus(e: Event, scrollSlider: HTMLElement, horizontal: boolean) { const focused = focusManager.focusableParent(e.target); if (focused) { @@ -89,16 +89,16 @@ function centerOnFocus(e, scrollSlider, horizontal) { } } -function centerOnFocusHorizontal(e) { +function centerOnFocusHorizontal(this: HTMLElement, e: Event) { centerOnFocus(e, this, true); } -function centerOnFocusVertical(e) { +function centerOnFocusVertical(this: HTMLElement, e: Event) { centerOnFocus(e, this, false); } export const centerFocus = { - on: function (element, horizontal) { + on: function (element: Element, horizontal: boolean) { element.setAttribute(`data-scroll-mode-${horizontal ? 'x' : 'y'}`, 'custom'); if (horizontal) { @@ -113,7 +113,7 @@ export const centerFocus = { }); } }, - off: function (element, horizontal) { + off: function (element: Element, horizontal: boolean) { element.removeAttribute(`data-scroll-mode-${horizontal ? 'x' : 'y'}`); if (horizontal) {