superdesk-ui-framework 4.0.47 → 4.0.49
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/.eslintrc.js +0 -1
- package/.eslintrc.json +2 -5
- package/.github/workflows/test.yml +22 -26
- package/.prettierignore +3 -0
- package/.prettierrc.js +9 -0
- package/.travis.yml +4 -4
- package/README.md +14 -1
- package/app/styles/_time.scss +28 -0
- package/app/styles/app.scss +1 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +6 -3
- package/app/styles/form-elements/_forms-general.scss +0 -4
- package/app-typescript/components/Alert.tsx +12 -16
- package/app-typescript/components/Autocomplete.tsx +53 -42
- package/app-typescript/components/Badge.tsx +1 -1
- package/app-typescript/components/Button.tsx +5 -11
- package/app-typescript/components/ButtonGroup.tsx +15 -10
- package/app-typescript/components/Carousel.tsx +25 -26
- package/app-typescript/components/CheckButtonGroup.tsx +6 -10
- package/app-typescript/components/Checkbox.tsx +16 -10
- package/app-typescript/components/CheckboxButton.tsx +22 -13
- package/app-typescript/components/ContentDivider.tsx +6 -7
- package/app-typescript/components/CreateButton.tsx +8 -6
- package/app-typescript/components/DatePicker.tsx +59 -55
- package/app-typescript/components/DateTimePicker.tsx +51 -48
- package/app-typescript/components/Divider.tsx +2 -4
- package/app-typescript/components/DonutChart.tsx +11 -6
- package/app-typescript/components/DragHandle.tsx +10 -6
- package/app-typescript/components/DragHandleDots.tsx +1 -3
- package/app-typescript/components/DropZone.tsx +27 -25
- package/app-typescript/components/Dropdown.tsx +61 -102
- package/app-typescript/components/DropdownFirst.tsx +57 -69
- package/app-typescript/components/DurationInput.tsx +64 -54
- package/app-typescript/components/Editor/EditorButton.tsx +4 -3
- package/app-typescript/components/EmptyState.tsx +10 -14
- package/app-typescript/components/Form/FormGroup.tsx +9 -16
- package/app-typescript/components/Form/FormItem.tsx +1 -5
- package/app-typescript/components/Form/FormLabel.tsx +0 -1
- package/app-typescript/components/Form/FormRow.tsx +12 -19
- package/app-typescript/components/Form/FormRowNew.tsx +9 -16
- package/app-typescript/components/Form/FormText.tsx +1 -5
- package/app-typescript/components/Form/InputBase.tsx +12 -11
- package/app-typescript/components/Form/InputNew.tsx +11 -12
- package/app-typescript/components/Form/InputWrapper.tsx +9 -18
- package/app-typescript/components/Form/index.tsx +9 -9
- package/app-typescript/components/FormLabel.tsx +1 -5
- package/app-typescript/components/GridItem.tsx +38 -69
- package/app-typescript/components/GridList.tsx +2 -6
- package/app-typescript/components/HeadingText.tsx +4 -5
- package/app-typescript/components/IconButton.tsx +4 -10
- package/app-typescript/components/IconLabel.tsx +5 -5
- package/app-typescript/components/IconPicker.tsx +128 -126
- package/app-typescript/components/IllustrationButton.tsx +2 -8
- package/app-typescript/components/Input.tsx +2 -2
- package/app-typescript/components/Label.tsx +11 -7
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
- package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
- package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
- package/app-typescript/components/Layouts/Container.tsx +13 -8
- package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
- package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
- package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
- package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
- package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
- package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
- package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
- package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
- package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
- package/app-typescript/components/Layouts/Layout.tsx +10 -16
- package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
- package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
- package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
- package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
- package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
- package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
- package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
- package/app-typescript/components/Layouts/Panel.tsx +45 -81
- package/app-typescript/components/Layouts/index.tsx +39 -39
- package/app-typescript/components/LeftMenu.tsx +51 -53
- package/app-typescript/components/ListItemLoader.tsx +1 -1
- package/app-typescript/components/Lists/BoxedList.tsx +16 -41
- package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
- package/app-typescript/components/Lists/ContentList.tsx +68 -62
- package/app-typescript/components/Lists/SimpleList.tsx +13 -12
- package/app-typescript/components/Lists/TableList.tsx +169 -217
- package/app-typescript/components/Lists/index.tsx +2 -2
- package/app-typescript/components/Loader.tsx +1 -3
- package/app-typescript/components/Menu.tsx +2 -4
- package/app-typescript/components/Modal.tsx +21 -21
- package/app-typescript/components/MultiSelect.tsx +6 -6
- package/app-typescript/components/NavButton.tsx +10 -8
- package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
- package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
- package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
- package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
- package/app-typescript/components/Navigation/index.tsx +3 -3
- package/app-typescript/components/Popover.tsx +19 -21
- package/app-typescript/components/PropsList.tsx +2 -4
- package/app-typescript/components/RadioButtonGroup.tsx +48 -45
- package/app-typescript/components/RadioGroup.tsx +9 -8
- package/app-typescript/components/ResizablePanels.tsx +2 -3
- package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
- package/app-typescript/components/SearchBar.tsx +53 -45
- package/app-typescript/components/Select.tsx +6 -8
- package/app-typescript/components/SelectGrid.tsx +32 -40
- package/app-typescript/components/SelectPreview.tsx +31 -25
- package/app-typescript/components/SelectWithTemplate.tsx +10 -11
- package/app-typescript/components/ShowPopup.tsx +32 -46
- package/app-typescript/components/SidebarMenu.tsx +19 -18
- package/app-typescript/components/Skeleton.tsx +12 -11
- package/app-typescript/components/SlidingToolbar.tsx +1 -6
- package/app-typescript/components/Spinner.tsx +2 -6
- package/app-typescript/components/StrechBar.tsx +1 -5
- package/app-typescript/components/SubNav.tsx +10 -8
- package/app-typescript/components/SvgIconIllustration.tsx +477 -105
- package/app-typescript/components/Switch.tsx +14 -12
- package/app-typescript/components/SwitchGroup.tsx +10 -10
- package/app-typescript/components/TabCustom.tsx +28 -35
- package/app-typescript/components/TabList.tsx +13 -10
- package/app-typescript/components/Tag.tsx +21 -24
- package/app-typescript/components/TagInput.tsx +4 -11
- package/app-typescript/components/Text/Heading.tsx +21 -41
- package/app-typescript/components/Text/Text.tsx +16 -12
- package/app-typescript/components/Text/Time.tsx +14 -10
- package/app-typescript/components/ThemeSelector.tsx +15 -14
- package/app-typescript/components/TimePicker.tsx +60 -6
- package/app-typescript/components/TimePickerPopover.tsx +274 -0
- package/app-typescript/components/TimePickerV2.tsx +20 -20
- package/app-typescript/components/Toast.tsx +11 -7
- package/app-typescript/components/ToastMessage.tsx +3 -14
- package/app-typescript/components/ToastText.tsx +30 -32
- package/app-typescript/components/ToastWrapper.tsx +76 -74
- package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
- package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
- package/app-typescript/components/ToggleBox/index.tsx +3 -7
- package/app-typescript/components/Tooltip.tsx +1 -1
- package/app-typescript/components/TreeMenu.tsx +72 -81
- package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
- package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
- package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
- package/app-typescript/components/WithPagination.tsx +34 -39
- package/app-typescript/components/WithPopover.tsx +0 -1
- package/app-typescript/components/WithPortal.tsx +4 -7
- package/app-typescript/components/WithSizeObserver.tsx +2 -6
- package/app-typescript/components/_Positioner.tsx +26 -26
- package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
- package/app-typescript/components/avatar/avatar-group.tsx +49 -68
- package/app-typescript/components/avatar/avatar-image.tsx +18 -12
- package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
- package/app-typescript/components/avatar/avatar-text.tsx +1 -4
- package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
- package/app-typescript/components/avatar/avatar.tsx +5 -8
- package/app-typescript/components/with-pagination.spec.tsx +8 -27
- package/app-typescript/helpers.tsx +2 -2
- package/app-typescript/index.ts +111 -100
- package/app-typescript/utils/time.tsx +31 -0
- package/declarations.d.ts +1 -1
- package/dist/components/Alerts.tsx +171 -78
- package/dist/components/Autocomplete.tsx +187 -78
- package/dist/components/Avatar.tsx +52 -112
- package/dist/components/Badges.tsx +111 -67
- package/dist/components/BigIconFont.tsx +29 -17
- package/dist/components/BoxedList.tsx +244 -114
- package/dist/components/ButtonGroups.tsx +213 -147
- package/dist/components/Buttons.tsx +409 -137
- package/dist/components/Card.tsx +6 -7
- package/dist/components/Carousel.tsx +126 -39
- package/dist/components/Checkboxs.tsx +446 -105
- package/dist/components/Container.tsx +95 -48
- package/dist/components/ContentDivider.tsx +110 -63
- package/dist/components/ContentList.tsx +577 -253
- package/dist/components/CreateButton.tsx +71 -21
- package/dist/components/DatePicker.tsx +102 -26
- package/dist/components/DateTimePicker.tsx +49 -11
- package/dist/components/DragHandleDocs.tsx +56 -26
- package/dist/components/DropZone.tsx +67 -29
- package/dist/components/Dropdowns.tsx +220 -131
- package/dist/components/DurationInput.tsx +92 -32
- package/dist/components/EmptyStates.tsx +61 -26
- package/dist/components/GridItem.tsx +190 -91
- package/dist/components/GridList.tsx +37 -17
- package/dist/components/Heading.tsx +81 -35
- package/dist/components/IconButtons.tsx +125 -32
- package/dist/components/IconFont.tsx +24 -12
- package/dist/components/IconLabels.tsx +146 -39
- package/dist/components/IconPicker.tsx +30 -13
- package/dist/components/IllustrationButton.tsx +40 -20
- package/dist/components/Index.tsx +128 -114
- package/dist/components/Inputs.tsx +153 -51
- package/dist/components/Labels.tsx +191 -117
- package/dist/components/LeftNavigations.tsx +327 -100
- package/dist/components/ListItems.tsx +8 -9
- package/dist/components/Loader.tsx +5 -4
- package/dist/components/Menu.tsx +48 -26
- package/dist/components/Modal.tsx +298 -104
- package/dist/components/MultiSelect.tsx +189 -53
- package/dist/components/NavButtons.tsx +86 -30
- package/dist/components/Panel.tsx +367 -120
- package/dist/components/Popover.tsx +37 -17
- package/dist/components/QuickNavigationBar.tsx +222 -86
- package/dist/components/RadioGroup.tsx +375 -137
- package/dist/components/ResizablePanels.tsx +8 -14
- package/dist/components/SelectGrid.tsx +79 -38
- package/dist/components/SelectWithTemplate.tsx +23 -14
- package/dist/components/Selects.tsx +94 -29
- package/dist/components/SimpleList.tsx +91 -41
- package/dist/components/SubNav.tsx +57 -37
- package/dist/components/Switch.tsx +168 -42
- package/dist/components/TableList.tsx +220 -66
- package/dist/components/Tabs.tsx +149 -64
- package/dist/components/TagInputDocs.tsx +73 -17
- package/dist/components/Tags.tsx +104 -73
- package/dist/components/Text.tsx +108 -58
- package/dist/components/TimePicker.tsx +76 -22
- package/dist/components/Toasts.tsx +162 -80
- package/dist/components/Togglebox.tsx +164 -62
- package/dist/components/Tooltips.tsx +27 -15
- package/dist/components/TreeMenu.tsx +95 -59
- package/dist/components/TreeSelect.tsx +297 -162
- package/dist/components/WithPaginationDocs.tsx +15 -16
- package/dist/components/WithSizeObserver.tsx +9 -9
- package/dist/components/tree-select/TreeSelect.tsx +126 -77
- package/dist/components/tree-select/example-1.tsx +8 -12
- package/dist/components/tree-select/example-2.tsx +2 -5
- package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
- package/dist/components/utilities/BorderUtilities.tsx +31 -32
- package/dist/components/utilities/DisplayUtilities.tsx +4 -5
- package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
- package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
- package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
- package/dist/components/utilities/OpacityUtilities.tsx +4 -7
- package/dist/components/utilities/OverflowUtilities.tsx +4 -5
- package/dist/components/utilities/PositionUtilities.tsx +4 -5
- package/dist/components/utilities/ShadowUtilities.tsx +15 -16
- package/dist/components/utilities/SpacingUtilities.tsx +483 -178
- package/dist/components/utilities/TextUtilities.tsx +109 -60
- package/dist/design-patterns/Index.tsx +8 -11
- package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
- package/dist/examples.bundle.css +1257 -1155
- package/dist/examples.bundle.js +7904 -7035
- package/dist/playgrounds/dummy-data/items.ts +9 -8
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
- package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
- package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
- package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
- package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
- package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
- package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
- package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
- package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
- package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
- package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
- package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
- package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
- package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
- package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
- package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
- package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
- package/dist/superdesk-ui.bundle.css +25 -4
- package/dist/superdesk-ui.bundle.js +3072 -2903
- package/dist/vendor.bundle.js +18 -18
- package/examples/css/docs-page.css +1135 -1116
- package/examples/css/reset.css +124 -43
- package/examples/css/vendor.css +125 -125
- package/examples/index.js +138 -139
- package/examples/js/doc.js +41 -40
- package/examples/js/react.js +82 -48
- package/examples/pages/components/Alerts.tsx +171 -78
- package/examples/pages/components/Autocomplete.tsx +187 -78
- package/examples/pages/components/Avatar.tsx +52 -112
- package/examples/pages/components/Badges.tsx +111 -67
- package/examples/pages/components/BigIconFont.tsx +29 -17
- package/examples/pages/components/BoxedList.tsx +244 -114
- package/examples/pages/components/ButtonGroups.tsx +213 -147
- package/examples/pages/components/Buttons.tsx +409 -137
- package/examples/pages/components/Card.tsx +6 -7
- package/examples/pages/components/Carousel.tsx +126 -39
- package/examples/pages/components/Checkboxs.tsx +446 -105
- package/examples/pages/components/Container.tsx +95 -48
- package/examples/pages/components/ContentDivider.tsx +110 -63
- package/examples/pages/components/ContentList.tsx +577 -253
- package/examples/pages/components/CreateButton.tsx +71 -21
- package/examples/pages/components/DatePicker.tsx +102 -26
- package/examples/pages/components/DateTimePicker.tsx +49 -11
- package/examples/pages/components/DragHandleDocs.tsx +56 -26
- package/examples/pages/components/DropZone.tsx +67 -29
- package/examples/pages/components/Dropdowns.tsx +220 -131
- package/examples/pages/components/DurationInput.tsx +92 -32
- package/examples/pages/components/EmptyStates.tsx +61 -26
- package/examples/pages/components/GridItem.tsx +190 -91
- package/examples/pages/components/GridList.tsx +37 -17
- package/examples/pages/components/Heading.tsx +81 -35
- package/examples/pages/components/IconButtons.tsx +125 -32
- package/examples/pages/components/IconFont.tsx +24 -12
- package/examples/pages/components/IconLabels.tsx +146 -39
- package/examples/pages/components/IconPicker.tsx +30 -13
- package/examples/pages/components/IllustrationButton.tsx +40 -20
- package/examples/pages/components/Index.tsx +128 -114
- package/examples/pages/components/Inputs.tsx +153 -51
- package/examples/pages/components/Labels.tsx +191 -117
- package/examples/pages/components/LeftNavigations.tsx +327 -100
- package/examples/pages/components/ListItems.tsx +8 -9
- package/examples/pages/components/Loader.tsx +5 -4
- package/examples/pages/components/Menu.tsx +48 -26
- package/examples/pages/components/Modal.tsx +298 -104
- package/examples/pages/components/MultiSelect.tsx +189 -53
- package/examples/pages/components/NavButtons.tsx +86 -30
- package/examples/pages/components/Panel.tsx +367 -120
- package/examples/pages/components/Popover.tsx +37 -17
- package/examples/pages/components/QuickNavigationBar.tsx +222 -86
- package/examples/pages/components/RadioGroup.tsx +375 -137
- package/examples/pages/components/ResizablePanels.tsx +8 -14
- package/examples/pages/components/SelectGrid.tsx +79 -38
- package/examples/pages/components/SelectWithTemplate.tsx +23 -14
- package/examples/pages/components/Selects.tsx +94 -29
- package/examples/pages/components/SimpleList.tsx +91 -41
- package/examples/pages/components/SubNav.tsx +57 -37
- package/examples/pages/components/Switch.tsx +168 -42
- package/examples/pages/components/TableList.tsx +220 -66
- package/examples/pages/components/Tabs.tsx +149 -64
- package/examples/pages/components/TagInputDocs.tsx +73 -17
- package/examples/pages/components/Tags.tsx +104 -73
- package/examples/pages/components/Text.tsx +108 -58
- package/examples/pages/components/TimePicker.tsx +76 -22
- package/examples/pages/components/Toasts.tsx +162 -80
- package/examples/pages/components/Togglebox.tsx +164 -62
- package/examples/pages/components/Tooltips.tsx +27 -15
- package/examples/pages/components/TreeMenu.tsx +95 -59
- package/examples/pages/components/TreeSelect.tsx +297 -162
- package/examples/pages/components/WithPaginationDocs.tsx +15 -16
- package/examples/pages/components/WithSizeObserver.tsx +9 -9
- package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
- package/examples/pages/components/tree-select/example-1.tsx +8 -12
- package/examples/pages/components/tree-select/example-2.tsx +2 -5
- package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
- package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
- package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
- package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
- package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
- package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
- package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
- package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
- package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
- package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
- package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
- package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
- package/examples/pages/design-patterns/Index.tsx +8 -11
- package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
- package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
- package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
- package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
- package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
- package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
- package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
- package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
- package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
- package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
- package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
- package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
- package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
- package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
- package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
- package/globals.d.ts +1 -1
- package/mocha-setup.ts +3 -3
- package/package.json +119 -117
- package/react/components/Alert.js +6 -9
- package/react/components/Autocomplete.js +15 -23
- package/react/components/Badge.js +1 -1
- package/react/components/Button.js +4 -6
- package/react/components/ButtonGroup.js +1 -1
- package/react/components/Carousel.js +3 -3
- package/react/components/CheckButtonGroup.js +3 -6
- package/react/components/CheckboxButton.js +2 -4
- package/react/components/ContentDivider.js +1 -1
- package/react/components/DatePicker.js +29 -26
- package/react/components/DateTimePicker.d.ts +8 -4
- package/react/components/DateTimePicker.js +6 -8
- package/react/components/Divider.js +1 -1
- package/react/components/DonutChart.js +1 -1
- package/react/components/DragHandle.js +1 -1
- package/react/components/DragHandleDots.js +1 -1
- package/react/components/DropZone.js +6 -8
- package/react/components/Dropdown.d.ts +1 -1
- package/react/components/Dropdown.js +34 -38
- package/react/components/DropdownFirst.d.ts +11 -11
- package/react/components/DropdownFirst.js +20 -24
- package/react/components/DurationInput.js +37 -34
- package/react/components/EmptyState.js +5 -5
- package/react/components/Form/FormGroup.js +1 -1
- package/react/components/Form/FormItem.js +1 -1
- package/react/components/Form/FormRow.js +1 -1
- package/react/components/Form/FormRowNew.js +3 -3
- package/react/components/Form/FormText.js +1 -1
- package/react/components/Form/InputNew.js +3 -3
- package/react/components/Form/InputWrapper.js +7 -10
- package/react/components/GridItem.d.ts +1 -1
- package/react/components/GridItem.js +16 -16
- package/react/components/GridList.js +1 -1
- package/react/components/HeadingText.js +4 -5
- package/react/components/IconLabel.js +3 -5
- package/react/components/IconPicker.d.ts +1 -1
- package/react/components/IconPicker.js +111 -104
- package/react/components/IllustrationButton.js +1 -1
- package/react/components/Input.js +1 -1
- package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
- package/react/components/Layouts/AuthoringContainer.js +1 -1
- package/react/components/Layouts/AuthoringFrame.js +4 -4
- package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
- package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameMain.js +1 -1
- package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
- package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
- package/react/components/Layouts/AuthoringMainContainer.js +1 -1
- package/react/components/Layouts/AuthoringMainContent.js +1 -1
- package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
- package/react/components/Layouts/BottomBarAction.js +2 -2
- package/react/components/Layouts/ContentSplitter.js +1 -1
- package/react/components/Layouts/CoreLayout.js +2 -2
- package/react/components/Layouts/CoreLayoutContainer.js +1 -1
- package/react/components/Layouts/CoreLayoutFooter.js +1 -1
- package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
- package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
- package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
- package/react/components/Layouts/HamburgerButton.js +1 -1
- package/react/components/Layouts/HeaderPanel.js +1 -1
- package/react/components/Layouts/Layout.d.ts +1 -1
- package/react/components/Layouts/Layout.js +9 -9
- package/react/components/Layouts/LayoutContainer.js +1 -1
- package/react/components/Layouts/LeftPanel.js +1 -1
- package/react/components/Layouts/MainMenu.js +8 -10
- package/react/components/Layouts/MainPanel.js +1 -1
- package/react/components/Layouts/NotificationPanel.d.ts +1 -1
- package/react/components/Layouts/NotificationPanel.js +7 -7
- package/react/components/Layouts/OverlayPanel.js +3 -3
- package/react/components/Layouts/PageLayout.js +2 -2
- package/react/components/Layouts/Panel.d.ts +1 -1
- package/react/components/Layouts/Panel.js +12 -18
- package/react/components/LeftMenu.d.ts +3 -3
- package/react/components/LeftMenu.js +11 -13
- package/react/components/Lists/BoxedList.js +6 -6
- package/react/components/Lists/CalendarWeekDayItem.js +2 -2
- package/react/components/Lists/ContentList.js +24 -26
- package/react/components/Lists/TableList.d.ts +1 -1
- package/react/components/Lists/TableList.js +59 -79
- package/react/components/Loader.js +1 -1
- package/react/components/Menu.js +1 -1
- package/react/components/Modal.d.ts +1 -1
- package/react/components/MultiSelect.d.ts +1 -1
- package/react/components/MultiSelect.js +2 -2
- package/react/components/NavButton.js +2 -4
- package/react/components/Navigation/BottomNav.js +9 -8
- package/react/components/Navigation/QuickNavBar.js +17 -20
- package/react/components/Navigation/SideBarMenu.js +11 -9
- package/react/components/Navigation/SideBarTabs.js +9 -8
- package/react/components/Popover.js +1 -1
- package/react/components/RadioButtonGroup.js +15 -23
- package/react/components/ResizablePanels.js +1 -3
- package/react/components/ResizeObserverComponent.js +1 -3
- package/react/components/SearchBar.js +14 -16
- package/react/components/Select.js +3 -3
- package/react/components/SelectGrid.js +15 -20
- package/react/components/SelectPreview.js +13 -13
- package/react/components/SelectWithTemplate.js +3 -5
- package/react/components/ShowPopup.d.ts +1 -0
- package/react/components/ShowPopup.js +7 -10
- package/react/components/Skeleton.js +1 -1
- package/react/components/SlidingToolbar.js +1 -1
- package/react/components/Spinner.js +1 -1
- package/react/components/StrechBar.js +1 -1
- package/react/components/SubNav.js +1 -1
- package/react/components/Switch.js +4 -6
- package/react/components/SwitchGroup.js +1 -1
- package/react/components/TabCustom.js +6 -4
- package/react/components/TabList.js +4 -8
- package/react/components/Tag.js +13 -17
- package/react/components/TagInput.js +1 -1
- package/react/components/Text/Heading.js +6 -6
- package/react/components/ThemeSelector.js +1 -1
- package/react/components/TimePicker.d.ts +9 -2
- package/react/components/TimePicker.js +29 -4
- package/react/components/TimePickerPopover.d.ts +19 -0
- package/react/components/TimePickerPopover.js +225 -0
- package/react/components/TimePickerV2.js +17 -17
- package/react/components/Toast.js +3 -3
- package/react/components/ToastMessage.d.ts +1 -1
- package/react/components/ToastMessage.js +1 -1
- package/react/components/ToastText.js +5 -8
- package/react/components/ToastWrapper.js +3 -5
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
- package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
- package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
- package/react/components/ToggleBox/index.js +3 -3
- package/react/components/TreeMenu.d.ts +1 -1
- package/react/components/TreeMenu.js +38 -44
- package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
- package/react/components/TreeSelect/TreeSelect.js +105 -127
- package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
- package/react/components/TreeSelect/TreeSelectItem.js +10 -13
- package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
- package/react/components/TreeSelect/TreeSelectPill.js +8 -9
- package/react/components/WithPagination.js +18 -21
- package/react/components/WithPortal.d.ts +1 -1
- package/react/components/WithPortal.js +2 -1
- package/react/components/WithSizeObserver.js +1 -3
- package/react/components/_Positioner.js +11 -11
- package/react/components/avatar/avatar-action-add.js +1 -1
- package/react/components/avatar/avatar-group.js +11 -14
- package/react/components/avatar/avatar-image.js +6 -4
- package/react/components/avatar/avatar-placeholder.js +1 -1
- package/react/components/avatar/avatar-wrapper.js +2 -4
- package/react/components/avatar/avatar.js +4 -3
- package/react/helpers.js +2 -2
- package/react/index.d.ts +1 -1
- package/react/utils/time.d.ts +5 -0
- package/react/utils/time.js +36 -0
- package/tasks/webpack.dev.js +1 -1
- package/tasks/webpack.js +5 -5
- package/tasks/webpack.prod.js +1 -5
- package/tsconfig.json +2 -5
- package/tslint.json +6 -12
- package/webpack.config.js +2 -5
@@ -0,0 +1,274 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import {classnames, Spacer} from '@sourcefabric/common';
|
3
|
+
import {ContentDivider} from './ContentDivider';
|
4
|
+
import {RadioButtonGroup} from './RadioButtonGroup';
|
5
|
+
import {getOptionsForTimeUnit, ITimeUnit, padValue} from '../utils/time';
|
6
|
+
import {assertNever} from '../helpers';
|
7
|
+
|
8
|
+
interface IProps {
|
9
|
+
closePopup: () => void;
|
10
|
+
headerTemplate?: React.ReactNode;
|
11
|
+
footerTemplate?: React.ReactNode;
|
12
|
+
allowSeconds?: boolean;
|
13
|
+
onChange: (nextValue: string) => void;
|
14
|
+
value: string | null;
|
15
|
+
}
|
16
|
+
|
17
|
+
interface IPropsTimeValueHolder {
|
18
|
+
isActive?: boolean;
|
19
|
+
value: string;
|
20
|
+
onClick(event: React.MouseEvent<HTMLSpanElement>): void;
|
21
|
+
}
|
22
|
+
|
23
|
+
class TimeValueHolder extends React.PureComponent<IPropsTimeValueHolder> {
|
24
|
+
spanEl: React.RefObject<HTMLSpanElement>;
|
25
|
+
|
26
|
+
constructor(props: IPropsTimeValueHolder) {
|
27
|
+
super(props);
|
28
|
+
|
29
|
+
this.spanEl = React.createRef();
|
30
|
+
}
|
31
|
+
|
32
|
+
public scrollToValue() {
|
33
|
+
this.spanEl.current?.scrollIntoView();
|
34
|
+
}
|
35
|
+
|
36
|
+
render() {
|
37
|
+
return (
|
38
|
+
<span
|
39
|
+
ref={this.props.isActive ? this.spanEl : undefined}
|
40
|
+
onClick={this.props.onClick}
|
41
|
+
className={classnames('p-1 time-unit', {
|
42
|
+
'time-unit-highlight': this.props.isActive ?? false,
|
43
|
+
})}
|
44
|
+
>
|
45
|
+
{this.props.value}
|
46
|
+
</span>
|
47
|
+
);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
function parseUnitOfTime(unit: ITimeUnit, value: string | null, is12HourFormat?: boolean): string {
|
52
|
+
const [hour, minutes, seconds] = (value ?? '').split(':');
|
53
|
+
const valueForUnit = (() => {
|
54
|
+
if (unit === 'hours') {
|
55
|
+
/**
|
56
|
+
* Hour value is always in 24-hour format, so we need to adjust it
|
57
|
+
* to 12-hour if needed.
|
58
|
+
*/
|
59
|
+
if (is12HourFormat) {
|
60
|
+
return hour === '00' ? '12' : hour;
|
61
|
+
} else {
|
62
|
+
return hour;
|
63
|
+
}
|
64
|
+
} else if (unit === 'minutes') {
|
65
|
+
return minutes;
|
66
|
+
} else if (unit === 'seconds') {
|
67
|
+
return seconds;
|
68
|
+
} else {
|
69
|
+
assertNever(unit);
|
70
|
+
}
|
71
|
+
})();
|
72
|
+
|
73
|
+
const valueParsed =
|
74
|
+
is12HourFormat && unit === 'hours' && valueForUnit !== '12'
|
75
|
+
? parseInt(valueForUnit, 10) % 12
|
76
|
+
: parseInt(valueForUnit, 10);
|
77
|
+
|
78
|
+
return padValue(valueParsed);
|
79
|
+
}
|
80
|
+
|
81
|
+
export class TimePickerPopover extends React.PureComponent<IProps> {
|
82
|
+
private is12HourFormat: boolean;
|
83
|
+
|
84
|
+
// hour, minutes, seconds
|
85
|
+
private inputRefs: Array<React.RefObject<TimeValueHolder>>;
|
86
|
+
|
87
|
+
constructor(props: IProps) {
|
88
|
+
super(props);
|
89
|
+
|
90
|
+
this.inputRefs = [React.createRef(), React.createRef(), React.createRef()];
|
91
|
+
this.handleChange = this.handleChange.bind(this);
|
92
|
+
|
93
|
+
const hour = new Date().toLocaleTimeString([]);
|
94
|
+
this.is12HourFormat = hour.includes('AM') || hour.includes('PM');
|
95
|
+
}
|
96
|
+
|
97
|
+
handleChange(unit: ITimeUnit, value: string) {
|
98
|
+
const fallbackDate = new Date();
|
99
|
+
const [hour, minutes, seconds] =
|
100
|
+
this.props.value == null
|
101
|
+
? [
|
102
|
+
padValue(fallbackDate.getHours()),
|
103
|
+
padValue(fallbackDate.getMinutes()),
|
104
|
+
padValue(fallbackDate.getSeconds()),
|
105
|
+
]
|
106
|
+
: this.props.value.split(':');
|
107
|
+
let nextValue = '';
|
108
|
+
|
109
|
+
if (unit === 'hours') {
|
110
|
+
nextValue = `${value}:${minutes}`;
|
111
|
+
} else if (unit === 'minutes') {
|
112
|
+
nextValue = `${hour}:${value}`;
|
113
|
+
} else if (unit === 'seconds') {
|
114
|
+
nextValue = `${hour}:${minutes}:${value}`;
|
115
|
+
} else {
|
116
|
+
assertNever(unit);
|
117
|
+
}
|
118
|
+
|
119
|
+
if (this.props.allowSeconds && unit !== 'seconds') {
|
120
|
+
nextValue += `:${seconds}`;
|
121
|
+
}
|
122
|
+
|
123
|
+
this.props.onChange(nextValue);
|
124
|
+
}
|
125
|
+
|
126
|
+
componentDidMount(): void {
|
127
|
+
this.inputRefs.forEach((unitOfTime) => unitOfTime?.current?.scrollToValue?.());
|
128
|
+
}
|
129
|
+
|
130
|
+
render(): React.ReactNode {
|
131
|
+
const styleForColumnOfUnit: React.CSSProperties = {
|
132
|
+
maxHeight: 190,
|
133
|
+
overflowY: 'auto',
|
134
|
+
scrollbarWidth: 'none',
|
135
|
+
marginTop: 'var(--gap-1)',
|
136
|
+
};
|
137
|
+
|
138
|
+
return (
|
139
|
+
<div className="sd-shadow--z2 radius-md" onBlur={this.props.closePopup}>
|
140
|
+
<Spacer
|
141
|
+
v
|
142
|
+
gap="0"
|
143
|
+
style={{
|
144
|
+
width: 200,
|
145
|
+
padding: 'var(--gap-1)',
|
146
|
+
backgroundColor: 'var(--color-bg-00)',
|
147
|
+
borderRadius: 'var(--b-radius--small)',
|
148
|
+
}}
|
149
|
+
>
|
150
|
+
{this.props.headerTemplate && (
|
151
|
+
<>
|
152
|
+
{this.props.headerTemplate}
|
153
|
+
<ContentDivider border type="solid" orientation="horizontal" margin="none" />
|
154
|
+
</>
|
155
|
+
)}
|
156
|
+
<Spacer h gap="4" noWrap justifyContent="center" alignItems="start">
|
157
|
+
<Spacer v gap="4" style={styleForColumnOfUnit} alignItems="center" noWrap>
|
158
|
+
{getOptionsForTimeUnit('hours', this.is12HourFormat).map((hour) => {
|
159
|
+
const isActiveHour =
|
160
|
+
hour === parseUnitOfTime('hours', this.props.value, this.is12HourFormat);
|
161
|
+
|
162
|
+
return (
|
163
|
+
<TimeValueHolder
|
164
|
+
ref={isActiveHour ? this.inputRefs[0] : undefined}
|
165
|
+
onClick={() => {
|
166
|
+
this.handleChange('hours', hour);
|
167
|
+
}}
|
168
|
+
isActive={isActiveHour}
|
169
|
+
value={hour}
|
170
|
+
/>
|
171
|
+
);
|
172
|
+
})}
|
173
|
+
</Spacer>
|
174
|
+
<ContentDivider align="center" border type="solid" orientation="vertical" margin="none" />
|
175
|
+
<Spacer v gap="4" style={styleForColumnOfUnit} alignItems="center" noWrap>
|
176
|
+
{getOptionsForTimeUnit('minutes', this.is12HourFormat).map((minute) => {
|
177
|
+
const isActiveMinute =
|
178
|
+
minute === parseUnitOfTime('minutes', this.props.value, this.is12HourFormat);
|
179
|
+
|
180
|
+
return (
|
181
|
+
<TimeValueHolder
|
182
|
+
ref={isActiveMinute ? this.inputRefs[1] : undefined}
|
183
|
+
isActive={isActiveMinute}
|
184
|
+
value={minute}
|
185
|
+
onClick={() => {
|
186
|
+
this.handleChange('minutes', minute);
|
187
|
+
}}
|
188
|
+
/>
|
189
|
+
);
|
190
|
+
})}
|
191
|
+
</Spacer>
|
192
|
+
{this.props.allowSeconds && (
|
193
|
+
<>
|
194
|
+
<ContentDivider
|
195
|
+
align="center"
|
196
|
+
border
|
197
|
+
type="solid"
|
198
|
+
orientation="vertical"
|
199
|
+
margin="none"
|
200
|
+
/>
|
201
|
+
<Spacer v gap="4" style={styleForColumnOfUnit} alignItems="center" noWrap>
|
202
|
+
{getOptionsForTimeUnit('seconds', this.is12HourFormat).map((second) => {
|
203
|
+
const isActiveMinute =
|
204
|
+
second ===
|
205
|
+
parseUnitOfTime('seconds', this.props.value, this.is12HourFormat);
|
206
|
+
|
207
|
+
return (
|
208
|
+
<TimeValueHolder
|
209
|
+
ref={isActiveMinute ? this.inputRefs[2] : undefined}
|
210
|
+
onClick={() => {
|
211
|
+
this.handleChange('seconds', second);
|
212
|
+
}}
|
213
|
+
isActive={isActiveMinute}
|
214
|
+
value={second}
|
215
|
+
/>
|
216
|
+
);
|
217
|
+
})}
|
218
|
+
</Spacer>
|
219
|
+
</>
|
220
|
+
)}
|
221
|
+
{this.is12HourFormat && (
|
222
|
+
<div
|
223
|
+
style={{
|
224
|
+
marginTop: 'var(--gap-1)',
|
225
|
+
}}
|
226
|
+
>
|
227
|
+
<RadioButtonGroup
|
228
|
+
onChange={(nextValue) => {
|
229
|
+
const [hour, minutes, seconds] = (this.props.value ?? '').split(':');
|
230
|
+
|
231
|
+
if (nextValue === 'PM') {
|
232
|
+
let newValue = `${padValue(parseInt(hour, 10) + 12)}:${minutes}`;
|
233
|
+
|
234
|
+
if (this.props.allowSeconds) {
|
235
|
+
newValue += `:${seconds}`;
|
236
|
+
}
|
237
|
+
|
238
|
+
this.props.onChange(newValue);
|
239
|
+
} else {
|
240
|
+
let newValue = `${padValue(parseInt(hour, 10) - 12)}:${minutes}`;
|
241
|
+
|
242
|
+
if (this.props.allowSeconds) {
|
243
|
+
newValue += `:${seconds}`;
|
244
|
+
}
|
245
|
+
|
246
|
+
this.props.onChange(newValue);
|
247
|
+
}
|
248
|
+
}}
|
249
|
+
options={[
|
250
|
+
{
|
251
|
+
label: 'AM',
|
252
|
+
value: 'AM',
|
253
|
+
},
|
254
|
+
{
|
255
|
+
label: 'PM',
|
256
|
+
value: 'PM',
|
257
|
+
},
|
258
|
+
]}
|
259
|
+
value={parseInt((this.props.value ?? '').split(':')[0], 10) < 12 ? 'AM' : 'PM'}
|
260
|
+
/>
|
261
|
+
</div>
|
262
|
+
)}
|
263
|
+
</Spacer>
|
264
|
+
{this.props.footerTemplate && (
|
265
|
+
<>
|
266
|
+
<ContentDivider border type="solid" orientation="horizontal" margin="none" />
|
267
|
+
{this.props.footerTemplate}
|
268
|
+
</>
|
269
|
+
)}
|
270
|
+
</Spacer>
|
271
|
+
</div>
|
272
|
+
);
|
273
|
+
}
|
274
|
+
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
2
|
+
import {InputWrapper} from './Form';
|
3
3
|
import {IInputWrapper} from './Form/InputWrapper';
|
4
4
|
import {padStart, range} from 'lodash';
|
5
5
|
|
@@ -28,7 +28,7 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
|
|
28
28
|
this.getOptionsForTimeUnit = this.getOptionsForTimeUnit.bind(this);
|
29
29
|
this.padValue = this.padValue.bind(this);
|
30
30
|
|
31
|
-
const hour = new Date().toLocaleTimeString([], {
|
31
|
+
const hour = new Date().toLocaleTimeString([], {hour: 'numeric'});
|
32
32
|
this.is12HourFormat = hour.includes('AM') || hour.includes('PM');
|
33
33
|
}
|
34
34
|
|
@@ -115,15 +115,15 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
|
|
115
115
|
}
|
116
116
|
|
117
117
|
padValue(value: number) {
|
118
|
-
return padStart(
|
118
|
+
return padStart(value.toString(), 2, '0');
|
119
119
|
}
|
120
120
|
|
121
121
|
updatedTimeUnit() {
|
122
122
|
const timeUnitValuesArray = this.props.value.split(':');
|
123
123
|
|
124
124
|
/**
|
125
|
-
|
126
|
-
|
125
|
+
* updating the initial value from props
|
126
|
+
*/
|
127
127
|
if (this.is12HourFormat) {
|
128
128
|
if (parseInt(timeUnitValuesArray[0], 10) > 12) {
|
129
129
|
timeUnitValuesArray[0] = this.padValue(parseInt(timeUnitValuesArray[0], 10) - 12);
|
@@ -149,10 +149,10 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
|
|
149
149
|
tabindex={this.props.tabindex}
|
150
150
|
inputWrapper={this.props.inputWrapper}
|
151
151
|
>
|
152
|
-
<div className=
|
153
|
-
<div className=
|
152
|
+
<div className="sd__input__time-picker-v2" data-test-id={this.props['data-test-id']}>
|
153
|
+
<div className="input-wrapper__time-picker-v2">
|
154
154
|
<select
|
155
|
-
className=
|
155
|
+
className="sd-input__select"
|
156
156
|
value={timeUnitValuesArray[0]}
|
157
157
|
onChange={({target}) => {
|
158
158
|
this.handleTimeChange(0, target.value);
|
@@ -162,11 +162,11 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
|
|
162
162
|
<option value={hour} label={hour} key={hour} />
|
163
163
|
))}
|
164
164
|
</select>
|
165
|
-
<span className=
|
165
|
+
<span className="time-picker-v2-suffix">:</span>
|
166
166
|
</div>
|
167
|
-
<div className=
|
167
|
+
<div className="input-wrapper__time-picker-v2">
|
168
168
|
<select
|
169
|
-
className=
|
169
|
+
className="sd-input__select"
|
170
170
|
value={timeUnitValuesArray[1]}
|
171
171
|
onChange={({target}) => {
|
172
172
|
this.handleTimeChange(1, target.value);
|
@@ -176,12 +176,12 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
|
|
176
176
|
<option value={minute} label={minute} key={minute} />
|
177
177
|
))}
|
178
178
|
</select>
|
179
|
-
{this.props.allowSeconds &&
|
179
|
+
{this.props.allowSeconds && <span className="time-picker-v2-suffix">:</span>}
|
180
180
|
</div>
|
181
181
|
{this.props.allowSeconds && (
|
182
|
-
<div className=
|
182
|
+
<div className="input-wrapper__time-picker-v2">
|
183
183
|
<select
|
184
|
-
className=
|
184
|
+
className="sd-input__select"
|
185
185
|
value={timeUnitValuesArray[2]}
|
186
186
|
onChange={({target}) => {
|
187
187
|
this.handleTimeChange(2, target.value);
|
@@ -194,11 +194,11 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
|
|
194
194
|
</div>
|
195
195
|
)}
|
196
196
|
{this.is12HourFormat && (
|
197
|
-
<div className=
|
198
|
-
<span className=
|
197
|
+
<div className="input-wrapper__time-picker-v2">
|
198
|
+
<span className="time-picker-v2-suffix" />
|
199
199
|
<select
|
200
|
-
className=
|
201
|
-
value={
|
200
|
+
className="sd-input__select"
|
201
|
+
value={parseInt(this.props.value.split(':')[0], 10) >= 12 ? 'PM' : 'AM'}
|
202
202
|
onChange={({target}) => {
|
203
203
|
let splitValue = this.props.value.split(':');
|
204
204
|
|
@@ -211,8 +211,8 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
|
|
211
211
|
this.props.onChange(splitValue.join(':'));
|
212
212
|
}}
|
213
213
|
>
|
214
|
-
<option value=
|
215
|
-
<option value=
|
214
|
+
<option value="AM" label="AM" />
|
215
|
+
<option value="PM" label="PM" />
|
216
216
|
</select>
|
217
217
|
</div>
|
218
218
|
)}
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import * as ReactDOM from
|
2
|
+
import * as ReactDOM from 'react-dom';
|
3
3
|
import {MessageProp, IMessageOptions, Position} from './ToastMessage';
|
4
4
|
import ToastWrapper from './ToastWrapper';
|
5
5
|
|
6
|
-
const TOAST_ID =
|
6
|
+
const TOAST_ID = 'react-toast';
|
7
7
|
|
8
8
|
interface IMessageId {
|
9
9
|
id: string;
|
@@ -28,17 +28,21 @@ class Toasted {
|
|
28
28
|
if (existingElement) {
|
29
29
|
element = existingElement;
|
30
30
|
} else {
|
31
|
-
const el = document.createElement(
|
31
|
+
const el = document.createElement('div');
|
32
32
|
el.id = TOAST_ID;
|
33
|
-
el.className =
|
33
|
+
el.className = 'sd-toast__container sd-toast__container--top';
|
34
34
|
document.body.appendChild(el);
|
35
35
|
element = el;
|
36
36
|
}
|
37
37
|
|
38
38
|
ReactDOM.render(
|
39
|
-
<ToastWrapper
|
40
|
-
|
41
|
-
|
39
|
+
<ToastWrapper
|
40
|
+
ref={(ref) => {
|
41
|
+
this.componentRef = ref;
|
42
|
+
}}
|
43
|
+
/>,
|
44
|
+
element,
|
45
|
+
);
|
42
46
|
}
|
43
47
|
|
44
48
|
notify(message: MessageProp, options: Partial<IMessageOptions>): IMessageId | null {
|
@@ -2,9 +2,7 @@ import * as React from 'react';
|
|
2
2
|
import ToastText from './ToastText';
|
3
3
|
import classNames from 'classnames';
|
4
4
|
|
5
|
-
export type MessageProp =
|
6
|
-
| React.ReactNode
|
7
|
-
| string;
|
5
|
+
export type MessageProp = React.ReactNode | string;
|
8
6
|
|
9
7
|
export type Position = 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
10
8
|
|
@@ -24,22 +22,13 @@ interface IProps extends IMessageOptions {
|
|
24
22
|
closeElement(id: string, position: Position): void;
|
25
23
|
}
|
26
24
|
|
27
|
-
export const ToastMessage = ({
|
28
|
-
id,
|
29
|
-
message,
|
30
|
-
type,
|
31
|
-
icon,
|
32
|
-
size,
|
33
|
-
duration,
|
34
|
-
position,
|
35
|
-
closeElement,
|
36
|
-
}: IProps) => {
|
25
|
+
export const ToastMessage = ({id, message, type, icon, size, duration, position, closeElement}: IProps) => {
|
37
26
|
const [show, setShow] = React.useState(false);
|
38
27
|
const [enter, setEnter] = React.useState(false);
|
39
28
|
let timer: number;
|
40
29
|
React.useEffect(() => setShow(true), []);
|
41
30
|
|
42
|
-
if (typeof duration ===
|
31
|
+
if (typeof duration === 'number') {
|
43
32
|
React.useEffect(() => {
|
44
33
|
timer = window.setTimeout(() => {
|
45
34
|
close(id, position);
|
@@ -1,42 +1,40 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
2
|
+
import {Icon} from './Icon';
|
3
3
|
|
4
4
|
interface IProps {
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
5
|
+
id?: string;
|
6
|
+
title?: string | React.ReactNode;
|
7
|
+
icon?: string;
|
8
|
+
onClose: () => void;
|
9
9
|
}
|
10
10
|
|
11
|
-
const ToastText = ({
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
11
|
+
const ToastText = ({id, title, icon, onClose}: IProps) => {
|
12
|
+
const ref = React.useRef(null);
|
13
|
+
return (
|
14
|
+
<React.Fragment>
|
15
|
+
{icon ? (
|
16
|
+
<div className="sd-toast__icon">
|
17
|
+
<Icon name={icon} />
|
18
|
+
</div>
|
19
|
+
) : null}
|
20
|
+
{typeof title === 'string' ? (
|
21
|
+
<span style={{width: '100%'}} ref={ref} id={id}>
|
22
|
+
<div className="sd-toast__message">{title}</div>
|
23
|
+
</span>
|
24
|
+
) : (
|
25
|
+
<span style={{width: '100%', display: 'inherit'}} ref={ref} id={id}>
|
26
|
+
{title}
|
27
|
+
</span>
|
28
|
+
)}
|
29
|
+
{onClose && <Close onClose={onClose} />}
|
30
|
+
</React.Fragment>
|
31
|
+
);
|
29
32
|
};
|
30
33
|
|
31
|
-
const Close = ({
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
aria-label="Close"
|
36
|
-
onClick={onClose}
|
37
|
-
>
|
38
|
-
<Icon name='close-small' />
|
39
|
-
</button>
|
34
|
+
const Close = ({onClose}: {onClose: () => void}) => (
|
35
|
+
<button className="icn-btn sd-toast__actions" type="button" aria-label="Close" onClick={onClose}>
|
36
|
+
<Icon name="close-small" />
|
37
|
+
</button>
|
40
38
|
);
|
41
39
|
|
42
40
|
export default ToastText;
|