superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.10
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/.vscode/settings.json +5 -0
- package/app/fonts/sd_big-icons.eot +0 -0
- package/app/fonts/sd_big-icons.svg +55 -53
- package/app/fonts/sd_big-icons.ttf +0 -0
- package/app/fonts/sd_big-icons.woff +0 -0
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +15 -7
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/img/SD-logo.svg +52 -0
- package/app/img/dots.svg +3 -0
- package/app/styles/_accessibility.scss +4 -3
- package/app/styles/_big-icon-font.scss +63 -23
- package/app/styles/_boxed-list.scss +29 -3
- package/app/styles/_buttons.scss +4 -0
- package/app/styles/_hamburger.scss +160 -0
- package/app/styles/_helpers.scss +15 -7
- package/app/styles/_icon-font.scss +351 -307
- package/app/styles/_icon-labels.scss +66 -10
- package/app/styles/_sd-tag-input.scss +202 -296
- package/app/styles/_table-list.scss +244 -0
- package/app/styles/app.scss +4 -0
- package/app/styles/components/_list-item.scss +37 -21
- package/app/styles/components/_sd-dropzone.scss +52 -16
- package/app/styles/components/_sd-grid-item.scss +30 -16
- package/app/styles/components/_sd-notification-panel.scss +48 -0
- package/app/styles/components/_sd-photo-preview.scss +1 -1
- package/app/styles/components/_sd-searchbar.scss +7 -0
- package/app/styles/components/_subnav.scss +87 -80
- package/app/styles/design-tokens/_design-tokens-general.scss +10 -6
- package/app/styles/design-tokens/_new-colors.scss +10 -3
- package/app/styles/form-elements/_forms-general.scss +81 -7
- package/app/styles/form-elements/_inputs.scss +372 -62
- package/app/styles/grids/_grid-layout.scss +163 -45
- package/app/styles/layout/_basic-layout.scss +2 -2
- package/app/styles/layout/_container.scss +3 -0
- package/app/styles/layout/_editor.scss +109 -17
- package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
- package/app/styles/menus/_sd-left-navigation.scss +24 -1
- package/app/styles/menus/_sd-sidebar-menu.scss +16 -14
- package/app/styles/menus/_sd-top-menu.scss +19 -5
- package/app/styles/primereact/_pr-dialog.scss +39 -7
- package/app/styles/primereact/_pr-dropdown.scss +17 -3
- package/app-typescript/components/Badge.tsx +3 -2
- package/app-typescript/components/CreateButton.tsx +38 -0
- package/app-typescript/components/DatePicker.tsx +71 -36
- package/app-typescript/components/DonutChart.tsx +1 -1
- package/app-typescript/components/DropZone.tsx +4 -4
- package/app-typescript/components/DurationInput.tsx +375 -0
- package/app-typescript/components/EmptyState.tsx +2 -1
- package/app-typescript/components/Form/FormRowNew.tsx +41 -0
- package/app-typescript/components/Form/InputBase.tsx +85 -0
- package/app-typescript/components/Form/InputNew.tsx +107 -0
- package/app-typescript/components/Form/InputWrapper.tsx +79 -0
- package/app-typescript/components/Form/index.tsx +4 -0
- package/app-typescript/components/Icon.tsx +4 -2
- package/app-typescript/components/IconButton.tsx +5 -1
- package/app-typescript/components/IconLabel.tsx +8 -1
- package/app-typescript/components/Input.tsx +40 -41
- package/app-typescript/components/Label.tsx +49 -10
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +2 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +11 -7
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +7 -1
- package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
- package/app-typescript/components/Layouts/Container.tsx +1 -1
- package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
- package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
- package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
- package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
- package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
- package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
- package/app-typescript/components/Layouts/Layout.tsx +33 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +1 -4
- package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +10 -5
- package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
- package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
- package/app-typescript/components/Layouts/Panel.tsx +1 -0
- package/app-typescript/components/Layouts/index.tsx +20 -2
- package/app-typescript/components/LeftMenu.tsx +127 -116
- package/app-typescript/components/Lists/BoxedList.tsx +41 -5
- package/app-typescript/components/Lists/ContentList.tsx +100 -0
- package/app-typescript/components/Lists/TableList.tsx +212 -0
- package/app-typescript/components/Menu.tsx +31 -7
- package/app-typescript/components/Modal.tsx +31 -18
- package/app-typescript/components/MultiSelect.tsx +35 -5
- package/app-typescript/components/NavButton.tsx +4 -0
- package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
- package/app-typescript/components/Navigation/SideBarTabs.tsx +10 -0
- package/app-typescript/components/SearchBar.tsx +98 -0
- package/app-typescript/components/Select.tsx +28 -36
- package/app-typescript/components/SelectGrid.tsx +1 -1
- package/app-typescript/components/SelectWithTemplate.tsx +32 -7
- package/app-typescript/components/SidebarMenu.tsx +68 -0
- package/app-typescript/components/Skeleton.tsx +1 -1
- package/app-typescript/components/Spinner.tsx +1 -1
- package/app-typescript/components/SwitchGroup.tsx +2 -1
- package/app-typescript/components/Text/Time.tsx +34 -0
- package/app-typescript/components/TimePicker.tsx +50 -16
- package/app-typescript/components/Togglebox.tsx +1 -1
- package/app-typescript/components/Tooltip.tsx +7 -5
- package/app-typescript/components/TreeSelect.tsx +423 -195
- package/app-typescript/components/WithSizeObserver.tsx +88 -0
- package/app-typescript/dist/components/Alert.d.ts +16 -0
- package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
- package/app-typescript/dist/components/Avatar.d.ts +33 -0
- package/app-typescript/dist/components/Badge.d.ts +13 -0
- package/app-typescript/dist/components/Button.d.ts +23 -0
- package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
- package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
- package/app-typescript/dist/components/Checkbox.d.ts +19 -0
- package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
- package/app-typescript/dist/components/DatePicker.d.ts +37 -0
- package/app-typescript/dist/components/Divider.d.ts +9 -0
- package/app-typescript/dist/components/DonutChart.d.ts +12 -0
- package/app-typescript/dist/components/Dropdown.d.ts +28 -0
- package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
- package/app-typescript/dist/components/EmptyState.d.ts +11 -0
- package/app-typescript/dist/components/FormLabel.d.ts +9 -0
- package/app-typescript/dist/components/Genie.d.ts +13 -0
- package/app-typescript/dist/components/GridItem.d.ts +69 -0
- package/app-typescript/dist/components/GridList.d.ts +14 -0
- package/app-typescript/dist/components/HeadingText.d.ts +10 -0
- package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
- package/app-typescript/dist/components/Icon.d.ts +12 -0
- package/app-typescript/dist/components/IconButton.d.ts +12 -0
- package/app-typescript/dist/components/IconLabel.d.ts +11 -0
- package/app-typescript/dist/components/Input.d.ts +24 -0
- package/app-typescript/dist/components/Label.d.ts +15 -0
- package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
- package/app-typescript/dist/components/Loader.d.ts +8 -0
- package/app-typescript/dist/components/NavButton.d.ts +15 -0
- package/app-typescript/dist/components/Popover.d.ts +13 -0
- package/app-typescript/dist/components/PropsList.d.ts +15 -0
- package/app-typescript/dist/components/Radio.d.ts +19 -0
- package/app-typescript/dist/components/RadioButton.d.ts +20 -0
- package/app-typescript/dist/components/Select.d.ts +29 -0
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
- package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
- package/app-typescript/dist/components/StrechBar.d.ts +4 -0
- package/app-typescript/dist/components/SubNav.d.ts +10 -0
- package/app-typescript/dist/components/Switch.d.ts +12 -0
- package/app-typescript/dist/components/TabCustom.d.ts +25 -0
- package/app-typescript/dist/components/TabList.d.ts +22 -0
- package/app-typescript/dist/components/Tag.d.ts +9 -0
- package/app-typescript/dist/components/TagInput.d.ts +7 -0
- package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
- package/app-typescript/dist/components/TimePicker.d.ts +11 -0
- package/app-typescript/dist/components/Tooltip.d.ts +11 -0
- package/app-typescript/dist/components/_Positioner.d.ts +27 -0
- package/app-typescript/dist/index.d.ts +56 -0
- package/app-typescript/helpers.tsx +3 -0
- package/app-typescript/index.ts +10 -0
- package/dist/SD-logo.svg +52 -0
- package/dist/dots.svg +3 -0
- package/dist/examples.bundle.css +8803 -378
- package/dist/examples.bundle.js +79537 -62691
- package/dist/playgrounds/accessible-theme-test.html +1 -1
- package/dist/playgrounds/layout-test-2.html +1 -1
- package/dist/playgrounds/list-item-test.html +1 -1
- package/dist/playgrounds/master-desk.html +1 -1
- package/dist/playgrounds/media-carousel.html +1 -1
- package/dist/playgrounds/photo-desk.html +1 -1
- package/dist/playgrounds/planning.html +1 -1
- package/dist/playgrounds/publish.html +1 -1
- package/dist/playgrounds/publisher-content-analytics.html +1 -1
- package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
- package/dist/playgrounds/publisher-content-list-manual.html +1 -1
- package/dist/playgrounds/publisher-content-lists.html +1 -1
- package/dist/playgrounds/publisher-dashboard.html +1 -1
- package/dist/playgrounds/publisher-output-control.html +1 -1
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +9 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +13 -0
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +407 -182
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +4 -0
- package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
- package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
- package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
- package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
- package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
- package/dist/playgrounds/swimlane-view.html +1 -1
- package/dist/playgrounds/toasts.html +1 -1
- package/dist/playgrounds/video-editor.html +1 -1
- package/dist/react/Badges.tsx +18 -0
- package/dist/react/Container.tsx +1 -1
- package/dist/react/ContentList.tsx +286 -0
- package/dist/react/CreateButton.tsx +71 -0
- package/dist/react/DatePicker.tsx +31 -6
- package/dist/react/DropZone.tsx +14 -6
- package/dist/react/DurationInput.tsx +104 -0
- package/dist/react/IconButtons.tsx +6 -6
- package/dist/react/IconLabels.tsx +24 -2
- package/dist/react/Index.tsx +25 -0
- package/dist/react/Inputs.tsx +290 -7
- package/dist/react/Labels.tsx +51 -1
- package/dist/react/LeftNavigations.tsx +71 -44
- package/dist/react/Modal.tsx +1 -0
- package/dist/react/MultiSelect.tsx +10 -2
- package/dist/react/SelectWithTemplate.tsx +6 -1
- package/dist/react/Selects.tsx +55 -0
- package/dist/react/TableList.tsx +248 -0
- package/dist/react/TimePicker.tsx +22 -12
- package/dist/react/TreeSelect.tsx +301 -48
- package/dist/react/WithSizeObserver.tsx +44 -0
- package/dist/react/tree-select/TreeSelect.tsx +273 -0
- package/dist/react/tree-select/example-1.tsx +71 -0
- package/dist/react/tree-select/example-2.tsx +59 -0
- package/dist/sd_big-icons.eot +0 -0
- package/dist/sd_big-icons.svg +55 -53
- package/dist/sd_big-icons.ttf +0 -0
- package/dist/sd_big-icons.woff +0 -0
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +15 -7
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +49437 -26114
- package/dist/superdesk-ui.bundle.js +75814 -60910
- package/dist/vendor.bundle.js +25030 -25030
- package/examples/css/docs-page.css +2 -3
- package/examples/index.js +12 -0
- package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
- package/examples/pages/playgrounds/layout-test-2.html +1 -1
- package/examples/pages/playgrounds/list-item-test.html +1 -1
- package/examples/pages/playgrounds/master-desk.html +1 -1
- package/examples/pages/playgrounds/media-carousel.html +1 -1
- package/examples/pages/playgrounds/photo-desk.html +1 -1
- package/examples/pages/playgrounds/planning.html +1 -1
- package/examples/pages/playgrounds/publish.html +1 -1
- package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
- package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
- package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
- package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
- package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
- package/examples/pages/playgrounds/publisher-output-control.html +1 -1
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +9 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +13 -0
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +407 -182
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +4 -0
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
- package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
- package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
- package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
- package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
- package/examples/pages/playgrounds/swimlane-view.html +1 -1
- package/examples/pages/playgrounds/toasts.html +1 -1
- package/examples/pages/playgrounds/video-editor.html +1 -1
- package/examples/pages/react/Badges.tsx +18 -0
- package/examples/pages/react/Container.tsx +1 -1
- package/examples/pages/react/ContentList.tsx +286 -0
- package/examples/pages/react/CreateButton.tsx +71 -0
- package/examples/pages/react/DatePicker.tsx +31 -6
- package/examples/pages/react/DropZone.tsx +14 -6
- package/examples/pages/react/DurationInput.tsx +104 -0
- package/examples/pages/react/IconButtons.tsx +6 -6
- package/examples/pages/react/IconLabels.tsx +24 -2
- package/examples/pages/react/Index.tsx +25 -0
- package/examples/pages/react/Inputs.tsx +290 -7
- package/examples/pages/react/Labels.tsx +51 -1
- package/examples/pages/react/LeftNavigations.tsx +71 -44
- package/examples/pages/react/Modal.tsx +1 -0
- package/examples/pages/react/MultiSelect.tsx +10 -2
- package/examples/pages/react/SelectWithTemplate.tsx +6 -1
- package/examples/pages/react/Selects.tsx +55 -0
- package/examples/pages/react/TableList.tsx +248 -0
- package/examples/pages/react/TimePicker.tsx +22 -12
- package/examples/pages/react/TreeSelect.tsx +301 -48
- package/examples/pages/react/WithSizeObserver.tsx +44 -0
- package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
- package/examples/pages/react/tree-select/example-1.tsx +71 -0
- package/examples/pages/react/tree-select/example-2.tsx +59 -0
- package/package.json +9 -8
- package/react/components/Alert.js +10 -8
- package/react/components/Autocomplete.js +16 -12
- package/react/components/Avatar.js +8 -6
- package/react/components/Badge.d.ts +1 -0
- package/react/components/Badge.js +9 -7
- package/react/components/Button.js +8 -6
- package/react/components/ButtonGroup.js +7 -5
- package/react/components/Carousel.js +4 -2
- package/react/components/CheckButtonGroup.js +6 -4
- package/react/components/CheckGroup.js +5 -3
- package/react/components/Checkbox.js +5 -3
- package/react/components/CheckboxButton.js +6 -4
- package/react/components/ContentDivider.js +8 -6
- package/react/components/CreateButton.d.ts +17 -0
- package/react/components/CreateButton.js +68 -0
- package/react/components/DatePicker.d.ts +11 -0
- package/react/components/DatePicker.js +44 -35
- package/react/components/Divider.js +6 -4
- package/react/components/DonutChart.d.ts +1 -1
- package/react/components/DonutChart.js +24 -6
- package/react/components/DropZone.d.ts +2 -2
- package/react/components/DropZone.js +8 -6
- package/react/components/Dropdown.js +7 -6
- package/react/components/DropdownFirst.js +18 -11
- package/react/components/DurationInput.d.ts +42 -0
- package/react/components/DurationInput.js +335 -0
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +8 -6
- package/react/components/Form/FormGroup.js +7 -5
- package/react/components/Form/FormItem.js +5 -3
- package/react/components/Form/FormLabel.js +5 -3
- package/react/components/Form/FormRow.js +5 -3
- package/react/components/Form/FormRowNew.d.ts +12 -0
- package/react/components/Form/FormRowNew.js +67 -0
- package/react/components/Form/FormText.js +4 -2
- package/react/components/Form/InputBase.d.ts +42 -0
- package/react/components/Form/InputBase.js +72 -0
- package/react/components/Form/InputNew.d.ts +45 -0
- package/react/components/Form/InputNew.js +75 -0
- package/react/components/Form/InputWrapper.d.ts +28 -0
- package/react/components/Form/InputWrapper.js +91 -0
- package/react/components/Form/index.d.ts +4 -0
- package/react/components/Form/index.js +9 -0
- package/react/components/FormLabel.js +5 -3
- package/react/components/GridItem.js +9 -7
- package/react/components/GridList.js +8 -6
- package/react/components/HeadingText.js +4 -2
- package/react/components/HelloWorld.js +4 -2
- package/react/components/Icon.d.ts +2 -1
- package/react/components/Icon.js +9 -6
- package/react/components/IconButton.js +8 -6
- package/react/components/IconLabel.d.ts +2 -0
- package/react/components/IconLabel.js +12 -7
- package/react/components/IconPicker.js +13 -9
- package/react/components/Input.d.ts +7 -2
- package/react/components/Input.js +16 -30
- package/react/components/Label.d.ts +1 -0
- package/react/components/Label.js +28 -10
- package/react/components/Layouts/AuthorinInnerSideBar.js +4 -2
- package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
- package/react/components/Layouts/AuthoringContainer.js +60 -0
- package/react/components/Layouts/AuthoringFrame.js +4 -2
- package/react/components/Layouts/AuthoringFrameContainer.js +4 -2
- package/react/components/Layouts/AuthoringFrameLeftBar.js +4 -2
- package/react/components/Layouts/AuthoringFrameMain.js +4 -2
- package/react/components/Layouts/AuthoringFrameNavBar.js +4 -2
- package/react/components/Layouts/AuthoringFrameOverlay.js +4 -2
- package/react/components/Layouts/AuthoringFrameRightBar.js +4 -2
- package/react/components/Layouts/AuthoringFrameSidePanel.js +5 -3
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +5 -3
- package/react/components/Layouts/AuthoringInnerBody.js +4 -2
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +1 -0
- package/react/components/Layouts/AuthoringInnerHeader.js +10 -5
- package/react/components/Layouts/AuthoringMain.d.ts +3 -1
- package/react/components/Layouts/AuthoringMain.js +6 -4
- package/react/components/Layouts/AuthoringMainContainer.js +4 -2
- package/react/components/Layouts/AuthoringMainContent.js +4 -2
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +1 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +12 -3
- package/react/components/Layouts/BottomBarAction.d.ts +12 -0
- package/react/components/Layouts/BottomBarAction.js +59 -0
- package/react/components/Layouts/Container.d.ts +1 -1
- package/react/components/Layouts/Container.js +9 -7
- package/react/components/Layouts/ContentSplitter.d.ts +10 -0
- package/react/components/Layouts/ContentSplitter.js +58 -0
- package/react/components/Layouts/CoreLayout.d.ts +19 -0
- package/react/components/Layouts/CoreLayout.js +55 -0
- package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutContainer.js +49 -0
- package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutFooter.js +49 -0
- package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
- package/react/components/Layouts/CoreLayoutMain.js +49 -0
- package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
- package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
- package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
- package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
- package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
- package/react/components/Layouts/HamburgerButton.d.ts +14 -0
- package/react/components/Layouts/HamburgerButton.js +63 -0
- package/react/components/Layouts/HeaderPanel.js +4 -2
- package/react/components/Layouts/Layout.d.ts +8 -0
- package/react/components/Layouts/Layout.js +36 -0
- package/react/components/Layouts/LayoutContainer.js +5 -3
- package/react/components/Layouts/LeftPanel.js +5 -3
- package/react/components/Layouts/MainMenu.d.ts +41 -0
- package/react/components/Layouts/MainMenu.js +103 -0
- package/react/components/Layouts/MainPanel.d.ts +1 -0
- package/react/components/Layouts/MainPanel.js +15 -6
- package/react/components/Layouts/NotificationPanel.d.ts +45 -0
- package/react/components/Layouts/NotificationPanel.js +110 -0
- package/react/components/Layouts/OverlayPanel.d.ts +8 -0
- package/react/components/Layouts/OverlayPanel.js +51 -0
- package/react/components/Layouts/PageLayout.js +4 -2
- package/react/components/Layouts/Panel.d.ts +1 -0
- package/react/components/Layouts/Panel.js +16 -14
- package/react/components/Layouts/RightPanel.js +4 -2
- package/react/components/Layouts/index.d.ts +17 -2
- package/react/components/Layouts/index.js +35 -4
- package/react/components/LeftMenu.d.ts +5 -1
- package/react/components/LeftMenu.js +27 -13
- package/react/components/ListItemLoader.js +4 -2
- package/react/components/Lists/BoxedList.d.ts +8 -0
- package/react/components/Lists/BoxedList.js +39 -16
- package/react/components/Lists/ContentList.d.ts +45 -0
- package/react/components/Lists/ContentList.js +85 -0
- package/react/components/Lists/SimpleList.js +9 -7
- package/react/components/Lists/TableList.d.ts +42 -0
- package/react/components/Lists/TableList.js +145 -0
- package/react/components/Lists/index.js +1 -0
- package/react/components/Loader.js +4 -2
- package/react/components/Menu.d.ts +2 -1
- package/react/components/Menu.js +48 -12
- package/react/components/Modal.d.ts +4 -1
- package/react/components/Modal.js +35 -6
- package/react/components/NavButton.d.ts +1 -0
- package/react/components/NavButton.js +9 -4
- package/react/components/Navigation/BottomNav.d.ts +24 -0
- package/react/components/Navigation/BottomNav.js +88 -0
- package/react/components/Navigation/QuickNavBar.js +13 -9
- package/react/components/Navigation/SideBarMenu.js +4 -2
- package/react/components/Navigation/SideBarTabs.d.ts +1 -0
- package/react/components/Navigation/SideBarTabs.js +8 -2
- package/react/components/Navigation/index.js +1 -0
- package/react/components/Popover.js +4 -2
- package/react/components/PropsList.js +4 -2
- package/react/components/RadioButtonGroup.js +9 -7
- package/react/components/RadioGroup.js +6 -4
- package/react/components/SearchBar.d.ts +24 -0
- package/react/components/SearchBar.js +105 -0
- package/react/components/Select.d.ts +6 -1
- package/react/components/Select.js +9 -22
- package/react/components/SelectGrid.d.ts +1 -1
- package/react/components/SelectGrid.js +44 -23
- package/react/components/SelectWithTemplate.d.ts +11 -1
- package/react/components/SelectWithTemplate.js +23 -12
- package/react/components/Skeleton.d.ts +1 -1
- package/react/components/Skeleton.js +26 -5
- package/react/components/SlidingToolbar.js +6 -4
- package/react/components/Spinner.js +7 -5
- package/react/components/StrechBar.js +4 -2
- package/react/components/SubNav.js +9 -7
- package/react/components/Switch.js +6 -4
- package/react/components/SwitchGroup.d.ts +1 -0
- package/react/components/SwitchGroup.js +6 -4
- package/react/components/TabCustom.js +11 -7
- package/react/components/TabList.js +6 -4
- package/react/components/Tag.js +5 -4
- package/react/components/TagInput.js +7 -6
- package/react/components/TagInputTest.js +13 -9
- package/react/components/Text/Heading.js +10 -8
- package/react/components/Text/Text.js +10 -8
- package/react/components/Text/Time.d.ts +15 -0
- package/react/components/Text/Time.js +65 -0
- package/react/components/ThemeSelector.js +7 -5
- package/react/components/TimePicker.d.ts +16 -2
- package/react/components/TimePicker.js +19 -6
- package/react/components/Toast.js +1 -1
- package/react/components/ToastMessage.js +6 -5
- package/react/components/ToastText.js +1 -1
- package/react/components/ToastWrapper.d.ts +2 -2
- package/react/components/ToastWrapper.js +14 -10
- package/react/components/Togglebox.d.ts +1 -1
- package/react/components/Togglebox.js +36 -15
- package/react/components/Tooltip.d.ts +1 -0
- package/react/components/Tooltip.js +14 -10
- package/react/components/TreeSelect.d.ts +75 -0
- package/react/components/TreeSelect.js +448 -0
- package/react/components/WithSizeObserver.d.ts +25 -0
- package/react/components/WithSizeObserver.js +95 -0
- package/react/components/_Positioner.js +4 -2
- package/react/helpers.d.ts +1 -0
- package/react/helpers.js +7 -0
- package/react/index.d.ts +10 -0
- package/react/index.js +24 -1
- package/yarn-error.log +111 -0
- package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
@@ -13,11 +13,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
13
13
|
<LeftMenu
|
14
14
|
activeItemId='1'
|
15
15
|
groups={[
|
16
|
-
{ label: 'SYSTEM SETTINGS', items: [
|
17
|
-
|
18
|
-
|
16
|
+
{ label: 'SYSTEM SETTINGS', items: [
|
17
|
+
{id: '1', label: 'General'},
|
18
|
+
{id: '2', label: 'Email settings'},
|
19
|
+
]},
|
20
|
+
{ label: 'WORKFLOW', items: [
|
21
|
+
{ id: '4', label: 'Desk' },
|
22
|
+
{ id: '5', label: 'User Roles & Privileges'},
|
23
|
+
]}
|
19
24
|
]}
|
20
|
-
onSelect={() => false}
|
25
|
+
onSelect={() => false}
|
26
|
+
/>
|
21
27
|
`}
|
22
28
|
</Markup.ReactMarkupCodePreview>
|
23
29
|
|
@@ -32,25 +38,41 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
32
38
|
<p className="sd-top-menu__header">Top menu</p>
|
33
39
|
</div>
|
34
40
|
</div>
|
35
|
-
<LeftMenu ariaLabel={'Left navigation'}
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
]}
|
41
|
-
|
41
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
42
|
+
className={'docs-page__grid-page-example__side'}
|
43
|
+
activeItemId='3'
|
44
|
+
groups={[
|
45
|
+
{label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
|
46
|
+
{label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
|
47
|
+
{label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
|
48
|
+
]}
|
49
|
+
onSelect={() => false} />
|
42
50
|
<div className='docs-page__grid-page-example__main'></div>
|
43
51
|
</div>
|
44
52
|
</div>
|
45
53
|
</Markup.ReactMarkupPreview>
|
46
54
|
<Markup.ReactMarkupCode>{`
|
47
|
-
<LeftMenu
|
55
|
+
<LeftMenu
|
56
|
+
ariaLabel={'Left navigation'}
|
57
|
+
className={'docs-page__grid-page-example__side'}
|
58
|
+
activeItemId='1'
|
48
59
|
groups={[
|
49
|
-
|
50
|
-
{
|
51
|
-
{
|
60
|
+
{label: 'SYSTEM SETTINGS', items: [
|
61
|
+
{id: '1', label: 'General'},
|
62
|
+
{id: '2', label: 'Email settings'},
|
63
|
+
{id: '3', label: 'Spell checking'},
|
64
|
+
]},
|
65
|
+
{label: 'WORKFLOW', items: [
|
66
|
+
{id: '4', label: 'Desk'},
|
67
|
+
{id: '5', label: 'User Roles & Privileges'},
|
68
|
+
]},
|
69
|
+
{label: 'CONTENT CONFIG', items: [
|
70
|
+
{id: '6', label: 'Image renditions'},
|
71
|
+
{id: '7', label: 'Controlled Vocabularies'},
|
52
72
|
]}
|
53
|
-
|
73
|
+
]}
|
74
|
+
onSelect={() => false}
|
75
|
+
/>
|
54
76
|
`}
|
55
77
|
</Markup.ReactMarkupCode>
|
56
78
|
</Markup.ReactMarkup>
|
@@ -67,26 +89,26 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
67
89
|
</div>
|
68
90
|
</div>
|
69
91
|
<LeftMenu ariaLabel={'Left navigation'}
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
]}
|
92
|
+
className={'docs-page__grid-page-example__side'}
|
93
|
+
scrollSpy='#scrollContainer'
|
94
|
+
offset={-300}
|
95
|
+
//scrollTo={'section4'}
|
96
|
+
groups={[
|
97
|
+
{ label: 'MAIN SECTIONS', items: [
|
98
|
+
{ id: '1', label: 'Section 1', ref:'section1'},
|
99
|
+
{ id: '2', label: 'Section 2', ref: 'section2' },
|
100
|
+
{ id: '3', label: 'Section 3', ref: 'section3' },
|
101
|
+
|
102
|
+
]},
|
103
|
+
{ label:'OTHER SECTIONS', items: [
|
104
|
+
{ id: '4', label: 'Section 4', ref: 'section4' },
|
105
|
+
{ id: '5', label: 'Section 5', ref: 'section5' }
|
106
|
+
]},
|
107
|
+
{ label:'OTHER SECTIONS', items: [
|
108
|
+
{ id: '6', label: 'Section 6', ref: 'section6' },
|
109
|
+
{ id: '7', label: 'Section 7', ref: 'section7' }
|
89
110
|
]}
|
111
|
+
]}
|
90
112
|
onSelect={() => false} />
|
91
113
|
<div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
|
92
114
|
<SimpleList density='comfortable'>
|
@@ -160,16 +182,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
160
182
|
</Markup.ReactMarkupPreview>
|
161
183
|
<Markup.ReactMarkupCode>
|
162
184
|
{`
|
163
|
-
<LeftMenu
|
185
|
+
<LeftMenu
|
186
|
+
ariaLabel={'Left navigation'}
|
164
187
|
className={'docs-page__grid-page-example__side'}
|
165
188
|
scrollSpy='#scrollContainer'
|
189
|
+
offset={-300}
|
166
190
|
activeItemId='1'
|
167
191
|
groups={[
|
168
192
|
{ label: 'MAIN SECTIONS', items: [
|
169
193
|
{ id: '1', label: 'Section 1', ref:'section1'},
|
170
194
|
{ id: '2', label: 'Section 2', ref: 'section2' },
|
171
|
-
{ id: '3', label: 'Section 3', ref: 'section3' }
|
172
|
-
|
195
|
+
{ id: '3', label: 'Section 3', ref: 'section3' }
|
173
196
|
]},
|
174
197
|
{label:'OTHER SECTIONS', items: [
|
175
198
|
{ id: '4', label: 'Section 4', ref: 'section4' },
|
@@ -180,7 +203,8 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
180
203
|
{ id: '5', label: 'Section 7', ref: 'section7' }
|
181
204
|
]}
|
182
205
|
]}
|
183
|
-
onSelect={() => false}
|
206
|
+
onSelect={() => false}
|
207
|
+
/>
|
184
208
|
|
185
209
|
<div id='#scrollContainer'>...</div>
|
186
210
|
`}
|
@@ -189,16 +213,19 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
189
213
|
|
190
214
|
<h3 className="docs-page__h3">Props</h3>
|
191
215
|
<PropsList>
|
192
|
-
<Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
|
193
|
-
<Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
|
216
|
+
<Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups.'/>
|
194
217
|
<Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
195
|
-
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
|
196
|
-
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
|
218
|
+
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items.'/>
|
219
|
+
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value.'/>
|
197
220
|
<Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
221
|
+
<Prop name='menuitem ref' isRequired={false} type='string' default='/' description='Menugroup ref.'/>
|
222
|
+
<Prop name='menuitem route' isRequired={false} type='string' default='/' description='Menugroup route value.'/>
|
223
|
+
<Prop name='menuitem onCLick' isRequired={true} type='string' default='/' description='On click function.'/>
|
198
224
|
<Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
|
199
225
|
<Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
|
226
|
+
<Prop name='activeItemId' isRequired={false} type='string' default='/' description='Id of active item'/>
|
227
|
+
<Prop name='scrollTo' isRequired={false} type='string' default='/' description='Ref of active item.'/>
|
200
228
|
</PropsList>
|
201
|
-
|
202
229
|
</section>
|
203
230
|
)
|
204
231
|
}
|
@@ -187,6 +187,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
187
187
|
visible={this.state.modalFull}
|
188
188
|
theme='dark'
|
189
189
|
maximized={true}
|
190
|
+
className='testClass'
|
190
191
|
onHide={() => {this.setState({modalFull: false})}}>
|
191
192
|
<p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
|
192
193
|
nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
|
@@ -69,6 +69,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
|
|
69
69
|
showSelectAll
|
70
70
|
placeholder='Select a color'
|
71
71
|
optionLabel='name'
|
72
|
+
required
|
73
|
+
tabindex={1}
|
74
|
+
label={'This is Label'}
|
75
|
+
info={'This is info'}
|
72
76
|
/>
|
73
77
|
</div>
|
74
78
|
</div>
|
@@ -83,6 +87,10 @@ export class MultiselectDocs extends React.Component<{}, IState> {
|
|
83
87
|
showSelectAll
|
84
88
|
placeholder='Select a color'
|
85
89
|
optionLabel='name'
|
90
|
+
required
|
91
|
+
tabindex={1}
|
92
|
+
label={'This is Label'}
|
93
|
+
info={'This is info'}
|
86
94
|
/>
|
87
95
|
`}</Markup.ReactMarkupCode>
|
88
96
|
|
@@ -176,7 +184,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
|
|
176
184
|
<Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
|
177
185
|
<Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
|
178
186
|
<Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
|
179
|
-
<Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most.'/>
|
187
|
+
<Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
|
180
188
|
<Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
|
181
189
|
<Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
|
182
190
|
<Prop name='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>
|
@@ -190,4 +198,4 @@ export class MultiselectDocs extends React.Component<{}, IState> {
|
|
190
198
|
</section>
|
191
199
|
)
|
192
200
|
}
|
193
|
-
}
|
201
|
+
}
|
@@ -80,9 +80,14 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
|
|
80
80
|
}
|
81
81
|
}}
|
82
82
|
getLabel={(option) => option.name}
|
83
|
-
areEqual={(a, b) => a
|
83
|
+
areEqual={(a, b) => a?.colorCode === b?.colorCode}
|
84
84
|
filterPlaceholder="Search..."
|
85
85
|
noResultsFoundMessage="No results found."
|
86
|
+
required
|
87
|
+
tabindex={1}
|
88
|
+
label={'This is Label'}
|
89
|
+
info={'This is info'}
|
90
|
+
error={'This is error'}
|
86
91
|
/>
|
87
92
|
</div>
|
88
93
|
</div>
|
@@ -62,6 +62,61 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
62
62
|
<Option>Option 2</Option>
|
63
63
|
</Select>
|
64
64
|
</div>
|
65
|
+
|
66
|
+
<p className="docs-page__paragraph">// Boxed with hidden label</p>
|
67
|
+
<div className='form__row'>
|
68
|
+
<Select label='Select label'
|
69
|
+
value='Option 2'
|
70
|
+
boxedStyle
|
71
|
+
labelHidden
|
72
|
+
error='This is error message'
|
73
|
+
info='This is some hint message'
|
74
|
+
inlineLabel={this.state.inlineLabel}
|
75
|
+
required={this.state.required}
|
76
|
+
disabled={this.state.disabled}
|
77
|
+
invalid={this.state.invalid}
|
78
|
+
tabindex={0}
|
79
|
+
onChange={(value) => { console.log(value) }}>
|
80
|
+
<Option>Option 1</Option>
|
81
|
+
<Option>Option 2</Option>
|
82
|
+
</Select>
|
83
|
+
</div>
|
84
|
+
<div className='form__row'>
|
85
|
+
<Select label='Select label'
|
86
|
+
value='Option 2'
|
87
|
+
boxedStyle
|
88
|
+
labelHidden
|
89
|
+
size='large'
|
90
|
+
error='This is error message'
|
91
|
+
info='This is some hint message'
|
92
|
+
inlineLabel={this.state.inlineLabel}
|
93
|
+
required={this.state.required}
|
94
|
+
disabled={this.state.disabled}
|
95
|
+
invalid={this.state.invalid}
|
96
|
+
tabindex={0}
|
97
|
+
onChange={(value) => { console.log(value) }}>
|
98
|
+
<Option>Option 1</Option>
|
99
|
+
<Option>Option 2</Option>
|
100
|
+
</Select>
|
101
|
+
</div>
|
102
|
+
<div className='form__row'>
|
103
|
+
<Select label='Select label'
|
104
|
+
value='Option 2'
|
105
|
+
boxedStyle
|
106
|
+
labelHidden
|
107
|
+
size='x-large'
|
108
|
+
error='This is error message'
|
109
|
+
info='This is some hint message'
|
110
|
+
inlineLabel={this.state.inlineLabel}
|
111
|
+
required={this.state.required}
|
112
|
+
disabled={this.state.disabled}
|
113
|
+
invalid={this.state.invalid}
|
114
|
+
tabindex={0}
|
115
|
+
onChange={(value) => { console.log(value) }}>
|
116
|
+
<Option>Option 1</Option>
|
117
|
+
<Option>Option 2</Option>
|
118
|
+
</Select>
|
119
|
+
</div>
|
65
120
|
</div>
|
66
121
|
|
67
122
|
</Markup.ReactMarkupPreview>
|
@@ -0,0 +1,248 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown } from '../../../app-typescript';
|
4
|
+
import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
|
5
|
+
|
6
|
+
interface IState {
|
7
|
+
array: any;
|
8
|
+
}
|
9
|
+
|
10
|
+
interface IProps {
|
11
|
+
array: any;
|
12
|
+
}
|
13
|
+
|
14
|
+
export default class TableListDoc extends React.Component<IProps, IState> {
|
15
|
+
constructor(props: IState) {
|
16
|
+
super(props);
|
17
|
+
this.state = {
|
18
|
+
array: [
|
19
|
+
{
|
20
|
+
start: <>
|
21
|
+
<Label style='translucent' text='aacc' />
|
22
|
+
<Label style='translucent' type='primary' text='prlg' />
|
23
|
+
</>,
|
24
|
+
center: <span>Item 1</span>,
|
25
|
+
end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
|
26
|
+
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
|
27
|
+
onClick: () => {
|
28
|
+
return false;
|
29
|
+
}
|
30
|
+
},
|
31
|
+
{
|
32
|
+
start: <>
|
33
|
+
<Label style='translucent' text='aacc' />
|
34
|
+
<Label style='translucent' type='primary' text='prlg' />
|
35
|
+
</>,
|
36
|
+
center: <span>Item 2</span>,
|
37
|
+
end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
|
38
|
+
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
|
39
|
+
onClick: () => {
|
40
|
+
return false;
|
41
|
+
}
|
42
|
+
},
|
43
|
+
{
|
44
|
+
start: <>
|
45
|
+
<Label style='translucent' text='aacc' />
|
46
|
+
<Label style='translucent' type='primary' text='prlg' />
|
47
|
+
</>,
|
48
|
+
center: <span>Item 3</span>,
|
49
|
+
end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
|
50
|
+
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
|
51
|
+
onClick: () => {
|
52
|
+
return false;
|
53
|
+
}
|
54
|
+
},
|
55
|
+
]
|
56
|
+
}
|
57
|
+
|
58
|
+
}
|
59
|
+
|
60
|
+
render() {
|
61
|
+
return (
|
62
|
+
<section className='docs-page__container'>
|
63
|
+
<h2 className='docs-page__h2'>TableList</h2>
|
64
|
+
|
65
|
+
<Markup.ReactMarkupCodePreview>{`
|
66
|
+
<TableList
|
67
|
+
dragAndDrop
|
68
|
+
addItem
|
69
|
+
array={this.state.array}
|
70
|
+
itemsDropdown={[
|
71
|
+
{ label: 'Action 1', onSelect: () => 1 },
|
72
|
+
{ label: 'Action 2', onSelect: () => 1 },
|
73
|
+
{ label: 'Action 3', onSelect: () => 1 },
|
74
|
+
]} />
|
75
|
+
`}
|
76
|
+
</Markup.ReactMarkupCodePreview>
|
77
|
+
|
78
|
+
<p className="docs-page__paragraph">Basic:</p>
|
79
|
+
|
80
|
+
<Markup.ReactMarkup>
|
81
|
+
<Markup.ReactMarkupPreview>
|
82
|
+
|
83
|
+
<TableList>
|
84
|
+
<TableListItem
|
85
|
+
start={
|
86
|
+
<>
|
87
|
+
<Label style='translucent' text='aacc' />
|
88
|
+
<Label style='translucent' type='primary' text='prlg' />
|
89
|
+
</>
|
90
|
+
}
|
91
|
+
center={
|
92
|
+
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
93
|
+
}
|
94
|
+
end={
|
95
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
96
|
+
}
|
97
|
+
action={
|
98
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
|
99
|
+
} />
|
100
|
+
<TableListItem
|
101
|
+
start={
|
102
|
+
<>
|
103
|
+
<Label style='hollow' text='aacc' />
|
104
|
+
<Label style='filled' type='primary' text='prlg' />
|
105
|
+
</>
|
106
|
+
}
|
107
|
+
center={
|
108
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
109
|
+
}
|
110
|
+
end={
|
111
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
112
|
+
} />
|
113
|
+
<TableListItem
|
114
|
+
start={
|
115
|
+
<>
|
116
|
+
<Label style='translucent' text='aacc' />
|
117
|
+
<Label style='translucent' type='primary' text='prlg' />
|
118
|
+
</>
|
119
|
+
}
|
120
|
+
center={
|
121
|
+
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
122
|
+
}
|
123
|
+
end={
|
124
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
125
|
+
}
|
126
|
+
action={
|
127
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
|
128
|
+
} />
|
129
|
+
</TableList>
|
130
|
+
|
131
|
+
</Markup.ReactMarkupPreview>
|
132
|
+
<Markup.ReactMarkupCode>{`
|
133
|
+
<TableList>
|
134
|
+
<TableListItem
|
135
|
+
start={
|
136
|
+
<>
|
137
|
+
<Label style='translucent' text='aacc' />
|
138
|
+
<Label style='translucent' type='primary' text='prlg' />
|
139
|
+
</>
|
140
|
+
}
|
141
|
+
center={
|
142
|
+
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
143
|
+
}
|
144
|
+
end={
|
145
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
146
|
+
}
|
147
|
+
action={
|
148
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
149
|
+
} />
|
150
|
+
<TableListItem
|
151
|
+
start={
|
152
|
+
<>
|
153
|
+
<Label style='hollow' text='aacc' />
|
154
|
+
<Label style='filled' type='primary' text='prlg' />
|
155
|
+
</>
|
156
|
+
}
|
157
|
+
center={
|
158
|
+
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
159
|
+
}
|
160
|
+
end={
|
161
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
162
|
+
} />
|
163
|
+
<TableListItem
|
164
|
+
start={
|
165
|
+
<>
|
166
|
+
<Label style='translucent' text='aacc' />
|
167
|
+
<Label style='translucent' type='primary' text='prlg' />
|
168
|
+
</>
|
169
|
+
}
|
170
|
+
center={
|
171
|
+
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
172
|
+
}
|
173
|
+
end={
|
174
|
+
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
175
|
+
}
|
176
|
+
action={
|
177
|
+
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
178
|
+
} />
|
179
|
+
</TableList>
|
180
|
+
`}
|
181
|
+
</Markup.ReactMarkupCode>
|
182
|
+
</Markup.ReactMarkup>
|
183
|
+
<p className="docs-page__paragraph">With drag and drop functionality:</p>
|
184
|
+
<Markup.ReactMarkup>
|
185
|
+
<Markup.ReactMarkupPreview>
|
186
|
+
|
187
|
+
<TableList
|
188
|
+
dragAndDrop
|
189
|
+
addItem
|
190
|
+
array={this.state.array}
|
191
|
+
itemsDropdown={[
|
192
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
|
193
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
|
194
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
|
195
|
+
]}
|
196
|
+
onClick={() => false}
|
197
|
+
onDrag={(start, end) => console.log(start, end)}
|
198
|
+
/>
|
199
|
+
|
200
|
+
</Markup.ReactMarkupPreview>
|
201
|
+
<Markup.ReactMarkupCode>{`
|
202
|
+
<TableList
|
203
|
+
dragAndDrop
|
204
|
+
addItem
|
205
|
+
array={this.state.array}
|
206
|
+
itemsDropdown={[
|
207
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
|
208
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
|
209
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
|
210
|
+
]}
|
211
|
+
onClick={() => false}
|
212
|
+
/>
|
213
|
+
`}
|
214
|
+
</Markup.ReactMarkupCode>
|
215
|
+
</Markup.ReactMarkup>
|
216
|
+
|
217
|
+
<h3 className="docs-page__h3">Props</h3>
|
218
|
+
<p className="docs-page__paragraph">TableList</p>
|
219
|
+
<PropsList>
|
220
|
+
<Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.' />
|
221
|
+
<Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
|
222
|
+
<Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
|
223
|
+
<Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
|
224
|
+
<Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
|
225
|
+
<Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
|
226
|
+
<Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
|
227
|
+
<Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
|
228
|
+
</PropsList>
|
229
|
+
<p className="docs-page__paragraph">array:</p>
|
230
|
+
<PropsList>
|
231
|
+
<Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
232
|
+
<Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
233
|
+
<Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
234
|
+
<Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
|
235
|
+
</PropsList>
|
236
|
+
<p className="docs-page__paragraph">TableListItem</p>
|
237
|
+
<PropsList>
|
238
|
+
<Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
239
|
+
<Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
240
|
+
<Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
241
|
+
<Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
|
242
|
+
<Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
|
243
|
+
</PropsList>
|
244
|
+
|
245
|
+
</section>
|
246
|
+
)
|
247
|
+
}
|
248
|
+
}
|
@@ -15,10 +15,16 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
|
|
15
15
|
render() {
|
16
16
|
return (
|
17
17
|
<TimePicker
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
18
|
+
value={this.state.time}
|
19
|
+
onChange={(time) => {
|
20
|
+
this.setState({time});
|
21
|
+
}}
|
22
|
+
required
|
23
|
+
tabindex={1}
|
24
|
+
label={'This is Label'}
|
25
|
+
info={'This is info'}
|
26
|
+
error={'This is error'}
|
27
|
+
allowSeconds
|
22
28
|
/>
|
23
29
|
);
|
24
30
|
}
|
@@ -38,10 +44,13 @@ export default class TimePickerDoc extends React.Component {
|
|
38
44
|
render() {
|
39
45
|
return (
|
40
46
|
<TimePicker
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
47
|
+
value={this.state.time}
|
48
|
+
onChange={(time) => {
|
49
|
+
this.setState({time});
|
50
|
+
}}
|
51
|
+
label={'This is Label'}
|
52
|
+
info={'This is info'}
|
53
|
+
error={'This is error'}
|
45
54
|
/>
|
46
55
|
);
|
47
56
|
}
|
@@ -67,14 +76,15 @@ export default class TimePickerDoc extends React.Component {
|
|
67
76
|
|
68
77
|
<h3 className='docs-page__h3'>Props</h3>
|
69
78
|
<PropsList>
|
70
|
-
<Prop name='value' isRequired={true} type='string' default='/' description='Item value' />
|
71
|
-
<Prop name='
|
72
|
-
<Prop name='
|
79
|
+
<Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />
|
80
|
+
<Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
|
81
|
+
<Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
|
82
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
|
73
83
|
</PropsList>
|
74
84
|
|
75
85
|
<h3 className='docs-page__h3'>Events</h3>
|
76
86
|
<PropsList>
|
77
|
-
<Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input' />
|
87
|
+
<Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of time input.' />
|
78
88
|
</PropsList>
|
79
89
|
</section>
|
80
90
|
);
|