superdesk-ui-framework 2.4.21 → 3.0.0-rc12
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/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/img/spinner.svg +3 -0
- package/app/img/themes/theme-base.svg +1 -0
- package/app/img/themes/theme-contrast.svg +45 -0
- package/app/img/themes/theme-dark.svg +1 -0
- package/app/img/themes/theme-light.svg +1 -0
- package/app/index.js +2 -1
- package/app/scripts/check.js +1 -1
- package/app/scripts/modals.js +1 -0
- package/app/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_accessibility.scss +309 -6
- package/app/styles/_alerts.scss +227 -97
- package/app/styles/_avatar.scss +60 -33
- package/app/styles/_badge.scss +55 -26
- package/app/styles/_big-icon-font.scss +64 -23
- package/app/styles/_boxed-list.scss +70 -23
- package/app/styles/_buttons.scss +553 -1026
- package/app/styles/_carousel.scss +19 -13
- package/app/styles/_content-divider.scss +180 -0
- package/app/styles/_design-tokens.scss +2 -0
- package/app/styles/_drag-drop.scss +1 -1
- package/app/styles/_empty-states.scss +9 -1
- package/app/styles/_hamburger.scss +160 -0
- package/app/styles/_helpers.scss +684 -311
- package/app/styles/_icon-font.scss +353 -309
- package/app/styles/_icon-labels.scss +69 -14
- package/app/styles/_labels.scss +65 -53
- package/app/styles/_loaders.scss +28 -0
- package/app/styles/_master-desk.scss +14 -13
- package/app/styles/_mixins.scss +21 -13
- package/app/styles/_modals.scss +109 -119
- package/app/styles/_normalize.scss +5 -0
- package/app/styles/_panel-info.scss +21 -16
- package/app/styles/_popover.scss +2 -2
- package/app/styles/_pr-superdesk-theme.scss +4 -0
- package/app/styles/_publisher-styles.scss +182 -0
- package/app/styles/_reboot.scss +1 -0
- package/app/styles/_sd-tag-input.scss +311 -264
- package/app/styles/_simple-list.scss +39 -19
- package/app/styles/_table-list.scss +348 -0
- package/app/styles/_tables.scss +5 -4
- package/app/styles/_tabs.scss +24 -75
- package/app/styles/_tag-labels.scss +47 -47
- package/app/styles/_thumb-carousel.scss +11 -10
- package/app/styles/_toggle-box.scss +52 -46
- package/app/styles/_toggle-button.scss +42 -0
- package/app/styles/_tooltips.scss +55 -98
- package/app/styles/_variables.scss +0 -1
- package/app/styles/app.scss +22 -1
- package/app/styles/components/_card-item.scss +41 -28
- package/app/styles/components/_list-item.scss +78 -125
- package/app/styles/components/_sd-circular-progress.scss +1 -1
- package/app/styles/components/_sd-collapse-box.scss +11 -38
- package/app/styles/components/_sd-comment-box.scss +8 -4
- package/app/styles/components/_sd-dropzone.scss +114 -0
- package/app/styles/components/_sd-editor-popup.scss +4 -4
- package/app/styles/components/_sd-grid-item.scss +105 -193
- package/app/styles/components/_sd-loader.scss +1 -16
- package/app/styles/components/_sd-media-carousel.scss +47 -14
- package/app/styles/components/_sd-notification-panel.scss +48 -0
- package/app/styles/components/_sd-photo-preview.scss +16 -16
- package/app/styles/components/_sd-searchbar.scss +50 -127
- package/app/styles/components/_sd-toaster.scss +13 -6
- package/app/styles/components/_subnav.scss +475 -474
- package/app/styles/components/_theme-selector.scss +189 -0
- package/app/styles/components/sd-slider.scss +11 -11
- package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
- package/app/styles/design-tokens/_new-colors.scss +724 -0
- package/app/styles/dropdowns/_basic-dropdown.scss +125 -76
- package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
- package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
- package/app/styles/dropdowns/_other_dropdown.scss +1 -1
- package/app/styles/editor/_editor-buttons.scss +54 -0
- package/app/styles/editor/_editor-themes.scss +437 -0
- package/app/styles/form-elements/_autocomplete.scss +12 -41
- package/app/styles/form-elements/_checkbox.scss +180 -245
- package/app/styles/form-elements/_forms-general.scss +173 -27
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +646 -421
- package/app/styles/form-elements/_radio.scss +6 -6
- package/app/styles/form-elements/_select-grid.scss +16 -14
- package/app/styles/form-elements/_switch.scss +26 -47
- package/app/styles/grids/_basic-grid.scss +52 -26
- package/app/styles/grids/_grid-layout.scss +256 -94
- package/app/styles/grids/_layout-grid.scss +6 -6
- package/app/styles/grids/_sd-kanban-list.scss +2 -2
- package/app/styles/interface-elements/_side-panel.scss +116 -84
- package/app/styles/layout/_basic-layout.scss +13 -21
- package/app/styles/layout/_container.scss +35 -0
- package/app/styles/layout/_editor.scss +404 -0
- package/app/styles/layout/_general.scss +4 -5
- package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
- package/app/styles/menus/_sd-content-navigation.scss +1 -1
- package/app/styles/menus/_sd-left-navigation.scss +57 -18
- package/app/styles/menus/_sd-sidebar-menu.scss +124 -30
- package/app/styles/menus/_sd-top-menu.scss +22 -8
- package/app/styles/primereact/_pr-datepicker.scss +64 -11
- package/app/styles/primereact/_pr-dialog.scss +136 -30
- package/app/styles/primereact/_pr-dropdown.scss +190 -18
- package/app/styles/primereact/_pr-general.scss +14 -7
- package/app/styles/primereact/_pr-menu.scss +14 -16
- package/app/styles/variables/_colors.scss +152 -544
- package/app/styles/variables/_dimensions.scss +82 -4
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app/styles/variables/_typography.scss +2 -0
- package/app-typescript/components/Alert.tsx +16 -1
- package/app-typescript/components/Avatar.tsx +21 -0
- package/app-typescript/components/Badge.tsx +3 -2
- package/app-typescript/components/ButtonGroup.tsx +9 -5
- package/app-typescript/components/Carousel.tsx +1 -1
- package/app-typescript/components/CheckButtonGroup.tsx +19 -5
- package/app-typescript/components/CheckGroup.tsx +2 -1
- package/app-typescript/components/Checkbox.tsx +7 -3
- package/app-typescript/components/CheckboxButton.tsx +9 -2
- package/app-typescript/components/ContentDivider.tsx +37 -0
- package/app-typescript/components/CreateButton.tsx +38 -0
- package/app-typescript/components/DatePicker.tsx +77 -38
- package/app-typescript/components/DonutChart.tsx +1 -1
- package/app-typescript/components/DropZone.tsx +89 -0
- package/app-typescript/components/Dropdown.tsx +141 -77
- package/app-typescript/components/DropdownFirst.tsx +1 -1
- package/app-typescript/components/DurationInput.tsx +400 -0
- package/app-typescript/components/Editor/EditorButton.tsx +34 -0
- package/app-typescript/components/EmptyState.tsx +2 -1
- package/app-typescript/components/Form/FormGroup.tsx +33 -0
- package/app-typescript/components/Form/FormItem.tsx +20 -0
- package/app-typescript/components/Form/FormLabel.tsx +29 -0
- package/app-typescript/components/Form/FormRow.tsx +40 -0
- package/app-typescript/components/Form/FormRowNew.tsx +41 -0
- package/app-typescript/components/Form/FormText.tsx +15 -0
- package/app-typescript/components/Form/InputBase.tsx +95 -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 +9 -0
- package/app-typescript/components/Icon.tsx +4 -2
- package/app-typescript/components/IconButton.tsx +30 -12
- package/app-typescript/components/IconLabel.tsx +8 -1
- package/app-typescript/components/Input.tsx +68 -52
- package/app-typescript/components/Label.tsx +65 -10
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
- package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
- package/app-typescript/components/Layouts/Container.tsx +30 -0
- package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
- package/app-typescript/components/Layouts/CoreLayout.tsx +63 -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 +22 -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/HeaderPanel.tsx +15 -0
- package/app-typescript/components/Layouts/Layout.tsx +33 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
- package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
- package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
- package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
- package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
- package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
- package/app-typescript/components/Layouts/Panel.tsx +208 -0
- package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
- package/app-typescript/components/Layouts/index.tsx +43 -0
- package/app-typescript/components/LeftMenu.tsx +116 -31
- package/app-typescript/components/Lists/BoxedList.tsx +169 -0
- package/app-typescript/components/Lists/ContentList.tsx +133 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/TableList.tsx +405 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Menu.tsx +33 -9
- package/app-typescript/components/Modal.tsx +34 -16
- package/app-typescript/components/MultiSelect.tsx +99 -0
- package/app-typescript/components/NavButton.tsx +6 -1
- package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
- package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
- package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
- package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
- package/app-typescript/components/Navigation/index.tsx +3 -0
- package/app-typescript/components/RadioButtonGroup.tsx +113 -0
- package/app-typescript/components/RadioGroup.tsx +69 -0
- package/app-typescript/components/SearchBar.tsx +106 -0
- package/app-typescript/components/Select.tsx +29 -39
- package/app-typescript/components/SelectGrid.tsx +4 -4
- 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/SlidingToolbar.tsx +8 -2
- package/app-typescript/components/Spacer.tsx +87 -0
- package/app-typescript/components/Spinner.tsx +1 -2
- package/app-typescript/components/SubNav.tsx +25 -4
- package/app-typescript/components/Switch.tsx +34 -12
- package/app-typescript/components/SwitchGroup.tsx +2 -1
- package/app-typescript/components/TabCustom.tsx +40 -89
- package/app-typescript/components/TabList.tsx +18 -43
- package/app-typescript/components/Tag.tsx +32 -9
- package/app-typescript/components/Text/Heading.tsx +67 -0
- package/app-typescript/components/Text/Text.tsx +36 -0
- package/app-typescript/components/Text/Time.tsx +34 -0
- package/app-typescript/components/ThemeSelector.tsx +113 -0
- package/app-typescript/components/TimePicker.tsx +38 -15
- package/app-typescript/components/Togglebox.tsx +9 -7
- package/app-typescript/components/Tooltip.tsx +7 -5
- package/app-typescript/components/TreeSelect.tsx +664 -0
- package/app-typescript/components/WithSizeObserver.tsx +88 -0
- package/app-typescript/helpers.tsx +3 -0
- package/app-typescript/index.ts +27 -4
- package/dist/SD-logo.svg +52 -0
- package/dist/avatar-2.jpg +0 -0
- package/dist/avatar-3.jpg +0 -0
- package/dist/avatar-4.jpg +0 -0
- package/dist/avatar-5.jpg +0 -0
- package/dist/avatar-6.jpg +0 -0
- package/dist/avatar_64.png +0 -0
- package/dist/components/basic-grid.html +1 -1
- package/dist/components/checkbox.html +1 -1
- package/dist/dots.svg +3 -0
- package/dist/examples.bundle.css +10746 -2781
- package/dist/examples.bundle.js +94094 -67758
- package/dist/index.html +9 -12
- package/dist/playgrounds/accessible-theme-test.html +1 -1
- package/dist/playgrounds/boxed-list.html +1 -1
- package/dist/playgrounds/cards.html +9 -4
- package/dist/playgrounds/editor-3-test.html +15 -0
- package/dist/playgrounds/form-layout.html +9 -7
- package/dist/playgrounds/layout-test-2.html +41 -37
- package/dist/playgrounds/list-item-test.html +2 -2
- package/dist/playgrounds/master-desk.html +2 -4
- package/dist/playgrounds/media-carousel.html +1 -1
- package/dist/playgrounds/photo-desk.html +34 -34
- 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 +156 -0
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +9 -1
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +41 -41
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +631 -24
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +304 -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 +3 -3
- 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/tags-input.html +1 -1
- package/dist/playgrounds/toasts.html +1 -1
- package/dist/playgrounds/video-editor.html +1 -1
- package/dist/react/Alerts.tsx +123 -23
- package/dist/react/Avatar.tsx +314 -127
- package/dist/react/Badges.tsx +18 -0
- package/dist/react/BoxedList.tsx +362 -0
- package/dist/react/ButtonGroups.tsx +66 -65
- package/dist/react/Buttons.tsx +62 -247
- package/dist/react/Carousel.tsx +2 -3
- package/dist/react/Checkboxs.tsx +66 -25
- package/dist/react/Container.tsx +143 -0
- package/dist/react/ContentDivider.tsx +182 -0
- package/dist/react/ContentList.tsx +462 -0
- package/dist/react/CreateButton.tsx +71 -0
- package/dist/react/DatePicker.tsx +31 -6
- package/dist/react/DropZone.tsx +111 -0
- package/dist/react/Dropdowns.tsx +580 -48
- package/dist/react/DurationInput.tsx +108 -0
- package/dist/react/Heading.tsx +106 -0
- package/dist/react/IconButtons.tsx +49 -42
- package/dist/react/IconLabels.tsx +24 -2
- package/dist/react/Index.tsx +143 -11
- package/dist/react/Inputs.tsx +284 -23
- package/dist/react/Labels.tsx +51 -1
- package/dist/react/LeftNavigations.tsx +194 -15
- package/dist/react/ListItems.tsx +3 -3
- package/dist/react/Modal.tsx +174 -19
- package/dist/react/MultiSelect.tsx +201 -0
- package/dist/react/NavButtons.tsx +35 -5
- package/dist/react/Panel.tsx +366 -0
- package/dist/react/QuickNavigationBar.tsx +142 -0
- package/dist/react/RadioGroup.tsx +351 -0
- package/dist/react/SelectWithTemplate.tsx +7 -2
- package/dist/react/Selects.tsx +50 -15
- package/dist/react/SimpleList.tsx +148 -0
- package/dist/react/SubNav.tsx +69 -20
- package/dist/react/TableList.tsx +161 -0
- package/dist/react/Tabs.tsx +72 -248
- package/dist/react/Tags.tsx +52 -13
- package/dist/react/Text.tsx +134 -0
- package/dist/react/TimePicker.tsx +22 -12
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/react/Tooltips.tsx +1 -1
- package/dist/react/TreeSelect.tsx +422 -0
- 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/react.html +4 -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 +55041 -26655
- package/dist/superdesk-ui.bundle.js +88737 -67504
- package/dist/vendor.bundle.js +25070 -25074
- package/examples/css/docs-page.css +208 -50
- package/examples/img/avatar-2.jpg +0 -0
- package/examples/img/avatar-3.jpg +0 -0
- package/examples/img/avatar-4.jpg +0 -0
- package/examples/img/avatar-5.jpg +0 -0
- package/examples/img/avatar-6.jpg +0 -0
- package/examples/index.html +9 -12
- package/examples/index.js +36 -0
- package/examples/pages/components/basic-grid.html +1 -1
- package/examples/pages/components/checkbox.html +1 -1
- package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
- package/examples/pages/playgrounds/boxed-list.html +1 -1
- package/examples/pages/playgrounds/cards.html +9 -4
- package/examples/pages/playgrounds/editor-3-test.html +15 -0
- package/examples/pages/playgrounds/form-layout.html +9 -7
- package/examples/pages/playgrounds/layout-test-2.html +41 -37
- package/examples/pages/playgrounds/list-item-test.html +2 -2
- package/examples/pages/playgrounds/master-desk.html +2 -4
- package/examples/pages/playgrounds/media-carousel.html +1 -1
- package/examples/pages/playgrounds/photo-desk.html +34 -34
- 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 +156 -0
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +9 -1
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +41 -41
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +631 -24
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +304 -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 +3 -3
- 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/tags-input.html +1 -1
- package/examples/pages/playgrounds/toasts.html +1 -1
- package/examples/pages/playgrounds/video-editor.html +1 -1
- package/examples/pages/react/Alerts.tsx +123 -23
- package/examples/pages/react/Avatar.tsx +314 -127
- package/examples/pages/react/Badges.tsx +18 -0
- package/examples/pages/react/BoxedList.tsx +362 -0
- package/examples/pages/react/ButtonGroups.tsx +66 -65
- package/examples/pages/react/Buttons.tsx +62 -247
- package/examples/pages/react/Carousel.tsx +2 -3
- package/examples/pages/react/Checkboxs.tsx +66 -25
- package/examples/pages/react/Container.tsx +143 -0
- package/examples/pages/react/ContentDivider.tsx +182 -0
- package/examples/pages/react/ContentList.tsx +462 -0
- package/examples/pages/react/CreateButton.tsx +71 -0
- package/examples/pages/react/DatePicker.tsx +31 -6
- package/examples/pages/react/DropZone.tsx +111 -0
- package/examples/pages/react/Dropdowns.tsx +580 -48
- package/examples/pages/react/DurationInput.tsx +108 -0
- package/examples/pages/react/Heading.tsx +106 -0
- package/examples/pages/react/IconButtons.tsx +49 -42
- package/examples/pages/react/IconLabels.tsx +24 -2
- package/examples/pages/react/Index.tsx +143 -11
- package/examples/pages/react/Inputs.tsx +284 -23
- package/examples/pages/react/Labels.tsx +51 -1
- package/examples/pages/react/LeftNavigations.tsx +194 -15
- package/examples/pages/react/ListItems.tsx +3 -3
- package/examples/pages/react/Modal.tsx +174 -19
- package/examples/pages/react/MultiSelect.tsx +201 -0
- package/examples/pages/react/NavButtons.tsx +35 -5
- package/examples/pages/react/Panel.tsx +366 -0
- package/examples/pages/react/QuickNavigationBar.tsx +142 -0
- package/examples/pages/react/RadioGroup.tsx +351 -0
- package/examples/pages/react/SelectWithTemplate.tsx +7 -2
- package/examples/pages/react/Selects.tsx +50 -15
- package/examples/pages/react/SimpleList.tsx +148 -0
- package/examples/pages/react/SubNav.tsx +69 -20
- package/examples/pages/react/TableList.tsx +161 -0
- package/examples/pages/react/Tabs.tsx +72 -248
- package/examples/pages/react/Tags.tsx +52 -13
- package/examples/pages/react/Text.tsx +134 -0
- package/examples/pages/react/TimePicker.tsx +22 -12
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/examples/pages/react/Tooltips.tsx +1 -1
- package/examples/pages/react/TreeSelect.tsx +422 -0
- 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/examples/pages/react.html +4 -0
- package/images/avatar_64.png +0 -0
- package/package.json +17 -12
- package/react/components/Alert.d.ts +3 -0
- package/react/components/Alert.js +17 -7
- package/react/components/Autocomplete.js +16 -12
- package/react/components/Avatar.d.ts +9 -0
- package/react/components/Avatar.js +24 -4
- 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.d.ts +4 -2
- package/react/components/ButtonGroup.js +11 -7
- package/react/components/Carousel.js +5 -3
- package/react/components/CheckButtonGroup.d.ts +3 -1
- package/react/components/CheckButtonGroup.js +14 -6
- package/react/components/CheckGroup.d.ts +1 -0
- package/react/components/CheckGroup.js +6 -4
- package/react/components/Checkbox.d.ts +2 -1
- package/react/components/Checkbox.js +7 -5
- package/react/components/CheckboxButton.d.ts +1 -0
- package/react/components/CheckboxButton.js +8 -6
- package/react/components/ContentDivider.d.ts +13 -0
- package/react/components/ContentDivider.js +70 -0
- 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 +45 -31
- 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 +25 -0
- package/react/components/DropZone.js +95 -0
- package/react/components/Dropdown.d.ts +7 -5
- package/react/components/Dropdown.js +84 -51
- package/react/components/DropdownFirst.js +19 -12
- package/react/components/DurationInput.d.ts +42 -0
- package/react/components/DurationInput.js +364 -0
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +8 -6
- package/react/components/Form/FormGroup.d.ts +13 -0
- package/react/components/Form/FormGroup.js +63 -0
- package/react/components/Form/FormItem.d.ts +9 -0
- package/react/components/Form/FormItem.js +56 -0
- package/react/components/Form/FormLabel.d.ts +13 -0
- package/react/components/Form/FormLabel.js +62 -0
- package/react/components/Form/FormRow.d.ts +17 -0
- package/react/components/Form/FormRow.js +64 -0
- package/react/components/Form/FormRowNew.d.ts +12 -0
- package/react/components/Form/FormRowNew.js +67 -0
- package/react/components/Form/FormText.d.ts +8 -0
- package/react/components/Form/FormText.js +49 -0
- package/react/components/Form/InputBase.d.ts +41 -0
- package/react/components/Form/InputBase.js +86 -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 +9 -0
- package/react/components/Form/index.js +21 -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.d.ts +9 -2
- package/react/components/IconButton.js +17 -7
- 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 +25 -7
- package/react/components/Input.js +21 -38
- package/react/components/Label.d.ts +2 -0
- package/react/components/Label.js +44 -11
- package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
- package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
- package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
- package/react/components/Layouts/AuthoringContainer.js +60 -0
- package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
- package/react/components/Layouts/AuthoringFrame.js +58 -0
- package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameMain.js +49 -0
- package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
- package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
- package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
- package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
- package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
- package/react/components/Layouts/AuthoringInnerBody.js +49 -0
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
- package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
- package/react/components/Layouts/AuthoringMain.d.ts +14 -0
- package/react/components/Layouts/AuthoringMain.js +55 -0
- package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContainer.js +49 -0
- package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContent.js +49 -0
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
- package/react/components/Layouts/BottomBarAction.d.ts +12 -0
- package/react/components/Layouts/BottomBarAction.js +59 -0
- package/react/components/Layouts/Container.d.ts +14 -0
- package/react/components/Layouts/Container.js +62 -0
- package/react/components/Layouts/ContentSplitter.d.ts +10 -0
- package/react/components/Layouts/ContentSplitter.js +58 -0
- package/react/components/Layouts/CoreLayout.d.ts +20 -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 +10 -0
- package/react/components/Layouts/CoreLayoutMain.js +56 -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.d.ts +8 -0
- package/react/components/Layouts/HeaderPanel.js +49 -0
- package/react/components/Layouts/Layout.d.ts +8 -0
- package/react/components/Layouts/Layout.js +36 -0
- package/react/components/Layouts/LayoutContainer.d.ts +8 -0
- package/react/components/Layouts/LayoutContainer.js +49 -0
- package/react/components/Layouts/LeftPanel.d.ts +9 -0
- package/react/components/Layouts/LeftPanel.js +56 -0
- package/react/components/Layouts/MainMenu.d.ts +41 -0
- package/react/components/Layouts/MainMenu.js +103 -0
- package/react/components/Layouts/MainPanel.d.ts +11 -0
- package/react/components/Layouts/MainPanel.js +59 -0
- 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.d.ts +16 -0
- package/react/components/Layouts/PageLayout.js +66 -0
- package/react/components/Layouts/Panel.d.ts +66 -0
- package/react/components/Layouts/Panel.js +168 -0
- package/react/components/Layouts/RightPanel.d.ts +9 -0
- package/react/components/Layouts/RightPanel.js +49 -0
- package/react/components/Layouts/index.d.ts +39 -0
- package/react/components/Layouts/index.js +86 -0
- package/react/components/LeftMenu.d.ts +13 -4
- package/react/components/LeftMenu.js +71 -18
- package/react/components/ListItemLoader.js +4 -2
- package/react/components/Lists/BoxedList.d.ts +44 -0
- package/react/components/Lists/BoxedList.js +160 -0
- package/react/components/Lists/ContentList.d.ts +51 -0
- package/react/components/Lists/ContentList.js +110 -0
- package/react/components/Lists/SimpleList.d.ts +21 -0
- package/react/components/Lists/SimpleList.js +80 -0
- package/react/components/Lists/TableList.d.ts +64 -0
- package/react/components/Lists/TableList.js +240 -0
- package/react/components/Lists/index.d.ts +2 -0
- package/react/components/Lists/index.js +10 -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 +7 -2
- package/react/components/Modal.js +35 -5
- package/react/components/MultiSelect.d.ts +40 -0
- package/react/components/MultiSelect.js +70 -0
- package/react/components/NavButton.d.ts +2 -1
- 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.d.ts +24 -0
- package/react/components/Navigation/QuickNavBar.js +117 -0
- package/react/components/Navigation/SideBarMenu.d.ts +21 -0
- package/react/components/Navigation/SideBarMenu.js +79 -0
- package/react/components/Navigation/SideBarTabs.d.ts +23 -0
- package/react/components/Navigation/SideBarTabs.js +88 -0
- package/react/components/Navigation/index.d.ts +3 -0
- package/react/components/Navigation/index.js +9 -0
- package/react/components/Popover.js +4 -2
- package/react/components/PropsList.js +4 -2
- package/react/components/RadioButtonGroup.d.ts +29 -0
- package/react/components/RadioButtonGroup.js +91 -0
- package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
- package/react/components/{Radio.js → RadioGroup.js} +20 -14
- package/react/components/SearchBar.d.ts +24 -0
- package/react/components/SearchBar.js +113 -0
- package/react/components/Select.d.ts +7 -2
- package/react/components/Select.js +9 -29
- 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.d.ts +1 -1
- package/react/components/SlidingToolbar.js +15 -3
- package/react/components/Spinner.d.ts +0 -1
- package/react/components/Spinner.js +7 -6
- package/react/components/StrechBar.js +4 -2
- package/react/components/SubNav.d.ts +8 -1
- package/react/components/SubNav.js +28 -8
- package/react/components/Switch.d.ts +4 -1
- package/react/components/Switch.js +25 -11
- package/react/components/SwitchGroup.d.ts +1 -0
- package/react/components/SwitchGroup.js +6 -4
- package/react/components/TabCustom.d.ts +11 -22
- package/react/components/TabCustom.js +32 -57
- package/react/components/TabList.d.ts +2 -11
- package/react/components/TabList.js +17 -36
- package/react/components/Tag.d.ts +4 -4
- package/react/components/Tag.js +21 -9
- package/react/components/TagInput.d.ts +0 -1
- package/react/components/TagInput.js +7 -6
- package/react/components/TagInputTest.js +13 -9
- package/react/components/Text/Heading.d.ts +15 -0
- package/react/components/Text/Heading.js +79 -0
- package/react/components/Text/Text.d.ts +15 -0
- package/react/components/Text/Text.js +67 -0
- package/react/components/Text/Time.d.ts +15 -0
- package/react/components/Text/Time.js +65 -0
- package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
- package/react/components/ThemeSelector.js +114 -0
- package/react/components/TimePicker.d.ts +11 -1
- package/react/components/TimePicker.js +14 -5
- 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 +2 -1
- package/react/components/Togglebox.js +42 -14
- package/react/components/Tooltip.d.ts +1 -0
- package/react/components/Tooltip.js +14 -10
- package/react/components/TreeSelect.d.ts +82 -0
- package/react/components/TreeSelect.js +521 -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 +26 -4
- package/react/index.js +62 -6
- package/app/styles/_editor-themes.scss +0 -326
- package/app/styles/variables/_design-tokens-general.scss +0 -76
- package/app-typescript/components/Radio.tsx +0 -57
- package/app-typescript/components/RadioButton.tsx +0 -57
- package/dist/react/Radios.tsx +0 -391
- package/examples/pages/react/Radios.tsx +0 -391
- package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
- package/react/components/RadioButton.js +0 -65
@@ -0,0 +1,134 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { PropsList, Prop, Text } from '../../../app-typescript';
|
4
|
+
|
5
|
+
interface IProps {
|
6
|
+
children?: React.ReactNode;
|
7
|
+
}
|
8
|
+
|
9
|
+
export default class TextDoc extends React.Component<IProps> {
|
10
|
+
render() {
|
11
|
+
return (
|
12
|
+
<section className='docs-page__container'>
|
13
|
+
<h2 className='docs-page__h2'>Text</h2>
|
14
|
+
|
15
|
+
<Markup.ReactMarkupCodePreview>{`
|
16
|
+
<Text>Cum sociis natoque penatibus et magnis dis parturient...</Text>
|
17
|
+
`}
|
18
|
+
</Markup.ReactMarkupCodePreview>
|
19
|
+
|
20
|
+
<p className="docs-page__paragraph">Text component.</p>
|
21
|
+
|
22
|
+
<Markup.ReactMarkup>
|
23
|
+
<Markup.ReactMarkupPreview>
|
24
|
+
<p className="docs-page__paragraph">// Sizes and alignments</p>
|
25
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
26
|
+
<Text size='x-small' style='italic'>
|
27
|
+
Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus ac cursus commodo,
|
28
|
+
tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis
|
29
|
+
ornare vel eu leo. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
30
|
+
</Text>
|
31
|
+
</div>
|
32
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
33
|
+
<Text align='end'>
|
34
|
+
Default size (small), align to end. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
35
|
+
Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
36
|
+
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
|
37
|
+
posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent
|
38
|
+
commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Morbi leo
|
39
|
+
risus, porta ac consectetur ac, vestibulum at eros.
|
40
|
+
</Text>
|
41
|
+
</div>
|
42
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
43
|
+
<Text size='medium' align='center'>
|
44
|
+
Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere
|
45
|
+
consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus,
|
46
|
+
porta ac consectetur ac, vestibulum at eros.
|
47
|
+
</Text>
|
48
|
+
</div>
|
49
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
50
|
+
<Text size='large' align='justify'>
|
51
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
|
52
|
+
est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
|
53
|
+
consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
|
54
|
+
sem lacinia quam venenatis vestibulum.
|
55
|
+
</Text>
|
56
|
+
</div>
|
57
|
+
|
58
|
+
<p className="docs-page__paragraph">// Variations</p>
|
59
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
60
|
+
<Text weight='light' size='medium'>
|
61
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
|
62
|
+
est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
|
63
|
+
consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
|
64
|
+
sem lacinia quam venenatis vestibulum.
|
65
|
+
</Text>
|
66
|
+
</div>
|
67
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
68
|
+
<Text fontStyle='serif' weight='strong' size='medium' color='light' align='center'>
|
69
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
|
70
|
+
est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
|
71
|
+
consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
|
72
|
+
sem lacinia quam venenatis vestibulum.
|
73
|
+
</Text>
|
74
|
+
</div>
|
75
|
+
<div className='docs-page__content-row sd-margin-b--5'>
|
76
|
+
<Text fontStyle='serif' weight='light' size='small' align='start'>
|
77
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
|
78
|
+
est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
|
79
|
+
consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
|
80
|
+
sem lacinia quam venenatis vestibulum.
|
81
|
+
</Text>
|
82
|
+
</div>
|
83
|
+
|
84
|
+
</Markup.ReactMarkupPreview>
|
85
|
+
<Markup.ReactMarkupCode>{`
|
86
|
+
// Sizes and alignments
|
87
|
+
|
88
|
+
<Text size='x-small' style='italic'>
|
89
|
+
Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus...
|
90
|
+
</Text>
|
91
|
+
|
92
|
+
<Text align='end'>
|
93
|
+
Default size (small), align to end. Praesent commodo cursus magna...
|
94
|
+
</Text>
|
95
|
+
|
96
|
+
<Text size='medium' align='center'>
|
97
|
+
Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque...
|
98
|
+
</Text>
|
99
|
+
|
100
|
+
<Text size='large' align='justify'>
|
101
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl...
|
102
|
+
</Text>
|
103
|
+
|
104
|
+
// Variations
|
105
|
+
|
106
|
+
<Text weight='light' size='medium'>
|
107
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
108
|
+
</Text>
|
109
|
+
|
110
|
+
<Text fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
|
111
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
112
|
+
</Text>
|
113
|
+
|
114
|
+
<Text className='' fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
|
115
|
+
Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
|
116
|
+
</Text>
|
117
|
+
`}
|
118
|
+
</Markup.ReactMarkupCode>
|
119
|
+
</Markup.ReactMarkup>
|
120
|
+
|
121
|
+
<h3 className="docs-page__h3">Props</h3>
|
122
|
+
<PropsList>
|
123
|
+
<Prop name='weight' isRequired={false} type='light | normal | medium | strong' default='normal' description='Change the default font weight.'/>
|
124
|
+
<Prop name='size' isRequired={true} type='x-small | small | medium | large' default='small' description='Choose between four predefined font sizes.'/>
|
125
|
+
<Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
|
126
|
+
<Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
|
127
|
+
<Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between the default – sans (Roboto) – and serif (Merriweather) font styles. '/>
|
128
|
+
<Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
|
129
|
+
<Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
|
130
|
+
</PropsList>
|
131
|
+
</section>
|
132
|
+
)
|
133
|
+
}
|
134
|
+
}
|
@@ -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
|
);
|
package/dist/react/Togglebox.tsx
CHANGED
@@ -40,6 +40,7 @@ const ToggleboxDocs = () => {
|
|
40
40
|
<Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
|
41
41
|
<Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
|
42
42
|
<Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
|
43
|
+
<Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
|
43
44
|
<Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
|
44
45
|
<Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
|
45
46
|
</PropsList>
|
@@ -47,5 +48,4 @@ const ToggleboxDocs = () => {
|
|
47
48
|
)
|
48
49
|
}
|
49
50
|
|
50
|
-
|
51
51
|
export default ToggleboxDocs;
|
package/dist/react/Tooltips.tsx
CHANGED
@@ -60,7 +60,7 @@ export default class TooltipDoc extends React.Component {
|
|
60
60
|
|
61
61
|
<div className="docs-page__content-row docs-page__content-row--no-margin">
|
62
62
|
|
63
|
-
<div className="docs-page__content-row docs-page__content-row--no-margin"
|
63
|
+
<div className="docs-page__content-row docs-page__content-row--no-margin">
|
64
64
|
<Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
|
65
65
|
<Button text='top' onClick={() => false} />
|
66
66
|
</Tooltip>
|
@@ -0,0 +1,422 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Markup from '../../js/react';
|
3
|
+
import { PropsList, Prop } from '../../../app-typescript';
|
4
|
+
import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
|
5
|
+
import { ITreeNode, TreeSelect } from '../../../app-typescript/components/TreeSelect';
|
6
|
+
|
7
|
+
interface IState {
|
8
|
+
value: any;
|
9
|
+
value2: any;
|
10
|
+
options: any;
|
11
|
+
options2: any;
|
12
|
+
inputValue: string;
|
13
|
+
arr: any;
|
14
|
+
}
|
15
|
+
|
16
|
+
let options = [
|
17
|
+
{
|
18
|
+
value: {name: 'Category1'},
|
19
|
+
children: [
|
20
|
+
{
|
21
|
+
value: {name: 'Sub-category1'},
|
22
|
+
children: [
|
23
|
+
{value: {name: 'Item20'}}
|
24
|
+
]
|
25
|
+
},
|
26
|
+
{
|
27
|
+
value: {name: 'Sub-category2'},
|
28
|
+
children: [
|
29
|
+
{value: {name: 'Item21'}}
|
30
|
+
]
|
31
|
+
}
|
32
|
+
,
|
33
|
+
{
|
34
|
+
value: {name: 'Sub-category3'},
|
35
|
+
children: [
|
36
|
+
{value: {name: 'Item22'}}
|
37
|
+
]
|
38
|
+
}
|
39
|
+
,
|
40
|
+
{
|
41
|
+
value: {name: 'Sub-category4'},
|
42
|
+
children: [
|
43
|
+
{value: {name: 'Item23'}}
|
44
|
+
]
|
45
|
+
}
|
46
|
+
,
|
47
|
+
{
|
48
|
+
value: {name: 'Sub-category5'},
|
49
|
+
children: [
|
50
|
+
{value: {name: 'Item24'}}
|
51
|
+
]
|
52
|
+
}
|
53
|
+
,
|
54
|
+
{
|
55
|
+
value: {name: 'Sub-category6'},
|
56
|
+
children: [
|
57
|
+
{value: {name: 'Item25'}}
|
58
|
+
]
|
59
|
+
}
|
60
|
+
]
|
61
|
+
},
|
62
|
+
{
|
63
|
+
value: {name: 'Category2'},
|
64
|
+
children: [
|
65
|
+
{
|
66
|
+
value: {name: 'Item8'}
|
67
|
+
},
|
68
|
+
{
|
69
|
+
value: {name: 'Item9'}
|
70
|
+
}
|
71
|
+
]
|
72
|
+
},
|
73
|
+
{
|
74
|
+
value: {name: 'Category3', bgColor: 'red'},
|
75
|
+
children: [
|
76
|
+
{
|
77
|
+
value: {name: 'Item10'}
|
78
|
+
},
|
79
|
+
{
|
80
|
+
value: {name: 'Item11'}
|
81
|
+
}
|
82
|
+
]
|
83
|
+
},
|
84
|
+
]
|
85
|
+
|
86
|
+
let options2 = [
|
87
|
+
{
|
88
|
+
value: {name: 'Category1', border: 'red'},
|
89
|
+
children: [
|
90
|
+
{
|
91
|
+
value: {name: 'Sub-category1'},
|
92
|
+
children: [
|
93
|
+
{value: {name: 'Item20'}}
|
94
|
+
]
|
95
|
+
},
|
96
|
+
{
|
97
|
+
value: {name: 'Sub-category2'},
|
98
|
+
children: [
|
99
|
+
{value: {name: 'Item21'}}
|
100
|
+
]
|
101
|
+
}
|
102
|
+
,
|
103
|
+
{
|
104
|
+
value: {name: 'Sub-category3'},
|
105
|
+
children: [
|
106
|
+
{value: {name: 'Item22'}}
|
107
|
+
]
|
108
|
+
}
|
109
|
+
,
|
110
|
+
{
|
111
|
+
value: {name: 'Sub-category4'},
|
112
|
+
children: [
|
113
|
+
{value: {name: 'Item23'}}
|
114
|
+
]
|
115
|
+
}
|
116
|
+
,
|
117
|
+
{
|
118
|
+
value: {name: 'Sub-category5'},
|
119
|
+
children: [
|
120
|
+
{value: {name: 'Item24'}}
|
121
|
+
]
|
122
|
+
}
|
123
|
+
,
|
124
|
+
{
|
125
|
+
value: {name: 'Sub-category6'},
|
126
|
+
children: [
|
127
|
+
{value: {name: 'Item25'}}
|
128
|
+
]
|
129
|
+
}
|
130
|
+
]
|
131
|
+
},
|
132
|
+
{
|
133
|
+
value: {name: 'Category2', border: 'green'},
|
134
|
+
children: [
|
135
|
+
{
|
136
|
+
value: {name: 'Item8'}
|
137
|
+
},
|
138
|
+
{
|
139
|
+
value: {name: 'Item9'}
|
140
|
+
}
|
141
|
+
]
|
142
|
+
},
|
143
|
+
{
|
144
|
+
value: {name: 'Category3', border: 'yellow'},
|
145
|
+
children: [
|
146
|
+
{
|
147
|
+
value: {name: 'Item10'}
|
148
|
+
},
|
149
|
+
{
|
150
|
+
value: {name: 'Item11'}
|
151
|
+
}
|
152
|
+
]
|
153
|
+
},
|
154
|
+
]
|
155
|
+
|
156
|
+
let fetchedArr = [];
|
157
|
+
fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
|
158
|
+
);
|
159
|
+
|
160
|
+
type ICancelFn = () => void;
|
161
|
+
|
162
|
+
function searchOptions(
|
163
|
+
term: string,
|
164
|
+
callback: (res: any) => void,
|
165
|
+
): ICancelFn {
|
166
|
+
let timeout = setTimeout(() => {
|
167
|
+
|
168
|
+
callback(
|
169
|
+
fetchedArr
|
170
|
+
.filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
|
171
|
+
.map((item) => ({value: item})),
|
172
|
+
);
|
173
|
+
}, 1000);
|
174
|
+
|
175
|
+
return () => {
|
176
|
+
clearTimeout(timeout);
|
177
|
+
}
|
178
|
+
}
|
179
|
+
|
180
|
+
export class TreeSelectDocs extends React.Component<{}, IState> {
|
181
|
+
constructor(props) {
|
182
|
+
super(props);
|
183
|
+
this.state = {
|
184
|
+
value: [],
|
185
|
+
value2: [],
|
186
|
+
options: options,
|
187
|
+
options2: options,
|
188
|
+
inputValue: '',
|
189
|
+
arr: []
|
190
|
+
}
|
191
|
+
|
192
|
+
|
193
|
+
this.handleChange = this.handleChange.bind(this);
|
194
|
+
}
|
195
|
+
|
196
|
+
handleChange(e, option) {
|
197
|
+
if(option.item) {
|
198
|
+
e.stopPropagation();
|
199
|
+
e.preventDefault();
|
200
|
+
|
201
|
+
this.setState({
|
202
|
+
options: option.item
|
203
|
+
})
|
204
|
+
}
|
205
|
+
}
|
206
|
+
|
207
|
+
render() {
|
208
|
+
return (
|
209
|
+
<section className='docs-page__container'>
|
210
|
+
<h2 className='docs-page__h2'>TreeSelect</h2>
|
211
|
+
|
212
|
+
<Markup.ReactMarkupCodePreview>{`
|
213
|
+
<TreeSelect
|
214
|
+
options={this.state.options2}
|
215
|
+
getLabel={'label'}
|
216
|
+
getMultilevelArray={'items'}
|
217
|
+
selectBranchWithChildren={true}
|
218
|
+
onChange={() => false}
|
219
|
+
/>
|
220
|
+
`}
|
221
|
+
</Markup.ReactMarkupCodePreview>
|
222
|
+
|
223
|
+
<Markup.ReactMarkup>
|
224
|
+
<Markup.ReactMarkupPreview>
|
225
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
226
|
+
<div className='form__row'>
|
227
|
+
<TreeSelect
|
228
|
+
value={[{name: 'Item1'}, {name: 'Item2'}]}
|
229
|
+
getOptions={() => options}
|
230
|
+
kind={'synchronous'}
|
231
|
+
getId={(item) => item.name}
|
232
|
+
getLabel={(item) => item.name}
|
233
|
+
getBackgroundColor={(item: any) => item.bgColor}
|
234
|
+
selectBranchWithChildren={true}
|
235
|
+
allowMultiple
|
236
|
+
fullWidth
|
237
|
+
singleLevelSearch
|
238
|
+
required
|
239
|
+
info={'Info Message'}
|
240
|
+
error={'Error Message'}
|
241
|
+
label={'TreeSelect Label'}
|
242
|
+
searchPlaceholder='Search...'
|
243
|
+
onChange={(e) => false}
|
244
|
+
valueTemplate={(item, Wrapper) => {
|
245
|
+
return (
|
246
|
+
<Wrapper backgroundColor={item.bgColor}>
|
247
|
+
<span>{item.name}</span>
|
248
|
+
</Wrapper>
|
249
|
+
);
|
250
|
+
}}
|
251
|
+
/>
|
252
|
+
</div>
|
253
|
+
</div>
|
254
|
+
</Markup.ReactMarkupPreview>
|
255
|
+
|
256
|
+
<Markup.ReactMarkupCode>{`
|
257
|
+
<TreeSelect
|
258
|
+
value={[{name: 'Item1'}, {name: 'Item2'}]}
|
259
|
+
getOptions={() => options}
|
260
|
+
kind={'synchronous'}
|
261
|
+
getId={(item) => item.name}
|
262
|
+
getLabel={(item) => item.name}
|
263
|
+
getBackgroundColor={(item: any) => item.bgColor}
|
264
|
+
selectBranchWithChildren={true}
|
265
|
+
allowMultiple
|
266
|
+
fullWidth
|
267
|
+
singleLevelSearch
|
268
|
+
required
|
269
|
+
info={'Info Message'}
|
270
|
+
error={'Error Message'}
|
271
|
+
label={'TreeSelect Label'}
|
272
|
+
searchPlaceholder='Search...'
|
273
|
+
onChange={(e) => false}
|
274
|
+
valueTemplate={(item, Wrapper) => {
|
275
|
+
return (
|
276
|
+
<Wrapper backgroundColor={item.bgColor}>
|
277
|
+
<span>{item.name}</span>
|
278
|
+
</Wrapper>
|
279
|
+
);
|
280
|
+
}}
|
281
|
+
/>
|
282
|
+
`}</Markup.ReactMarkupCode>
|
283
|
+
|
284
|
+
</Markup.ReactMarkup>
|
285
|
+
|
286
|
+
<p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
|
287
|
+
<Markup.ReactMarkup>
|
288
|
+
<Markup.ReactMarkupPreview>
|
289
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
290
|
+
<div className='form__row'>
|
291
|
+
<TreeSelect
|
292
|
+
kind="asynchronous"
|
293
|
+
searchOptions={searchOptions}
|
294
|
+
value={this.state.value}
|
295
|
+
onChange={(val) => {
|
296
|
+
this.setState({value: val});
|
297
|
+
}}
|
298
|
+
getLabel={({display_name}) => display_name
|
299
|
+
}
|
300
|
+
getId={({qcode}) => qcode.display_name}
|
301
|
+
selectBranchWithChildren={false}
|
302
|
+
allowMultiple={true}
|
303
|
+
/>
|
304
|
+
</div>
|
305
|
+
</div>
|
306
|
+
</Markup.ReactMarkupPreview>
|
307
|
+
|
308
|
+
<Markup.ReactMarkupCode>{`
|
309
|
+
<TreeSelect
|
310
|
+
kind="asynchronous"
|
311
|
+
searchOptions={searchOptions}
|
312
|
+
value={this.state.value}
|
313
|
+
onChange={(val) => {
|
314
|
+
this.setState({value: val});
|
315
|
+
}}
|
316
|
+
getLabel={({name}) => name}
|
317
|
+
getId={({qcode}) => qcode}
|
318
|
+
selectBranchWithChildren={false}
|
319
|
+
optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
|
320
|
+
allowMultiple={true}
|
321
|
+
/>
|
322
|
+
`}</Markup.ReactMarkupCode>
|
323
|
+
|
324
|
+
</Markup.ReactMarkup>
|
325
|
+
|
326
|
+
<p className='docs-page__paragraph'>TreeSelect with custom template.</p>
|
327
|
+
<Markup.ReactMarkup>
|
328
|
+
<Markup.ReactMarkupPreview>
|
329
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
330
|
+
<div className='form__row'>
|
331
|
+
<TreeSelect
|
332
|
+
getOptions={() => options2}
|
333
|
+
kind={'synchronous'}
|
334
|
+
getId={(item) => item.name}
|
335
|
+
getLabel={(item) => item.name}
|
336
|
+
getBackgroundColor={(item) => item.bgColor}
|
337
|
+
getBorderColor={(item) => item.border}
|
338
|
+
placeholder='Select one'
|
339
|
+
selectBranchWithChildren={true}
|
340
|
+
onChange={(e) => false}
|
341
|
+
optionTemplate={(item: any) => {
|
342
|
+
return <div>Label: {item.name}</div>
|
343
|
+
}}
|
344
|
+
valueTemplate={(item: any, Wrapper) => {
|
345
|
+
return <Wrapper borderColor={item.border}>
|
346
|
+
<span>{item.name}</span>
|
347
|
+
</Wrapper>
|
348
|
+
}}
|
349
|
+
/>
|
350
|
+
</div>
|
351
|
+
</div>
|
352
|
+
</Markup.ReactMarkupPreview>
|
353
|
+
|
354
|
+
<Markup.ReactMarkupCode>{`
|
355
|
+
<TreeSelect
|
356
|
+
getOptions={() => options2}
|
357
|
+
kind={'synchronous'}
|
358
|
+
getId={(item) => item.name}
|
359
|
+
getLabel={(item) => item.name}
|
360
|
+
getBackgroundColor={(item) => item.bgColor}
|
361
|
+
getBorderColor={(item) => item.border}
|
362
|
+
placeholder='Select one'
|
363
|
+
selectBranchWithChildren={true}
|
364
|
+
onChange={(e) => false}
|
365
|
+
optionTemplate={(item: any) => {
|
366
|
+
return <div>Label: {item.name}</div>
|
367
|
+
}}
|
368
|
+
valueTemplate={(item: any, Wrapper) => {
|
369
|
+
return <Wrapper borderColor={item.border}>
|
370
|
+
<span>{item.name}</span>
|
371
|
+
</Wrapper>
|
372
|
+
}}
|
373
|
+
/>
|
374
|
+
`}</Markup.ReactMarkupCode>
|
375
|
+
|
376
|
+
</Markup.ReactMarkup>
|
377
|
+
|
378
|
+
<h3 className="docs-page__h3">Props</h3>
|
379
|
+
<PropsList>
|
380
|
+
<Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
|
381
|
+
<Prop name='getOptions' isRequired={true} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
|
382
|
+
<Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
|
383
|
+
<Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
|
384
|
+
<Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
|
385
|
+
<Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
|
386
|
+
<Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
|
387
|
+
<Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
|
388
|
+
<Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
|
389
|
+
<Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
|
390
|
+
<Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
|
391
|
+
<Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
|
392
|
+
<Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
|
393
|
+
<Prop name='getBackgroundColor' isRequired={true} type='Function' default='/' description='Function to return background color of individual item in options.'/>
|
394
|
+
<Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
|
395
|
+
<Prop name='valueTemplate' isRequired={false} type='Function(item, Wrapper)' default='/' description='Function that gets an item in the value and returns the content for it.'/>
|
396
|
+
<Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
|
397
|
+
<Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
|
398
|
+
<Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
|
399
|
+
<Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
|
400
|
+
<Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
|
401
|
+
<Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
|
402
|
+
<Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
|
403
|
+
<Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
|
404
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
|
405
|
+
<Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
|
406
|
+
</PropsList>
|
407
|
+
|
408
|
+
<p className='docs-page__paragraph'>synchronous:</p>
|
409
|
+
<PropsList>
|
410
|
+
<Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
|
411
|
+
</PropsList>
|
412
|
+
|
413
|
+
<p className='docs-page__paragraph'>asynchronous:</p>
|
414
|
+
<PropsList>
|
415
|
+
<Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
|
416
|
+
<Prop name='searchOptions' isRequired={false} type='Function' default='/' description='function will be called when a search is initiated from UI.'/>
|
417
|
+
</PropsList>
|
418
|
+
|
419
|
+
</section>
|
420
|
+
)
|
421
|
+
}
|
422
|
+
}
|