@corva/ui 3.76.0-8 → 3.76.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/MCP_README.md +86 -36
- package/README.md +8 -5
- package/cjs-bundle/components/DevCenter/DevCenterAppContainer/DevCenterAppContainer.js.map +1 -1
- package/cjs-bundle/componentsV2/AppCommonsProvider/AppCommonsContext.js.map +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/Actions/Actions.constants.js +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/Actions/Actions.constants.js.map +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/Actions/Actions.js +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/Actions/Actions.js.map +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/AppHeaderV3.js +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/AppHeaderV3.js.map +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/AppHeaderV3.scss.js +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/useResponsivity.js +1 -1
- package/cjs-bundle/componentsV2/AppHeader/V3/useResponsivity.js.map +1 -1
- package/cjs-bundle/componentsV2/AppPanel/AppPanelDisplay.js +1 -1
- package/cjs-bundle/componentsV2/AppPanel/AppPanelDisplay.js.map +1 -1
- package/cjs-bundle/componentsV2/DatePicker/TimePicker/TimePicker.js +1 -1
- package/cjs-bundle/componentsV2/DatePicker/TimePicker/TimePicker.js.map +1 -1
- package/cjs-bundle/componentsV2/DatePicker/utils.js +1 -1
- package/cjs-bundle/componentsV2/DatePicker/utils.js.map +1 -1
- package/cjs-bundle/componentsV2/Modal/Modal.js +1 -1
- package/cjs-bundle/componentsV2/Modal/Modal.js.map +1 -1
- package/cjs-bundle/componentsV2/TemplatesControl/Store/hooks/useInitialize.js +1 -1
- package/cjs-bundle/componentsV2/TemplatesControl/Store/hooks/useInitialize.js.map +1 -1
- package/cjs-bundle/effects/useDevCenterApp.js +1 -1
- package/cjs-bundle/effects/useDevCenterApp.js.map +1 -1
- package/components/DevCenter/DevCenterAppContainer/DevCenterAppContainer.d.ts +2 -9
- package/components/DevCenter/DevCenterAppContainer/DevCenterAppContainer.d.ts.map +1 -1
- package/components/DevCenter/DevCenterAppContainer/DevCenterAppContainer.js.map +1 -1
- package/componentsV2/AppCommonsProvider/AppCommonsContext.d.ts +19 -6
- package/componentsV2/AppCommonsProvider/AppCommonsContext.d.ts.map +1 -1
- package/componentsV2/AppCommonsProvider/AppCommonsContext.js.map +1 -1
- package/componentsV2/AppHeader/V3/Actions/Actions.constants.d.ts +1 -0
- package/componentsV2/AppHeader/V3/Actions/Actions.constants.d.ts.map +1 -1
- package/componentsV2/AppHeader/V3/Actions/Actions.constants.js +1 -1
- package/componentsV2/AppHeader/V3/Actions/Actions.constants.js.map +1 -1
- package/componentsV2/AppHeader/V3/Actions/Actions.d.ts.map +1 -1
- package/componentsV2/AppHeader/V3/Actions/Actions.js +1 -1
- package/componentsV2/AppHeader/V3/Actions/Actions.js.map +1 -1
- package/componentsV2/AppHeader/V3/AppHeaderV3.d.ts.map +1 -1
- package/componentsV2/AppHeader/V3/AppHeaderV3.js +1 -1
- package/componentsV2/AppHeader/V3/AppHeaderV3.js.map +1 -1
- package/componentsV2/AppHeader/V3/AppHeaderV3.scss.js +1 -1
- package/componentsV2/AppHeader/V3/useResponsivity.js +1 -1
- package/componentsV2/AppHeader/V3/useResponsivity.js.map +1 -1
- package/componentsV2/AppHeader/__tests__/AppHeaderEmbedded.test.d.ts +2 -0
- package/componentsV2/AppHeader/__tests__/AppHeaderEmbedded.test.d.ts.map +1 -0
- package/componentsV2/AppPanel/AppPanelDisplay.d.ts.map +1 -1
- package/componentsV2/AppPanel/AppPanelDisplay.js +1 -1
- package/componentsV2/AppPanel/AppPanelDisplay.js.map +1 -1
- package/componentsV2/DatePicker/TimePicker/TimePicker.js +1 -1
- package/componentsV2/DatePicker/TimePicker/TimePicker.js.map +1 -1
- package/componentsV2/DatePicker/utils.js +1 -1
- package/componentsV2/DatePicker/utils.js.map +1 -1
- package/componentsV2/Modal/Modal.d.ts.map +1 -1
- package/componentsV2/Modal/Modal.js +1 -1
- package/componentsV2/Modal/Modal.js.map +1 -1
- package/componentsV2/TemplatesControl/Store/hooks/useInitialize.d.ts.map +1 -1
- package/componentsV2/TemplatesControl/Store/hooks/useInitialize.js +1 -1
- package/componentsV2/TemplatesControl/Store/hooks/useInitialize.js.map +1 -1
- package/effects/useDevCenterApp.d.ts.map +1 -1
- package/effects/useDevCenterApp.js +1 -1
- package/effects/useDevCenterApp.js.map +1 -1
- package/mcp-server/server.mjs +11 -11
- package/package.json +1 -1
- package/styles/common.scss +0 -14
- package/styles/mixins.scss +0 -14
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../../../src/componentsV2/AppHeader/V3/Actions/Actions.tsx"],"sourcesContent":["import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { ButtonIcon } from '../../../ButtonIcon';\nimport { Tooltip } from '../../../Tooltip';\nimport { SettingsButton } from '../SettingsButton';\nimport { AdditionalAction, AdditionalActionObject } from '../constants';\nimport { Menu } from '../../../Menu';\nimport { useAppCommonsInternal } from '../../../AppCommonsProvider';\nimport { useAppSettingsPanel } from '../../../AppPanel/AppPanelsContext';\nimport { HideInNativeApp } from '../../../HideInNativeApp';\n\nimport { ActionsTestIds } from './Actions.constants';\n\nimport styles from './Actions.scss';\n\nimport {\n AddMessageCustomIcon,\n CloseSmallIcon,\n CollapseIcon,\n ExpandIcon,\n MessageIcon,\n MoreOneIcon,\n SettingTwoIcon,\n} from '~/icons';\nimport { useAppCommentsMode, useSetAppCommentsMode } from '~/effects';\nimport { isInsideNewMobileApp } from '~/utils/mobileDetect';\n\ntype ActionsProps = {\n additionalActions?: AdditionalAction[];\n showComments?: boolean;\n disableSettings?: boolean;\n hideSettingsUnderMore?: boolean;\n};\n\nconst isActionObject = (action: AdditionalAction): action is AdditionalActionObject =>\n !!action && typeof action === 'object' && 'title' in action;\n\nconst LONG_PRESS_DELAY_MS = 500;\n\nexport const Actions = ({\n additionalActions,\n showComments,\n disableSettings,\n hideSettingsUnderMore,\n}: ActionsProps) => {\n const {\n maximized,\n setMaximized,\n appSettingsComponent,\n isExpanded,\n isBrowserFullscreen,\n enterBrowserFullscreen,\n exitBrowserFullscreen,\n isSeparateWindow,\n openSeparateWindow,\n closeSeparateWindow,\n } = useAppCommonsInternal();\n const commentsEnabled = useAppCommentsMode();\n const setCommentsMode = useSetAppCommentsMode();\n const [moreMenuOpen, setMoreMenuOpen] = useState(false);\n const moreButtonRef = useRef<HTMLButtonElement>(null);\n const maximizeButtonRef = useRef<HTMLButtonElement>(null);\n const [showMaximizeTooltip, setShowMaximizeTooltip] = useState(true);\n const [isModesMenuOpen, setIsModesMenuOpen] = useState(false);\n const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const isLongPressRef = useRef(false);\n\n const { open, isOpen } = useAppSettingsPanel();\n const settingsVisible = !!appSettingsComponent && !disableSettings;\n\n const toggleMoreMenu = useCallback(() => {\n setMoreMenuOpen(value => !value);\n }, []);\n\n const toggleCommentsMode = useCallback(() => {\n setCommentsMode(value => !value);\n }, [setCommentsMode]);\n\n const closeModesMenu = useCallback(() => {\n isLongPressRef.current = false;\n setIsModesMenuOpen(false);\n }, []);\n\n const toggleMaximized = useCallback(() => {\n setShowMaximizeTooltip(false);\n closeModesMenu();\n\n if (isSeparateWindow) {\n closeSeparateWindow?.();\n return;\n }\n\n if (isBrowserFullscreen) {\n exitBrowserFullscreen?.();\n return;\n }\n\n setMaximized(!maximized);\n }, [\n closeModesMenu,\n closeSeparateWindow,\n exitBrowserFullscreen,\n isBrowserFullscreen,\n isSeparateWindow,\n maximized,\n setMaximized,\n ]);\n\n const maximizeTooltip = isSeparateWindow\n ? 'Close Separate Window'\n : isExpanded\n ? 'Restore'\n : 'Maximize';\n\n const cancelLongPress = useCallback(() => {\n if (longPressTimerRef.current) {\n clearTimeout(longPressTimerRef.current);\n longPressTimerRef.current = null;\n }\n }, []);\n\n const handleMaximizeMouseDown = useCallback(() => {\n if (isExpanded || !enterBrowserFullscreen) return;\n\n cancelLongPress();\n longPressTimerRef.current = setTimeout(() => {\n isLongPressRef.current = true;\n setIsModesMenuOpen(true);\n }, LONG_PRESS_DELAY_MS);\n }, [cancelLongPress, enterBrowserFullscreen, isExpanded]);\n\n useEffect(() => cancelLongPress, [cancelLongPress]);\n\n const handleMaximizeClick = useCallback(() => {\n if (isLongPressRef.current) {\n isLongPressRef.current = false;\n return;\n }\n\n toggleMaximized();\n }, [toggleMaximized]);\n\n const handleSeparateWindowClick = useCallback(() => {\n closeModesMenu();\n openSeparateWindow?.();\n }, [closeModesMenu, openSeparateWindow]);\n\n const handleBrowserFullscreenClick = useCallback(() => {\n closeModesMenu();\n enterBrowserFullscreen?.();\n }, [closeModesMenu, enterBrowserFullscreen]);\n\n useEffect(() => {\n setShowMaximizeTooltip(true);\n }, [isExpanded]);\n\n const menuActionItems = useMemo(() => {\n if (isInsideNewMobileApp) return [];\n\n const getOnClick = (handler: AdditionalActionObject['onClick']) => () => {\n toggleMoreMenu();\n handler?.();\n };\n\n const objectActions = (additionalActions || [])\n .filter(isActionObject)\n .map(item => ({ ...item, onClick: getOnClick(item.onClick) }));\n\n const commentItem: AdditionalActionObject = {\n icon: <MessageIcon />,\n onClick: getOnClick(toggleCommentsMode),\n title: commentsEnabled ? 'Close Comments Mode' : 'Add Comment',\n };\n\n const maximizeItem: AdditionalActionObject = {\n title: maximizeTooltip,\n onClick: getOnClick(toggleMaximized),\n icon: isExpanded ? <CollapseIcon /> : <ExpandIcon />,\n };\n\n const settingsItem = {\n title: 'Settings',\n onClick: getOnClick(open),\n icon: <SettingTwoIcon />,\n };\n\n return [\n ...objectActions,\n ...(showComments ? [commentItem] : []),\n ...(hideSettingsUnderMore && settingsVisible ? [settingsItem] : []),\n maximizeItem,\n ];\n }, [\n additionalActions,\n commentsEnabled,\n hideSettingsUnderMore,\n isExpanded,\n maximizeTooltip,\n open,\n settingsVisible,\n showComments,\n toggleCommentsMode,\n toggleMaximized,\n toggleMoreMenu,\n ]);\n\n // Show menu only if there's something there besides the fullscreen item\n const hasMenu = menuActionItems.length > 1;\n\n const maximizeButton = (\n <ButtonIcon\n size=\"small\"\n type=\"tertiaryBg\"\n ref={maximizeButtonRef}\n onClick={handleMaximizeClick}\n onMouseDown={handleMaximizeMouseDown}\n onMouseUp={cancelLongPress}\n onMouseLeave={cancelLongPress}\n className={hasMenu ? styles.fullscreenButton : undefined}\n testId={isExpanded ? ActionsTestIds.CollapseButtonTestId : ActionsTestIds.ExpandButtonTestId}\n >\n {isExpanded ? <CollapseIcon /> : <ExpandIcon />}\n </ButtonIcon>\n );\n\n return (\n <>\n <HideInNativeApp>\n {additionalActions?.map((action, index) =>\n !isActionObject(action) ? (\n <Fragment key={index}>{action}</Fragment>\n ) : (\n <Tooltip title={action.title} key={index}>\n <ButtonIcon\n size=\"small\"\n type=\"tertiary\"\n onClick={action.onClick}\n className={classNames(styles.additionalActionButton)}\n testId={ActionsTestIds.AdditionalActionItemTestId}\n >\n {action.icon}\n </ButtonIcon>\n </Tooltip>\n )\n )}\n </HideInNativeApp>\n\n <HideInNativeApp>\n {showComments && (\n <Tooltip title={commentsEnabled ? 'Close Comments Mode' : 'Add Comment'}>\n <ButtonIcon\n size=\"small\"\n type={commentsEnabled ? 'secondaryBg' : 'tertiaryBg'}\n onClick={toggleCommentsMode}\n className={hasMenu ? styles.commentButton : undefined}\n testId={\n commentsEnabled\n ? ActionsTestIds.CloseCommentButtonTestId\n : ActionsTestIds.AddMessageButtonTestId\n }\n >\n {commentsEnabled ? <CloseSmallIcon /> : <AddMessageCustomIcon fill=\"currentColor\" />}\n </ButtonIcon>\n </Tooltip>\n )}\n </HideInNativeApp>\n\n {settingsVisible && (\n <SettingsButton\n className={\n hideSettingsUnderMore && !isInsideNewMobileApp\n ? styles.settingsHiddenUnderMore\n : undefined\n }\n />\n )}\n\n {/* \n Our \"pseudo-fullscreen\" system gets a stroke when we try to go fullscreen when a tooltip is shown (and we're in a \"pseudo-fullscreen\" mode) \n and we change actual \"fullscreen\" status of an app.\n So we don't show tooltip when user clicks the button, and we expect the \"fullscreen\" status to change.\n */}\n <HideInNativeApp>\n {showMaximizeTooltip ? (\n <Tooltip title={maximizeTooltip}>{maximizeButton}</Tooltip>\n ) : (\n maximizeButton\n )}\n\n {maximizeButtonRef.current && (\n <Menu\n anchorEl={maximizeButtonRef.current}\n open={isModesMenuOpen}\n onClose={closeModesMenu}\n placement=\"bottom-end\"\n >\n <Menu.Item onClick={toggleMaximized} testId={ActionsTestIds.MaximizeItemTestId}>\n Maximize\n </Menu.Item>\n <Menu.Item\n onClick={handleBrowserFullscreenClick}\n testId={ActionsTestIds.BrowserFullscreenItemTestId}\n >\n Full Screen\n </Menu.Item>\n <Menu.Item\n onClick={handleSeparateWindowClick}\n testId={ActionsTestIds.SeparateWindowItemTestId}\n >\n Separate Window\n </Menu.Item>\n </Menu>\n )}\n </HideInNativeApp>\n\n <HideInNativeApp>\n {hasMenu && (\n <Tooltip title=\"More\">\n <ButtonIcon\n type={\n moreMenuOpen || (hideSettingsUnderMore && isOpen) ? 'secondaryBg' : 'tertiaryBg'\n }\n className={styles.moreButton}\n ref={moreButtonRef}\n onClick={toggleMoreMenu}\n size=\"small\"\n >\n <MoreOneIcon />\n </ButtonIcon>\n </Tooltip>\n )}\n\n {hasMenu && moreButtonRef.current && (\n <Menu\n anchorEl={moreButtonRef.current}\n open={moreMenuOpen}\n onClose={toggleMoreMenu}\n placement=\"bottom-end\"\n >\n {menuActionItems.map((item, index) => (\n <Menu.Item size=\"large\" prefix={item.icon} key={index} onClick={item.onClick}>\n {item.title}\n </Menu.Item>\n ))}\n </Menu>\n )}\n </HideInNativeApp>\n </>\n );\n};\n"],"names":["isActionObject","action","_typeof","_ref","additionalActions","showComments","disableSettings","hideSettingsUnderMore","_useAppCommonsInterna","useAppCommonsInternal","maximized","setMaximized","appSettingsComponent","isExpanded","isBrowserFullscreen","enterBrowserFullscreen","exitBrowserFullscreen","isSeparateWindow","openSeparateWindow","closeSeparateWindow","commentsEnabled","useAppCommentsMode","setCommentsMode","useSetAppCommentsMode","useState","_useState2","_slicedToArray","_useState","moreMenuOpen","setMoreMenuOpen","moreButtonRef","useRef","maximizeButtonRef","_useState4","_useState3","showMaximizeTooltip","setShowMaximizeTooltip","_useState6","_useState5","isModesMenuOpen","setIsModesMenuOpen","longPressTimerRef","isLongPressRef","_useAppSettingsPanel","useAppSettingsPanel","open","isOpen","settingsVisible","toggleMoreMenu","useCallback","value","toggleCommentsMode","closeModesMenu","current","toggleMaximized","maximizeTooltip","cancelLongPress","clearTimeout","handleMaximizeMouseDown","setTimeout","useEffect","handleMaximizeClick","handleSeparateWindowClick","handleBrowserFullscreenClick","menuActionItems","useMemo","isInsideNewMobileApp","getOnClick","handler","objectActions","filter","map","item","_objectSpread","onClick","commentItem","icon","_jsx","MessageIcon","title","maximizeItem","CollapseIcon","ExpandIcon","settingsItem","SettingTwoIcon","_toConsumableArray","hasMenu","length","maximizeButton","jsx","ButtonIcon","size","type","ref","onMouseDown","onMouseUp","onMouseLeave","className","styles","fullscreenButton","undefined","testId","ActionsTestIds","CollapseButtonTestId","ExpandButtonTestId","children","_jsxs","_Fragment","HideInNativeApp","index","Tooltip","classNames","additionalActionButton","AdditionalActionItemTestId","Fragment","commentButton","CloseCommentButtonTestId","AddMessageButtonTestId","CloseSmallIcon","AddMessageCustomIcon","fill","SettingsButton","settingsHiddenUnderMore","Menu","anchorEl","onClose","placement","Item","MaximizeItemTestId","BrowserFullscreenItemTestId","SeparateWindowItemTestId","moreButton","MoreOneIcon","prefix"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../../src/componentsV2/AppHeader/V3/Actions/Actions.tsx"],"sourcesContent":["import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { ButtonIcon } from '../../../ButtonIcon';\nimport { Tooltip } from '../../../Tooltip';\nimport { SettingsButton } from '../SettingsButton';\nimport { AdditionalAction, AdditionalActionObject } from '../constants';\nimport { Menu } from '../../../Menu';\nimport { useAppCommonsInternal } from '../../../AppCommonsProvider';\nimport { useAppSettingsPanel } from '../../../AppPanel/AppPanelsContext';\nimport { HideInNativeApp } from '../../../HideInNativeApp';\n\nimport { ActionsTestIds } from './Actions.constants';\n\nimport styles from './Actions.scss';\n\nimport {\n AddMessageCustomIcon,\n CloseSmallIcon,\n CollapseIcon,\n ExpandIcon,\n MessageIcon,\n MoreOneIcon,\n SettingTwoIcon,\n} from '~/icons';\nimport { useAppCommentsMode, useSetAppCommentsMode } from '~/effects';\nimport { isInsideNewMobileApp } from '~/utils/mobileDetect';\n\ntype ActionsProps = {\n additionalActions?: AdditionalAction[];\n showComments?: boolean;\n disableSettings?: boolean;\n hideSettingsUnderMore?: boolean;\n};\n\nconst isActionObject = (action: AdditionalAction): action is AdditionalActionObject =>\n !!action && typeof action === 'object' && 'title' in action;\n\nconst LONG_PRESS_DELAY_MS = 500;\n\nexport const Actions = ({\n additionalActions,\n showComments,\n disableSettings,\n hideSettingsUnderMore,\n}: ActionsProps) => {\n const {\n maximized,\n setMaximized,\n appSettingsComponent,\n isExpanded,\n isBrowserFullscreen,\n enterBrowserFullscreen,\n exitBrowserFullscreen,\n isSeparateWindow,\n openSeparateWindow,\n closeSeparateWindow,\n dashboardMeta,\n } = useAppCommonsInternal();\n const isEmbedded = !!dashboardMeta?.isEmbedded;\n const commentsEnabled = useAppCommentsMode();\n const setCommentsMode = useSetAppCommentsMode();\n const [moreMenuOpen, setMoreMenuOpen] = useState(false);\n const moreButtonRef = useRef<HTMLButtonElement>(null);\n const maximizeButtonRef = useRef<HTMLButtonElement>(null);\n const [showMaximizeTooltip, setShowMaximizeTooltip] = useState(true);\n const [isModesMenuOpen, setIsModesMenuOpen] = useState(false);\n const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const isLongPressRef = useRef(false);\n\n const { open, isOpen } = useAppSettingsPanel();\n const settingsVisible = !!appSettingsComponent && !disableSettings;\n\n const toggleMoreMenu = useCallback(() => {\n setMoreMenuOpen(value => !value);\n }, []);\n\n const toggleCommentsMode = useCallback(() => {\n setCommentsMode(value => !value);\n }, [setCommentsMode]);\n\n const closeModesMenu = useCallback(() => {\n isLongPressRef.current = false;\n setIsModesMenuOpen(false);\n }, []);\n\n const toggleMaximized = useCallback(() => {\n setShowMaximizeTooltip(false);\n closeModesMenu();\n\n if (isSeparateWindow) {\n closeSeparateWindow?.();\n return;\n }\n\n if (isBrowserFullscreen) {\n exitBrowserFullscreen?.();\n return;\n }\n\n setMaximized(!maximized);\n }, [\n closeModesMenu,\n closeSeparateWindow,\n exitBrowserFullscreen,\n isBrowserFullscreen,\n isSeparateWindow,\n maximized,\n setMaximized,\n ]);\n\n const maximizeTooltip = isSeparateWindow\n ? 'Close Separate Window'\n : isExpanded\n ? 'Restore'\n : 'Maximize';\n\n const cancelLongPress = useCallback(() => {\n if (longPressTimerRef.current) {\n clearTimeout(longPressTimerRef.current);\n longPressTimerRef.current = null;\n }\n }, []);\n\n const handleMaximizeMouseDown = useCallback(() => {\n if (isExpanded || !enterBrowserFullscreen) return;\n\n cancelLongPress();\n longPressTimerRef.current = setTimeout(() => {\n isLongPressRef.current = true;\n setIsModesMenuOpen(true);\n }, LONG_PRESS_DELAY_MS);\n }, [cancelLongPress, enterBrowserFullscreen, isExpanded]);\n\n useEffect(() => cancelLongPress, [cancelLongPress]);\n\n const handleMaximizeClick = useCallback(() => {\n if (isLongPressRef.current) {\n isLongPressRef.current = false;\n return;\n }\n\n toggleMaximized();\n }, [toggleMaximized]);\n\n const handleSeparateWindowClick = useCallback(() => {\n closeModesMenu();\n openSeparateWindow?.();\n }, [closeModesMenu, openSeparateWindow]);\n\n const handleBrowserFullscreenClick = useCallback(() => {\n closeModesMenu();\n enterBrowserFullscreen?.();\n }, [closeModesMenu, enterBrowserFullscreen]);\n\n useEffect(() => {\n setShowMaximizeTooltip(true);\n }, [isExpanded]);\n\n const menuActionItems = useMemo(() => {\n if (isInsideNewMobileApp) return [];\n\n const getOnClick = (handler: AdditionalActionObject['onClick']) => () => {\n toggleMoreMenu();\n handler?.();\n };\n\n const objectActions = (additionalActions || [])\n .filter(isActionObject)\n .map(item => ({ ...item, onClick: getOnClick(item.onClick) }));\n\n const commentItem: AdditionalActionObject = {\n icon: <MessageIcon />,\n onClick: getOnClick(toggleCommentsMode),\n title: commentsEnabled ? 'Close Comments Mode' : 'Add Comment',\n };\n\n const maximizeItem: AdditionalActionObject = {\n title: maximizeTooltip,\n onClick: getOnClick(toggleMaximized),\n icon: isExpanded ? <CollapseIcon /> : <ExpandIcon />,\n };\n\n const settingsItem = {\n title: 'Settings',\n onClick: getOnClick(open),\n icon: <SettingTwoIcon />,\n };\n\n return [\n ...objectActions,\n ...(showComments ? [commentItem] : []),\n ...(hideSettingsUnderMore && settingsVisible ? [settingsItem] : []),\n ...(!isEmbedded ? [maximizeItem] : []),\n ];\n }, [\n additionalActions,\n commentsEnabled,\n hideSettingsUnderMore,\n isExpanded,\n maximizeTooltip,\n open,\n settingsVisible,\n showComments,\n isEmbedded,\n toggleCommentsMode,\n toggleMaximized,\n toggleMoreMenu,\n ]);\n\n // Maximization is already available as a button.\n const hasMenu = menuActionItems.length > (isEmbedded ? 0 : 1);\n\n const maximizeButton = (\n <ButtonIcon\n size=\"small\"\n type=\"tertiaryBg\"\n ref={maximizeButtonRef}\n onClick={handleMaximizeClick}\n onMouseDown={handleMaximizeMouseDown}\n onMouseUp={cancelLongPress}\n onMouseLeave={cancelLongPress}\n className={hasMenu ? styles.fullscreenButton : undefined}\n testId={isExpanded ? ActionsTestIds.CollapseButtonTestId : ActionsTestIds.ExpandButtonTestId}\n >\n {isExpanded ? <CollapseIcon /> : <ExpandIcon />}\n </ButtonIcon>\n );\n\n // Hide the tooltip during maximization changes to avoid fullscreen positioning issues.\n const maximizeWithTooltip = showMaximizeTooltip ? (\n <Tooltip title={maximizeTooltip}>{maximizeButton}</Tooltip>\n ) : (\n maximizeButton\n );\n\n return (\n <>\n <HideInNativeApp>\n {additionalActions?.map((action, index) =>\n !isActionObject(action) ? (\n <Fragment key={index}>{action}</Fragment>\n ) : (\n <Tooltip title={action.title} key={index}>\n <ButtonIcon\n size=\"small\"\n type=\"tertiary\"\n onClick={action.onClick}\n className={classNames(styles.additionalActionButton)}\n testId={ActionsTestIds.AdditionalActionItemTestId}\n >\n {action.icon}\n </ButtonIcon>\n </Tooltip>\n )\n )}\n </HideInNativeApp>\n\n <HideInNativeApp>\n {showComments && (\n <Tooltip title={commentsEnabled ? 'Close Comments Mode' : 'Add Comment'}>\n <ButtonIcon\n size=\"small\"\n type={commentsEnabled ? 'secondaryBg' : 'tertiaryBg'}\n onClick={toggleCommentsMode}\n className={hasMenu ? styles.commentButton : undefined}\n testId={\n commentsEnabled\n ? ActionsTestIds.CloseCommentButtonTestId\n : ActionsTestIds.AddMessageButtonTestId\n }\n >\n {commentsEnabled ? <CloseSmallIcon /> : <AddMessageCustomIcon fill=\"currentColor\" />}\n </ButtonIcon>\n </Tooltip>\n )}\n </HideInNativeApp>\n\n {settingsVisible && (\n <SettingsButton\n className={\n hideSettingsUnderMore && !isInsideNewMobileApp\n ? styles.settingsHiddenUnderMore\n : undefined\n }\n />\n )}\n\n <HideInNativeApp>\n {!isEmbedded && maximizeWithTooltip}\n\n {!isEmbedded && maximizeButtonRef.current && (\n <Menu\n anchorEl={maximizeButtonRef.current}\n open={isModesMenuOpen}\n onClose={closeModesMenu}\n placement=\"bottom-end\"\n >\n <Menu.Item onClick={toggleMaximized} testId={ActionsTestIds.MaximizeItemTestId}>\n Maximize\n </Menu.Item>\n <Menu.Item\n onClick={handleBrowserFullscreenClick}\n testId={ActionsTestIds.BrowserFullscreenItemTestId}\n >\n Full Screen\n </Menu.Item>\n <Menu.Item\n onClick={handleSeparateWindowClick}\n testId={ActionsTestIds.SeparateWindowItemTestId}\n >\n Separate Window\n </Menu.Item>\n </Menu>\n )}\n </HideInNativeApp>\n\n <HideInNativeApp>\n {hasMenu && (\n <Tooltip title=\"More\">\n <ButtonIcon\n type={\n moreMenuOpen || (hideSettingsUnderMore && isOpen) ? 'secondaryBg' : 'tertiaryBg'\n }\n className={styles.moreButton}\n ref={moreButtonRef}\n testId={ActionsTestIds.MoreButtonTestId}\n onClick={toggleMoreMenu}\n size=\"small\"\n >\n <MoreOneIcon />\n </ButtonIcon>\n </Tooltip>\n )}\n\n {hasMenu && moreButtonRef.current && (\n <Menu\n anchorEl={moreButtonRef.current}\n open={moreMenuOpen}\n onClose={toggleMoreMenu}\n placement=\"bottom-end\"\n >\n {menuActionItems.map((item, index) => (\n <Menu.Item size=\"large\" prefix={item.icon} key={index} onClick={item.onClick}>\n {item.title}\n </Menu.Item>\n ))}\n </Menu>\n )}\n </HideInNativeApp>\n </>\n );\n};\n"],"names":["isActionObject","action","_typeof","_ref","additionalActions","showComments","disableSettings","hideSettingsUnderMore","_useAppCommonsInterna","useAppCommonsInternal","maximized","setMaximized","appSettingsComponent","isExpanded","isBrowserFullscreen","enterBrowserFullscreen","exitBrowserFullscreen","isSeparateWindow","openSeparateWindow","closeSeparateWindow","dashboardMeta","isEmbedded","commentsEnabled","useAppCommentsMode","setCommentsMode","useSetAppCommentsMode","useState","_useState2","_slicedToArray","_useState","moreMenuOpen","setMoreMenuOpen","moreButtonRef","useRef","maximizeButtonRef","_useState4","_useState3","showMaximizeTooltip","setShowMaximizeTooltip","_useState6","_useState5","isModesMenuOpen","setIsModesMenuOpen","longPressTimerRef","isLongPressRef","_useAppSettingsPanel","useAppSettingsPanel","open","isOpen","settingsVisible","toggleMoreMenu","useCallback","value","toggleCommentsMode","closeModesMenu","current","toggleMaximized","maximizeTooltip","cancelLongPress","clearTimeout","handleMaximizeMouseDown","setTimeout","useEffect","handleMaximizeClick","handleSeparateWindowClick","handleBrowserFullscreenClick","menuActionItems","useMemo","isInsideNewMobileApp","getOnClick","handler","objectActions","filter","map","item","_objectSpread","onClick","commentItem","icon","_jsx","MessageIcon","title","maximizeItem","CollapseIcon","ExpandIcon","settingsItem","SettingTwoIcon","_toConsumableArray","hasMenu","length","maximizeButton","jsx","ButtonIcon","size","type","ref","onMouseDown","onMouseUp","onMouseLeave","className","styles","fullscreenButton","undefined","testId","ActionsTestIds","CollapseButtonTestId","ExpandButtonTestId","children","maximizeWithTooltip","Tooltip","_jsxs","_Fragment","HideInNativeApp","index","classNames","additionalActionButton","AdditionalActionItemTestId","Fragment","commentButton","CloseCommentButtonTestId","AddMessageButtonTestId","CloseSmallIcon","AddMessageCustomIcon","fill","SettingsButton","settingsHiddenUnderMore","Menu","anchorEl","onClose","placement","Item","MaximizeItemTestId","BrowserFullscreenItemTestId","SeparateWindowItemTestId","moreButton","MoreButtonTestId","MoreOneIcon","prefix"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),t=require("react"),s=require("classnames"),i=require("lodash"),l=require("../../../constants/segment.js"),n=require("../../../utils/devcenter.js"),o=require("../../PadModeSelect/PadModeSelect.js");require("../../PadModeSelect/PadModeSelect.constants.js");var r=require("../AppHeader.constants.js");require("../../AppCommonsProvider/AppCommonsProvider.js");var d=require("../../AppCommonsProvider/AppCommonsContext.js"),a=require("../../HideInNativeApp/index.js"),u=require("../../utils.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),t=require("react"),s=require("classnames"),i=require("lodash"),l=require("../../../constants/segment.js"),n=require("../../../utils/devcenter.js"),o=require("../../PadModeSelect/PadModeSelect.js");require("../../PadModeSelect/PadModeSelect.constants.js");var r=require("../AppHeader.constants.js");require("../../AppCommonsProvider/AppCommonsProvider.js");var d=require("../../AppCommonsProvider/AppCommonsContext.js"),a=require("../../HideInNativeApp/index.js"),u=require("../../utils.js"),c=require("./VersionSelect/VersionSelect.js"),p=require("./AssetChips/AssetChips.js"),v=require("./AppTitle/AppTitle.js");require("./AppTitle/AppTitle.constants.js");var f=require("./useResponsivity.js"),j=require("./Actions/Actions.js");require("./Actions/Actions.constants.js");var m=require("./AppHeaderV3.scss.js"),A=require("react/jsx-runtime");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=h(e),y=h(s);function b(e,t){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),s.push.apply(s,i)}return s}function g(e){for(var t=1;t<arguments.length;t++){var s=null!=arguments[t]?arguments[t]:{};t%2?b(Object(s),!0).forEach((function(t){C.default(e,t,s[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):b(Object(s)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(s,t))}))}return e}exports.AppHeaderV3=function(e){var s,h,C,b,q,x,I,S,M,P,N,O,R,L,w,T,H=e.elementsClassNames,E=e.className,D=e.testId,U=e.logo,V=e.additionalControls,W=e.title,k=e.padModeDisabled,F=e.padModeWells,B=e.dqData,_=e.asset,G=e.lastUpdate,z=e.additionalActions,J=e.showComments,K=e.titleControls,Q=e.disableSettings,X=e.showAssetChips,Y=e.disableAssetSelector,Z=e.titleMenuActions,$=e.titleControlsPosition,ee=void 0===$?"right":$,te=e.responsivenessConfig,se=t.useRef(null),ie=d.useAppCommonsInternal(),le=ie.app,ne=ie.appName,oe=ie.well,re=ie.wells,de=ie.rig,ae=ie.fracFleet,ue=ie.interventionUnit,ce=ie.isExpanded,pe=ie.setSeparateWindowTitle,ve=ie.isInsideNewMobileApp,fe=ie.disableAppAssetSelection,je=ie.isMultiRig,me=ie.dashboardMeta,Ae=!(null==me||!me.isEmbedded),he=F||re,Ce=n.getAppSegment(le)===l.SEGMENTS.COMPLETION&&!oe,ye=!i.isEmpty(he)&&!!ae,be=fe||je,ge=!(Ae||fe||k||ve)&&Ce&&ye,qe=U?"ultranarrow":ge||V||K?"narrow":void 0,xe="left"===ee&&!!K,Ie=t.useRef(null),Se=t.useRef(null),Me=t.useRef(null),Pe=t.useRef(null),Ne=t.useRef(null),Oe=t.useRef(null),Re=t.useRef(null),Le=null!==(s=null!==(h=null!==(C=null==oe?void 0:oe.name)&&void 0!==C?C:null==de?void 0:de.name)&&void 0!==h?h:null==ae?void 0:ae.name)&&void 0!==s?s:null==ue?void 0:ue.name;t.useEffect((function(){null==pe||pe([ne,Le].filter(Boolean).join(" - "))}),[pe,ne,Le]);var we=f.useResponsivity({disabled:ve||Ae,titleControlsLeft:xe,rootRef:se,versionRef:Ie,additionalControlsRef:Me,titleControlsRef:Pe,logoRef:Oe,padModeRef:Se,chipsRef:Ne,actionsRef:Re});return A.jsxs("div",g(g({className:y.default(m.root,Ae&&m.embedded,E),"data-testid":D,ref:se,style:null===(b=we.root)||void 0===b?void 0:b.style},u.AppHeaderFinderProps),{},{children:[!Ae&&A.jsxs(A.Fragment,{children:[A.jsx("div",{className:y.default(m.logoContainer,null==H?void 0:H.logoContainer),ref:Oe,children:U&&"string"==typeof U?A.jsx("img",{className:m.logo,src:U,alt:"Logo"}):U}),A.jsx(v.AppTitle,{title:ce&&null!=Le?Le:W,asset:_,dqData:B,lastUpdate:G,className:y.default(m.title,xe&&m.titleWithControlsLeft,null==H?void 0:H.title),disableAssetSelector:Y,titleMenuActions:Z,style:null===(q=we.title)||void 0===q?void 0:q.style})]}),K&&A.jsx("div",{className:y.default(m.titleControls,xe&&m.titleControlsLeft,(null===(x=we.titleControls)||void 0===x?void 0:x.lastInLine)&&m.lastInLine,null==H?void 0:H.titleControls),ref:Pe,style:null===(I=we.titleControls)||void 0===I?void 0:I.style,children:K}),A.jsx(a.HideInNativeApp,{children:A.jsx("div",{className:m.version,ref:Ie,children:A.jsx(c.VersionSelect,{className:null==H?void 0:H.versionSelect})})}),ge&&A.jsx("div",{className:y.default(m.padMode,(null===(S=we.padMode)||void 0===S?void 0:S.lastInLine)&&m.lastInLine),ref:Se,style:null===(M=we.padMode)||void 0===M?void 0:M.style,children:A.jsx(o.PadModeSelect,{testId:r.AppHeaderTestIds.PadModeSelectTestId})}),V&&A.jsx("div",{className:y.default(m.additionalControls,(null===(P=we.additionalControls)||void 0===P?void 0:P.lastInLine)&&m.lastInLine,null==H?void 0:H.additionalControls),ref:Me,style:null===(N=we.additionalControls)||void 0===N?void 0:N.style,"data-testid":r.AppHeaderTestIds.AdditionalControlsTestId,children:V}),!Ae&&!be&&X&&A.jsx(a.HideInNativeApp,{children:A.jsx("div",{className:y.default(m.assetChips,(null===(O=we.chips)||void 0===O?void 0:O.lastInLine)&&m.lastInLine,null==H?void 0:H.chips),ref:Ne,style:null===(R=we.chips)||void 0===R?void 0:R.style,children:A.jsx(p.AssetChips,{chipsWidth:qe})})}),A.jsx("div",{className:y.default(m.actions,(null===(L=we.actions)||void 0===L?void 0:L.lastInLine)&&m.lastInLine,null==H?void 0:H.actions),ref:Re,style:null===(w=we.actions)||void 0===w?void 0:w.style,"data-testid":r.AppHeaderTestIds.ActionsRootTestId,children:A.jsx(j.Actions,{additionalActions:z,showComments:J,disableSettings:Q,hideSettingsUnderMore:null==te?void 0:te.hideSettingsUnderMore})}),null===(T=we.linebreaks)||void 0===T?void 0:T.map((function(e,t){return A.jsx("div",{className:m.responsivenessLineBreak,style:e},t)}))]}))};
|
|
2
2
|
//# sourceMappingURL=AppHeaderV3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeaderV3.js","sources":["../../../../../src/componentsV2/AppHeader/V3/AppHeaderV3.tsx"],"sourcesContent":["import { FC, ReactElement, ReactNode, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'lodash';\n\nimport { SEGMENTS } from '../../../constants/segment';\nimport { getAppSegment } from '../../../utils/devcenter';\nimport { PadModeSelect } from '../../PadModeSelect';\nimport { AppHeaderTestIds, Asset, UseWellnessAlertsReturnType } from '../AppHeader.constants';\nimport { useAppCommonsInternal } from '../../AppCommonsProvider';\nimport { HideInNativeApp } from '../../HideInNativeApp';\nimport { AppHeaderFinderProps } from '../../utils';\n\nimport { VersionSelect } from './VersionSelect';\nimport { AssetChips } from './AssetChips';\nimport { AppTitle } from './AppTitle';\nimport { useResponsivity } from './useResponsivity';\nimport { AdditionalAction, TitleMenuAction } from './constants';\nimport { Actions } from './Actions';\n\nimport styles from './AppHeaderV3.scss';\n\nexport type AppHeaderV3Props = {\n logo?: string | ReactElement;\n\n additionalControls?: ReactNode;\n\n /**\n * Used to put some controls alongside title\n */\n titleControls?: ReactNode;\n titleControlsPosition?: 'right' | 'left';\n\n /**\n * An escape hatch to tweak the styling of internal elements\n *\n * `buttons`, `titleControls` and `versionSelect` are for *V3 only*\n */\n elementsClassNames?: {\n title?: string;\n additionalControls?: string;\n chips?: string;\n actions?: string;\n versionSelect?: string;\n titleControls?: string;\n logoContainer?: string;\n };\n\n title?: ReactNode;\n padModeDisabled?: boolean;\n padModeWells?: ReturnType<typeof useAppCommonsInternal>['wells'];\n\n lastUpdate?: number | string | Date;\n asset?: Asset | Asset[];\n dqData?: UseWellnessAlertsReturnType;\n showComments?: boolean;\n additionalActions?: AdditionalAction[];\n disableSettings?: boolean;\n showAssetChips?: boolean;\n disableAssetSelector?: boolean;\n titleMenuActions?: TitleMenuAction[];\n\n /**\n * Configuration for responsive behavior of header elements\n * - `hideSettingsUnderMore`: When true, settings button will be hidden under \"More\" menu at smaller screen sizes\n */\n responsivenessConfig?: {\n hideSettingsUnderMore?: boolean;\n };\n\n className?: string;\n testId?: string;\n};\n\nexport const AppHeaderV3: FC<AppHeaderV3Props> = ({\n elementsClassNames,\n className,\n testId,\n logo,\n additionalControls,\n title,\n padModeDisabled,\n padModeWells,\n dqData,\n asset,\n lastUpdate,\n additionalActions,\n showComments,\n titleControls,\n disableSettings,\n showAssetChips,\n disableAssetSelector,\n titleMenuActions,\n titleControlsPosition = 'right',\n responsivenessConfig,\n}) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const {\n app,\n appName,\n well,\n wells: contextWells,\n rig,\n fracFleet,\n interventionUnit,\n isExpanded,\n setSeparateWindowTitle,\n isInsideNewMobileApp,\n disableAppAssetSelection,\n isMultiRig,\n } = useAppCommonsInternal();\n\n const segment = getAppSegment(app);\n const wells = padModeWells || contextWells;\n const isCompletionPadMode = segment === SEGMENTS.COMPLETION && !well;\n const hasPadModeAssets = !isEmpty(wells) && !!fracFleet;\n const shouldDisableAssetControls = disableAppAssetSelection || isMultiRig;\n const canShowPadMode = !disableAppAssetSelection && !padModeDisabled && !isInsideNewMobileApp;\n const hasPadMode = canShowPadMode && isCompletionPadMode && hasPadModeAssets;\n\n const possiblyNarrowChips =\n hasPadMode || !!additionalControls || !!titleControls ? 'narrow' : undefined;\n const chipsWidth = logo ? 'ultranarrow' : possiblyNarrowChips;\n\n const titleControlsLeft = titleControlsPosition === 'left' && !!titleControls;\n\n const versionRef = useRef<HTMLDivElement>(null);\n const padModeRef = useRef<HTMLDivElement>(null);\n const additionalControlsRef = useRef<HTMLDivElement>(null);\n const titleControlsRef = useRef<HTMLDivElement>(null);\n const chipsRef = useRef<HTMLDivElement>(null);\n const logoRef = useRef<HTMLDivElement>(null);\n const actionsRef = useRef<HTMLDivElement>(null);\n\n const assetName = well?.name ?? rig?.name ?? fracFleet?.name ?? interventionUnit?.name;\n\n useEffect(() => {\n setSeparateWindowTitle?.([appName, assetName].filter(Boolean).join(' - '));\n }, [setSeparateWindowTitle, appName, assetName]);\n\n const responsivity = useResponsivity({\n disabled: isInsideNewMobileApp,\n titleControlsLeft,\n\n rootRef,\n versionRef,\n additionalControlsRef,\n titleControlsRef,\n logoRef,\n padModeRef,\n chipsRef,\n actionsRef,\n });\n\n return (\n <div\n className={classNames(styles.root, className)}\n data-testid={testId}\n ref={rootRef}\n style={responsivity.root?.style}\n {...AppHeaderFinderProps}\n >\n <div\n className={classNames(styles.logoContainer, elementsClassNames?.logoContainer)}\n ref={logoRef}\n >\n {logo && typeof logo === 'string' ? (\n <img className={styles.logo} src={logo} alt=\"Logo\" />\n ) : (\n logo\n )}\n </div>\n\n <AppTitle\n title={isExpanded ? assetName ?? title : title}\n asset={asset}\n dqData={dqData}\n lastUpdate={lastUpdate}\n className={classNames(\n styles.title,\n titleControlsLeft && styles.titleWithControlsLeft,\n elementsClassNames?.title\n )}\n disableAssetSelector={disableAssetSelector}\n titleMenuActions={titleMenuActions}\n style={responsivity.title?.style}\n />\n\n {titleControls && (\n <div\n className={classNames(\n styles.titleControls,\n titleControlsLeft && styles.titleControlsLeft,\n responsivity.titleControls?.lastInLine && styles.lastInLine,\n elementsClassNames?.titleControls\n )}\n ref={titleControlsRef}\n style={responsivity.titleControls?.style}\n >\n {titleControls}\n </div>\n )}\n\n <HideInNativeApp>\n <div className={styles.version} ref={versionRef}>\n <VersionSelect className={elementsClassNames?.versionSelect} />\n </div>\n </HideInNativeApp>\n\n {hasPadMode && (\n <div\n className={classNames(\n styles.padMode,\n responsivity.padMode?.lastInLine && styles.lastInLine\n )}\n ref={padModeRef}\n style={responsivity.padMode?.style}\n >\n <PadModeSelect testId={AppHeaderTestIds.PadModeSelectTestId} />\n </div>\n )}\n\n {additionalControls && (\n <div\n className={classNames(\n styles.additionalControls,\n responsivity.additionalControls?.lastInLine && styles.lastInLine,\n elementsClassNames?.additionalControls\n )}\n ref={additionalControlsRef}\n style={responsivity.additionalControls?.style}\n data-testid={AppHeaderTestIds.AdditionalControlsTestId}\n >\n {additionalControls}\n </div>\n )}\n\n {!shouldDisableAssetControls && showAssetChips && (\n <HideInNativeApp>\n <div\n className={classNames(\n styles.assetChips,\n responsivity.chips?.lastInLine && styles.lastInLine,\n elementsClassNames?.chips\n )}\n ref={chipsRef}\n style={responsivity.chips?.style}\n >\n <AssetChips chipsWidth={chipsWidth} />\n </div>\n </HideInNativeApp>\n )}\n\n <div\n className={classNames(\n styles.actions,\n responsivity.actions?.lastInLine && styles.lastInLine,\n elementsClassNames?.actions\n )}\n ref={actionsRef}\n style={responsivity.actions?.style}\n data-testid={AppHeaderTestIds.ActionsRootTestId}\n >\n <Actions\n additionalActions={additionalActions}\n showComments={showComments}\n disableSettings={disableSettings}\n hideSettingsUnderMore={responsivenessConfig?.hideSettingsUnderMore}\n />\n </div>\n\n {responsivity.linebreaks?.map((css, index) => (\n <div className={styles.responsivenessLineBreak} style={css} key={index} />\n ))}\n </div>\n );\n};\n"],"names":["_ref","_ref2","_ref3","_well$name","_responsivity$root","_responsivity$title","_responsivity$titleCo","_responsivity$titleCo2","_responsivity$padMode","_responsivity$padMode2","_responsivity$additio","_responsivity$additio2","_responsivity$chips","_responsivity$chips2","_responsivity$actions","_responsivity$actions2","_responsivity$linebre","elementsClassNames","className","testId","logo","additionalControls","title","padModeDisabled","padModeWells","dqData","asset","lastUpdate","additionalActions","showComments","titleControls","disableSettings","showAssetChips","disableAssetSelector","titleMenuActions","_ref$titleControlsPos","titleControlsPosition","responsivenessConfig","rootRef","useRef","_useAppCommonsInterna","useAppCommonsInternal","app","appName","well","contextWells","wells","rig","fracFleet","interventionUnit","isExpanded","setSeparateWindowTitle","isInsideNewMobileApp","disableAppAssetSelection","isMultiRig","isCompletionPadMode","getAppSegment","SEGMENTS","COMPLETION","hasPadModeAssets","isEmpty","shouldDisableAssetControls","hasPadMode","chipsWidth","undefined","titleControlsLeft","versionRef","padModeRef","additionalControlsRef","titleControlsRef","chipsRef","logoRef","actionsRef","assetName","name","useEffect","filter","Boolean","join","responsivity","useResponsivity","disabled","_jsxs","_objectSpread","classNames","styles","root","ref","style","AppHeaderFinderProps","children","_jsx","jsx","logoContainer","src","alt","AppTitle","titleWithControlsLeft","lastInLine","HideInNativeApp","version","VersionSelect","versionSelect","padMode","PadModeSelect","AppHeaderTestIds","PadModeSelectTestId","AdditionalControlsTestId","assetChips","chips","AssetChips","actions","ActionsRootTestId","Actions","hideSettingsUnderMore","linebreaks","map","css","index","responsivenessLineBreak"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AppHeaderV3.js","sources":["../../../../../src/componentsV2/AppHeader/V3/AppHeaderV3.tsx"],"sourcesContent":["import { FC, ReactElement, ReactNode, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'lodash';\n\nimport { SEGMENTS } from '../../../constants/segment';\nimport { getAppSegment } from '../../../utils/devcenter';\nimport { PadModeSelect } from '../../PadModeSelect';\nimport { AppHeaderTestIds, Asset, UseWellnessAlertsReturnType } from '../AppHeader.constants';\nimport { useAppCommonsInternal } from '../../AppCommonsProvider';\nimport { HideInNativeApp } from '../../HideInNativeApp';\nimport { AppHeaderFinderProps } from '../../utils';\n\nimport { VersionSelect } from './VersionSelect';\nimport { AssetChips } from './AssetChips';\nimport { AppTitle } from './AppTitle';\nimport { useResponsivity } from './useResponsivity';\nimport { AdditionalAction, TitleMenuAction } from './constants';\nimport { Actions } from './Actions';\n\nimport styles from './AppHeaderV3.scss';\n\nexport type AppHeaderV3Props = {\n logo?: string | ReactElement;\n\n additionalControls?: ReactNode;\n\n /**\n * Used to put some controls alongside title\n */\n titleControls?: ReactNode;\n titleControlsPosition?: 'right' | 'left';\n\n /**\n * An escape hatch to tweak the styling of internal elements\n *\n * `buttons`, `titleControls` and `versionSelect` are for *V3 only*\n */\n elementsClassNames?: {\n title?: string;\n additionalControls?: string;\n chips?: string;\n actions?: string;\n versionSelect?: string;\n titleControls?: string;\n logoContainer?: string;\n };\n\n title?: ReactNode;\n padModeDisabled?: boolean;\n padModeWells?: ReturnType<typeof useAppCommonsInternal>['wells'];\n\n lastUpdate?: number | string | Date;\n asset?: Asset | Asset[];\n dqData?: UseWellnessAlertsReturnType;\n showComments?: boolean;\n additionalActions?: AdditionalAction[];\n disableSettings?: boolean;\n showAssetChips?: boolean;\n disableAssetSelector?: boolean;\n titleMenuActions?: TitleMenuAction[];\n\n /**\n * Configuration for responsive behavior of header elements\n * - `hideSettingsUnderMore`: When true, settings button will be hidden under \"More\" menu at smaller screen sizes\n */\n responsivenessConfig?: {\n hideSettingsUnderMore?: boolean;\n };\n\n className?: string;\n testId?: string;\n};\n\nexport const AppHeaderV3: FC<AppHeaderV3Props> = ({\n elementsClassNames,\n className,\n testId,\n logo,\n additionalControls,\n title,\n padModeDisabled,\n padModeWells,\n dqData,\n asset,\n lastUpdate,\n additionalActions,\n showComments,\n titleControls,\n disableSettings,\n showAssetChips,\n disableAssetSelector,\n titleMenuActions,\n titleControlsPosition = 'right',\n responsivenessConfig,\n}) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const {\n app,\n appName,\n well,\n wells: contextWells,\n rig,\n fracFleet,\n interventionUnit,\n isExpanded,\n setSeparateWindowTitle,\n isInsideNewMobileApp,\n disableAppAssetSelection,\n isMultiRig,\n dashboardMeta,\n } = useAppCommonsInternal();\n\n const isEmbedded = !!dashboardMeta?.isEmbedded;\n const segment = getAppSegment(app);\n const wells = padModeWells || contextWells;\n const isCompletionPadMode = segment === SEGMENTS.COMPLETION && !well;\n const hasPadModeAssets = !isEmpty(wells) && !!fracFleet;\n const shouldDisableAssetControls = disableAppAssetSelection || isMultiRig;\n const canShowPadMode =\n !isEmbedded && !disableAppAssetSelection && !padModeDisabled && !isInsideNewMobileApp;\n const hasPadMode = canShowPadMode && isCompletionPadMode && hasPadModeAssets;\n\n const possiblyNarrowChips =\n hasPadMode || !!additionalControls || !!titleControls ? 'narrow' : undefined;\n const chipsWidth = logo ? 'ultranarrow' : possiblyNarrowChips;\n\n const titleControlsLeft = titleControlsPosition === 'left' && !!titleControls;\n\n const versionRef = useRef<HTMLDivElement>(null);\n const padModeRef = useRef<HTMLDivElement>(null);\n const additionalControlsRef = useRef<HTMLDivElement>(null);\n const titleControlsRef = useRef<HTMLDivElement>(null);\n const chipsRef = useRef<HTMLDivElement>(null);\n const logoRef = useRef<HTMLDivElement>(null);\n const actionsRef = useRef<HTMLDivElement>(null);\n\n const assetName = well?.name ?? rig?.name ?? fracFleet?.name ?? interventionUnit?.name;\n\n useEffect(() => {\n setSeparateWindowTitle?.([appName, assetName].filter(Boolean).join(' - '));\n }, [setSeparateWindowTitle, appName, assetName]);\n\n const responsivity = useResponsivity({\n disabled: isInsideNewMobileApp || isEmbedded,\n titleControlsLeft,\n\n rootRef,\n versionRef,\n additionalControlsRef,\n titleControlsRef,\n logoRef,\n padModeRef,\n chipsRef,\n actionsRef,\n });\n\n return (\n <div\n className={classNames(styles.root, isEmbedded && styles.embedded, className)}\n data-testid={testId}\n ref={rootRef}\n style={responsivity.root?.style}\n {...AppHeaderFinderProps}\n >\n {!isEmbedded && (\n <>\n <div\n className={classNames(styles.logoContainer, elementsClassNames?.logoContainer)}\n ref={logoRef}\n >\n {logo && typeof logo === 'string' ? (\n <img className={styles.logo} src={logo} alt=\"Logo\" />\n ) : (\n logo\n )}\n </div>\n\n <AppTitle\n title={isExpanded ? assetName ?? title : title}\n asset={asset}\n dqData={dqData}\n lastUpdate={lastUpdate}\n className={classNames(\n styles.title,\n titleControlsLeft && styles.titleWithControlsLeft,\n elementsClassNames?.title\n )}\n disableAssetSelector={disableAssetSelector}\n titleMenuActions={titleMenuActions}\n style={responsivity.title?.style}\n />\n </>\n )}\n\n {titleControls && (\n <div\n className={classNames(\n styles.titleControls,\n titleControlsLeft && styles.titleControlsLeft,\n responsivity.titleControls?.lastInLine && styles.lastInLine,\n elementsClassNames?.titleControls\n )}\n ref={titleControlsRef}\n style={responsivity.titleControls?.style}\n >\n {titleControls}\n </div>\n )}\n\n <HideInNativeApp>\n <div className={styles.version} ref={versionRef}>\n <VersionSelect className={elementsClassNames?.versionSelect} />\n </div>\n </HideInNativeApp>\n\n {hasPadMode && (\n <div\n className={classNames(\n styles.padMode,\n responsivity.padMode?.lastInLine && styles.lastInLine\n )}\n ref={padModeRef}\n style={responsivity.padMode?.style}\n >\n <PadModeSelect testId={AppHeaderTestIds.PadModeSelectTestId} />\n </div>\n )}\n\n {additionalControls && (\n <div\n className={classNames(\n styles.additionalControls,\n responsivity.additionalControls?.lastInLine && styles.lastInLine,\n elementsClassNames?.additionalControls\n )}\n ref={additionalControlsRef}\n style={responsivity.additionalControls?.style}\n data-testid={AppHeaderTestIds.AdditionalControlsTestId}\n >\n {additionalControls}\n </div>\n )}\n\n {!isEmbedded && !shouldDisableAssetControls && showAssetChips && (\n <HideInNativeApp>\n <div\n className={classNames(\n styles.assetChips,\n responsivity.chips?.lastInLine && styles.lastInLine,\n elementsClassNames?.chips\n )}\n ref={chipsRef}\n style={responsivity.chips?.style}\n >\n <AssetChips chipsWidth={chipsWidth} />\n </div>\n </HideInNativeApp>\n )}\n\n <div\n className={classNames(\n styles.actions,\n responsivity.actions?.lastInLine && styles.lastInLine,\n elementsClassNames?.actions\n )}\n ref={actionsRef}\n style={responsivity.actions?.style}\n data-testid={AppHeaderTestIds.ActionsRootTestId}\n >\n <Actions\n additionalActions={additionalActions}\n showComments={showComments}\n disableSettings={disableSettings}\n hideSettingsUnderMore={responsivenessConfig?.hideSettingsUnderMore}\n />\n </div>\n\n {responsivity.linebreaks?.map((css, index) => (\n <div className={styles.responsivenessLineBreak} style={css} key={index} />\n ))}\n </div>\n );\n};\n"],"names":["_ref","_ref2","_ref3","_well$name","_responsivity$root","_responsivity$title","_responsivity$titleCo","_responsivity$titleCo2","_responsivity$padMode","_responsivity$padMode2","_responsivity$additio","_responsivity$additio2","_responsivity$chips","_responsivity$chips2","_responsivity$actions","_responsivity$actions2","_responsivity$linebre","elementsClassNames","className","testId","logo","additionalControls","title","padModeDisabled","padModeWells","dqData","asset","lastUpdate","additionalActions","showComments","titleControls","disableSettings","showAssetChips","disableAssetSelector","titleMenuActions","_ref$titleControlsPos","titleControlsPosition","responsivenessConfig","rootRef","useRef","_useAppCommonsInterna","useAppCommonsInternal","app","appName","well","contextWells","wells","rig","fracFleet","interventionUnit","isExpanded","setSeparateWindowTitle","isInsideNewMobileApp","disableAppAssetSelection","isMultiRig","dashboardMeta","isEmbedded","isCompletionPadMode","getAppSegment","SEGMENTS","COMPLETION","hasPadModeAssets","isEmpty","shouldDisableAssetControls","hasPadMode","chipsWidth","undefined","titleControlsLeft","versionRef","padModeRef","additionalControlsRef","titleControlsRef","chipsRef","logoRef","actionsRef","assetName","name","useEffect","filter","Boolean","join","responsivity","useResponsivity","disabled","_jsxs","_objectSpread","classNames","styles","root","embedded","ref","style","AppHeaderFinderProps","children","_Fragment","_jsx","jsx","logoContainer","src","alt","AppTitle","titleWithControlsLeft","lastInLine","HideInNativeApp","version","VersionSelect","versionSelect","padMode","PadModeSelect","AppHeaderTestIds","PadModeSelectTestId","AdditionalControlsTestId","assetChips","chips","AssetChips","actions","ActionsRootTestId","Actions","hideSettingsUnderMore","linebreaks","map","css","index","responsivenessLineBreak"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require('./../../../ext-esm/style-inject/dist/style-inject.es.js')(".AppHeaderV3_root__urLNv{--headerV3-responsivity-flexwrap:wrap;align-items:center;display:flex;flex-direction:row;flex-wrap:var(--headerV3-responsivity-flexwrap);gap:0 8px;min-height:48px;overflow:hidden;padding:6px 0;width:100%}.AppHeaderV3_logoContainer__Bv-lU{max-height:36px;max-width:130px;overflow:hidden}.AppHeaderV3_logo__0VO16{display:block;max-height:36px;max-width:100%}.AppHeaderV3_title__vVZB9{flex:1 0 90px;min-width:90px}.AppHeaderV3_titleWithControlsLeft__Mnnkm{--headerV3-responsivity-marginRight:auto;--headerV3-responsivity-maxWidth:100%;flex:0 1 auto;margin-right:var(--headerV3-responsivity-marginRight);max-width:var(--headerV3-responsivity-maxWidth);min-width:1px}.AppHeaderV3_additionalControls__-QrO4,.AppHeaderV3_assetChips__4LwGe,.AppHeaderV3_logoContainer__Bv-lU,.AppHeaderV3_padMode__-uTzy,.AppHeaderV3_titleControls__Yzl06,.AppHeaderV3_version__Acke3{align-items:center;display:flex;flex-flow:row nowrap;flex-shrink:0;gap:8px;min-height:36px;order:var(--headerV3-responsivity-order)}.AppHeaderV3_additionalControls__-QrO4:empty,.AppHeaderV3_assetChips__4LwGe:empty,.AppHeaderV3_logoContainer__Bv-lU:empty,.AppHeaderV3_padMode__-uTzy:empty,.AppHeaderV3_titleControls__Yzl06:empty,.AppHeaderV3_version__Acke3:empty{display:none}.AppHeaderV3_titleControlsLeft__NrIwI{margin-right:auto}.AppHeaderV3_actions__Q0PRr{align-items:center;display:flex;flex:0 0 auto;flex-flow:row nowrap;gap:8px;min-height:36px;order:var(--headerV3-responsivity-order)}.AppHeaderV3_responsivenessLineBreak__2QL6d{flex:0 0 100%}.AppHeaderV3_lastInLine__cbmHb{margin-left:auto}"),module.exports={spacing:"8",gap:"8px",titleMinWidth:"90px",root:"AppHeaderV3_root__urLNv",logoContainer:"AppHeaderV3_logoContainer__Bv-lU",logo:"AppHeaderV3_logo__0VO16",title:"AppHeaderV3_title__vVZB9",titleWithControlsLeft:"AppHeaderV3_titleWithControlsLeft__Mnnkm",additionalControls:"AppHeaderV3_additionalControls__-QrO4",titleControls:"AppHeaderV3_titleControls__Yzl06",assetChips:"AppHeaderV3_assetChips__4LwGe",padMode:"AppHeaderV3_padMode__-uTzy",version:"AppHeaderV3_version__Acke3",titleControlsLeft:"AppHeaderV3_titleControlsLeft__NrIwI",actions:"AppHeaderV3_actions__Q0PRr",responsivenessLineBreak:"AppHeaderV3_responsivenessLineBreak__2QL6d",lastInLine:"AppHeaderV3_lastInLine__cbmHb"};
|
|
1
|
+
"use strict";require('./../../../ext-esm/style-inject/dist/style-inject.es.js')(".AppHeaderV3_root__urLNv{--headerV3-responsivity-flexwrap:wrap;align-items:center;display:flex;flex-direction:row;flex-wrap:var(--headerV3-responsivity-flexwrap);gap:0 8px;min-height:48px;overflow:hidden;padding:6px 0;width:100%}.AppHeaderV3_logoContainer__Bv-lU{max-height:36px;max-width:130px;overflow:hidden}.AppHeaderV3_logo__0VO16{display:block;max-height:36px;max-width:100%}.AppHeaderV3_title__vVZB9{flex:1 0 90px;min-width:90px}.AppHeaderV3_titleWithControlsLeft__Mnnkm{--headerV3-responsivity-marginRight:auto;--headerV3-responsivity-maxWidth:100%;flex:0 1 auto;margin-right:var(--headerV3-responsivity-marginRight);max-width:var(--headerV3-responsivity-maxWidth);min-width:1px}.AppHeaderV3_additionalControls__-QrO4,.AppHeaderV3_assetChips__4LwGe,.AppHeaderV3_logoContainer__Bv-lU,.AppHeaderV3_padMode__-uTzy,.AppHeaderV3_titleControls__Yzl06,.AppHeaderV3_version__Acke3{align-items:center;display:flex;flex-flow:row nowrap;flex-shrink:0;gap:8px;min-height:36px;order:var(--headerV3-responsivity-order)}.AppHeaderV3_additionalControls__-QrO4:empty,.AppHeaderV3_assetChips__4LwGe:empty,.AppHeaderV3_logoContainer__Bv-lU:empty,.AppHeaderV3_padMode__-uTzy:empty,.AppHeaderV3_titleControls__Yzl06:empty,.AppHeaderV3_version__Acke3:empty{display:none}.AppHeaderV3_titleControlsLeft__NrIwI{margin-right:auto}.AppHeaderV3_actions__Q0PRr{align-items:center;display:flex;flex:0 0 auto;flex-flow:row nowrap;gap:8px;min-height:36px;order:var(--headerV3-responsivity-order)}.AppHeaderV3_responsivenessLineBreak__2QL6d{flex:0 0 100%}.AppHeaderV3_lastInLine__cbmHb{margin-left:auto}.AppHeaderV3_embedded__2p-8Z{gap:8px;min-height:32px;overflow:visible;padding:0}.AppHeaderV3_embedded__2p-8Z .AppHeaderV3_titleControls__Yzl06{flex:1 1 auto;flex-wrap:wrap;min-width:0}.AppHeaderV3_embedded__2p-8Z .AppHeaderV3_actions__Q0PRr,.AppHeaderV3_embedded__2p-8Z .AppHeaderV3_additionalControls__-QrO4,.AppHeaderV3_embedded__2p-8Z .AppHeaderV3_titleControls__Yzl06,.AppHeaderV3_embedded__2p-8Z .AppHeaderV3_version__Acke3{min-height:32px;order:0}.AppHeaderV3_embedded__2p-8Z .AppHeaderV3_version__Acke3{margin-left:auto}.AppHeaderV3_embedded__2p-8Z .AppHeaderV3_actions__Q0PRr{flex-wrap:wrap}"),module.exports={spacing:"8",gap:"8px",titleMinWidth:"90px",root:"AppHeaderV3_root__urLNv",logoContainer:"AppHeaderV3_logoContainer__Bv-lU",logo:"AppHeaderV3_logo__0VO16",title:"AppHeaderV3_title__vVZB9",titleWithControlsLeft:"AppHeaderV3_titleWithControlsLeft__Mnnkm",additionalControls:"AppHeaderV3_additionalControls__-QrO4",titleControls:"AppHeaderV3_titleControls__Yzl06",assetChips:"AppHeaderV3_assetChips__4LwGe",padMode:"AppHeaderV3_padMode__-uTzy",version:"AppHeaderV3_version__Acke3",titleControlsLeft:"AppHeaderV3_titleControlsLeft__NrIwI",actions:"AppHeaderV3_actions__Q0PRr",responsivenessLineBreak:"AppHeaderV3_responsivenessLineBreak__2QL6d",lastInLine:"AppHeaderV3_lastInLine__cbmHb",embedded:"AppHeaderV3_embedded__2p-8Z"};
|
|
2
2
|
//# sourceMappingURL=AppHeaderV3.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),n=require("lodash"),o=require("./constants.scss.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(e),l=i(r);function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){s.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var c=parseInt(o.gap,10),u=parseInt(o.titleMinWidth,10)+c,y=function(e){var r;return(null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect().width)||0},f=function(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];var o=t.filter((function(e){return!!e.current&&e.current.offsetWidth>0}));return e+o.reduce((function(e,r){return e+y(r)}),0)+(o.length>1?(o.length-1)*c:0)};exports.useResponsivity=function(e){var r=e.disabled,o=e.actionsRef,i=e.chipsRef,s=e.logoRef,a=e.rootRef,y=e.titleControlsRef,p=e.additionalControlsRef,v=e.versionRef,h=e.padModeRef,b=e.titleControlsLeft,O=t.useState({}),g=l.default(O,2),V=g[0],j=g[1],w=t.useRef(-1);return t.useEffect((function(){var e=n.throttle((function(){requestAnimationFrame((function(){var e,r=(null===(e=a.current)||void 0===e?void 0:e.offsetWidth)||0,t=function(e){var t,l=b&&f(u,s,v,i,o,y,p,h)<=r?d(d({},e),{},{root:{style:d(d({},null===(t=e.root)||void 0===t?void 0:t.style),{},{"--headerV3-responsivity-flexwrap":"nowrap"})}}):e;j((function(e){return n.isEqual(e,l)?e:l}))},l=function(){if(b){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];var n=f.apply(void 0,[0].concat(r))+c;return{"--headerV3-responsivity-maxWidth":"calc(100% - ".concat(n,"px)")}}};f(u,s,v,i,o,y,p,h)<=r?t({title:{style:{"--headerV3-responsivity-marginRight":0}}}):f(u,s,v,i,o)<=r?t({linebreaks:[{order:100}],titleControls:{style:{"--headerV3-responsivity-order":110}},padMode:{style:{"--headerV3-responsivity-order":120}},additionalControls:{style:{"--headerV3-responsivity-order":130},lastInLine:!0},title:{style:l(s,v,i,o)}}):!h.current&&f(u,s,v,i)<=r?t({linebreaks:[{order:100}],titleControls:{style:{"--headerV3-responsivity-order":110}},additionalControls:{style:{"--headerV3-responsivity-order":120}},actions:{style:{"--headerV3-responsivity-order":130},lastInLine:!0},title:{style:l(s,v,i)}}):f(u,s,v,i)<=r&&f(0,y,p,h,o)<=r?t({linebreaks:[{order:100}],titleControls:{style:{"--headerV3-responsivity-order":110}},additionalControls:{style:{"--headerV3-responsivity-order":120}},padMode:{style:{"--headerV3-responsivity-order":130}},actions:{style:{"--headerV3-responsivity-order":140},lastInLine:!0},title:{style:l(s,v,i)}}):t({linebreaks:[{order:100},{order:200}],titleControls:{style:{"--headerV3-responsivity-order":110}},additionalControls:{style:{"--headerV3-responsivity-order":120}},actions:{style:{"--headerV3-responsivity-order":130},lastInLine:!0},padMode:{style:{"--headerV3-responsivity-order":210}},chips:{style:{"--headerV3-responsivity-order":220},lastInLine:!0},title:{style:l(s,v)}})}))}),100,{leading:!0}),t=new ResizeObserver((function(){var r,t=(null===(r=a.current)||void 0===r?void 0:r.offsetWidth)||0;t!==w.current&&e(),w.current=t})),l=new MutationObserver(e);return a.current&&!r&&(t.observe(a.current),l.observe(a.current,{childList:!0,subtree:!0,characterData:!0}),e.cancel()),function(){t.disconnect(),l.disconnect()}}),[o,i,s,a,y,p,v,h,r,b]),V};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),n=require("lodash"),o=require("./constants.scss.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(e),l=i(r);function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){s.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var c=parseInt(o.gap,10),u=parseInt(o.titleMinWidth,10)+c,y=function(e){var r;return(null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect().width)||0},f=function(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];var o=t.filter((function(e){return!!e.current&&e.current.offsetWidth>0}));return e+o.reduce((function(e,r){return e+y(r)}),0)+(o.length>1?(o.length-1)*c:0)};exports.useResponsivity=function(e){var r=e.disabled,o=e.actionsRef,i=e.chipsRef,s=e.logoRef,a=e.rootRef,y=e.titleControlsRef,p=e.additionalControlsRef,v=e.versionRef,h=e.padModeRef,b=e.titleControlsLeft,O=t.useState({}),g=l.default(O,2),V=g[0],j=g[1],w=t.useRef(-1);return t.useEffect((function(){var e=n.throttle((function(){requestAnimationFrame((function(){var e,r=(null===(e=a.current)||void 0===e?void 0:e.offsetWidth)||0,t=function(e){var t,l=b&&f(u,s,v,i,o,y,p,h)<=r?d(d({},e),{},{root:{style:d(d({},null===(t=e.root)||void 0===t?void 0:t.style),{},{"--headerV3-responsivity-flexwrap":"nowrap"})}}):e;j((function(e){return n.isEqual(e,l)?e:l}))},l=function(){if(b){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];var n=f.apply(void 0,[0].concat(r))+c;return{"--headerV3-responsivity-maxWidth":"calc(100% - ".concat(n,"px)")}}};f(u,s,v,i,o,y,p,h)<=r?t({title:{style:{"--headerV3-responsivity-marginRight":0}}}):f(u,s,v,i,o)<=r?t({linebreaks:[{order:100}],titleControls:{style:{"--headerV3-responsivity-order":110}},padMode:{style:{"--headerV3-responsivity-order":120}},additionalControls:{style:{"--headerV3-responsivity-order":130},lastInLine:!0},title:{style:l(s,v,i,o)}}):!h.current&&f(u,s,v,i)<=r?t({linebreaks:[{order:100}],titleControls:{style:{"--headerV3-responsivity-order":110}},additionalControls:{style:{"--headerV3-responsivity-order":120}},actions:{style:{"--headerV3-responsivity-order":130},lastInLine:!0},title:{style:l(s,v,i)}}):f(u,s,v,i)<=r&&f(0,y,p,h,o)<=r?t({linebreaks:[{order:100}],titleControls:{style:{"--headerV3-responsivity-order":110}},additionalControls:{style:{"--headerV3-responsivity-order":120}},padMode:{style:{"--headerV3-responsivity-order":130}},actions:{style:{"--headerV3-responsivity-order":140},lastInLine:!0},title:{style:l(s,v,i)}}):t({linebreaks:[{order:100},{order:200}],titleControls:{style:{"--headerV3-responsivity-order":110}},additionalControls:{style:{"--headerV3-responsivity-order":120}},actions:{style:{"--headerV3-responsivity-order":130},lastInLine:!0},padMode:{style:{"--headerV3-responsivity-order":210}},chips:{style:{"--headerV3-responsivity-order":220},lastInLine:!0},title:{style:l(s,v)}})}))}),100,{leading:!0}),t=new ResizeObserver((function(){var r,t=(null===(r=a.current)||void 0===r?void 0:r.offsetWidth)||0;t!==w.current&&e(),w.current=t})),l=new MutationObserver(e);return a.current&&!r&&(t.observe(a.current),l.observe(a.current,{childList:!0,subtree:!0,characterData:!0}),e.cancel()),function(){t.disconnect(),l.disconnect()}}),[o,i,s,a,y,p,v,h,r,b]),r?{}:V};
|
|
2
2
|
//# sourceMappingURL=useResponsivity.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResponsivity.js","sources":["../../../../../src/componentsV2/AppHeader/V3/useResponsivity.tsx"],"sourcesContent":["import { CSSProperties, RefObject, useEffect, useRef, useState } from 'react';\nimport { isEqual, throttle } from 'lodash';\n\nimport CssConstants from './constants.scss';\n\ntype Params = {\n disabled?: boolean;\n titleControlsLeft?: boolean;\n\n rootRef: RefObject<HTMLElement>;\n versionRef: RefObject<HTMLElement>;\n padModeRef: RefObject<HTMLElement>;\n additionalControlsRef: RefObject<HTMLElement>;\n titleControlsRef: RefObject<HTMLElement>;\n chipsRef: RefObject<HTMLElement>;\n logoRef: RefObject<HTMLElement>;\n actionsRef: RefObject<HTMLElement>;\n};\n\ntype ResponsivityDataItem = {\n style?: CSSProperties & Record<`--${string}`, number | string>;\n lastInLine?: boolean;\n};\n\ntype ResponsivityData = {\n root?: ResponsivityDataItem;\n padMode?: ResponsivityDataItem;\n additionalControls?: ResponsivityDataItem;\n titleControls?: ResponsivityDataItem;\n chips?: ResponsivityDataItem;\n actions?: ResponsivityDataItem;\n title?: ResponsivityDataItem;\n\n linebreaks?: CSSProperties[];\n};\n\nconst gap = parseInt(CssConstants.gap, 10);\nconst titleMinWidth = parseInt(CssConstants.titleMinWidth, 10) + gap;\n\nconst getRefWidth = (ref: RefObject<HTMLElement>) => {\n // This causes a reflow, so if it lags too much - use the `ref.current?.offsetWidth + 1`\n // `ref.current?.offsetWidth` rounds pixel fractions so it may produce incorrect results/need adjustment\n return ref.current?.getBoundingClientRect().width || 0;\n};\n\nconst sumLineWidth = (titleMinWidth: number, ...lineRefs: RefObject<HTMLElement>[]) => {\n const filteredRefs = lineRefs.filter(ref => !!ref.current && ref.current.offsetWidth > 0);\n return (\n titleMinWidth +\n filteredRefs.reduce((acc, ref) => acc + getRefWidth(ref), 0) +\n (filteredRefs.length > 1 ? (filteredRefs.length - 1) * gap : 0)\n );\n};\n\n/**\n * Detects when child elements stop fitting in a single header line and returns CSS orders, linebreaks, & other info for header elements\n *\n * There are several possible layouts:\n *\n * 1. Everything fits in one line\n * 2. 2 lines:\n * [logo] [title] [version] [asset chips] [actions]\n * [title controls] [pad mode] [additional controls]\n * and other variants that fit into 2 lines\n * 3. 3 lines:\n * [logo] [title] [version]\n * [title controls] [additional controls] [actions]\n * [pad mode] [chips]\n */\nexport const useResponsivity = ({\n disabled,\n actionsRef,\n chipsRef,\n logoRef,\n rootRef,\n titleControlsRef,\n additionalControlsRef,\n versionRef,\n padModeRef,\n titleControlsLeft,\n}: Params) => {\n const [value, setValue] = useState<ResponsivityData>({});\n const previousWidthRef = useRef(-1);\n\n useEffect(() => {\n const calculateCss = throttle(\n () => {\n requestAnimationFrame(() => {\n const rootWidth = rootRef.current?.offsetWidth || 0;\n\n const setCss = (baseData: ResponsivityData) => {\n // We need nowrap to properly handle title when app title is very long and we have title controls to the left\n const isNowrap =\n titleControlsLeft &&\n sumLineWidth(\n titleMinWidth,\n logoRef,\n versionRef,\n chipsRef,\n actionsRef,\n titleControlsRef,\n additionalControlsRef,\n padModeRef\n ) <= rootWidth;\n\n const data = isNowrap\n ? {\n ...baseData,\n root: {\n style: {\n ...baseData.root?.style,\n '--headerV3-responsivity-flexwrap': 'nowrap',\n },\n },\n }\n : baseData;\n\n // Prevent unnecessary rerenders & rerender loop: recalc -> update values -> recalc -> update values to the same values\n setValue(value => (isEqual(value, data) ? value : data));\n };\n\n const getTitleMaxWidthStyle = (...refs: RefObject<HTMLElement>[]) => {\n if (!titleControlsLeft) {\n return undefined;\n }\n\n const pixels = sumLineWidth(0, ...refs) + gap;\n return { '--headerV3-responsivity-maxWidth': `calc(100% - ${pixels}px)` };\n };\n\n // Case 1 - everything fits\n if (\n sumLineWidth(\n titleMinWidth,\n logoRef,\n versionRef,\n chipsRef,\n actionsRef,\n titleControlsRef,\n additionalControlsRef,\n padModeRef\n ) <= rootWidth\n ) {\n setCss({\n title: { style: { '--headerV3-responsivity-marginRight': 0 } },\n });\n }\n // 2 lines\n // [logo] [title] [version] [asset chips] [actions]\n // [title controls] [pad mode] [additional controls]\n else if (\n sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef, actionsRef) <= rootWidth\n ) {\n setCss({\n linebreaks: [{ order: 100 }],\n titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n padMode: { style: { '--headerV3-responsivity-order': 120 } },\n additionalControls: {\n style: { '--headerV3-responsivity-order': 130 },\n lastInLine: true,\n },\n title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef, actionsRef) },\n });\n }\n // 2 lines - no padmode, has chips\n // [logo] [title] [version] [asset chips]\n // [title controls] [additional controls] [actions]\n else if (\n !padModeRef.current &&\n sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef) <= rootWidth\n ) {\n setCss({\n linebreaks: [{ order: 100 }],\n titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n actions: { style: { '--headerV3-responsivity-order': 130 }, lastInLine: true },\n\n title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef) },\n });\n }\n // 2 lines:\n // [logo] [title] [version] [chips]\n // [title controls] [additional controls] [pad mode] [actions]\n else if (\n sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef) <= rootWidth &&\n sumLineWidth(0, titleControlsRef, additionalControlsRef, padModeRef, actionsRef) <=\n rootWidth\n ) {\n setCss({\n linebreaks: [{ order: 100 }],\n titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n padMode: { style: { '--headerV3-responsivity-order': 130 } },\n actions: { style: { '--headerV3-responsivity-order': 140 }, lastInLine: true },\n\n title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef) },\n });\n }\n // 3 lines\n // [logo] [title] [version]\n // [title controls] [additional controls] [actions]\n // [pad mode] [chips]\n else {\n setCss({\n linebreaks: [{ order: 100 }, { order: 200 }],\n titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n actions: { style: { '--headerV3-responsivity-order': 130 }, lastInLine: true },\n padMode: { style: { '--headerV3-responsivity-order': 210 } },\n chips: { style: { '--headerV3-responsivity-order': 220 }, lastInLine: true },\n\n title: { style: getTitleMaxWidthStyle(logoRef, versionRef) },\n });\n }\n });\n },\n 100,\n { leading: true }\n );\n\n const resizeObserver = new ResizeObserver(() => {\n const rootWidth = rootRef.current?.offsetWidth || 0;\n if (rootWidth !== previousWidthRef.current) {\n calculateCss();\n }\n previousWidthRef.current = rootWidth;\n });\n const mutationObserver = new MutationObserver(calculateCss);\n\n if (rootRef.current && !disabled) {\n resizeObserver.observe(rootRef.current);\n mutationObserver.observe(rootRef.current, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n calculateCss.cancel();\n }\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n }, [\n actionsRef,\n chipsRef,\n logoRef,\n rootRef,\n titleControlsRef,\n additionalControlsRef,\n versionRef,\n padModeRef,\n disabled,\n titleControlsLeft,\n ]);\n\n return value;\n};\n"],"names":["gap","parseInt","CssConstants","titleMinWidth","getRefWidth","ref","_ref$current","current","getBoundingClientRect","width","sumLineWidth","_len","arguments","length","lineRefs","Array","_key","filteredRefs","filter","offsetWidth","reduce","acc","_ref","disabled","actionsRef","chipsRef","logoRef","rootRef","titleControlsRef","additionalControlsRef","versionRef","padModeRef","titleControlsLeft","_useState","useState","_useState2","_slicedToArray","value","setValue","previousWidthRef","useRef","useEffect","calculateCss","throttle","requestAnimationFrame","_rootRef$current","rootWidth","setCss","baseData","_baseData$root","data","_objectSpread","root","style","isEqual","getTitleMaxWidthStyle","_len2","refs","_key2","pixels","apply","title","linebreaks","order","titleControls","padMode","additionalControls","lastInLine","actions","chips","leading","resizeObserver","ResizeObserver","_rootRef$current2","mutationObserver","MutationObserver","observe","childList","subtree","characterData","cancel","disconnect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useResponsivity.js","sources":["../../../../../src/componentsV2/AppHeader/V3/useResponsivity.tsx"],"sourcesContent":["import { CSSProperties, RefObject, useEffect, useRef, useState } from 'react';\nimport { isEqual, throttle } from 'lodash';\n\nimport CssConstants from './constants.scss';\n\ntype Params = {\n disabled?: boolean;\n titleControlsLeft?: boolean;\n\n rootRef: RefObject<HTMLElement>;\n versionRef: RefObject<HTMLElement>;\n padModeRef: RefObject<HTMLElement>;\n additionalControlsRef: RefObject<HTMLElement>;\n titleControlsRef: RefObject<HTMLElement>;\n chipsRef: RefObject<HTMLElement>;\n logoRef: RefObject<HTMLElement>;\n actionsRef: RefObject<HTMLElement>;\n};\n\ntype ResponsivityDataItem = {\n style?: CSSProperties & Record<`--${string}`, number | string>;\n lastInLine?: boolean;\n};\n\ntype ResponsivityData = {\n root?: ResponsivityDataItem;\n padMode?: ResponsivityDataItem;\n additionalControls?: ResponsivityDataItem;\n titleControls?: ResponsivityDataItem;\n chips?: ResponsivityDataItem;\n actions?: ResponsivityDataItem;\n title?: ResponsivityDataItem;\n\n linebreaks?: CSSProperties[];\n};\n\nconst gap = parseInt(CssConstants.gap, 10);\nconst titleMinWidth = parseInt(CssConstants.titleMinWidth, 10) + gap;\n\nconst getRefWidth = (ref: RefObject<HTMLElement>) => {\n // This causes a reflow, so if it lags too much - use the `ref.current?.offsetWidth + 1`\n // `ref.current?.offsetWidth` rounds pixel fractions so it may produce incorrect results/need adjustment\n return ref.current?.getBoundingClientRect().width || 0;\n};\n\nconst sumLineWidth = (titleMinWidth: number, ...lineRefs: RefObject<HTMLElement>[]) => {\n const filteredRefs = lineRefs.filter(ref => !!ref.current && ref.current.offsetWidth > 0);\n return (\n titleMinWidth +\n filteredRefs.reduce((acc, ref) => acc + getRefWidth(ref), 0) +\n (filteredRefs.length > 1 ? (filteredRefs.length - 1) * gap : 0)\n );\n};\n\n/**\n * Detects when child elements stop fitting in a single header line and returns CSS orders, linebreaks, & other info for header elements\n *\n * There are several possible layouts:\n *\n * 1. Everything fits in one line\n * 2. 2 lines:\n * [logo] [title] [version] [asset chips] [actions]\n * [title controls] [pad mode] [additional controls]\n * and other variants that fit into 2 lines\n * 3. 3 lines:\n * [logo] [title] [version]\n * [title controls] [additional controls] [actions]\n * [pad mode] [chips]\n */\nexport const useResponsivity = ({\n disabled,\n actionsRef,\n chipsRef,\n logoRef,\n rootRef,\n titleControlsRef,\n additionalControlsRef,\n versionRef,\n padModeRef,\n titleControlsLeft,\n}: Params) => {\n const [value, setValue] = useState<ResponsivityData>({});\n const previousWidthRef = useRef(-1);\n\n useEffect(() => {\n const calculateCss = throttle(\n () => {\n requestAnimationFrame(() => {\n const rootWidth = rootRef.current?.offsetWidth || 0;\n\n const setCss = (baseData: ResponsivityData) => {\n // We need nowrap to properly handle title when app title is very long and we have title controls to the left\n const isNowrap =\n titleControlsLeft &&\n sumLineWidth(\n titleMinWidth,\n logoRef,\n versionRef,\n chipsRef,\n actionsRef,\n titleControlsRef,\n additionalControlsRef,\n padModeRef\n ) <= rootWidth;\n\n const data = isNowrap\n ? {\n ...baseData,\n root: {\n style: {\n ...baseData.root?.style,\n '--headerV3-responsivity-flexwrap': 'nowrap',\n },\n },\n }\n : baseData;\n\n // Prevent unnecessary rerenders & rerender loop: recalc -> update values -> recalc -> update values to the same values\n setValue(value => (isEqual(value, data) ? value : data));\n };\n\n const getTitleMaxWidthStyle = (...refs: RefObject<HTMLElement>[]) => {\n if (!titleControlsLeft) {\n return undefined;\n }\n\n const pixels = sumLineWidth(0, ...refs) + gap;\n return { '--headerV3-responsivity-maxWidth': `calc(100% - ${pixels}px)` };\n };\n\n // Case 1 - everything fits\n if (\n sumLineWidth(\n titleMinWidth,\n logoRef,\n versionRef,\n chipsRef,\n actionsRef,\n titleControlsRef,\n additionalControlsRef,\n padModeRef\n ) <= rootWidth\n ) {\n setCss({\n title: { style: { '--headerV3-responsivity-marginRight': 0 } },\n });\n }\n // 2 lines\n // [logo] [title] [version] [asset chips] [actions]\n // [title controls] [pad mode] [additional controls]\n else if (\n sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef, actionsRef) <= rootWidth\n ) {\n setCss({\n linebreaks: [{ order: 100 }],\n titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n padMode: { style: { '--headerV3-responsivity-order': 120 } },\n additionalControls: {\n style: { '--headerV3-responsivity-order': 130 },\n lastInLine: true,\n },\n title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef, actionsRef) },\n });\n }\n // 2 lines - no padmode, has chips\n // [logo] [title] [version] [asset chips]\n // [title controls] [additional controls] [actions]\n else if (\n !padModeRef.current &&\n sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef) <= rootWidth\n ) {\n setCss({\n linebreaks: [{ order: 100 }],\n titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n actions: { style: { '--headerV3-responsivity-order': 130 }, lastInLine: true },\n\n title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef) },\n });\n }\n // 2 lines:\n // [logo] [title] [version] [chips]\n // [title controls] [additional controls] [pad mode] [actions]\n else if (\n sumLineWidth(titleMinWidth, logoRef, versionRef, chipsRef) <= rootWidth &&\n sumLineWidth(0, titleControlsRef, additionalControlsRef, padModeRef, actionsRef) <=\n rootWidth\n ) {\n setCss({\n linebreaks: [{ order: 100 }],\n titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n padMode: { style: { '--headerV3-responsivity-order': 130 } },\n actions: { style: { '--headerV3-responsivity-order': 140 }, lastInLine: true },\n\n title: { style: getTitleMaxWidthStyle(logoRef, versionRef, chipsRef) },\n });\n }\n // 3 lines\n // [logo] [title] [version]\n // [title controls] [additional controls] [actions]\n // [pad mode] [chips]\n else {\n setCss({\n linebreaks: [{ order: 100 }, { order: 200 }],\n titleControls: { style: { '--headerV3-responsivity-order': 110 } },\n additionalControls: { style: { '--headerV3-responsivity-order': 120 } },\n actions: { style: { '--headerV3-responsivity-order': 130 }, lastInLine: true },\n padMode: { style: { '--headerV3-responsivity-order': 210 } },\n chips: { style: { '--headerV3-responsivity-order': 220 }, lastInLine: true },\n\n title: { style: getTitleMaxWidthStyle(logoRef, versionRef) },\n });\n }\n });\n },\n 100,\n { leading: true }\n );\n\n const resizeObserver = new ResizeObserver(() => {\n const rootWidth = rootRef.current?.offsetWidth || 0;\n if (rootWidth !== previousWidthRef.current) {\n calculateCss();\n }\n previousWidthRef.current = rootWidth;\n });\n const mutationObserver = new MutationObserver(calculateCss);\n\n if (rootRef.current && !disabled) {\n resizeObserver.observe(rootRef.current);\n mutationObserver.observe(rootRef.current, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n calculateCss.cancel();\n }\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n }, [\n actionsRef,\n chipsRef,\n logoRef,\n rootRef,\n titleControlsRef,\n additionalControlsRef,\n versionRef,\n padModeRef,\n disabled,\n titleControlsLeft,\n ]);\n\n return disabled ? {} : value;\n};\n"],"names":["gap","parseInt","CssConstants","titleMinWidth","getRefWidth","ref","_ref$current","current","getBoundingClientRect","width","sumLineWidth","_len","arguments","length","lineRefs","Array","_key","filteredRefs","filter","offsetWidth","reduce","acc","_ref","disabled","actionsRef","chipsRef","logoRef","rootRef","titleControlsRef","additionalControlsRef","versionRef","padModeRef","titleControlsLeft","_useState","useState","_useState2","_slicedToArray","value","setValue","previousWidthRef","useRef","useEffect","calculateCss","throttle","requestAnimationFrame","_rootRef$current","rootWidth","setCss","baseData","_baseData$root","data","_objectSpread","root","style","isEqual","getTitleMaxWidthStyle","_len2","refs","_key2","pixels","apply","title","linebreaks","order","titleControls","padMode","additionalControls","lastInLine","actions","chips","leading","resizeObserver","ResizeObserver","_rootRef$current2","mutationObserver","MutationObserver","observe","childList","subtree","characterData","cancel","disconnect"],"mappings":"s5BAoCA,IAAMA,EAAMC,SAASC,EAAaF,IAAK,IACjCG,EAAgBF,SAASC,EAAaC,cAAe,IAAMH,EAE3DI,EAAc,SAACC,GAAgC,IAAAC,EAGnD,OAAkB,QAAXA,EAAAD,EAAIE,eAAO,IAAAD,OAAA,EAAXA,EAAaE,wBAAwBC,QAAS,CACvD,EAEMC,EAAe,SAACP,GAAiE,IAAA,IAAAQ,EAAAC,UAAAC,OAAvCC,EAAQ,IAAAC,MAAAJ,EAAA,EAAAA,EAAA,EAAA,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAARF,EAAQE,EAAA,GAAAJ,UAAAI,GACtD,IAAMC,EAAeH,EAASI,QAAO,SAAAb,GAAG,QAAMA,EAAIE,SAAWF,EAAIE,QAAQY,YAAc,KACvF,OACEhB,EACAc,EAAaG,QAAO,SAACC,EAAKhB,GAAG,OAAKgB,EAAMjB,EAAYC,EAAI,GAAE,IACzDY,EAAaJ,OAAS,GAAKI,EAAaJ,OAAS,GAAKb,EAAM,EAEjE,0BAiB+B,SAWjBsB,GAAA,IAVZC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,SACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,iBACAC,IAAAA,sBACAC,IAAAA,WACAC,IAAAA,WACAC,IAAAA,kBAEAC,EAA0BC,EAAQA,SAAmB,IAAGC,EAAAC,EAAAA,QAAAH,EAAA,GAAjDI,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAChBI,EAAmBC,EAAAA,QAAQ,GA8KjC,OA5KAC,EAAAA,WAAU,WACR,IAAMC,EAAeC,EAAAA,UACnB,WACEC,uBAAsB,WAAM,IAAAC,EACpBC,GAAY,QAAAD,EAAAlB,EAAQpB,eAAR,IAAAsC,OAAA,EAAAA,EAAiB1B,cAAe,EAE5C4B,EAAS,SAACC,GAA+B,IAAAC,EAevCC,EAZJlB,GACAtB,EACEP,EACAuB,EACAI,EACAL,EACAD,EACAI,EACAC,EACAE,IACGe,EAEcK,EAAAA,EAAA,GAEZH,GAAQ,GAAA,CACXI,KAAM,CACJC,aACkB,UAAbL,EAASI,YAAI,IAAAH,OAAA,EAAbA,EAAeI,OAAK,GAAA,CACvB,mCAAoC,cAI1CL,EAGJV,GAAS,SAAAD,GAAK,OAAKiB,EAAOA,QAACjB,EAAOa,GAAQb,EAAQa,CAAI,KAGlDK,EAAwB,WAC5B,GAAKvB,EAAL,CAEC,IAAA,IAAAwB,EAAA5C,UAAAC,OAH+B4C,EAAI,IAAA1C,MAAAyC,GAAAE,EAAA,EAAAA,EAAAF,EAAAE,IAAJD,EAAIC,GAAA9C,UAAA8C,GAKpC,IAAMC,EAASjD,EAAYkD,WAAA,EAAA,CAAC,GAAMH,OAAAA,IAAQzD,EAC1C,MAAO,CAAE,yDAAmD2D,EAAM,OAHlE,GAQAjD,EACEP,EACAuB,EACAI,EACAL,EACAD,EACAI,EACAC,EACAE,IACGe,EAELC,EAAO,CACLc,MAAO,CAAER,MAAO,CAAE,sCAAuC,MAO3D3C,EAAaP,EAAeuB,EAASI,EAAYL,EAAUD,IAAesB,EAE1EC,EAAO,CACLe,WAAY,CAAC,CAAEC,MAAO,MACtBC,cAAe,CAAEX,MAAO,CAAE,gCAAiC,MAC3DY,QAAS,CAAEZ,MAAO,CAAE,gCAAiC,MACrDa,mBAAoB,CAClBb,MAAO,CAAE,gCAAiC,KAC1Cc,YAAY,GAEdN,MAAO,CAAER,MAAOE,EAAsB7B,EAASI,EAAYL,EAAUD,OAOtEO,EAAWxB,SACZG,EAAaP,EAAeuB,EAASI,EAAYL,IAAaqB,EAE9DC,EAAO,CACLe,WAAY,CAAC,CAAEC,MAAO,MACtBC,cAAe,CAAEX,MAAO,CAAE,gCAAiC,MAC3Da,mBAAoB,CAAEb,MAAO,CAAE,gCAAiC,MAChEe,QAAS,CAAEf,MAAO,CAAE,gCAAiC,KAAOc,YAAY,GAExEN,MAAO,CAAER,MAAOE,EAAsB7B,EAASI,EAAYL,MAO7Df,EAAaP,EAAeuB,EAASI,EAAYL,IAAaqB,GAC9DpC,EAAa,EAAGkB,EAAkBC,EAAuBE,EAAYP,IACnEsB,EAEFC,EAAO,CACLe,WAAY,CAAC,CAAEC,MAAO,MACtBC,cAAe,CAAEX,MAAO,CAAE,gCAAiC,MAC3Da,mBAAoB,CAAEb,MAAO,CAAE,gCAAiC,MAChEY,QAAS,CAAEZ,MAAO,CAAE,gCAAiC,MACrDe,QAAS,CAAEf,MAAO,CAAE,gCAAiC,KAAOc,YAAY,GAExEN,MAAO,CAAER,MAAOE,EAAsB7B,EAASI,EAAYL,MAQ7DsB,EAAO,CACLe,WAAY,CAAC,CAAEC,MAAO,KAAO,CAAEA,MAAO,MACtCC,cAAe,CAAEX,MAAO,CAAE,gCAAiC,MAC3Da,mBAAoB,CAAEb,MAAO,CAAE,gCAAiC,MAChEe,QAAS,CAAEf,MAAO,CAAE,gCAAiC,KAAOc,YAAY,GACxEF,QAAS,CAAEZ,MAAO,CAAE,gCAAiC,MACrDgB,MAAO,CAAEhB,MAAO,CAAE,gCAAiC,KAAOc,YAAY,GAEtEN,MAAO,CAAER,MAAOE,EAAsB7B,EAASI,KAGrD,GACD,GACD,IACA,CAAEwC,SAAS,IAGPC,EAAiB,IAAIC,gBAAe,WAAM,IAAAC,EACxC3B,GAAY,QAAA2B,EAAA9C,EAAQpB,eAAR,IAAAkE,OAAA,EAAAA,EAAiBtD,cAAe,EAC9C2B,IAAcP,EAAiBhC,SACjCmC,IAEFH,EAAiBhC,QAAUuC,CAC7B,IACM4B,EAAmB,IAAIC,iBAAiBjC,GAY9C,OAVIf,EAAQpB,UAAYgB,IACtBgD,EAAeK,QAAQjD,EAAQpB,SAC/BmE,EAAiBE,QAAQjD,EAAQpB,QAAS,CACxCsE,WAAW,EACXC,SAAS,EACTC,eAAe,IAEjBrC,EAAasC,UAGR,WACLT,EAAeU,aACfP,EAAiBO,aAEpB,GAAE,CACDzD,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAR,EACAS,IAGKT,EAAW,CAAE,EAAGc,CACzB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("classnames"),s=require("../AppSizeProvider/AppSizeProvider.js");require("../../clients/subscriptions/constants.js"),require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/regenerator"),require("querystring"),require("uuid/v1"),require("lodash"),require("../../clients/subscriptions.v1.js"),require("../../clients/jsonApi/index.js"),require("../../clients/subscriptions/subscriptions-client.factory.js");var n=require("../../effects/useOutsideClick.js");require("immutable"),require("query-string"),require("../../constants/goals.js"),require("../../constants/segment.js"),require("../../constants/alerts.js"),require("../../constants/apps.js"),require("../../constants/drillstring.js"),require("../../constants/completion.js"),require("../../constants/appPackages.js"),require("../../constants/notifications.js"),require("../../constants/feed.js"),require("../../constants/bha.js"),require("../../constants/corvaCompanyId.js"),require("../../components/GradientManager/configuration/constants.js"),require("../../utils/index.js"),require("uuid"),require("jsona"),require("../../utils/env.js"),require("../../components/StatusBadge/constants.js"),require("@babel/runtime/helpers/toConsumableArray"),require("lodash/set"),require("lodash/get"),require("lodash/unset"),require("moment"),require("../../clients/api/apiCore.js"),require("../../clients/constants.js"),require("../../clients/sso/auth0.js"),require("../../clients/sso/oauth2.js"),require("../../clients/api/rateLimiter.js"),require("lodash/isEmpty"),require("lodash/sortBy"),require("../../constants/streamSourceType.js"),require("../../components/DevCenter/DevCenterAppContainer/components/CommentsSwitch/CommentsSwitchContext.js"),require("../AppCommonsProvider/AppCommonsProvider.js"),require("../AppCommonsProvider/AppCommonsContext.js");var t=require("./AppPanelsContext.js"),i=require("../Paper/Paper.js"),o=require("../PopoverPanel/PopoverPanel.js"),a=require("./AppPanelIdContext.js"),u=require("../AppContainer/AppContainer.constants.scss.js"),p=require("./AppPanelDisplay.scss.js"),l=require("react/jsx-runtime");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var q=c(r),d=Number(u.sidePadding.replace(/[^.0-9]/g,""));exports.AppPanelDisplay=function(r){var u=r.anchorRef,c=r.id,m=t.useAppPanelInternal(c),j=m.isOpen,h=m.isPinned,v=m.close,P=m.isAnimated,b=m.width,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("classnames"),s=require("../AppSizeProvider/AppSizeProvider.js");require("../../clients/subscriptions/constants.js"),require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/regenerator"),require("querystring"),require("uuid/v1"),require("lodash"),require("../../clients/subscriptions.v1.js"),require("../../clients/jsonApi/index.js"),require("../../clients/subscriptions/subscriptions-client.factory.js");var n=require("../../effects/useOutsideClick.js");require("immutable"),require("query-string"),require("../../constants/goals.js"),require("../../constants/segment.js"),require("../../constants/alerts.js"),require("../../constants/apps.js"),require("../../constants/drillstring.js"),require("../../constants/completion.js"),require("../../constants/appPackages.js"),require("../../constants/notifications.js"),require("../../constants/feed.js"),require("../../constants/bha.js"),require("../../constants/corvaCompanyId.js"),require("../../components/GradientManager/configuration/constants.js"),require("../../utils/index.js"),require("uuid"),require("jsona"),require("../../utils/env.js"),require("../../components/StatusBadge/constants.js"),require("@babel/runtime/helpers/toConsumableArray"),require("lodash/set"),require("lodash/get"),require("lodash/unset"),require("moment"),require("../../clients/api/apiCore.js"),require("../../clients/constants.js"),require("../../clients/sso/auth0.js"),require("../../clients/sso/oauth2.js"),require("../../clients/api/rateLimiter.js"),require("lodash/isEmpty"),require("lodash/sortBy"),require("../../constants/streamSourceType.js"),require("../../components/DevCenter/DevCenterAppContainer/components/CommentsSwitch/CommentsSwitchContext.js"),require("../AppCommonsProvider/AppCommonsProvider.js"),require("../AppCommonsProvider/AppCommonsContext.js");var t=require("./AppPanelsContext.js"),i=require("../Paper/Paper.js"),o=require("../PopoverPanel/PopoverPanel.js"),a=require("./AppPanelIdContext.js"),u=require("../AppContainer/AppContainer.constants.scss.js"),p=require("./AppPanelDisplay.scss.js"),l=require("react/jsx-runtime");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var q=c(r),d=Number(u.sidePadding.replace(/[^.0-9]/g,""));exports.AppPanelDisplay=function(r){var u=r.anchorRef,c=r.id,m=t.useAppPanelInternal(c),j=m.isOpen,h=m.isPinned,v=m.close,P=m.isAnimated,b=m.width,f=m.component,A=m.opener,C=m.isExpanded,x=m.placement,y=e.useRef(null),g=s.useAppSize()||{},S=g.height,w=g.width,D=e.useMemo((function(){return{maxHeight:"min(".concat(S||0,"px, 100vh)"),maxWidth:w?w-2*d:0,width:C&&w?w-2*d:b}}),[w,S,C,b]);return n(y,v,[A,'[role="tooltip"]','[role="presentation"]']),f?l.jsxs(a.AppPanelIdProvider,{value:c,children:[u.current&&!h&&l.jsx(o.PopoverPanel,{flip:!1,ref:y,open:j,placement:"start"===x?"bottom-start":"bottom-end",anchorEl:u.current,onClose:v,className:p.popover,preventScroll:!1,backdrop:!1,animate:P,style:D,preventOverflow:!0,children:l.jsx(f,{})}),h&&l.jsx(i.Paper,{className:q.default(p.pinned,"start"===x?p.pinnedStart:p.pinnedEnd),style:D,children:l.jsx(f,{})})]}):null};
|
|
2
2
|
//# sourceMappingURL=AppPanelDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppPanelDisplay.js","sources":["../../../../src/componentsV2/AppPanel/AppPanelDisplay.tsx"],"sourcesContent":["import { CSSProperties, RefObject, useMemo, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { useAppSize } from '../AppSizeProvider';\nimport { useOutsideClick } from '../../effects';\nimport { Paper } from '../Paper';\nimport { PopoverPanel } from '../PopoverPanel';\n\nimport { useAppPanelInternal } from './AppPanelsContext';\nimport { AppPanelIdProvider } from './AppPanelIdContext';\n\nimport styleConstants from '../AppContainer/AppContainer.constants.scss';\nimport styles from './AppPanelDisplay.scss';\n\nconst sidePadding = Number(styleConstants.sidePadding.replace(/[^.0-9]/g, ''));\n\nexport type PanelProps = {\n id: string | symbol;\n anchorRef: RefObject<HTMLDivElement>;\n};\n\nexport const AppPanelDisplay = ({ anchorRef, id }: PanelProps) => {\n const {\n isOpen,\n isPinned,\n close,\n isAnimated,\n width: panelWidth,\n component: Component,\n opener,\n isExpanded,\n placement,\n } = useAppPanelInternal(id);\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const { height, width: appWidth } = useAppSize() || {};\n\n const wrapperStyle = useMemo<CSSProperties>(\n () => ({\n maxHeight: height
|
|
1
|
+
{"version":3,"file":"AppPanelDisplay.js","sources":["../../../../src/componentsV2/AppPanel/AppPanelDisplay.tsx"],"sourcesContent":["import { CSSProperties, RefObject, useMemo, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { useAppSize } from '../AppSizeProvider';\nimport { useOutsideClick } from '../../effects';\nimport { Paper } from '../Paper';\nimport { PopoverPanel } from '../PopoverPanel';\n\nimport { useAppPanelInternal } from './AppPanelsContext';\nimport { AppPanelIdProvider } from './AppPanelIdContext';\n\nimport styleConstants from '../AppContainer/AppContainer.constants.scss';\nimport styles from './AppPanelDisplay.scss';\n\nconst sidePadding = Number(styleConstants.sidePadding.replace(/[^.0-9]/g, ''));\n\nexport type PanelProps = {\n id: string | symbol;\n anchorRef: RefObject<HTMLDivElement>;\n};\n\nexport const AppPanelDisplay = ({ anchorRef, id }: PanelProps) => {\n const {\n isOpen,\n isPinned,\n close,\n isAnimated,\n width: panelWidth,\n component: Component,\n opener,\n isExpanded,\n placement,\n } = useAppPanelInternal(id);\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const { height, width: appWidth } = useAppSize() || {};\n\n const wrapperStyle = useMemo<CSSProperties>(\n () => ({\n maxHeight: `min(${height || 0}px, 100vh)`,\n maxWidth: appWidth ? appWidth - sidePadding * 2 : 0,\n width: isExpanded && appWidth ? appWidth - sidePadding * 2 : panelWidth,\n }),\n [appWidth, height, isExpanded, panelWidth]\n );\n\n useOutsideClick(popoverRef, close, [\n opener,\n // Do not react on clicks inside popovers/modals/autocomplete dropdowns, etc\n '[role=\"tooltip\"]',\n '[role=\"presentation\"]',\n ]);\n\n if (!Component) {\n return null;\n }\n\n return (\n <AppPanelIdProvider value={id}>\n {anchorRef.current && !isPinned && (\n <PopoverPanel\n flip={false}\n ref={popoverRef}\n open={isOpen}\n placement={placement === 'start' ? 'bottom-start' : 'bottom-end'}\n anchorEl={anchorRef.current}\n onClose={close}\n className={styles.popover}\n preventScroll={false}\n backdrop={false}\n animate={isAnimated}\n style={wrapperStyle}\n preventOverflow={true}\n >\n <Component />\n </PopoverPanel>\n )}\n\n {isPinned && (\n <Paper\n className={classNames(\n styles.pinned,\n placement === 'start' ? styles.pinnedStart : styles.pinnedEnd\n )}\n style={wrapperStyle}\n >\n <Component />\n </Paper>\n )}\n </AppPanelIdProvider>\n );\n};\n"],"names":["sidePadding","Number","styleConstants","replace","_ref","anchorRef","id","useAppPanelInternal","isOpen","isPinned","close","isAnimated","panelWidth","width","Component","component","opener","isExpanded","placement","popoverRef","useRef","_ref2","useAppSize","height","appWidth","wrapperStyle","useMemo","maxHeight","maxWidth","useOutsideClick","_jsxs","AppPanelIdProvider","value","children","current","_jsx","PopoverPanel","flip","ref","open","anchorEl","onClose","className","styles","popover","preventScroll","backdrop","animate","style","preventOverflow","jsx","Paper","classNames","pinned","pinnedStart","pinnedEnd"],"mappings":"g1EAcMA,EAAcC,OAAOC,EAAeF,YAAYG,QAAQ,WAAY,6BAO3C,SAAmCC,GAAA,IAAhCC,IAAAA,UAAWC,IAAAA,GAWvCC,EAAAA,EAAmBA,oBAACD,GATtBE,IAAAA,OACAC,IAAAA,SACAC,IAAAA,MACAC,IAAAA,WACOC,IAAPC,MACWC,IAAXC,UACAC,IAAAA,OACAC,IAAAA,WACAC,IAAAA,UAEIC,EAAaC,SAAuB,MAE1CC,EAAoCC,EAAUA,cAAM,CAAE,EAA9CC,IAAAA,OAAeC,IAAPX,MAEVY,EAAeC,EAAAA,SACnB,WAAA,MAAO,CACLC,UAAkBJ,OAAAA,OAAAA,GAAU,EAAa,cACzCK,SAAUJ,EAAWA,EAAyB,EAAdxB,EAAkB,EAClDa,MAAOI,GAAcO,EAAWA,EAAyB,EAAdxB,EAAkBY,EAC7D,GACF,CAACY,EAAUD,EAAQN,EAAYL,IAUjC,OAPAiB,EAAgBV,EAAYT,EAAO,CACjCM,EAEA,mBACA,0BAGGF,EAKHgB,EAAAA,KAACC,EAAAA,mBAAkB,CAACC,MAAO1B,EAAG2B,SAC3B5B,CAAAA,EAAU6B,UAAYzB,GACrB0B,MAACC,eAAY,CACXC,MAAM,EACNC,IAAKnB,EACLoB,KAAM/B,EACNU,UAAyB,UAAdA,EAAwB,eAAiB,aACpDsB,SAAUnC,EAAU6B,QACpBO,QAAS/B,EACTgC,UAAWC,EAAOC,QAClBC,eAAe,EACfC,UAAU,EACVC,QAASpC,EACTqC,MAAOvB,EACPwB,iBAAiB,EAAKhB,SAEtBE,EAAAA,IAACrB,EAAS,MAIbL,GACC0B,EAAAe,IAACC,QAAK,CACJT,UAAWU,EAAAA,QACTT,EAAOU,OACO,UAAdnC,EAAwByB,EAAOW,YAAcX,EAAOY,WAEtDP,MAAOvB,EAAaQ,SAEpBE,EAAAA,IAACrB,EAAS,SAhCT,IAqCX"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("@babel/runtime/helpers/defineProperty"),e=require("@babel/runtime/helpers/slicedToArray"),o=require("react"),n=require("classnames"),c=require("moment-timezone"),r=require("lodash"),i=require("../../TextInputNext/TextInputNext.js"),t=require("../../Text/Text.js"),u=require("../../ToggleButtons/ToggleButtons.js"),a=require("../utils.js"),l=require("../../Button/Button.js"),m=require("./TimePicker.scss.js"),d=require("../../../icons/iconParkIcons.js");require("../../../icons/customIcons/icons/AddMessage.js"),require("../../../icons/customIcons/icons/DragOne.js"),require("../../../icons/customIcons/icons/Attention.js"),require("../../../icons/customIcons/icons/Collapse.js"),require("../../../icons/customIcons/icons/Dashboard.js"),require("../../../icons/customIcons/icons/Expand.js"),require("../../../icons/customIcons/icons/FolderClosed.js"),require("../../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../../icons/customIcons/icons/FolderOpened.js"),require("../../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../../icons/customIcons/icons/LessOrEqual.js"),require("../../../icons/customIcons/icons/Search.js"),require("../../../icons/customIcons/icons/SearchOne.js"),require("../../../icons/customIcons/icons/Wellhub.js"),require("../../../icons/customIcons/icons/MultiRuler.js"),require("../../../icons/customIcons/icons/Checkbox.js"),require("../../../icons/customIcons/icons/CheckboxChecked.js"),require("../../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../../icons/customIcons/icons/Radio.js"),require("../../../icons/customIcons/icons/RadioChecked.js"),require("../../../icons/customIcons/icons/SimulFrac.js"),require("../../../icons/customIcons/icons/ZipperFrac.js"),require("../../../icons/customIcons/icons/CautionFilled.js"),require("../../../icons/customIcons/icons/InfoRounded.js"),require("../../../icons/customIcons/icons/FlameFilled.js"),require("../../../icons/customIcons/icons/MoreApp.js"),require("../../../icons/customIcons/icons/Pad.js"),require("../../../icons/customIcons/icons/DrilloutUnit.js"),require("../../../icons/customIcons/icons/FracFleet.js"),require("../../../icons/customIcons/icons/Global.js"),require("../../../icons/customIcons/icons/Program.js"),require("../../../icons/customIcons/icons/Rig.js"),require("../../../icons/customIcons/icons/Well.js"),require("../../../icons/customIcons/icons/Gap.js"),require("../../../icons/customIcons/icons/Pin.js"),require("../../../icons/customIcons/icons/PinOne.js"),require("../../../icons/customIcons/icons/PinOneCrossed.js"),require("../../../icons/customIcons/icons/CloseOneFilled.js"),require("../../../icons/customIcons/icons/AttentionFilled.js"),require("../../../icons/customIcons/icons/CheckOneFilled.js"),require("../../../icons/customIcons/icons/Archive.js"),require("../../../icons/customIcons/icons/ArchiveCancel.js"),require("../../../icons/customIcons/icons/Unarchive.js"),require("../../../icons/customIcons/icons/Archived.js"),require("../../../icons/customIcons/icons/InterventionUnit.js"),require("../../../icons/customIcons/icons/CloudDelete.js"),require("../../../icons/customIcons/icons/Lasso.js"),require("../../../icons/customIcons/icons/Radius.js"),require("../../../icons/customIcons/icons/ErrorOps.js"),require("../../../icons/customIcons/icons/DataTypeOps.js"),require("../../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../../icons/customIcons/icons/CalibrationOps.js"),require("../../../icons/customIcons/icons/CriticalOps.js"),require("../../../icons/customIcons/icons/Company.js"),require("../../../icons/customIcons/icons/ArchiveOne.js"),require("../../../icons/customIcons/icons/ParseBotFusion.js"),require("../../../icons/customIcons/icons/Connect.js"),require("../../../icons/customIcons/icons/PuzzleOne.js"),require("../../../icons/customIcons/icons/Feed.js"),require("../../../icons/customIcons/icons/Prompt.js"),require("../../../icons/customIcons/icons/Companies.js"),require("../../../icons/customIcons/icons/ClipboardAi.js"),require("../../../icons/customIcons/icons/Key.js"),require("../../../icons/customIcons/icons/AtSignCrossed.js"),require("../../../icons/customIcons/icons/MappingManual.js"),require("../../../icons/customIcons/icons/Mapping.js"),require("../../../icons/customIcons/icons/Metrics.js"),require("../../../icons/customIcons/icons/Drops.js"),require("../../../icons/customIcons/icons/ClipboardSearch.js"),require("../../../icons/customIcons/icons/Template.js"),require("../../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../../icons/customIcons/icons/UnitConversion.js"),require("../../../icons/customIcons/icons/NPT.js"),require("../../../icons/customIcons/icons/GuidedFrac.js");var j=require("react/jsx-runtime");function q(s){return s&&"object"==typeof s&&"default"in s?s:{default:s}}var I=q(s),p=q(e),f=q(n),h=q(c);function v(s,e){var o=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable}))),o.push.apply(o,n)}return o}function b(s){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?v(Object(o),!0).forEach((function(e){I.default(s,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(o)):v(Object(o)).forEach((function(e){Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(o,e))}))}return s}var g=[{value:"am",label:"AM"},{value:"pm",label:"PM"}],C=function(s){return s.replace(/[^\d]/g,"").substring(0,2)},x=function(s){return Number(s)>=0&&Number(s)<=12},O=function(s){return Number(s)>=0&&Number(s)<60},y=O,T=function(s){return s.getTime()-h.default(s).startOf("day").toDate().getTime()},N=function(s){return void 0!==s?r.padStart(String(s),2,"0"):""},P=function(s){return"12"===s?"00":s};exports.TimePicker=function(s){var e=s.value,n=s.onChange,c=s.minDate,r=s.maxDate,q=s.saveTime,I=s.goToToday,v=s.clear,D=!e,F=o.useRef(null),k=o.useRef(null),S=o.useRef(null),M=o.useRef(),A=o.useMemo((function(){var s=e?T(e)>=432e5?"pm":"am":void 0,o="pm"===s?12:0,n=e?e.getHours()-o:void 0;return{hours:N(void 0!==n&&
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("@babel/runtime/helpers/defineProperty"),e=require("@babel/runtime/helpers/slicedToArray"),o=require("react"),n=require("classnames"),c=require("moment-timezone"),r=require("lodash"),i=require("../../TextInputNext/TextInputNext.js"),t=require("../../Text/Text.js"),u=require("../../ToggleButtons/ToggleButtons.js"),a=require("../utils.js"),l=require("../../Button/Button.js"),m=require("./TimePicker.scss.js"),d=require("../../../icons/iconParkIcons.js");require("../../../icons/customIcons/icons/AddMessage.js"),require("../../../icons/customIcons/icons/DragOne.js"),require("../../../icons/customIcons/icons/Attention.js"),require("../../../icons/customIcons/icons/Collapse.js"),require("../../../icons/customIcons/icons/Dashboard.js"),require("../../../icons/customIcons/icons/Expand.js"),require("../../../icons/customIcons/icons/FolderClosed.js"),require("../../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../../icons/customIcons/icons/FolderOpened.js"),require("../../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../../icons/customIcons/icons/LessOrEqual.js"),require("../../../icons/customIcons/icons/Search.js"),require("../../../icons/customIcons/icons/SearchOne.js"),require("../../../icons/customIcons/icons/Wellhub.js"),require("../../../icons/customIcons/icons/MultiRuler.js"),require("../../../icons/customIcons/icons/Checkbox.js"),require("../../../icons/customIcons/icons/CheckboxChecked.js"),require("../../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../../icons/customIcons/icons/Radio.js"),require("../../../icons/customIcons/icons/RadioChecked.js"),require("../../../icons/customIcons/icons/SimulFrac.js"),require("../../../icons/customIcons/icons/ZipperFrac.js"),require("../../../icons/customIcons/icons/CautionFilled.js"),require("../../../icons/customIcons/icons/InfoRounded.js"),require("../../../icons/customIcons/icons/FlameFilled.js"),require("../../../icons/customIcons/icons/MoreApp.js"),require("../../../icons/customIcons/icons/Pad.js"),require("../../../icons/customIcons/icons/DrilloutUnit.js"),require("../../../icons/customIcons/icons/FracFleet.js"),require("../../../icons/customIcons/icons/Global.js"),require("../../../icons/customIcons/icons/Program.js"),require("../../../icons/customIcons/icons/Rig.js"),require("../../../icons/customIcons/icons/Well.js"),require("../../../icons/customIcons/icons/Gap.js"),require("../../../icons/customIcons/icons/Pin.js"),require("../../../icons/customIcons/icons/PinOne.js"),require("../../../icons/customIcons/icons/PinOneCrossed.js"),require("../../../icons/customIcons/icons/CloseOneFilled.js"),require("../../../icons/customIcons/icons/AttentionFilled.js"),require("../../../icons/customIcons/icons/CheckOneFilled.js"),require("../../../icons/customIcons/icons/Archive.js"),require("../../../icons/customIcons/icons/ArchiveCancel.js"),require("../../../icons/customIcons/icons/Unarchive.js"),require("../../../icons/customIcons/icons/Archived.js"),require("../../../icons/customIcons/icons/InterventionUnit.js"),require("../../../icons/customIcons/icons/CloudDelete.js"),require("../../../icons/customIcons/icons/Lasso.js"),require("../../../icons/customIcons/icons/Radius.js"),require("../../../icons/customIcons/icons/ErrorOps.js"),require("../../../icons/customIcons/icons/DataTypeOps.js"),require("../../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../../icons/customIcons/icons/CalibrationOps.js"),require("../../../icons/customIcons/icons/CriticalOps.js"),require("../../../icons/customIcons/icons/Company.js"),require("../../../icons/customIcons/icons/ArchiveOne.js"),require("../../../icons/customIcons/icons/ParseBotFusion.js"),require("../../../icons/customIcons/icons/Connect.js"),require("../../../icons/customIcons/icons/PuzzleOne.js"),require("../../../icons/customIcons/icons/Feed.js"),require("../../../icons/customIcons/icons/Prompt.js"),require("../../../icons/customIcons/icons/Companies.js"),require("../../../icons/customIcons/icons/ClipboardAi.js"),require("../../../icons/customIcons/icons/Key.js"),require("../../../icons/customIcons/icons/AtSignCrossed.js"),require("../../../icons/customIcons/icons/MappingManual.js"),require("../../../icons/customIcons/icons/Mapping.js"),require("../../../icons/customIcons/icons/Metrics.js"),require("../../../icons/customIcons/icons/Drops.js"),require("../../../icons/customIcons/icons/ClipboardSearch.js"),require("../../../icons/customIcons/icons/Template.js"),require("../../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../../icons/customIcons/icons/UnitConversion.js"),require("../../../icons/customIcons/icons/NPT.js"),require("../../../icons/customIcons/icons/GuidedFrac.js");var j=require("react/jsx-runtime");function q(s){return s&&"object"==typeof s&&"default"in s?s:{default:s}}var I=q(s),p=q(e),f=q(n),h=q(c);function v(s,e){var o=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable}))),o.push.apply(o,n)}return o}function b(s){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?v(Object(o),!0).forEach((function(e){I.default(s,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(o)):v(Object(o)).forEach((function(e){Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(o,e))}))}return s}var g=[{value:"am",label:"AM"},{value:"pm",label:"PM"}],C=function(s){return s.replace(/[^\d]/g,"").substring(0,2)},x=function(s){return Number(s)>=0&&Number(s)<=12},O=function(s){return Number(s)>=0&&Number(s)<60},y=O,T=function(s){return s.getTime()-h.default(s).startOf("day").toDate().getTime()},N=function(s){return void 0!==s?r.padStart(String(s),2,"0"):""},P=function(s){return"12"===s?"00":s};exports.TimePicker=function(s){var e=s.value,n=s.onChange,c=s.minDate,r=s.maxDate,q=s.saveTime,I=s.goToToday,v=s.clear,D=!e,F=o.useRef(null),k=o.useRef(null),S=o.useRef(null),M=o.useRef(),A=o.useMemo((function(){var s=e?T(e)>=432e5?"pm":"am":void 0,o="pm"===s?12:0,n=e?e.getHours()-o:void 0;return{hours:N(void 0!==n&&12===n?0:n),minutes:N(null==e?void 0:e.getMinutes()),seconds:N(null==e?void 0:e.getSeconds()),partOfDay:s}}),[e]),B=o.useState(A.hours),R=p.default(B,2),z=R[0],w=R[1],E=o.useState(A.minutes),H=p.default(E,2),G=H[0],U=H[1],L=o.useState(A.seconds),W=p.default(L,2),_=W[0],K=W[1];o.useEffect((function(){M.current!==F.current&&w(A.hours),M.current!==k.current&&U(A.minutes),M.current!==S.current&&K(A.seconds)}),[A.hours,A.minutes,A.seconds]);var Z=o.useMemo((function(){var s=a.isSameDay(c,e)&&h.default(c).format("hh:mm:ss A"),o=a.isSameDay(r,e)&&h.default(r).format("hh:mm:ss A");return s&&o?"In ".concat(s," - ").concat(o," range"):s?"Can’t be earlier than ".concat(s):o?"Can’t be later than ".concat(o):void 0}),[r,c,e]),J=o.useMemo((function(){return g.map((function(s){var o="am"===s.value&&!!c&&a.isSameDay(e,c)&&T(c)>=432e5,n="pm"===s.value&&!!r&&a.isSameDay(e,r)&&T(r)<432e5;return b(b({},s),{},{disabled:D||o||n})}))}),[D,r,c,e]),Q=o.useCallback((function(s,o){if(e){var c=new Date(e);if("hours"===s&&x(o)){var r="pm"===A.partOfDay?12:0;c.setHours(r+Number(o))}else if("minutes"===s&&O(o))c.setMinutes(Number(o));else if("seconds"===s&&y(o))c.setSeconds(Number(o));else if("partOfDay"===s&&("am"===o||"pm"===o)){var i=c.getHours()%12;c.setHours(("pm"===o?12:0)+i)}Math.floor(c.getTime()/1e3)!==Math.floor(e.getTime()/1e3)&&n(c)}}),[A.partOfDay,n,e]),V=o.useCallback((function(s){s.target.select(),M.current=s.target}),[]),X=o.useCallback((function(s){var e=C(s.target.value);if(s.target===F.current){var o=P(e),n=x(o)?N(o):A.hours;w(n),Q("hours",n)}if(s.target===k.current){var c=O(e)?N(e):A.minutes;U(c),Q("minutes",c)}if(s.target===S.current){var r=y(e)?N(e):A.seconds;K(r),Q("seconds",r)}M.current=void 0}),[A.hours,A.minutes,A.seconds,Q]),Y=o.useCallback((function(s){var e,o=C(s),n=P(o);(w(o),2===o.length&&x(o))&&(Q("hours",n),null===(e=k.current)||void 0===e||e.focus())}),[Q]),$=o.useCallback((function(s){var e,o=C(s);(U(o),2===o.length&&O(o))&&(Q("minutes",o),null===(e=S.current)||void 0===e||e.focus())}),[Q]),ss=o.useCallback((function(s){var e=C(s);K(e),y(e)&&Q("seconds",e)}),[Q]),es=o.useCallback((function(s){Q("partOfDay",s)}),[Q]),os=Number(null==e?void 0:e.getTime())>Number(null==r?void 0:r.getTime())||Number(null==e?void 0:e.getTime())<Number(null==c?void 0:c.getTime()),ns=!x(z)||os,cs=!O(G)||os,rs=!y(_)||os;return j.jsxs(j.Fragment,{children:[j.jsxs("div",{className:f.default(m.timePicker),children:[j.jsxs(t.Text,{className:m.header,size:14,children:[j.jsx("span",{className:f.default(m.headerText,D&&m.disabled),children:"Time"}),Z&&j.jsxs(j.Fragment,{children:[j.jsx(d.InfoIcon,{className:m.constraintIcon,size:16}),Z]})]}),j.jsx(i.TextInputNext,{placeholder:"HH",className:m.input,disabled:D,value:z,onChange:Y,status:ns?"error":void 0,inputRef:F,onFocus:V,onBlur:X}),j.jsx(t.Text,{color:"T9",size:14,children:":"}),j.jsx(i.TextInputNext,{placeholder:"MM",className:m.input,disabled:D,value:G,onChange:$,status:cs?"error":void 0,inputRef:k,onFocus:V,onBlur:X}),j.jsx(t.Text,{color:"T9",size:14,children:":"}),j.jsx(i.TextInputNext,{placeholder:"SS",className:m.input,disabled:D,value:_,onChange:ss,status:rs?"error":void 0,inputRef:S,onFocus:V,onBlur:X}),j.jsx(u.ToggleButtons,{options:J,className:m.tabs,size:"small",value:A.partOfDay,onChange:es})]}),j.jsxs("div",{className:m.footer,children:[I&&j.jsx(l.Button,{onClick:I,type:"tertiary",size:"small",children:"Today"}),j.jsxs("div",{className:m.actions,children:[v&&j.jsx(l.Button,{onClick:v,type:"tertiary",size:"small",disabled:!e,children:"Clear"}),j.jsx(l.Button,{onClick:q,type:"secondary",size:"small",disabled:!e||ns||cs||rs,children:"Save"})]})]})]})};
|
|
2
2
|
//# sourceMappingURL=TimePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.js","sources":["../../../../../src/componentsV2/DatePicker/TimePicker/TimePicker.tsx"],"sourcesContent":["import { FocusEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport moment from 'moment-timezone';\nimport { padStart } from 'lodash';\n\nimport { TextInputNext } from '../../TextInputNext';\nimport { Text } from '../../Text';\nimport { ToggleButtons } from '../../ToggleButtons';\nimport { isSameDay } from '../utils';\nimport { Button } from '../../Button';\n\nimport styles from './TimePicker.scss';\n\nimport { InfoIcon } from '~/icons';\n\ntype AmPm = 'am' | 'pm';\n\nconst HalfOfDayMs = 12 * 60 * 60 * 1000;\n\nconst ToggleButtonsOptions: { value: AmPm; label: string }[] = [\n { value: 'am', label: 'AM' },\n { value: 'pm', label: 'PM' },\n];\n\nexport type TimePickerProps = {\n value?: Date;\n onChange: (date: Date) => void;\n saveTime: () => void;\n maxDate?: Date;\n minDate?: Date;\n\n goToToday?: () => void;\n clear?: () => void;\n};\n\nconst sanitize = (value: string) => value.replace(/[^\\d]/g, '').substring(0, 2);\nconst validateHours = (value?: string) => Number(value) >= 0 && Number(value) <= 12;\nconst validateMinutes = (value?: string) => Number(value) >= 0 && Number(value) < 60;\nconst validateSeconds = validateMinutes;\n\nconst getOffsetFromDayStart = (date: Date) => {\n return date.getTime() - moment(date).startOf('day').toDate().getTime();\n};\n\nconst formatTimePart = (part?: string | number) =>\n part !== undefined ? padStart(String(part), 2, '0') : '';\n\nconst getPartOfDay = (date: Date) => {\n return getOffsetFromDayStart(date) >= HalfOfDayMs ? 'pm' : 'am';\n};\n\nconst getActualHours = (sanitized: string) => (sanitized === '12' ? '00' : sanitized);\n\nexport const TimePicker = ({\n value,\n onChange,\n minDate,\n maxDate,\n saveTime,\n goToToday,\n clear,\n}: TimePickerProps) => {\n const disabled = !value;\n\n const hoursInputRef = useRef<HTMLInputElement>(null);\n const minutesInputRef = useRef<HTMLInputElement>(null);\n const secondsInputRef = useRef<HTMLInputElement>(null);\n\n const focusedInputRef = useRef<HTMLInputElement>();\n\n const timeParts = useMemo(() => {\n const partOfDay = value ? getPartOfDay(value) : undefined;\n\n const hourOffset = partOfDay === 'pm' ? 12 : 0;\n\n const hours = value ? value.getHours() - hourOffset : undefined;\n\n const hoursAmPm = hours !== undefined && hours === 0 ? 12 : hours;\n\n return {\n hours: formatTimePart(hoursAmPm),\n minutes: formatTimePart(value?.getMinutes()),\n seconds: formatTimePart(value?.getSeconds()),\n partOfDay,\n };\n }, [value]);\n\n const [hours, setHours] = useState(timeParts.hours);\n const [minutes, setMinutes] = useState(timeParts.minutes);\n const [seconds, setSeconds] = useState(timeParts.seconds);\n\n useEffect(() => {\n if (focusedInputRef.current !== hoursInputRef.current) {\n setHours(timeParts.hours);\n }\n if (focusedInputRef.current !== minutesInputRef.current) {\n setMinutes(timeParts.minutes);\n }\n if (focusedInputRef.current !== secondsInputRef.current) {\n setSeconds(timeParts.seconds);\n }\n }, [timeParts.hours, timeParts.minutes, timeParts.seconds]);\n\n const constraintText = useMemo(() => {\n const minValue = isSameDay(minDate, value) && moment(minDate).format('hh:mm:ss A');\n const maxValue = isSameDay(maxDate, value) && moment(maxDate).format('hh:mm:ss A');\n\n if (minValue && maxValue) {\n return `In ${minValue} - ${maxValue} range`;\n } else if (minValue) {\n return `Can’t be earlier than ${minValue}`;\n } else if (maxValue) {\n return `Can’t be later than ${maxValue}`;\n }\n return undefined;\n }, [maxDate, minDate, value]);\n\n const amPmOptions = useMemo(\n () =>\n ToggleButtonsOptions.map(item => {\n const isAmDisabled =\n item.value === 'am' &&\n !!minDate &&\n isSameDay(value, minDate) &&\n getOffsetFromDayStart(minDate) >= HalfOfDayMs;\n\n const isPmDisabled =\n item.value === 'pm' &&\n !!maxDate &&\n isSameDay(value, maxDate) &&\n getOffsetFromDayStart(maxDate) < HalfOfDayMs;\n\n return { ...item, disabled: disabled || isAmDisabled || isPmDisabled };\n }),\n [disabled, maxDate, minDate, value]\n );\n\n const updateValue = useCallback(\n (type: 'hours' | 'minutes' | 'seconds' | 'partOfDay', newValue: string) => {\n if (!value) {\n return;\n }\n\n const newDate = new Date(value);\n\n if (type === 'hours' && validateHours(newValue)) {\n const partOfDayOffset = timeParts.partOfDay === 'pm' ? 12 : 0;\n newDate.setHours(partOfDayOffset + Number(newValue));\n } else if (type === 'minutes' && validateMinutes(newValue)) {\n newDate.setMinutes(Number(newValue));\n } else if (type === 'seconds' && validateSeconds(newValue)) {\n newDate.setSeconds(Number(newValue));\n } else if (type === 'partOfDay' && (newValue === 'am' || newValue === 'pm')) {\n const hoursOffset = newDate.getHours() % 12;\n newDate.setHours((newValue === 'pm' ? 12 : 0) + hoursOffset);\n }\n\n if (Math.floor(newDate.getTime() / 1000) !== Math.floor(value.getTime() / 1000)) {\n onChange(newDate);\n }\n },\n [timeParts.partOfDay, onChange, value]\n );\n\n const onFieldFocus = useCallback<FocusEventHandler<HTMLInputElement>>(e => {\n e.target.select();\n focusedInputRef.current = e.target;\n }, []);\n\n const onFieldBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n e => {\n const fieldValue = sanitize(e.target.value);\n\n if (e.target === hoursInputRef.current) {\n const actualHours = getActualHours(fieldValue);\n const newHours = validateHours(actualHours) ? formatTimePart(actualHours) : timeParts.hours;\n setHours(newHours);\n updateValue('hours', newHours);\n }\n if (e.target === minutesInputRef.current) {\n const newMinutes = validateMinutes(fieldValue)\n ? formatTimePart(fieldValue)\n : timeParts.minutes;\n setMinutes(newMinutes);\n updateValue('minutes', newMinutes);\n }\n if (e.target === secondsInputRef.current) {\n const newSeconds = validateSeconds(fieldValue)\n ? formatTimePart(fieldValue)\n : timeParts.seconds;\n setSeconds(newSeconds);\n updateValue('seconds', newSeconds);\n }\n\n focusedInputRef.current = undefined;\n },\n [timeParts.hours, timeParts.minutes, timeParts.seconds, updateValue]\n );\n\n const onChangeHours = useCallback(\n (newValue: string) => {\n const sanitized = sanitize(newValue);\n const actualHours = getActualHours(sanitized);\n setHours(sanitized);\n if (sanitized.length === 2 && validateHours(sanitized)) {\n updateValue('hours', actualHours);\n minutesInputRef.current?.focus();\n }\n },\n [updateValue]\n );\n\n const onChangeMinutes = useCallback(\n (newValue: string) => {\n const sanitized = sanitize(newValue);\n setMinutes(sanitized);\n if (sanitized.length === 2 && validateMinutes(sanitized)) {\n updateValue('minutes', sanitized);\n secondsInputRef.current?.focus();\n }\n },\n [updateValue]\n );\n\n const onChangeSeconds = useCallback(\n (newValue: string) => {\n const sanitized = sanitize(newValue);\n setSeconds(sanitized);\n if (validateSeconds(sanitized)) {\n updateValue('seconds', sanitized);\n }\n },\n [updateValue]\n );\n\n const setPartOfDay = useCallback(\n (newValue: string) => {\n updateValue('partOfDay', newValue);\n },\n [updateValue]\n );\n\n const outOfBounds =\n Number(value?.getTime()) > Number(maxDate?.getTime()) ||\n Number(value?.getTime()) < Number(minDate?.getTime());\n\n const hoursInvalid = !validateHours(hours) || outOfBounds;\n const minutesInvalid = !validateMinutes(minutes) || outOfBounds;\n const secondsInvalid = !validateSeconds(seconds) || outOfBounds;\n\n return (\n <>\n <div className={classNames(styles.timePicker)}>\n <Text className={styles.header} size={14}>\n <span className={classNames(styles.headerText, disabled && styles.disabled)}>Time</span>\n {constraintText && (\n <>\n <InfoIcon className={styles.constraintIcon} size={16} />\n {constraintText}\n </>\n )}\n </Text>\n\n <TextInputNext\n placeholder=\"HH\"\n className={styles.input}\n disabled={disabled}\n value={hours}\n onChange={onChangeHours}\n status={hoursInvalid ? 'error' : undefined}\n inputRef={hoursInputRef}\n onFocus={onFieldFocus}\n onBlur={onFieldBlur}\n />\n\n <Text color=\"T9\" size={14}>\n :\n </Text>\n\n <TextInputNext\n placeholder=\"MM\"\n className={styles.input}\n disabled={disabled}\n value={minutes}\n onChange={onChangeMinutes}\n status={minutesInvalid ? 'error' : undefined}\n inputRef={minutesInputRef}\n onFocus={onFieldFocus}\n onBlur={onFieldBlur}\n />\n\n <Text color=\"T9\" size={14}>\n :\n </Text>\n\n <TextInputNext\n placeholder=\"SS\"\n className={styles.input}\n disabled={disabled}\n value={seconds}\n onChange={onChangeSeconds}\n status={secondsInvalid ? 'error' : undefined}\n inputRef={secondsInputRef}\n onFocus={onFieldFocus}\n onBlur={onFieldBlur}\n />\n\n <ToggleButtons\n options={amPmOptions}\n className={styles.tabs}\n size=\"small\"\n value={timeParts.partOfDay}\n onChange={setPartOfDay}\n />\n </div>\n <div className={styles.footer}>\n {goToToday && (\n <Button onClick={goToToday} type=\"tertiary\" size=\"small\">\n Today\n </Button>\n )}\n\n <div className={styles.actions}>\n {clear && (\n <Button onClick={clear} type=\"tertiary\" size=\"small\" disabled={!value}>\n Clear\n </Button>\n )}\n\n <Button\n onClick={saveTime}\n type=\"secondary\"\n size=\"small\"\n disabled={!value || hoursInvalid || minutesInvalid || secondsInvalid}\n >\n Save\n </Button>\n </div>\n </div>\n </>\n );\n};\n"],"names":["ToggleButtonsOptions","value","label","sanitize","replace","substring","validateHours","Number","validateMinutes","validateSeconds","getOffsetFromDayStart","date","getTime","moment","startOf","toDate","formatTimePart","part","undefined","padStart","String","getActualHours","sanitized","_ref","onChange","minDate","maxDate","saveTime","goToToday","clear","disabled","hoursInputRef","useRef","minutesInputRef","secondsInputRef","focusedInputRef","timeParts","useMemo","partOfDay","hourOffset","hours","getHours","minutes","getMinutes","seconds","getSeconds","_useState","useState","_useState2","_slicedToArray","setHours","_useState3","_useState4","setMinutes","_useState5","_useState6","setSeconds","useEffect","current","constraintText","minValue","isSameDay","format","maxValue","concat","amPmOptions","map","item","isAmDisabled","isPmDisabled","_objectSpread","updateValue","useCallback","type","newValue","newDate","Date","partOfDayOffset","hoursOffset","Math","floor","onFieldFocus","e","target","select","onFieldBlur","fieldValue","actualHours","newHours","newMinutes","newSeconds","onChangeHours","_minutesInputRef$curr","length","focus","onChangeMinutes","_secondsInputRef$curr","onChangeSeconds","setPartOfDay","outOfBounds","hoursInvalid","minutesInvalid","secondsInvalid","_jsxs","_Fragment","children","jsxs","className","classNames","styles","timePicker","Text","header","size","_jsx","jsx","headerText","InfoIcon","constraintIcon","TextInputNext","placeholder","input","status","inputRef","onFocus","onBlur","color","ToggleButtons","options","tabs","footer","Button","onClick","actions"],"mappings":"+8KAiBA,IAEMA,EAAyD,CAC7D,CAAEC,MAAO,KAAMC,MAAO,MACtB,CAAED,MAAO,KAAMC,MAAO,OAclBC,EAAW,SAACF,GAAa,OAAKA,EAAMG,QAAQ,SAAU,IAAIC,UAAU,EAAG,EAAE,EACzEC,EAAgB,SAACL,GAAc,OAAKM,OAAON,IAAU,GAAKM,OAAON,IAAU,EAAE,EAC7EO,EAAkB,SAACP,GAAc,OAAKM,OAAON,IAAU,GAAKM,OAAON,GAAS,EAAE,EAC9EQ,EAAkBD,EAElBE,EAAwB,SAACC,GAC7B,OAAOA,EAAKC,UAAYC,EAAAA,QAAOF,GAAMG,QAAQ,OAAOC,SAASH,SAC/D,EAEMI,EAAiB,SAACC,GAAsB,YACnCC,IAATD,EAAqBE,EAAAA,SAASC,OAAOH,GAAO,EAAG,KAAO,EAAE,EAMpDI,EAAiB,SAACC,GAAiB,MAAoB,OAAdA,EAAqB,KAAOA,CAAS,qBAE1D,SAQHC,GAAA,IAPrBtB,IAAAA,MACAuB,IAAAA,SACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,MAEMC,GAAY7B,EAEZ8B,EAAgBC,SAAyB,MACzCC,EAAkBD,SAAyB,MAC3CE,EAAkBF,SAAyB,MAE3CG,EAAkBH,EAAAA,SAElBI,EAAYC,EAAAA,SAAQ,WACxB,IAAMC,EAAYrC,EAvBbS,EAuBkCT,IAtDvB,MA+BkC,KAAO,UAuBTiB,EAE1CqB,EAA2B,OAAdD,EAAqB,GAAK,EAEvCE,EAAQvC,EAAQA,EAAMwC,WAAaF,OAAarB,EAItD,MAAO,CACLsB,MAAOxB,OAHmBE,IAAVsB,GAAiC,IAAVA,EAAc,GAAKA,GAI1DE,QAAS1B,EAAef,aAAK,EAALA,EAAO0C,cAC/BC,QAAS5B,EAAef,aAAK,EAALA,EAAO4C,cAC/BP,UAAAA,EAEJ,GAAG,CAACrC,IAEJ6C,EAA0BC,EAAAA,SAASX,EAAUI,OAAMQ,EAAAC,EAAAA,QAAAH,EAAA,GAA5CN,EAAKQ,EAAA,GAAEE,EAAQF,EAAA,GACtBG,EAA8BJ,EAAAA,SAASX,EAAUM,SAAQU,EAAAH,EAAAA,QAAAE,EAAA,GAAlDT,EAAOU,EAAA,GAAEC,EAAUD,EAAA,GAC1BE,EAA8BP,EAAAA,SAASX,EAAUQ,SAAQW,EAAAN,EAAAA,QAAAK,EAAA,GAAlDV,EAAOW,EAAA,GAAEC,EAAUD,EAAA,GAE1BE,EAAAA,WAAU,WACJtB,EAAgBuB,UAAY3B,EAAc2B,SAC5CR,EAASd,EAAUI,OAEjBL,EAAgBuB,UAAYzB,EAAgByB,SAC9CL,EAAWjB,EAAUM,SAEnBP,EAAgBuB,UAAYxB,EAAgBwB,SAC9CF,EAAWpB,EAAUQ,QAEzB,GAAG,CAACR,EAAUI,MAAOJ,EAAUM,QAASN,EAAUQ,UAElD,IAAMe,EAAiBtB,EAAAA,SAAQ,WAC7B,IAAMuB,EAAWC,YAAUpC,EAASxB,IAAUY,EAAM,QAACY,GAASqC,OAAO,cAC/DC,EAAWF,YAAUnC,EAASzB,IAAUY,EAAM,QAACa,GAASoC,OAAO,cAErE,OAAIF,GAAYG,EACDH,MAAAA,OAAAA,gBAAcG,EAAQ,UAC1BH,EACT,yBAAAI,OAAgCJ,GACvBG,EACT,uBAAAC,OAA8BD,QADzB,CAIR,GAAE,CAACrC,EAASD,EAASxB,IAEhBgE,EAAc5B,EAAAA,SAClB,WAAA,OACErC,EAAqBkE,KAAI,SAAAC,GACvB,IAAMC,EACW,OAAfD,EAAKlE,SACHwB,GACFoC,YAAU5D,EAAOwB,IACjBf,EAAsBe,IA3GZ,MA6GN4C,EACW,OAAfF,EAAKlE,SACHyB,GACFmC,YAAU5D,EAAOyB,IACjBhB,EAAsBgB,GAjHZ,MAmHZ,OAAA4C,EAAAA,EAAA,CAAA,EAAYH,GAAI,CAAA,EAAA,CAAErC,SAAUA,GAAYsC,GAAgBC,GAC1D,GACF,GAAA,CAACvC,EAAUJ,EAASD,EAASxB,IAGzBsE,EAAcC,EAAAA,aAClB,SAACC,EAAqDC,GACpD,GAAKzE,EAAL,CAIA,IAAM0E,EAAU,IAAIC,KAAK3E,GAEzB,GAAa,UAATwE,GAAoBnE,EAAcoE,GAAW,CAC/C,IAAMG,EAA0C,OAAxBzC,EAAUE,UAAqB,GAAK,EAC5DqC,EAAQzB,SAAS2B,EAAkBtE,OAAOmE,GAC3C,MAAM,GAAa,YAATD,GAAsBjE,EAAgBkE,GAC/CC,EAAQtB,WAAW9C,OAAOmE,SACrB,GAAa,YAATD,GAAsBhE,EAAgBiE,GAC/CC,EAAQnB,WAAWjD,OAAOmE,SACrB,GAAa,cAATD,IAAsC,OAAbC,GAAkC,OAAbA,GAAoB,CAC3E,IAAMI,EAAcH,EAAQlC,WAAa,GACzCkC,EAAQzB,UAAuB,OAAbwB,EAAoB,GAAK,GAAKI,EAClD,CAEIC,KAAKC,MAAML,EAAQ/D,UAAY,OAAUmE,KAAKC,MAAM/E,EAAMW,UAAY,MACxEY,EAASmD,EAjBX,CAmBD,GACD,CAACvC,EAAUE,UAAWd,EAAUvB,IAG5BgF,EAAeT,eAAiD,SAAAU,GACpEA,EAAEC,OAAOC,SACTjD,EAAgBuB,QAAUwB,EAAEC,MAC7B,GAAE,IAEGE,EAAcb,eAClB,SAAAU,GACE,IAAMI,EAAanF,EAAS+E,EAAEC,OAAOlF,OAErC,GAAIiF,EAAEC,SAAWpD,EAAc2B,QAAS,CACtC,IAAM6B,EAAclE,EAAeiE,GAC7BE,EAAWlF,EAAciF,GAAevE,EAAeuE,GAAenD,EAAUI,MACtFU,EAASsC,GACTjB,EAAY,QAASiB,EACvB,CACA,GAAIN,EAAEC,SAAWlD,EAAgByB,QAAS,CACxC,IAAM+B,EAAajF,EAAgB8E,GAC/BtE,EAAesE,GACflD,EAAUM,QACdW,EAAWoC,GACXlB,EAAY,UAAWkB,EACzB,CACA,GAAIP,EAAEC,SAAWjD,EAAgBwB,QAAS,CACxC,IAAMgC,EAAajF,EAAgB6E,GAC/BtE,EAAesE,GACflD,EAAUQ,QACdY,EAAWkC,GACXnB,EAAY,UAAWmB,EACzB,CAEAvD,EAAgBuB,aAAUxC,CAC5B,GACA,CAACkB,EAAUI,MAAOJ,EAAUM,QAASN,EAAUQ,QAAS2B,IAGpDoB,EAAgBnB,eACpB,SAACE,GACC,IAGwDkB,EAHlDtE,EAAYnB,EAASuE,GACrBa,EAAclE,EAAeC,IACnC4B,EAAS5B,GACgB,IAArBA,EAAUuE,QAAgBvF,EAAcgB,MAC1CiD,EAAY,QAASgB,GACrB,QAAAK,EAAA3D,EAAgByB,eAAhB,IAAAkC,GAAAA,EAAyBE,QAE7B,GACA,CAACvB,IAGGwB,EAAkBvB,eACtB,SAACE,GACC,IAE0DsB,EAFpD1E,EAAYnB,EAASuE,IAC3BrB,EAAW/B,GACc,IAArBA,EAAUuE,QAAgBrF,EAAgBc,MAC5CiD,EAAY,UAAWjD,GACvB,QAAA0E,EAAA9D,EAAgBwB,eAAhB,IAAAsC,GAAAA,EAAyBF,QAE7B,GACA,CAACvB,IAGG0B,GAAkBzB,eACtB,SAACE,GACC,IAAMpD,EAAYnB,EAASuE,GAC3BlB,EAAWlC,GACPb,EAAgBa,IAClBiD,EAAY,UAAWjD,EAE3B,GACA,CAACiD,IAGG2B,GAAe1B,eACnB,SAACE,GACCH,EAAY,YAAaG,EAC3B,GACA,CAACH,IAGG4B,GACJ5F,OAAON,aAAAA,EAAAA,EAAOW,WAAaL,OAAOmB,aAAO,EAAPA,EAASd,YAC3CL,OAAON,aAAAA,EAAAA,EAAOW,WAAaL,OAAOkB,eAAAA,EAASb,WAEvCwF,IAAgB9F,EAAckC,IAAU2D,GACxCE,IAAkB7F,EAAgBkC,IAAYyD,GAC9CG,IAAkB7F,EAAgBmC,IAAYuD,GAEpD,OACEI,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SACE,CAAAF,EAAAG,KAAA,MAAA,CAAKC,UAAWC,EAAAA,QAAWC,EAAOC,YAAYL,SAAA,CAC5CF,OAACQ,OAAI,CAACJ,UAAWE,EAAOG,OAAQC,KAAM,GAAGR,SACvC,CAAAS,EAAAC,IAAA,OAAA,CAAMR,UAAWC,EAAU,QAACC,EAAOO,WAAYtF,GAAY+E,EAAO/E,UAAU2E,SAAA,SAC3E9C,GACC4C,EAAAG,KAAAF,WAAA,CAAAC,SAAA,CACES,MAACG,WAAQ,CAACV,UAAWE,EAAOS,eAAgBL,KAAM,KACjDtD,QAKPuD,MAACK,gBAAa,CACZC,YAAY,KACZb,UAAWE,EAAOY,MAClB3F,SAAUA,EACV7B,MAAOuC,EACPhB,SAAUmE,EACV+B,OAAQtB,GAAe,aAAUlF,EACjCyG,SAAU5F,EACV6F,QAAS3C,EACT4C,OAAQxC,IAGV6B,MAACH,OAAI,CAACe,MAAM,KAAKb,KAAM,GAAGR,SAAA,MAI1BS,MAACK,gBAAa,CACZC,YAAY,KACZb,UAAWE,EAAOY,MAClB3F,SAAUA,EACV7B,MAAOyC,EACPlB,SAAUuE,EACV2B,OAAQrB,GAAiB,aAAUnF,EACnCyG,SAAU1F,EACV2F,QAAS3C,EACT4C,OAAQxC,IAGV6B,MAACH,OAAI,CAACe,MAAM,KAAKb,KAAM,GAAGR,SAAA,MAI1BS,MAACK,gBAAa,CACZC,YAAY,KACZb,UAAWE,EAAOY,MAClB3F,SAAUA,EACV7B,MAAO2C,EACPpB,SAAUyE,GACVyB,OAAQpB,GAAiB,aAAUpF,EACnCyG,SAAUzF,EACV0F,QAAS3C,EACT4C,OAAQxC,IAGV6B,MAACa,gBAAa,CACZC,QAAS/D,EACT0C,UAAWE,EAAOoB,KAClBhB,KAAK,QACLhH,MAAOmC,EAAUE,UACjBd,SAAU0E,QAGdK,EAAAG,KAAA,MAAA,CAAKC,UAAWE,EAAOqB,OAAOzB,SAC3B7E,CAAAA,GACCsF,EAAAC,IAACgB,SAAM,CAACC,QAASxG,EAAW6C,KAAK,WAAWwC,KAAK,QAAOR,SAAA,UAK1DF,EAAAG,KAAA,MAAA,CAAKC,UAAWE,EAAOwB,QAAQ5B,SAC5B5E,CAAAA,GACCqF,EAAAC,IAACgB,SAAM,CAACC,QAASvG,EAAO4C,KAAK,WAAWwC,KAAK,QAAQnF,UAAW7B,EAAMwG,SAAA,UAKxES,MAACiB,SAAM,CACLC,QAASzG,EACT8C,KAAK,YACLwC,KAAK,QACLnF,UAAW7B,GAASmG,IAAgBC,IAAkBC,GAAeG,SAAA,iBAQjF"}
|
|
1
|
+
{"version":3,"file":"TimePicker.js","sources":["../../../../../src/componentsV2/DatePicker/TimePicker/TimePicker.tsx"],"sourcesContent":["import { FocusEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport moment from 'moment-timezone';\nimport { padStart } from 'lodash';\n\nimport { TextInputNext } from '../../TextInputNext';\nimport { Text } from '../../Text';\nimport { ToggleButtons } from '../../ToggleButtons';\nimport { isSameDay } from '../utils';\nimport { Button } from '../../Button';\n\nimport styles from './TimePicker.scss';\n\nimport { InfoIcon } from '~/icons';\n\ntype AmPm = 'am' | 'pm';\n\nconst HalfOfDayMs = 12 * 60 * 60 * 1000;\n\nconst ToggleButtonsOptions: { value: AmPm; label: string }[] = [\n { value: 'am', label: 'AM' },\n { value: 'pm', label: 'PM' },\n];\n\nexport type TimePickerProps = {\n value?: Date;\n onChange: (date: Date) => void;\n saveTime: () => void;\n maxDate?: Date;\n minDate?: Date;\n\n goToToday?: () => void;\n clear?: () => void;\n};\n\nconst sanitize = (value: string) => value.replace(/[^\\d]/g, '').substring(0, 2);\nconst validateHours = (value?: string) => Number(value) >= 0 && Number(value) <= 12;\nconst validateMinutes = (value?: string) => Number(value) >= 0 && Number(value) < 60;\nconst validateSeconds = validateMinutes;\n\nconst getOffsetFromDayStart = (date: Date) => {\n return date.getTime() - moment(date).startOf('day').toDate().getTime();\n};\n\nconst formatTimePart = (part?: string | number) =>\n part !== undefined ? padStart(String(part), 2, '0') : '';\n\nconst getPartOfDay = (date: Date) => {\n return getOffsetFromDayStart(date) >= HalfOfDayMs ? 'pm' : 'am';\n};\n\nconst getActualHours = (sanitized: string) => (sanitized === '12' ? '00' : sanitized);\n\nexport const TimePicker = ({\n value,\n onChange,\n minDate,\n maxDate,\n saveTime,\n goToToday,\n clear,\n}: TimePickerProps) => {\n const disabled = !value;\n\n const hoursInputRef = useRef<HTMLInputElement>(null);\n const minutesInputRef = useRef<HTMLInputElement>(null);\n const secondsInputRef = useRef<HTMLInputElement>(null);\n\n const focusedInputRef = useRef<HTMLInputElement>();\n\n const timeParts = useMemo(() => {\n const partOfDay = value ? getPartOfDay(value) : undefined;\n\n const hourOffset = partOfDay === 'pm' ? 12 : 0;\n\n const hours = value ? value.getHours() - hourOffset : undefined;\n\n const hoursAmPm = hours !== undefined && hours === 12 ? 0 : hours;\n\n return {\n hours: formatTimePart(hoursAmPm),\n minutes: formatTimePart(value?.getMinutes()),\n seconds: formatTimePart(value?.getSeconds()),\n partOfDay,\n };\n }, [value]);\n\n const [hours, setHours] = useState(timeParts.hours);\n const [minutes, setMinutes] = useState(timeParts.minutes);\n const [seconds, setSeconds] = useState(timeParts.seconds);\n\n useEffect(() => {\n if (focusedInputRef.current !== hoursInputRef.current) {\n setHours(timeParts.hours);\n }\n if (focusedInputRef.current !== minutesInputRef.current) {\n setMinutes(timeParts.minutes);\n }\n if (focusedInputRef.current !== secondsInputRef.current) {\n setSeconds(timeParts.seconds);\n }\n }, [timeParts.hours, timeParts.minutes, timeParts.seconds]);\n\n const constraintText = useMemo(() => {\n const minValue = isSameDay(minDate, value) && moment(minDate).format('hh:mm:ss A');\n const maxValue = isSameDay(maxDate, value) && moment(maxDate).format('hh:mm:ss A');\n\n if (minValue && maxValue) {\n return `In ${minValue} - ${maxValue} range`;\n } else if (minValue) {\n return `Can’t be earlier than ${minValue}`;\n } else if (maxValue) {\n return `Can’t be later than ${maxValue}`;\n }\n return undefined;\n }, [maxDate, minDate, value]);\n\n const amPmOptions = useMemo(\n () =>\n ToggleButtonsOptions.map(item => {\n const isAmDisabled =\n item.value === 'am' &&\n !!minDate &&\n isSameDay(value, minDate) &&\n getOffsetFromDayStart(minDate) >= HalfOfDayMs;\n\n const isPmDisabled =\n item.value === 'pm' &&\n !!maxDate &&\n isSameDay(value, maxDate) &&\n getOffsetFromDayStart(maxDate) < HalfOfDayMs;\n\n return { ...item, disabled: disabled || isAmDisabled || isPmDisabled };\n }),\n [disabled, maxDate, minDate, value]\n );\n\n const updateValue = useCallback(\n (type: 'hours' | 'minutes' | 'seconds' | 'partOfDay', newValue: string) => {\n if (!value) {\n return;\n }\n\n const newDate = new Date(value);\n\n if (type === 'hours' && validateHours(newValue)) {\n const partOfDayOffset = timeParts.partOfDay === 'pm' ? 12 : 0;\n newDate.setHours(partOfDayOffset + Number(newValue));\n } else if (type === 'minutes' && validateMinutes(newValue)) {\n newDate.setMinutes(Number(newValue));\n } else if (type === 'seconds' && validateSeconds(newValue)) {\n newDate.setSeconds(Number(newValue));\n } else if (type === 'partOfDay' && (newValue === 'am' || newValue === 'pm')) {\n const hoursOffset = newDate.getHours() % 12;\n newDate.setHours((newValue === 'pm' ? 12 : 0) + hoursOffset);\n }\n\n if (Math.floor(newDate.getTime() / 1000) !== Math.floor(value.getTime() / 1000)) {\n onChange(newDate);\n }\n },\n [timeParts.partOfDay, onChange, value]\n );\n\n const onFieldFocus = useCallback<FocusEventHandler<HTMLInputElement>>(e => {\n e.target.select();\n focusedInputRef.current = e.target;\n }, []);\n\n const onFieldBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n e => {\n const fieldValue = sanitize(e.target.value);\n\n if (e.target === hoursInputRef.current) {\n const actualHours = getActualHours(fieldValue);\n const newHours = validateHours(actualHours) ? formatTimePart(actualHours) : timeParts.hours;\n setHours(newHours);\n updateValue('hours', newHours);\n }\n if (e.target === minutesInputRef.current) {\n const newMinutes = validateMinutes(fieldValue)\n ? formatTimePart(fieldValue)\n : timeParts.minutes;\n setMinutes(newMinutes);\n updateValue('minutes', newMinutes);\n }\n if (e.target === secondsInputRef.current) {\n const newSeconds = validateSeconds(fieldValue)\n ? formatTimePart(fieldValue)\n : timeParts.seconds;\n setSeconds(newSeconds);\n updateValue('seconds', newSeconds);\n }\n\n focusedInputRef.current = undefined;\n },\n [timeParts.hours, timeParts.minutes, timeParts.seconds, updateValue]\n );\n\n const onChangeHours = useCallback(\n (newValue: string) => {\n const sanitized = sanitize(newValue);\n const actualHours = getActualHours(sanitized);\n setHours(sanitized);\n if (sanitized.length === 2 && validateHours(sanitized)) {\n updateValue('hours', actualHours);\n minutesInputRef.current?.focus();\n }\n },\n [updateValue]\n );\n\n const onChangeMinutes = useCallback(\n (newValue: string) => {\n const sanitized = sanitize(newValue);\n setMinutes(sanitized);\n if (sanitized.length === 2 && validateMinutes(sanitized)) {\n updateValue('minutes', sanitized);\n secondsInputRef.current?.focus();\n }\n },\n [updateValue]\n );\n\n const onChangeSeconds = useCallback(\n (newValue: string) => {\n const sanitized = sanitize(newValue);\n setSeconds(sanitized);\n if (validateSeconds(sanitized)) {\n updateValue('seconds', sanitized);\n }\n },\n [updateValue]\n );\n\n const setPartOfDay = useCallback(\n (newValue: string) => {\n updateValue('partOfDay', newValue);\n },\n [updateValue]\n );\n\n const outOfBounds =\n Number(value?.getTime()) > Number(maxDate?.getTime()) ||\n Number(value?.getTime()) < Number(minDate?.getTime());\n\n const hoursInvalid = !validateHours(hours) || outOfBounds;\n const minutesInvalid = !validateMinutes(minutes) || outOfBounds;\n const secondsInvalid = !validateSeconds(seconds) || outOfBounds;\n\n return (\n <>\n <div className={classNames(styles.timePicker)}>\n <Text className={styles.header} size={14}>\n <span className={classNames(styles.headerText, disabled && styles.disabled)}>Time</span>\n {constraintText && (\n <>\n <InfoIcon className={styles.constraintIcon} size={16} />\n {constraintText}\n </>\n )}\n </Text>\n\n <TextInputNext\n placeholder=\"HH\"\n className={styles.input}\n disabled={disabled}\n value={hours}\n onChange={onChangeHours}\n status={hoursInvalid ? 'error' : undefined}\n inputRef={hoursInputRef}\n onFocus={onFieldFocus}\n onBlur={onFieldBlur}\n />\n\n <Text color=\"T9\" size={14}>\n :\n </Text>\n\n <TextInputNext\n placeholder=\"MM\"\n className={styles.input}\n disabled={disabled}\n value={minutes}\n onChange={onChangeMinutes}\n status={minutesInvalid ? 'error' : undefined}\n inputRef={minutesInputRef}\n onFocus={onFieldFocus}\n onBlur={onFieldBlur}\n />\n\n <Text color=\"T9\" size={14}>\n :\n </Text>\n\n <TextInputNext\n placeholder=\"SS\"\n className={styles.input}\n disabled={disabled}\n value={seconds}\n onChange={onChangeSeconds}\n status={secondsInvalid ? 'error' : undefined}\n inputRef={secondsInputRef}\n onFocus={onFieldFocus}\n onBlur={onFieldBlur}\n />\n\n <ToggleButtons\n options={amPmOptions}\n className={styles.tabs}\n size=\"small\"\n value={timeParts.partOfDay}\n onChange={setPartOfDay}\n />\n </div>\n <div className={styles.footer}>\n {goToToday && (\n <Button onClick={goToToday} type=\"tertiary\" size=\"small\">\n Today\n </Button>\n )}\n\n <div className={styles.actions}>\n {clear && (\n <Button onClick={clear} type=\"tertiary\" size=\"small\" disabled={!value}>\n Clear\n </Button>\n )}\n\n <Button\n onClick={saveTime}\n type=\"secondary\"\n size=\"small\"\n disabled={!value || hoursInvalid || minutesInvalid || secondsInvalid}\n >\n Save\n </Button>\n </div>\n </div>\n </>\n );\n};\n"],"names":["ToggleButtonsOptions","value","label","sanitize","replace","substring","validateHours","Number","validateMinutes","validateSeconds","getOffsetFromDayStart","date","getTime","moment","startOf","toDate","formatTimePart","part","undefined","padStart","String","getActualHours","sanitized","_ref","onChange","minDate","maxDate","saveTime","goToToday","clear","disabled","hoursInputRef","useRef","minutesInputRef","secondsInputRef","focusedInputRef","timeParts","useMemo","partOfDay","hourOffset","hours","getHours","minutes","getMinutes","seconds","getSeconds","_useState","useState","_useState2","_slicedToArray","setHours","_useState3","_useState4","setMinutes","_useState5","_useState6","setSeconds","useEffect","current","constraintText","minValue","isSameDay","format","maxValue","concat","amPmOptions","map","item","isAmDisabled","isPmDisabled","_objectSpread","updateValue","useCallback","type","newValue","newDate","Date","partOfDayOffset","hoursOffset","Math","floor","onFieldFocus","e","target","select","onFieldBlur","fieldValue","actualHours","newHours","newMinutes","newSeconds","onChangeHours","_minutesInputRef$curr","length","focus","onChangeMinutes","_secondsInputRef$curr","onChangeSeconds","setPartOfDay","outOfBounds","hoursInvalid","minutesInvalid","secondsInvalid","_jsxs","_Fragment","children","jsxs","className","classNames","styles","timePicker","Text","header","size","_jsx","jsx","headerText","InfoIcon","constraintIcon","TextInputNext","placeholder","input","status","inputRef","onFocus","onBlur","color","ToggleButtons","options","tabs","footer","Button","onClick","actions"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t={date:"DD
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t={date:"MMM DD YYYY",dateTime:"MMM DD YYYY hh:mm A",month:"MMMM YYYY"},e={date:"MM/DD/YYYY",dateTime:"MM/DD/YYYY hh:mm A",month:"MMM YYYY"},l=["D","M","Y","h","m","s","S"],n=[].concat(l,["A"]),i=new RegExp("^([^".concat(n.join(""),"]+)"),"gi"),r={month:"MM/YYYY",date:"MM/DD/YYYY",dateTime:"MM/DD/YYYY hh:mm A"},o={month:[r.month,"MMMM YYYY","MMM YYYY"],date:[r.date,"M/D/YYYY"],dateTime:[r.dateTime,"M/D/YYYY hh:mm A"]},u=function(t,e){return!!t&&!!e&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()};exports.DefaultFormatByType=t,exports.DefaultFormatByTypeRange=e,exports.InputAutocompleteFormats=r,exports.InputParseFormats=o,exports.MonthOptions=[{id:1,title:"Jan",fullTitle:"January"},{id:2,title:"Feb",fullTitle:"February"},{id:3,title:"Mar",fullTitle:"March"},{id:4,title:"Apr",fullTitle:"April"},{id:5,title:"May",fullTitle:"May"},{id:6,title:"Jun",fullTitle:"June"},{id:7,title:"Jul",fullTitle:"July"},{id:8,title:"Aug",fullTitle:"August"},{id:9,title:"Sep",fullTitle:"September"},{id:10,title:"Oct",fullTitle:"October"},{id:11,title:"Nov",fullTitle:"November"},{id:12,title:"Dec",fullTitle:"December"}],exports.autocompleteValue=function(t){var e=t.value,n=t.type,o=t.range,u=t.prevValue,a=r[n],Y=o?"".concat(a," - ").concat(a):a,M=e.toLocaleLowerCase().replace(/([ap])m/gi,"$1");if(e.length<=u.length||!function(t,e){return e.length<=t.length&&e.split("").every((function(e,n){var i,r=t[n];if(l.includes(r))return null==(i=e)?void 0:i.match(/\d/);if("A"===r){var o=e.toLocaleLowerCase();return"a"===o||"p"===o}return r===e}))}(Y,M)||Y.length<=M.length)return e;var c=function(t,e){var l;return(null===(l=t.substring(e).match(i))||void 0===l?void 0:l[0])||""}(Y,M.length);return"".concat(e).concat(c)},exports.getDateWithSameTime=function(t,e){return new Date(t.getFullYear(),t.getMonth(),t.getDate(),(null==e?void 0:e.getHours())||0,(null==e?void 0:e.getMinutes())||0,(null==e?void 0:e.getSeconds())||0)},exports.getDefaultFormat=function(l,n){return(n?e:t)[l]},exports.getMaxDate=function(t,e){return t&&e?t>e?t:e:t||e},exports.getMinDate=function(t,e){return t&&e?t<e?t:e:t||e},exports.isSameDay=function(t,e){return u(t,e)&&(null==t?void 0:t.getDate())===(null==e?void 0:e.getDate())},exports.isSameMonth=u;
|
|
2
2
|
//# sourceMappingURL=utils.js.map
|