superdesk-ui-framework 4.0.46 → 4.0.48
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/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 +175 -117
- 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 +30 -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 +2 -2
- 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/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 +46 -10
- 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 +74 -20
- 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 +6246 -5620
- 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 +0 -3
- package/dist/superdesk-ui.bundle.js +1791 -1865
- package/dist/vendor.bundle.js +2 -2
- 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 +46 -10
- 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 +74 -20
- 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 +26 -4
- package/react/components/DateTimePicker.js +82 -27
- 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.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/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/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
@@ -1,6 +1,6 @@
|
|
1
|
-
import * as React from
|
2
|
-
import classNames from
|
3
|
-
import Scrollspy from
|
1
|
+
import * as React from 'react';
|
2
|
+
import classNames from 'classnames';
|
3
|
+
import Scrollspy from 'react-scrollspy';
|
4
4
|
|
5
5
|
interface IMenuItem {
|
6
6
|
id: string;
|
@@ -24,8 +24,8 @@ interface IMenu {
|
|
24
24
|
scrollSpy?: string;
|
25
25
|
offset?: number;
|
26
26
|
reverseItemBorder?: boolean;
|
27
|
-
style?:
|
28
|
-
size?:
|
27
|
+
style?: 'default' | 'inverse' | 'blanc';
|
28
|
+
size?: 'medium' | 'large';
|
29
29
|
onSelect(id: string, route: string): void;
|
30
30
|
}
|
31
31
|
|
@@ -50,37 +50,31 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
|
|
50
50
|
});
|
51
51
|
|
52
52
|
if (item.ref) {
|
53
|
-
return document
|
54
|
-
.getElementById(item.ref)
|
55
|
-
?.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
53
|
+
return document.getElementById(item.ref)?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
|
56
54
|
}
|
57
55
|
|
58
56
|
if (item.onClick) {
|
59
57
|
return item.onClick();
|
60
58
|
}
|
61
59
|
|
62
|
-
this.props.onSelect(item.id, item.route ? item.route :
|
60
|
+
this.props.onSelect(item.id, item.route ? item.route : '');
|
63
61
|
}
|
64
62
|
|
65
63
|
componentDidMount() {
|
66
64
|
if (this.props.scrollTo) {
|
67
|
-
return document
|
68
|
-
.getElementById(this.props.scrollTo)
|
69
|
-
?.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
65
|
+
return document.getElementById(this.props.scrollTo)?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
|
70
66
|
}
|
71
67
|
}
|
72
68
|
|
73
69
|
render() {
|
74
70
|
let classes = classNames(
|
75
|
-
|
71
|
+
'sd-left-nav',
|
76
72
|
{
|
77
|
-
|
78
|
-
[`sd-left-nav--${this.props.style}`]:
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
this.props.size || this.props.size !== undefined,
|
83
|
-
"sd-left-nav--reverse-border": this.props.reverseItemBorder,
|
73
|
+
'sd-left-nav--default': this.props.style === undefined,
|
74
|
+
[`sd-left-nav--${this.props.style}`]: this.props.style || this.props.style !== undefined,
|
75
|
+
'sd-left-nav--medium': this.props.size === undefined,
|
76
|
+
[`sd-left-nav--${this.props.size}`]: this.props.size || this.props.size !== undefined,
|
77
|
+
'sd-left-nav--reverse-border': this.props.reverseItemBorder,
|
84
78
|
},
|
85
79
|
this.props.className,
|
86
80
|
);
|
@@ -91,32 +85,35 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
|
|
91
85
|
this.props.groups.map((element, index) => {
|
92
86
|
scrollSpyList = [...scrollSpyList, element.label];
|
93
87
|
scrollSpyItems.push(
|
94
|
-
<span className="sd-left-nav__group-header" key={
|
88
|
+
<span className="sd-left-nav__group-header" key={'group-' + index}>
|
95
89
|
{element.label}
|
96
90
|
</span>,
|
97
91
|
);
|
98
92
|
|
99
93
|
element.items.map((elementOfItem, indexOfItem) => {
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
94
|
+
scrollSpyList = [...scrollSpyList, `${elementOfItem.ref}`];
|
95
|
+
|
96
|
+
scrollSpyItems.push(
|
97
|
+
<a
|
98
|
+
key={'item-' + indexOfItem}
|
99
|
+
onClick={(event) => {
|
100
|
+
this.handleClick(elementOfItem, event);
|
101
|
+
}}
|
102
|
+
className="sd-left-nav__btn"
|
103
|
+
>
|
104
|
+
{elementOfItem.label}
|
105
|
+
</a>,
|
106
|
+
);
|
111
107
|
});
|
112
108
|
});
|
113
109
|
|
114
110
|
return (
|
115
111
|
<Scrollspy
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
112
|
+
offset={this.props.offset ? this.props.offset : -300}
|
113
|
+
items={scrollSpyList}
|
114
|
+
rootEl={this.props.scrollSpy}
|
115
|
+
currentClassName="sd-left-nav__btn--active"
|
116
|
+
>
|
120
117
|
{scrollSpyItems.map((element) => element)}
|
121
118
|
</Scrollspy>
|
122
119
|
);
|
@@ -126,23 +123,24 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
|
|
126
123
|
return this.props.groups.map((group, i) => {
|
127
124
|
return (
|
128
125
|
<React.Fragment key={i}>
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
126
|
+
<span className="sd-left-nav__group-header">{group.label}</span>
|
127
|
+
{group.items.map((item, j) => {
|
128
|
+
return (
|
129
|
+
<button
|
130
|
+
key={j}
|
131
|
+
onClick={(event) => {
|
132
|
+
this.handleClick(item, event);
|
133
|
+
}}
|
134
|
+
className={
|
135
|
+
item.id === this.state.active
|
136
|
+
? 'sd-left-nav__btn sd-left-nav__btn--active'
|
137
|
+
: 'sd-left-nav__btn'
|
138
|
+
}
|
139
|
+
>
|
140
|
+
{item.label}
|
141
|
+
</button>
|
142
|
+
);
|
143
|
+
})}
|
146
144
|
</React.Fragment>
|
147
145
|
);
|
148
146
|
});
|
@@ -3,41 +3,25 @@ import classNames from 'classnames';
|
|
3
3
|
|
4
4
|
class BoxedListMedia extends React.PureComponent {
|
5
5
|
render() {
|
6
|
-
return
|
7
|
-
<div className='boxed-list__item-media'>
|
8
|
-
{this.props.children}
|
9
|
-
</div>
|
10
|
-
);
|
6
|
+
return <div className="boxed-list__item-media">{this.props.children}</div>;
|
11
7
|
}
|
12
8
|
}
|
13
9
|
|
14
10
|
class BoxedListContent extends React.PureComponent {
|
15
11
|
render() {
|
16
|
-
return
|
17
|
-
<div className='boxed-list__item-content'>
|
18
|
-
{this.props.children}
|
19
|
-
</div>
|
20
|
-
);
|
12
|
+
return <div className="boxed-list__item-content">{this.props.children}</div>;
|
21
13
|
}
|
22
14
|
}
|
23
15
|
|
24
16
|
class BoxedListContentRow extends React.PureComponent {
|
25
17
|
render() {
|
26
|
-
return
|
27
|
-
<div className='boxed-list__item-content-row'>
|
28
|
-
{this.props.children}
|
29
|
-
</div>
|
30
|
-
);
|
18
|
+
return <div className="boxed-list__item-content-row">{this.props.children}</div>;
|
31
19
|
}
|
32
20
|
}
|
33
21
|
|
34
22
|
class BoxedListFooter extends React.PureComponent {
|
35
23
|
render() {
|
36
|
-
return
|
37
|
-
<div className='boxed-list__item-footer'>
|
38
|
-
{this.props.children}
|
39
|
-
</div>
|
40
|
-
);
|
24
|
+
return <div className="boxed-list__item-footer">{this.props.children}</div>;
|
41
25
|
}
|
42
26
|
}
|
43
27
|
|
@@ -114,22 +98,11 @@ class BoxedListItem extends React.PureComponent<IPropsItem> {
|
|
114
98
|
});
|
115
99
|
return (
|
116
100
|
<li className={classes} onClick={this.handleClick}>
|
101
|
+
{this.props.media && <BoxedListMedia>{this.props.media}</BoxedListMedia>}
|
117
102
|
|
118
|
-
{this.props.
|
119
|
-
<BoxedListMedia>
|
120
|
-
{this.props.media}
|
121
|
-
</BoxedListMedia>
|
122
|
-
)}
|
103
|
+
<BoxedListContent>{this.props.children}</BoxedListContent>
|
123
104
|
|
124
|
-
<
|
125
|
-
{this.props.children}
|
126
|
-
</BoxedListContent>
|
127
|
-
|
128
|
-
{this.props.footer && (
|
129
|
-
<BoxedListFooter>
|
130
|
-
{this.props.footer}
|
131
|
-
</BoxedListFooter>
|
132
|
-
)}
|
105
|
+
{this.props.footer && <BoxedListFooter>{this.props.footer}</BoxedListFooter>}
|
133
106
|
|
134
107
|
{this.props.actions && (
|
135
108
|
<BoxedListActions
|
@@ -155,10 +128,14 @@ interface IProps {
|
|
155
128
|
|
156
129
|
class BoxedList extends React.PureComponent<IProps> {
|
157
130
|
render() {
|
158
|
-
let classes = classNames(
|
159
|
-
'boxed-list
|
160
|
-
|
161
|
-
|
131
|
+
let classes = classNames(
|
132
|
+
'boxed-list',
|
133
|
+
{
|
134
|
+
'boxed-list--compact': this.props.density === undefined,
|
135
|
+
[`boxed-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
|
136
|
+
},
|
137
|
+
this.props.className,
|
138
|
+
);
|
162
139
|
return (
|
163
140
|
<ul className={classes} style={this.props.style}>
|
164
141
|
{this.props.children}
|
@@ -167,6 +144,4 @@ class BoxedList extends React.PureComponent<IProps> {
|
|
167
144
|
}
|
168
145
|
}
|
169
146
|
|
170
|
-
export {
|
171
|
-
BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter
|
172
|
-
};
|
147
|
+
export {BoxedList, BoxedListItem, BoxedListContentRow, BoxedListActions, BoxedListFooter};
|
@@ -23,11 +23,7 @@ export class CalendarWeekDayItem extends React.PureComponent<IPropsItem> {
|
|
23
23
|
[`calendar-week-day__item--${this.props.state}`]: this.props.state || this.props.state !== undefined,
|
24
24
|
});
|
25
25
|
|
26
|
-
return
|
27
|
-
<div className={classes}>
|
28
|
-
{this.props.children}
|
29
|
-
</div>
|
30
|
-
);
|
26
|
+
return <div className={classes}>{this.props.children}</div>;
|
31
27
|
}
|
32
28
|
}
|
33
29
|
|
@@ -43,10 +39,6 @@ export class WeeklyCalendarGrid extends React.PureComponent<{style?: React.CSSPr
|
|
43
39
|
|
44
40
|
export class WeeklyCalendarGridItem extends React.PureComponent {
|
45
41
|
render() {
|
46
|
-
return
|
47
|
-
<div className="calendar-week-day__container">
|
48
|
-
{this.props.children}
|
49
|
-
</div>
|
50
|
-
);
|
42
|
+
return <div className="calendar-week-day__container">{this.props.children}</div>;
|
51
43
|
}
|
52
44
|
}
|
@@ -6,9 +6,9 @@ interface IPropsItem {
|
|
6
6
|
action?: React.ReactNode;
|
7
7
|
locked?: boolean;
|
8
8
|
itemColum: Array<{
|
9
|
-
itemRow: Array<{
|
10
|
-
border?: boolean
|
11
|
-
fullwidth?: boolean
|
9
|
+
itemRow: Array<{content: any}>;
|
10
|
+
border?: boolean;
|
11
|
+
fullwidth?: boolean;
|
12
12
|
}>;
|
13
13
|
activated?: boolean;
|
14
14
|
selected?: boolean;
|
@@ -30,58 +30,63 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
|
|
30
30
|
onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
|
31
31
|
event.preventDefault();
|
32
32
|
event.stopPropagation();
|
33
|
-
}
|
33
|
+
};
|
34
34
|
|
35
35
|
render() {
|
36
36
|
let classes = classNames('sd-list-item sd-shadow--z1', {
|
37
37
|
'sd-list-item--activated': this.props.activated,
|
38
38
|
'sd-list-item--selected': this.props.selected,
|
39
|
-
|
40
|
-
|
39
|
+
fetched: this.props.archived,
|
40
|
+
actioning: this.props.loading,
|
41
41
|
});
|
42
42
|
|
43
43
|
return (
|
44
44
|
<div
|
45
|
-
role=
|
45
|
+
role="listitem"
|
46
46
|
className={classes}
|
47
|
-
onClick={(e) =>
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
if (
|
52
|
-
|
47
|
+
onClick={(e) =>
|
48
|
+
this.multiClickHandler(e, {
|
49
|
+
onSingleClick: () => {
|
50
|
+
let selection = window.getSelection();
|
51
|
+
if (this.props.onClick && selection) {
|
52
|
+
if (selection.toString().length < 1) {
|
53
|
+
this.props.onClick();
|
54
|
+
}
|
53
55
|
}
|
54
|
-
}
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
}
|
60
|
-
}
|
61
|
-
})}
|
62
|
-
>
|
63
|
-
{this.props.locked
|
64
|
-
? <div className="sd-list-item__border sd-list-item__border--locked"></div>
|
65
|
-
: <div className="sd-list-item__border"></div>
|
56
|
+
},
|
57
|
+
onDoubleClick: () => {
|
58
|
+
if (this.props.onDoubleClick) {
|
59
|
+
this.props.onDoubleClick();
|
60
|
+
}
|
61
|
+
},
|
62
|
+
})
|
66
63
|
}
|
64
|
+
>
|
65
|
+
{this.props.locked ? (
|
66
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
67
|
+
) : (
|
68
|
+
<div className="sd-list-item__border"></div>
|
69
|
+
)}
|
67
70
|
{this.props.itemColum.map((item, index) => {
|
68
|
-
return
|
69
|
-
|
71
|
+
return (
|
72
|
+
<div
|
73
|
+
className={`
|
70
74
|
sd-list-item__column
|
71
75
|
${item.fullwidth && 'sd-list-item__column--grow'}
|
72
|
-
${!item.border && 'sd-list-item__column--no-border'}`
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
76
|
+
${!item.border && 'sd-list-item__column--no-border'}`}
|
77
|
+
key={index}
|
78
|
+
>
|
79
|
+
{item.itemRow.map((e, i) => {
|
80
|
+
return item.itemRow.length <= 1 ? (
|
81
|
+
<React.Fragment key={i}>{e.content}</React.Fragment>
|
82
|
+
) : (
|
83
|
+
<div className="sd-list-item__row" key={i}>
|
80
84
|
{e.content}
|
81
85
|
</div>
|
82
|
-
|
83
|
-
|
84
|
-
|
86
|
+
);
|
87
|
+
})}
|
88
|
+
</div>
|
89
|
+
);
|
85
90
|
})}
|
86
91
|
<div className="sd-list-item__action-menu" onClick={this.onActionMenuClick}>
|
87
92
|
{this.props.action}
|
@@ -93,20 +98,20 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
|
|
93
98
|
|
94
99
|
interface IProps {
|
95
100
|
items: Array<{
|
96
|
-
itemColum: Array<IItemArray
|
97
|
-
locked?: boolean
|
98
|
-
action?: React.ReactNode
|
99
|
-
loading?: boolean
|
100
|
-
activated?: boolean
|
101
|
-
selected?: boolean
|
102
|
-
archived?: boolean
|
103
|
-
onClick?(): void
|
101
|
+
itemColum: Array<IItemArray>;
|
102
|
+
locked?: boolean;
|
103
|
+
action?: React.ReactNode;
|
104
|
+
loading?: boolean;
|
105
|
+
activated?: boolean;
|
106
|
+
selected?: boolean;
|
107
|
+
archived?: boolean;
|
108
|
+
onClick?(): void;
|
104
109
|
onDoubleClick?(): void;
|
105
110
|
}>;
|
106
111
|
}
|
107
112
|
|
108
113
|
interface IItemArray {
|
109
|
-
itemRow: Array<{
|
114
|
+
itemRow: Array<{content: React.ReactNode}>;
|
110
115
|
border?: boolean;
|
111
116
|
fullwidth?: boolean;
|
112
117
|
}
|
@@ -115,25 +120,26 @@ class ContentList extends React.PureComponent<IProps> {
|
|
115
120
|
render() {
|
116
121
|
let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
|
117
122
|
return (
|
118
|
-
<div role=
|
123
|
+
<div role="list" className={classes}>
|
119
124
|
{this.props.items.map((item, index) => {
|
120
|
-
return
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
125
|
+
return (
|
126
|
+
<ContentListItem
|
127
|
+
key={index}
|
128
|
+
itemColum={item.itemColum}
|
129
|
+
locked={item.locked}
|
130
|
+
action={item.action}
|
131
|
+
loading={item.loading}
|
132
|
+
activated={item.activated}
|
133
|
+
selected={item.selected}
|
134
|
+
archived={item.archived}
|
135
|
+
onClick={item.onClick}
|
136
|
+
onDoubleClick={item.onDoubleClick}
|
137
|
+
/>
|
138
|
+
);
|
131
139
|
})}
|
132
140
|
</div>
|
133
141
|
);
|
134
142
|
}
|
135
143
|
}
|
136
144
|
|
137
|
-
export {
|
138
|
-
ContentList, ContentListItem
|
139
|
-
};
|
145
|
+
export {ContentList, ContentListItem};
|
@@ -24,8 +24,7 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
|
|
24
24
|
'simple-list__item--justify-flex-start': this.props.justify === undefined,
|
25
25
|
[`simple-list__item--justify-${this.props.justify}`]:
|
26
26
|
this.props.justify || this.props.justify !== undefined,
|
27
|
-
[`simple-list__item--gap-${this.props.gap}`]:
|
28
|
-
this.props.gap || this.props.gap !== undefined,
|
27
|
+
[`simple-list__item--gap-${this.props.gap}`]: this.props.gap || this.props.gap !== undefined,
|
29
28
|
});
|
30
29
|
return (
|
31
30
|
<li className={classes} id={this.props.id || undefined}>
|
@@ -37,13 +36,17 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
|
|
37
36
|
|
38
37
|
class SimpleList extends React.PureComponent<IProps> {
|
39
38
|
render() {
|
40
|
-
let classes = classNames(
|
41
|
-
'simple-list
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
39
|
+
let classes = classNames(
|
40
|
+
'simple-list',
|
41
|
+
{
|
42
|
+
'simple-list--compact': this.props.density === undefined,
|
43
|
+
'simple-list--dotted': this.props.border === true,
|
44
|
+
[`simple-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
|
45
|
+
'': this.props.width === undefined,
|
46
|
+
[`simple-list--fixedW-${this.props.width}`]: this.props.width || this.props.width !== undefined,
|
47
|
+
},
|
48
|
+
this.props.className,
|
49
|
+
);
|
47
50
|
return (
|
48
51
|
<ul className={classes} id={this.props.id || undefined}>
|
49
52
|
{this.props.children}
|
@@ -52,6 +55,4 @@ class SimpleList extends React.PureComponent<IProps> {
|
|
52
55
|
}
|
53
56
|
}
|
54
57
|
|
55
|
-
export {
|
56
|
-
SimpleList, SimpleListItem
|
57
|
-
};
|
58
|
+
export {SimpleList, SimpleListItem};
|