superdesk-ui-framework 4.0.47 → 4.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (575) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/_time.scss +28 -0
  9. package/app/styles/app.scss +1 -0
  10. package/app/styles/design-tokens/_design-tokens-general.scss +6 -3
  11. package/app/styles/form-elements/_forms-general.scss +0 -4
  12. package/app-typescript/components/Alert.tsx +12 -16
  13. package/app-typescript/components/Autocomplete.tsx +53 -42
  14. package/app-typescript/components/Badge.tsx +1 -1
  15. package/app-typescript/components/Button.tsx +5 -11
  16. package/app-typescript/components/ButtonGroup.tsx +15 -10
  17. package/app-typescript/components/Carousel.tsx +25 -26
  18. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  19. package/app-typescript/components/Checkbox.tsx +16 -10
  20. package/app-typescript/components/CheckboxButton.tsx +22 -13
  21. package/app-typescript/components/ContentDivider.tsx +6 -7
  22. package/app-typescript/components/CreateButton.tsx +8 -6
  23. package/app-typescript/components/DatePicker.tsx +59 -55
  24. package/app-typescript/components/DateTimePicker.tsx +51 -48
  25. package/app-typescript/components/Divider.tsx +2 -4
  26. package/app-typescript/components/DonutChart.tsx +11 -6
  27. package/app-typescript/components/DragHandle.tsx +10 -6
  28. package/app-typescript/components/DragHandleDots.tsx +1 -3
  29. package/app-typescript/components/DropZone.tsx +27 -25
  30. package/app-typescript/components/Dropdown.tsx +61 -102
  31. package/app-typescript/components/DropdownFirst.tsx +57 -69
  32. package/app-typescript/components/DurationInput.tsx +64 -54
  33. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  34. package/app-typescript/components/EmptyState.tsx +10 -14
  35. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  36. package/app-typescript/components/Form/FormItem.tsx +1 -5
  37. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  38. package/app-typescript/components/Form/FormRow.tsx +12 -19
  39. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  40. package/app-typescript/components/Form/FormText.tsx +1 -5
  41. package/app-typescript/components/Form/InputBase.tsx +12 -11
  42. package/app-typescript/components/Form/InputNew.tsx +11 -12
  43. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  44. package/app-typescript/components/Form/index.tsx +9 -9
  45. package/app-typescript/components/FormLabel.tsx +1 -5
  46. package/app-typescript/components/GridItem.tsx +38 -69
  47. package/app-typescript/components/GridList.tsx +2 -6
  48. package/app-typescript/components/HeadingText.tsx +4 -5
  49. package/app-typescript/components/IconButton.tsx +4 -10
  50. package/app-typescript/components/IconLabel.tsx +5 -5
  51. package/app-typescript/components/IconPicker.tsx +128 -126
  52. package/app-typescript/components/IllustrationButton.tsx +2 -8
  53. package/app-typescript/components/Input.tsx +2 -2
  54. package/app-typescript/components/Label.tsx +11 -7
  55. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  57. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  58. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  63. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  64. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  65. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  66. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  67. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  68. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  69. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  70. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  71. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  72. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  73. package/app-typescript/components/Layouts/Container.tsx +13 -8
  74. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  75. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  76. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  77. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  78. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  79. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  80. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  81. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  82. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  83. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  84. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  85. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  86. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  87. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  88. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  89. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  90. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  91. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  92. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  93. package/app-typescript/components/Layouts/index.tsx +39 -39
  94. package/app-typescript/components/LeftMenu.tsx +51 -53
  95. package/app-typescript/components/ListItemLoader.tsx +1 -1
  96. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  97. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  98. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  99. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  100. package/app-typescript/components/Lists/TableList.tsx +169 -217
  101. package/app-typescript/components/Lists/index.tsx +2 -2
  102. package/app-typescript/components/Loader.tsx +1 -3
  103. package/app-typescript/components/Menu.tsx +2 -4
  104. package/app-typescript/components/Modal.tsx +21 -21
  105. package/app-typescript/components/MultiSelect.tsx +6 -6
  106. package/app-typescript/components/NavButton.tsx +10 -8
  107. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  108. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  109. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  110. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  111. package/app-typescript/components/Navigation/index.tsx +3 -3
  112. package/app-typescript/components/Popover.tsx +19 -21
  113. package/app-typescript/components/PropsList.tsx +2 -4
  114. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  115. package/app-typescript/components/RadioGroup.tsx +9 -8
  116. package/app-typescript/components/ResizablePanels.tsx +2 -3
  117. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  118. package/app-typescript/components/SearchBar.tsx +53 -45
  119. package/app-typescript/components/Select.tsx +6 -8
  120. package/app-typescript/components/SelectGrid.tsx +32 -40
  121. package/app-typescript/components/SelectPreview.tsx +31 -25
  122. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  123. package/app-typescript/components/ShowPopup.tsx +32 -46
  124. package/app-typescript/components/SidebarMenu.tsx +19 -18
  125. package/app-typescript/components/Skeleton.tsx +12 -11
  126. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  127. package/app-typescript/components/Spinner.tsx +2 -6
  128. package/app-typescript/components/StrechBar.tsx +1 -5
  129. package/app-typescript/components/SubNav.tsx +10 -8
  130. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  131. package/app-typescript/components/Switch.tsx +14 -12
  132. package/app-typescript/components/SwitchGroup.tsx +10 -10
  133. package/app-typescript/components/TabCustom.tsx +28 -35
  134. package/app-typescript/components/TabList.tsx +13 -10
  135. package/app-typescript/components/Tag.tsx +21 -24
  136. package/app-typescript/components/TagInput.tsx +4 -11
  137. package/app-typescript/components/Text/Heading.tsx +21 -41
  138. package/app-typescript/components/Text/Text.tsx +16 -12
  139. package/app-typescript/components/Text/Time.tsx +14 -10
  140. package/app-typescript/components/ThemeSelector.tsx +15 -14
  141. package/app-typescript/components/TimePicker.tsx +60 -6
  142. package/app-typescript/components/TimePickerPopover.tsx +274 -0
  143. package/app-typescript/components/TimePickerV2.tsx +20 -20
  144. package/app-typescript/components/Toast.tsx +11 -7
  145. package/app-typescript/components/ToastMessage.tsx +3 -14
  146. package/app-typescript/components/ToastText.tsx +30 -32
  147. package/app-typescript/components/ToastWrapper.tsx +76 -74
  148. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  149. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  150. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  151. package/app-typescript/components/Tooltip.tsx +1 -1
  152. package/app-typescript/components/TreeMenu.tsx +72 -81
  153. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  154. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  155. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  156. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  157. package/app-typescript/components/WithPagination.tsx +34 -39
  158. package/app-typescript/components/WithPopover.tsx +0 -1
  159. package/app-typescript/components/WithPortal.tsx +4 -7
  160. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  161. package/app-typescript/components/_Positioner.tsx +26 -26
  162. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  163. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  164. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  165. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  166. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  167. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  168. package/app-typescript/components/avatar/avatar.tsx +5 -8
  169. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  170. package/app-typescript/helpers.tsx +2 -2
  171. package/app-typescript/index.ts +111 -100
  172. package/app-typescript/utils/time.tsx +31 -0
  173. package/declarations.d.ts +1 -1
  174. package/dist/components/Alerts.tsx +171 -78
  175. package/dist/components/Autocomplete.tsx +187 -78
  176. package/dist/components/Avatar.tsx +52 -112
  177. package/dist/components/Badges.tsx +111 -67
  178. package/dist/components/BigIconFont.tsx +29 -17
  179. package/dist/components/BoxedList.tsx +244 -114
  180. package/dist/components/ButtonGroups.tsx +213 -147
  181. package/dist/components/Buttons.tsx +409 -137
  182. package/dist/components/Card.tsx +6 -7
  183. package/dist/components/Carousel.tsx +126 -39
  184. package/dist/components/Checkboxs.tsx +446 -105
  185. package/dist/components/Container.tsx +95 -48
  186. package/dist/components/ContentDivider.tsx +110 -63
  187. package/dist/components/ContentList.tsx +577 -253
  188. package/dist/components/CreateButton.tsx +71 -21
  189. package/dist/components/DatePicker.tsx +102 -26
  190. package/dist/components/DateTimePicker.tsx +49 -11
  191. package/dist/components/DragHandleDocs.tsx +56 -26
  192. package/dist/components/DropZone.tsx +67 -29
  193. package/dist/components/Dropdowns.tsx +220 -131
  194. package/dist/components/DurationInput.tsx +92 -32
  195. package/dist/components/EmptyStates.tsx +61 -26
  196. package/dist/components/GridItem.tsx +190 -91
  197. package/dist/components/GridList.tsx +37 -17
  198. package/dist/components/Heading.tsx +81 -35
  199. package/dist/components/IconButtons.tsx +125 -32
  200. package/dist/components/IconFont.tsx +24 -12
  201. package/dist/components/IconLabels.tsx +146 -39
  202. package/dist/components/IconPicker.tsx +30 -13
  203. package/dist/components/IllustrationButton.tsx +40 -20
  204. package/dist/components/Index.tsx +128 -114
  205. package/dist/components/Inputs.tsx +153 -51
  206. package/dist/components/Labels.tsx +191 -117
  207. package/dist/components/LeftNavigations.tsx +327 -100
  208. package/dist/components/ListItems.tsx +8 -9
  209. package/dist/components/Loader.tsx +5 -4
  210. package/dist/components/Menu.tsx +48 -26
  211. package/dist/components/Modal.tsx +298 -104
  212. package/dist/components/MultiSelect.tsx +189 -53
  213. package/dist/components/NavButtons.tsx +86 -30
  214. package/dist/components/Panel.tsx +367 -120
  215. package/dist/components/Popover.tsx +37 -17
  216. package/dist/components/QuickNavigationBar.tsx +222 -86
  217. package/dist/components/RadioGroup.tsx +375 -137
  218. package/dist/components/ResizablePanels.tsx +8 -14
  219. package/dist/components/SelectGrid.tsx +79 -38
  220. package/dist/components/SelectWithTemplate.tsx +23 -14
  221. package/dist/components/Selects.tsx +94 -29
  222. package/dist/components/SimpleList.tsx +91 -41
  223. package/dist/components/SubNav.tsx +57 -37
  224. package/dist/components/Switch.tsx +168 -42
  225. package/dist/components/TableList.tsx +220 -66
  226. package/dist/components/Tabs.tsx +149 -64
  227. package/dist/components/TagInputDocs.tsx +73 -17
  228. package/dist/components/Tags.tsx +104 -73
  229. package/dist/components/Text.tsx +108 -58
  230. package/dist/components/TimePicker.tsx +76 -22
  231. package/dist/components/Toasts.tsx +162 -80
  232. package/dist/components/Togglebox.tsx +164 -62
  233. package/dist/components/Tooltips.tsx +27 -15
  234. package/dist/components/TreeMenu.tsx +95 -59
  235. package/dist/components/TreeSelect.tsx +297 -162
  236. package/dist/components/WithPaginationDocs.tsx +15 -16
  237. package/dist/components/WithSizeObserver.tsx +9 -9
  238. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  239. package/dist/components/tree-select/example-1.tsx +8 -12
  240. package/dist/components/tree-select/example-2.tsx +2 -5
  241. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  242. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  243. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  244. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  245. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  246. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  247. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  248. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  249. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  250. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  251. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  252. package/dist/components/utilities/TextUtilities.tsx +109 -60
  253. package/dist/design-patterns/Index.tsx +8 -11
  254. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  255. package/dist/examples.bundle.css +1257 -1155
  256. package/dist/examples.bundle.js +7904 -7035
  257. package/dist/playgrounds/dummy-data/items.ts +9 -8
  258. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  259. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  260. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  261. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  262. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  263. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  264. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  265. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  266. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  267. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  268. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  269. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  270. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  271. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  272. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  273. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  274. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  275. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  276. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  277. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  278. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  279. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  280. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  281. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  282. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  284. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  285. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  286. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  287. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  288. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  289. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  290. package/dist/superdesk-ui.bundle.css +25 -4
  291. package/dist/superdesk-ui.bundle.js +3072 -2903
  292. package/dist/vendor.bundle.js +18 -18
  293. package/examples/css/docs-page.css +1135 -1116
  294. package/examples/css/reset.css +124 -43
  295. package/examples/css/vendor.css +125 -125
  296. package/examples/index.js +138 -139
  297. package/examples/js/doc.js +41 -40
  298. package/examples/js/react.js +82 -48
  299. package/examples/pages/components/Alerts.tsx +171 -78
  300. package/examples/pages/components/Autocomplete.tsx +187 -78
  301. package/examples/pages/components/Avatar.tsx +52 -112
  302. package/examples/pages/components/Badges.tsx +111 -67
  303. package/examples/pages/components/BigIconFont.tsx +29 -17
  304. package/examples/pages/components/BoxedList.tsx +244 -114
  305. package/examples/pages/components/ButtonGroups.tsx +213 -147
  306. package/examples/pages/components/Buttons.tsx +409 -137
  307. package/examples/pages/components/Card.tsx +6 -7
  308. package/examples/pages/components/Carousel.tsx +126 -39
  309. package/examples/pages/components/Checkboxs.tsx +446 -105
  310. package/examples/pages/components/Container.tsx +95 -48
  311. package/examples/pages/components/ContentDivider.tsx +110 -63
  312. package/examples/pages/components/ContentList.tsx +577 -253
  313. package/examples/pages/components/CreateButton.tsx +71 -21
  314. package/examples/pages/components/DatePicker.tsx +102 -26
  315. package/examples/pages/components/DateTimePicker.tsx +49 -11
  316. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  317. package/examples/pages/components/DropZone.tsx +67 -29
  318. package/examples/pages/components/Dropdowns.tsx +220 -131
  319. package/examples/pages/components/DurationInput.tsx +92 -32
  320. package/examples/pages/components/EmptyStates.tsx +61 -26
  321. package/examples/pages/components/GridItem.tsx +190 -91
  322. package/examples/pages/components/GridList.tsx +37 -17
  323. package/examples/pages/components/Heading.tsx +81 -35
  324. package/examples/pages/components/IconButtons.tsx +125 -32
  325. package/examples/pages/components/IconFont.tsx +24 -12
  326. package/examples/pages/components/IconLabels.tsx +146 -39
  327. package/examples/pages/components/IconPicker.tsx +30 -13
  328. package/examples/pages/components/IllustrationButton.tsx +40 -20
  329. package/examples/pages/components/Index.tsx +128 -114
  330. package/examples/pages/components/Inputs.tsx +153 -51
  331. package/examples/pages/components/Labels.tsx +191 -117
  332. package/examples/pages/components/LeftNavigations.tsx +327 -100
  333. package/examples/pages/components/ListItems.tsx +8 -9
  334. package/examples/pages/components/Loader.tsx +5 -4
  335. package/examples/pages/components/Menu.tsx +48 -26
  336. package/examples/pages/components/Modal.tsx +298 -104
  337. package/examples/pages/components/MultiSelect.tsx +189 -53
  338. package/examples/pages/components/NavButtons.tsx +86 -30
  339. package/examples/pages/components/Panel.tsx +367 -120
  340. package/examples/pages/components/Popover.tsx +37 -17
  341. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  342. package/examples/pages/components/RadioGroup.tsx +375 -137
  343. package/examples/pages/components/ResizablePanels.tsx +8 -14
  344. package/examples/pages/components/SelectGrid.tsx +79 -38
  345. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  346. package/examples/pages/components/Selects.tsx +94 -29
  347. package/examples/pages/components/SimpleList.tsx +91 -41
  348. package/examples/pages/components/SubNav.tsx +57 -37
  349. package/examples/pages/components/Switch.tsx +168 -42
  350. package/examples/pages/components/TableList.tsx +220 -66
  351. package/examples/pages/components/Tabs.tsx +149 -64
  352. package/examples/pages/components/TagInputDocs.tsx +73 -17
  353. package/examples/pages/components/Tags.tsx +104 -73
  354. package/examples/pages/components/Text.tsx +108 -58
  355. package/examples/pages/components/TimePicker.tsx +76 -22
  356. package/examples/pages/components/Toasts.tsx +162 -80
  357. package/examples/pages/components/Togglebox.tsx +164 -62
  358. package/examples/pages/components/Tooltips.tsx +27 -15
  359. package/examples/pages/components/TreeMenu.tsx +95 -59
  360. package/examples/pages/components/TreeSelect.tsx +297 -162
  361. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  362. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  363. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  364. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  365. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  366. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  367. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  368. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  370. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  371. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  372. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  373. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  374. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  375. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  376. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  377. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  378. package/examples/pages/design-patterns/Index.tsx +8 -11
  379. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  380. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  381. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  382. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  383. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  384. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  385. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  386. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  387. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  388. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  389. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  390. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  391. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  392. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  393. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  394. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  395. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  396. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  397. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  398. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  400. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  401. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  402. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  403. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  404. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  405. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  407. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  408. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  409. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  410. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  411. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  412. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  413. package/globals.d.ts +1 -1
  414. package/mocha-setup.ts +3 -3
  415. package/package.json +119 -117
  416. package/react/components/Alert.js +6 -9
  417. package/react/components/Autocomplete.js +15 -23
  418. package/react/components/Badge.js +1 -1
  419. package/react/components/Button.js +4 -6
  420. package/react/components/ButtonGroup.js +1 -1
  421. package/react/components/Carousel.js +3 -3
  422. package/react/components/CheckButtonGroup.js +3 -6
  423. package/react/components/CheckboxButton.js +2 -4
  424. package/react/components/ContentDivider.js +1 -1
  425. package/react/components/DatePicker.js +29 -26
  426. package/react/components/DateTimePicker.d.ts +8 -4
  427. package/react/components/DateTimePicker.js +6 -8
  428. package/react/components/Divider.js +1 -1
  429. package/react/components/DonutChart.js +1 -1
  430. package/react/components/DragHandle.js +1 -1
  431. package/react/components/DragHandleDots.js +1 -1
  432. package/react/components/DropZone.js +6 -8
  433. package/react/components/Dropdown.d.ts +1 -1
  434. package/react/components/Dropdown.js +34 -38
  435. package/react/components/DropdownFirst.d.ts +11 -11
  436. package/react/components/DropdownFirst.js +20 -24
  437. package/react/components/DurationInput.js +37 -34
  438. package/react/components/EmptyState.js +5 -5
  439. package/react/components/Form/FormGroup.js +1 -1
  440. package/react/components/Form/FormItem.js +1 -1
  441. package/react/components/Form/FormRow.js +1 -1
  442. package/react/components/Form/FormRowNew.js +3 -3
  443. package/react/components/Form/FormText.js +1 -1
  444. package/react/components/Form/InputNew.js +3 -3
  445. package/react/components/Form/InputWrapper.js +7 -10
  446. package/react/components/GridItem.d.ts +1 -1
  447. package/react/components/GridItem.js +16 -16
  448. package/react/components/GridList.js +1 -1
  449. package/react/components/HeadingText.js +4 -5
  450. package/react/components/IconLabel.js +3 -5
  451. package/react/components/IconPicker.d.ts +1 -1
  452. package/react/components/IconPicker.js +111 -104
  453. package/react/components/IllustrationButton.js +1 -1
  454. package/react/components/Input.js +1 -1
  455. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  456. package/react/components/Layouts/AuthoringContainer.js +1 -1
  457. package/react/components/Layouts/AuthoringFrame.js +4 -4
  458. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  461. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  462. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  463. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  464. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  465. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  466. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  467. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  468. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  469. package/react/components/Layouts/BottomBarAction.js +2 -2
  470. package/react/components/Layouts/ContentSplitter.js +1 -1
  471. package/react/components/Layouts/CoreLayout.js +2 -2
  472. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  473. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  474. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  475. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  476. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  477. package/react/components/Layouts/HamburgerButton.js +1 -1
  478. package/react/components/Layouts/HeaderPanel.js +1 -1
  479. package/react/components/Layouts/Layout.d.ts +1 -1
  480. package/react/components/Layouts/Layout.js +9 -9
  481. package/react/components/Layouts/LayoutContainer.js +1 -1
  482. package/react/components/Layouts/LeftPanel.js +1 -1
  483. package/react/components/Layouts/MainMenu.js +8 -10
  484. package/react/components/Layouts/MainPanel.js +1 -1
  485. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  486. package/react/components/Layouts/NotificationPanel.js +7 -7
  487. package/react/components/Layouts/OverlayPanel.js +3 -3
  488. package/react/components/Layouts/PageLayout.js +2 -2
  489. package/react/components/Layouts/Panel.d.ts +1 -1
  490. package/react/components/Layouts/Panel.js +12 -18
  491. package/react/components/LeftMenu.d.ts +3 -3
  492. package/react/components/LeftMenu.js +11 -13
  493. package/react/components/Lists/BoxedList.js +6 -6
  494. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  495. package/react/components/Lists/ContentList.js +24 -26
  496. package/react/components/Lists/TableList.d.ts +1 -1
  497. package/react/components/Lists/TableList.js +59 -79
  498. package/react/components/Loader.js +1 -1
  499. package/react/components/Menu.js +1 -1
  500. package/react/components/Modal.d.ts +1 -1
  501. package/react/components/MultiSelect.d.ts +1 -1
  502. package/react/components/MultiSelect.js +2 -2
  503. package/react/components/NavButton.js +2 -4
  504. package/react/components/Navigation/BottomNav.js +9 -8
  505. package/react/components/Navigation/QuickNavBar.js +17 -20
  506. package/react/components/Navigation/SideBarMenu.js +11 -9
  507. package/react/components/Navigation/SideBarTabs.js +9 -8
  508. package/react/components/Popover.js +1 -1
  509. package/react/components/RadioButtonGroup.js +15 -23
  510. package/react/components/ResizablePanels.js +1 -3
  511. package/react/components/ResizeObserverComponent.js +1 -3
  512. package/react/components/SearchBar.js +14 -16
  513. package/react/components/Select.js +3 -3
  514. package/react/components/SelectGrid.js +15 -20
  515. package/react/components/SelectPreview.js +13 -13
  516. package/react/components/SelectWithTemplate.js +3 -5
  517. package/react/components/ShowPopup.d.ts +1 -0
  518. package/react/components/ShowPopup.js +7 -10
  519. package/react/components/Skeleton.js +1 -1
  520. package/react/components/SlidingToolbar.js +1 -1
  521. package/react/components/Spinner.js +1 -1
  522. package/react/components/StrechBar.js +1 -1
  523. package/react/components/SubNav.js +1 -1
  524. package/react/components/Switch.js +4 -6
  525. package/react/components/SwitchGroup.js +1 -1
  526. package/react/components/TabCustom.js +6 -4
  527. package/react/components/TabList.js +4 -8
  528. package/react/components/Tag.js +13 -17
  529. package/react/components/TagInput.js +1 -1
  530. package/react/components/Text/Heading.js +6 -6
  531. package/react/components/ThemeSelector.js +1 -1
  532. package/react/components/TimePicker.d.ts +9 -2
  533. package/react/components/TimePicker.js +29 -4
  534. package/react/components/TimePickerPopover.d.ts +19 -0
  535. package/react/components/TimePickerPopover.js +225 -0
  536. package/react/components/TimePickerV2.js +17 -17
  537. package/react/components/Toast.js +3 -3
  538. package/react/components/ToastMessage.d.ts +1 -1
  539. package/react/components/ToastMessage.js +1 -1
  540. package/react/components/ToastText.js +5 -8
  541. package/react/components/ToastWrapper.js +3 -5
  542. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  543. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  544. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  545. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  546. package/react/components/ToggleBox/index.js +3 -3
  547. package/react/components/TreeMenu.d.ts +1 -1
  548. package/react/components/TreeMenu.js +38 -44
  549. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  550. package/react/components/TreeSelect/TreeSelect.js +105 -127
  551. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  552. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  553. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  554. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  555. package/react/components/WithPagination.js +18 -21
  556. package/react/components/WithPortal.d.ts +1 -1
  557. package/react/components/WithPortal.js +2 -1
  558. package/react/components/WithSizeObserver.js +1 -3
  559. package/react/components/_Positioner.js +11 -11
  560. package/react/components/avatar/avatar-action-add.js +1 -1
  561. package/react/components/avatar/avatar-group.js +11 -14
  562. package/react/components/avatar/avatar-image.js +6 -4
  563. package/react/components/avatar/avatar-placeholder.js +1 -1
  564. package/react/components/avatar/avatar-wrapper.js +2 -4
  565. package/react/components/avatar/avatar.js +4 -3
  566. package/react/helpers.js +2 -2
  567. package/react/index.d.ts +1 -1
  568. package/react/utils/time.d.ts +5 -0
  569. package/react/utils/time.js +36 -0
  570. package/tasks/webpack.dev.js +1 -1
  571. package/tasks/webpack.js +5 -5
  572. package/tasks/webpack.prod.js +1 -5
  573. package/tsconfig.json +2 -5
  574. package/tslint.json +6 -12
  575. package/webpack.config.js +2 -5
@@ -1,14 +1,35 @@
1
1
  import * as React from 'react';
2
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, LeftMenu, BoxedList, BoxedListItem, BoxedListContentRow, Heading, Text, Time, Label, CreateButton, IconLabel, RadioButtonGroup, Select, Option } from '../../../../app-typescript/index';
2
+ import {
3
+ ButtonGroup,
4
+ Button,
5
+ NavButton,
6
+ SubNav,
7
+ Dropdown,
8
+ Input,
9
+ IconButton,
10
+ LeftMenu,
11
+ BoxedList,
12
+ BoxedListItem,
13
+ BoxedListContentRow,
14
+ Heading,
15
+ Text,
16
+ Time,
17
+ Label,
18
+ CreateButton,
19
+ IconLabel,
20
+ RadioButtonGroup,
21
+ Select,
22
+ Option,
23
+ } from '../../../../app-typescript/index';
3
24
  import * as Layout from '../../../../app-typescript/components/Layouts';
4
25
  import * as Form from '../../../../app-typescript/components/Form';
5
26
  import * as Nav from '../../../../app-typescript/components/Navigation';
6
- import { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
7
- import { clone } from 'lodash';
8
- import { RundownEditor } from './RundownEditor';
9
- import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
10
- import { TableList } from '../../../../app-typescript/components/Lists/TableList';
11
- import { SearchBar } from './components/Index';
27
+ import {BottomNav} from '../../../../app-typescript/components/Navigation/BottomNav';
28
+ import {clone} from 'lodash';
29
+ import {RundownEditor} from './RundownEditor';
30
+ import {ContentList} from '../../../../app-typescript/components/Lists/ContentList';
31
+ import {TableList} from '../../../../app-typescript/components/Lists/TableList';
32
+ import {SearchBar} from './components/Index';
12
33
 
13
34
  interface IProps {
14
35
  children?: React.ReactNode;
@@ -57,10 +78,24 @@ export class CoreLayout extends React.Component<IProps, IState> {
57
78
  mainMenuOpen: false,
58
79
  notificationsOpen: false,
59
80
  botNavArray: [
60
- { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e) },
61
- { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
62
- { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
63
- { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
81
+ {
82
+ icon: 'photo',
83
+ title: 'Sed posuere consectetur est at lobortis.',
84
+ onClick: () => false,
85
+ onRemove: (e: any) => this.handleDelete(e),
86
+ },
87
+ {
88
+ title: 'Nullam id dolor id nibh ultricies.',
89
+ onClick: () => false,
90
+ onRemove: (e: any) => this.handleDelete(e),
91
+ },
92
+ {
93
+ icon: 'video',
94
+ title: 'Nulla vitae elit libero, a pharetra augue.',
95
+ onClick: () => false,
96
+ onRemove: (e: any) => this.handleDelete(e),
97
+ },
98
+ {title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
64
99
  ],
65
100
  itemType: 'itemtype01',
66
101
  dropDownState: '',
@@ -86,47 +121,57 @@ export class CoreLayout extends React.Component<IProps, IState> {
86
121
  previousState: false,
87
122
  array: [
88
123
  {
89
- start: <>
90
- <Label style='translucent' text='aacc' />
91
- <Label style='translucent' type='primary' text='prlg' />
92
- </>,
124
+ start: (
125
+ <>
126
+ <Label style="translucent" text="aacc" />
127
+ <Label style="translucent" type="primary" text="prlg" />
128
+ </>
129
+ ),
93
130
  center: <span>Duis mollis est non commodo</span>,
94
131
  onClick: () => false,
95
132
  },
96
133
  {
97
- start: <>
98
- <Label style='translucent' type='warning' text='pokr' />
99
- <Label style='translucent' text='slika' />
100
- </>,
134
+ start: (
135
+ <>
136
+ <Label style="translucent" type="warning" text="pokr" />
137
+ <Label style="translucent" text="slika" />
138
+ </>
139
+ ),
101
140
  center: <span>Nullam id dolor id nibh ultricies</span>,
102
141
  onClick: () => false,
103
142
  },
104
143
  {
105
- start: <>
106
- <Label style='translucent' text='aacc' />
107
- <Label style='translucent' type='primary' text='prlg' />
108
- </>,
144
+ start: (
145
+ <>
146
+ <Label style="translucent" text="aacc" />
147
+ <Label style="translucent" type="primary" text="prlg" />
148
+ </>
149
+ ),
109
150
  center: <span>Duis mollis est non commodo</span>,
110
151
  onClick: () => false,
111
152
  },
112
153
  {
113
- start: <>
114
- <Label style='translucent' type='warning' text='pokr' />
115
- <Label style='translucent' text='slika' />
116
- </>,
154
+ start: (
155
+ <>
156
+ <Label style="translucent" type="warning" text="pokr" />
157
+ <Label style="translucent" text="slika" />
158
+ </>
159
+ ),
117
160
  center: <span>Cras mattis consectetur purus</span>,
118
161
  onClick: () => false,
119
162
  },
120
163
  {
121
- start: <>
122
- <Label style='translucent' text='aacc' />
123
- <Label style='translucent' type='primary' text='prlg' />
124
- </>,
164
+ start: (
165
+ <>
166
+ <Label style="translucent" text="aacc" />
167
+ <Label style="translucent" type="primary" text="prlg" />
168
+ </>
169
+ ),
125
170
  center: <span>Duis mollis est non commodo</span>,
126
171
  onClick: () => false,
127
172
  },
128
- ]
129
- }
173
+ ],
174
+ };
130
175
 
131
176
  this.handleMainMenu = this.handleMainMenu.bind(this);
132
177
  this.handleNotifications = this.handleNotifications.bind(this);
@@ -148,14 +193,14 @@ export class CoreLayout extends React.Component<IProps, IState> {
148
193
  notificationsOpen: !state.notificationsOpen,
149
194
  }));
150
195
  }
151
-
196
+
152
197
  handleDelete(indexNumber: number) {
153
198
  const newItems = clone(this.state.botNavArray);
154
199
  newItems.splice(indexNumber, 1);
155
200
 
156
201
  this.setState({
157
202
  botNavArray: newItems,
158
- });
203
+ });
159
204
  }
160
205
 
161
206
  handleFilter() {
@@ -178,8 +223,8 @@ export class CoreLayout extends React.Component<IProps, IState> {
178
223
 
179
224
  handleTheme(newTheme: string) {
180
225
  this.setState({
181
- theme: newTheme
182
- })
226
+ theme: newTheme,
227
+ });
183
228
  }
184
229
 
185
230
  changeStatus(item: any, status: string) {
@@ -193,207 +238,333 @@ export class CoreLayout extends React.Component<IProps, IState> {
193
238
  render() {
194
239
  return (
195
240
  <Layout.CoreLayout
196
- heading='Core Layout'
241
+ heading="Core Layout"
197
242
  menuOpen={this.state.mainMenuOpen}
198
243
  onClick={this.handleMainMenu}
199
244
  active={this.state.mainMenuOpen}
200
- ariaControls='main-menu'
201
- menuId='main-menu'
245
+ ariaControls="main-menu"
246
+ menuId="main-menu"
202
247
  editorFullWidth={this.state.fullEditor}
203
248
  openPanel={this.state.rightPanel}
204
- slideInMenu={(
249
+ slideInMenu={
205
250
  <Layout.MainMenu
206
- headerTitle='Main Menu'
207
- poweredBy='Powered by Superdesk technology'
208
- header={(null)}
251
+ headerTitle="Main Menu"
252
+ poweredBy="Powered by Superdesk technology"
253
+ header={null}
209
254
  footerContent={true}
210
- footer={(
211
- <p>Menu footer testing</p>
212
- )}
255
+ footer={<p>Menu footer testing</p>}
213
256
  >
214
- <LeftMenu
215
- style='blanc'
257
+ <LeftMenu
258
+ style="blanc"
216
259
  reverseItemBorder={true}
217
- size='large'
218
- ariaLabel={'Left navigation'}
219
- activeItemId='1'
260
+ size="large"
261
+ ariaLabel={'Left navigation'}
262
+ activeItemId="1"
220
263
  groups={[
221
- { label: 'MAIN SECTIONS', items: [
222
- { id: '1', label: 'Section 1', ref:'section1'},
223
- { id: '2', label: 'Section 2', ref: 'section2' },
224
- { id: '3', label: 'Section 3', ref: 'section3' },
225
-
226
- ]},
227
- { label:'OTHER SECTIONS', items: [
228
- { id: '4', label: 'Section 4', ref: 'section4' },
229
- { id: '5', label: 'Section 5', ref: 'section5' },
230
- ]},
231
- { label:'OTHER SECTIONS', items: [
232
- { id: '6', label: 'Section 6', ref: 'section6' },
233
- { id: '7', label: 'Section 7', ref: 'section7' },
234
- ]}
264
+ {
265
+ label: 'MAIN SECTIONS',
266
+ items: [
267
+ {id: '1', label: 'Section 1', ref: 'section1'},
268
+ {id: '2', label: 'Section 2', ref: 'section2'},
269
+ {id: '3', label: 'Section 3', ref: 'section3'},
270
+ ],
271
+ },
272
+ {
273
+ label: 'OTHER SECTIONS',
274
+ items: [
275
+ {id: '4', label: 'Section 4', ref: 'section4'},
276
+ {id: '5', label: 'Section 5', ref: 'section5'},
277
+ ],
278
+ },
279
+ {
280
+ label: 'OTHER SECTIONS',
281
+ items: [
282
+ {id: '6', label: 'Section 6', ref: 'section6'},
283
+ {id: '7', label: 'Section 7', ref: 'section7'},
284
+ ],
285
+ },
235
286
  ]}
236
287
  onSelect={() => false}
237
288
  />
238
289
  </Layout.MainMenu>
239
- )}
240
- topMenu={(
241
- <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
242
- )}
243
- footer={(
290
+ }
291
+ topMenu={
292
+ <NavButton
293
+ badgeValue="6"
294
+ icon="bell"
295
+ text="Show notifications"
296
+ onClick={this.handleNotifications}
297
+ />
298
+ }
299
+ footer={
244
300
  <>
245
- <Layout.BottomBarAction onClick={()=> false} />
301
+ <Layout.BottomBarAction onClick={() => false} />
246
302
  <BottomNav items={this.state.botNavArray} />
247
303
  </>
248
- )}
249
- overlay={(
304
+ }
305
+ overlay={
250
306
  <Layout.NotificationPanel
251
- header={(null)}
252
- headerTitle='Notifications'
307
+ header={null}
308
+ headerTitle="Notifications"
253
309
  open={this.state.notificationsOpen}
254
310
  onClick={this.handleNotifications}
255
- theme='dark'
311
+ theme="dark"
256
312
  >
257
313
  <BoxedList>
258
314
  <BoxedListItem unread={true}>
259
- <Time datetime='29.06.2022'>29.06.2022</Time>
315
+ <Time datetime="29.06.2022">29.06.2022</Time>
260
316
  <BoxedListContentRow>
261
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et
262
- magnis dis parturient montes, nascetur ridiculus mus.
317
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque
318
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
263
319
  </BoxedListContentRow>
264
320
  </BoxedListItem>
265
321
  <BoxedListItem>
266
- <Time datetime='29.06.2022'>29.06.2022</Time>
322
+ <Time datetime="29.06.2022">29.06.2022</Time>
267
323
  <BoxedListContentRow>
268
- Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula
269
- porta felis euismod semper.
324
+ Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id
325
+ ligula porta felis euismod semper.
270
326
  </BoxedListContentRow>
271
327
  </BoxedListItem>
272
328
  <BoxedListItem>
273
- <Time datetime='29.06.2022'>29.06.2022</Time>
329
+ <Time datetime="29.06.2022">29.06.2022</Time>
274
330
  <BoxedListContentRow>
275
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer
276
- posuere erat a ante venenatis dapibus posuere velit aliquet.
331
+ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
332
+ mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
277
333
  </BoxedListContentRow>
278
334
  </BoxedListItem>
279
335
  </BoxedList>
280
336
  </Layout.NotificationPanel>
281
- )}
337
+ }
282
338
  >
283
339
  <Nav.SideBarMenu
284
340
  items={[
285
- { icon: 'dashboard', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, },
286
- { icon: 'view', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
287
- { icon: 'marked-star', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
288
- { icon: 'spike', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
289
- { icon: 'personal', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
290
- { icon: 'global-search', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
291
- { icon: 'picture', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
292
- { icon: 'rundown', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) }
341
+ {icon: 'dashboard', size: 'big', hover: this.state.openEditor && !this.state.rightPanel},
342
+ {
343
+ icon: 'view',
344
+ size: 'big',
345
+ hover: this.state.openEditor && !this.state.rightPanel,
346
+ onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
347
+ },
348
+ {
349
+ icon: 'marked-star',
350
+ size: 'big',
351
+ hover: this.state.openEditor && !this.state.rightPanel,
352
+ onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
353
+ },
354
+ {
355
+ icon: 'spike',
356
+ size: 'big',
357
+ hover: this.state.openEditor && !this.state.rightPanel,
358
+ onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
359
+ },
360
+ {
361
+ icon: 'personal',
362
+ size: 'big',
363
+ hover: this.state.openEditor && !this.state.rightPanel,
364
+ onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
365
+ },
366
+ {
367
+ icon: 'global-search',
368
+ size: 'big',
369
+ hover: this.state.openEditor && !this.state.rightPanel,
370
+ onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
371
+ },
372
+ {
373
+ icon: 'picture',
374
+ size: 'big',
375
+ hover: this.state.openEditor && !this.state.rightPanel,
376
+ onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
377
+ },
378
+ {
379
+ icon: 'rundown',
380
+ size: 'big',
381
+ hover: this.state.openEditor && !this.state.rightPanel,
382
+ onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
383
+ },
293
384
  ]}
294
385
  />
295
386
 
296
- {!this.state.fullEditor && !this.state.rightPanel
297
- && <Layout.LayoutContainer>
387
+ {!this.state.fullEditor && !this.state.rightPanel && (
388
+ <Layout.LayoutContainer>
298
389
  <Layout.HeaderPanel>
299
390
  <SubNav>
300
- <SearchBar placeholder='Search media'></SearchBar>
301
- <ButtonGroup align='end' spaces='no-space'>
391
+ <SearchBar placeholder="Search media"></SearchBar>
392
+ <ButtonGroup align="end" spaces="no-space">
302
393
  <Dropdown
303
394
  items={[
304
395
  {
305
- type: 'group', label: 'Settings', items: [
396
+ type: 'group',
397
+ label: 'Settings',
398
+ items: [
306
399
  'divider',
307
- { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
308
- { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
309
- ]
310
- }
400
+ {
401
+ icon: 'switches',
402
+ label: 'Manage Shows',
403
+ onSelect: () => this.setState({modalManageShow: true}),
404
+ },
405
+ {
406
+ icon: 'switches',
407
+ label: 'Manage Templates',
408
+ onSelect: () => this.setState({modalManageTemplate: true}),
409
+ },
410
+ ],
411
+ },
311
412
  ]}
312
413
  >
313
- <NavButton icon='settings' onClick={() => false} />
414
+ <NavButton icon="settings" onClick={() => false} />
314
415
  </Dropdown>
315
416
  <Dropdown
316
417
  header={[
317
418
  {
318
- type: 'group', label: 'Create', items: []
419
+ type: 'group',
420
+ label: 'Create',
421
+ items: [],
319
422
  },
320
423
  {
321
- type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
322
- { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
323
- ]
424
+ type: 'submenu',
425
+ label: 'Rundown',
426
+ icon: 'plus-sign',
427
+ items: [{icon: 'plus-sign', label: 'Rundown', onSelect: () => 1}],
324
428
  },
325
429
  ]}
326
430
  items={[
327
431
  {
328
- type: 'group', label: 'Recent Templates', items: [
329
- { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
330
- { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
331
- { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
332
- { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
333
- ]
334
- }
432
+ type: 'group',
433
+ label: 'Recent Templates',
434
+ items: [
435
+ {
436
+ icon: 'plus-sign',
437
+ label: 'Marker Daily',
438
+ onSelect: () => this.setState({dropDownState: ' '}),
439
+ },
440
+ {
441
+ icon: 'plus-sign',
442
+ label: 'Marker Weekend',
443
+ onSelect: () => this.setState({dropDownState: ' '}),
444
+ },
445
+ {
446
+ icon: 'plus-sign',
447
+ label: 'Tabu Daily',
448
+ onSelect: () => this.setState({dropDownState: ' '}),
449
+ },
450
+ {
451
+ icon: 'plus-sign',
452
+ label: 'Tabu Specijal',
453
+ onSelect: () => this.setState({dropDownState: ' '}),
454
+ },
455
+ ],
456
+ },
335
457
  ]}
336
458
  footer={[
337
459
  {
338
- type: 'group', items: [
339
- { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
340
- { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
341
- ]
460
+ type: 'group',
461
+ items: [
462
+ {
463
+ icon: 'list-plus',
464
+ label: 'Create new Template',
465
+ onSelect: () => this.setState({modalNewTemplate: true}),
466
+ },
467
+ {
468
+ icon: 'rundown',
469
+ label: 'Create new Show',
470
+ onSelect: () => this.setState({modalNewShow: true}),
471
+ },
472
+ ],
342
473
  },
343
474
  ]}
344
475
  >
345
- <CreateButton ariaValue='Create' onClick={() => false} />
476
+ <CreateButton ariaValue="Create" onClick={() => false} />
346
477
  </Dropdown>
347
478
  </ButtonGroup>
348
479
  </SubNav>
349
480
  <SubNav>
350
- <ButtonGroup align='start'>
351
- <NavButton icon='filter-large' onClick={this.handleFilter} />
481
+ <ButtonGroup align="start">
482
+ <NavButton icon="filter-large" onClick={this.handleFilter} />
352
483
  </ButtonGroup>
353
- <ButtonGroup align='end'>
354
- <ButtonGroup align='sub' padded={true} >
355
- <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
356
- <Button text='Today' style='hollow' onClick={() => false} />
357
- <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
484
+ <ButtonGroup align="end">
485
+ <ButtonGroup align="sub" padded={true}>
486
+ <Button
487
+ size="normal"
488
+ icon="chevron-left-thin"
489
+ text="Previous"
490
+ shape="round"
491
+ iconOnly={true}
492
+ disabled
493
+ onClick={() => false}
494
+ />
495
+ <Button text="Today" style="hollow" onClick={() => false} />
496
+ <Button
497
+ size="normal"
498
+ icon="chevron-right-thin"
499
+ text="Next"
500
+ shape="round"
501
+ iconOnly={true}
502
+ onClick={() => false}
503
+ />
358
504
  </ButtonGroup>
359
505
  <RadioButtonGroup
360
506
  options={[
361
- {value:'test10', label:'D'},
362
- {value:'test11', label:'W'},
363
- {value:'test12', label:'M'},
507
+ {value: 'test10', label: 'D'},
508
+ {value: 'test11', label: 'W'},
509
+ {value: 'test12', label: 'M'},
364
510
  ]}
365
- group={{padded:false}}
511
+ group={{padded: false}}
366
512
  value={this.state.itemType}
367
- onChange={(value) => this.setState({ itemType: value })}
513
+ onChange={(value) => this.setState({itemType: value})}
368
514
  />
369
- <ButtonGroup align='sub' spaces='no-space'>
515
+ <ButtonGroup align="sub" spaces="no-space">
370
516
  <Dropdown
371
517
  items={[
372
518
  {
373
- type: 'group', label: 'Chose a theme', items: [
519
+ type: 'group',
520
+ label: 'Chose a theme',
521
+ items: [
374
522
  'divider',
375
- { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
376
- { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
377
- { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
378
- ]
523
+ {
524
+ label: 'Light',
525
+ icon: 'adjust',
526
+ onSelect: () => this.handleTheme('light-ui'),
527
+ },
528
+ {
529
+ label: 'Dark',
530
+ icon: 'adjust',
531
+ onSelect: () => this.handleTheme('dark-ui'),
532
+ },
533
+ {
534
+ label: 'Accessible Light',
535
+ icon: 'adjust',
536
+ onSelect: () => this.handleTheme('accessible-light-ui'),
537
+ },
538
+ ],
379
539
  },
380
540
  ]}
381
541
  >
382
- <NavButton type='default' icon='adjust' onClick={()=> false} />
542
+ <NavButton type="default" icon="adjust" onClick={() => false} />
383
543
  </Dropdown>
384
544
  <Dropdown
385
545
  items={[
386
546
  {
387
- type: 'group', label: 'Actions', items: [
547
+ type: 'group',
548
+ label: 'Actions',
549
+ items: [
388
550
  'divider',
389
- { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
390
- { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
391
- { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
392
- ]
393
- }
551
+ {
552
+ label: 'Action one',
553
+ onSelect: () => this.setState({dropDownState: ' '}),
554
+ },
555
+ {
556
+ label: 'Action two',
557
+ onSelect: () => this.setState({dropDownState: ' '}),
558
+ },
559
+ {
560
+ label: 'Action three',
561
+ onSelect: () => this.setState({dropDownState: ' '}),
562
+ },
563
+ ],
564
+ },
394
565
  ]}
395
566
  >
396
- <NavButton icon='dots-vertical' onClick={() => false} />
567
+ <NavButton icon="dots-vertical" onClick={() => false} />
397
568
  </Dropdown>
398
569
  </ButtonGroup>
399
570
  </ButtonGroup>
@@ -402,17 +573,20 @@ export class CoreLayout extends React.Component<IProps, IState> {
402
573
  {/* TOOLBAR HEADER */}
403
574
 
404
575
  <Layout.LeftPanel open={this.state.openFilter}>
405
- <Layout.Panel side='left' background='grey'>
406
- <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
576
+ <Layout.Panel side="left" background="grey">
577
+ <Layout.PanelHeader
578
+ title="Advanced filters"
579
+ onClose={() => this.setState({openFilter: false})}
580
+ />
407
581
  <Layout.PanelContent>
408
582
  <Layout.PanelContentBlock>
409
583
  <Form.FormGroup>
410
584
  <Form.FormItem>
411
585
  <Select
412
- label='Shows'
586
+ label="Shows"
413
587
  labelHidden={true}
414
- value='This is some value'
415
- info='This is some hint message'
588
+ value="This is some value"
589
+ info="This is some hint message"
416
590
  required={true}
417
591
  disabled={false}
418
592
  onChange={() => false}
@@ -425,9 +599,9 @@ export class CoreLayout extends React.Component<IProps, IState> {
425
599
  <div className="form__group">
426
600
  <div className="form__item">
427
601
  <Input
428
- label='Title'
429
- type='text'
430
- value='Title'
602
+ label="Title"
603
+ type="text"
604
+ value="Title"
431
605
  inlineLabel={false}
432
606
  disabled={false}
433
607
  onChange={() => false}
@@ -437,8 +611,8 @@ export class CoreLayout extends React.Component<IProps, IState> {
437
611
  <div className="form__group">
438
612
  <div className="form__item">
439
613
  <Select
440
- label='Source'
441
- value='Select ingest source...'
614
+ label="Source"
615
+ value="Select ingest source..."
442
616
  inlineLabel={false}
443
617
  disabled={false}
444
618
  onChange={() => false}
@@ -452,21 +626,23 @@ export class CoreLayout extends React.Component<IProps, IState> {
452
626
 
453
627
  <div className="form__group">
454
628
  <div className="form__item">
455
- <Input label='Keyword'
456
- type='text'
457
- value='Keyword'
629
+ <Input
630
+ label="Keyword"
631
+ type="text"
632
+ value="Keyword"
458
633
  inlineLabel={false}
459
634
  disabled={false}
460
- onChange={() => false} />
635
+ onChange={() => false}
636
+ />
461
637
  </div>
462
638
  </div>
463
639
 
464
640
  <div className="form__group">
465
641
  <div className="form__item">
466
642
  <Select
467
- label='Usage right'
468
- value='--- Not selected ---'
469
- info='Dolor in hendrerit.'
643
+ label="Usage right"
644
+ value="--- Not selected ---"
645
+ info="Dolor in hendrerit."
470
646
  inlineLabel={false}
471
647
  disabled={false}
472
648
  onChange={() => false}
@@ -482,107 +658,192 @@ export class CoreLayout extends React.Component<IProps, IState> {
482
658
  </Layout.PanelContentBlock>
483
659
  </Layout.PanelContent>
484
660
  <Layout.PanelFooter>
485
- <Button text='Clear' style='hollow' onClick={() => false} />
486
- <Button text='Submit' type='primary' onClick={() => false} />
661
+ <Button text="Clear" style="hollow" onClick={() => false} />
662
+ <Button text="Submit" type="primary" onClick={() => false} />
487
663
  </Layout.PanelFooter>
488
664
  </Layout.Panel>
489
665
  </Layout.LeftPanel>
490
666
  {/* FILTER PANEL*/}
491
667
  <Layout.MainPanel>
492
668
  <ContentList
493
- items={[
494
- {
495
- itemColum: [
496
- {
497
- itemRow: [{content:<>
498
- <i className="icon-rundown"></i>
499
- </>}],
500
- border: true
501
- },
502
- {
503
- itemRow: [
504
- {
505
- content:
506
- <>
507
- <span className="sd-list-item__slugline">19:00 – 19:45</span>
508
- <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
509
- <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
510
- <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
511
- </>
512
- },
513
- {
514
- content:
515
- <>
516
- <Label text='Marker' color='blue--800'/>
517
- <span className='sd-list-item__compound-text'>
518
- <span className='sd-list-item__text-label'>Template:</span>
519
- <span>Marker Daily</span>
520
- </span>
521
- <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
522
- <Label style='translucent' text='In Progress' type='warning' />
523
- </>
524
- },
525
- ],
526
- fullwidth: true,
527
- }
528
- ],
529
- action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
530
- locked: true,
531
- onClick: () => this.setState({openEditor: !this.state.openEditor}),
532
- },
533
- {
534
- itemColum: [
535
- {
536
- itemRow: [{content:<>
537
- <i className="icon-rundown"></i>
538
- </>}],
539
- border: true
540
- },
541
- {
542
- itemRow: [
543
- {
544
- content:
545
- <>
546
- <span className="sd-list-item__slugline">19:00 – 19:45</span>
547
- <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
548
- <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
549
- <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
550
- </>
551
- },
552
- {
553
- content:
554
- <>
555
- <Label text='Tabu' color='blue--800'/>
556
- <span className='sd-list-item__compound-text'>
557
- <span className='sd-list-item__text-label'>Template:</span>
558
- <span>Tabu Daily</span>
559
- </span>
560
- <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
561
- <Label style='translucent' text='Draft' />
562
- </>
563
- },
564
- ],
565
- fullwidth: true,
566
- }
567
- ],
568
- action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
569
- onClick: () => this.setState({openPreview: !this.state.openPreview}),
570
- },
571
- ]}
572
- />
669
+ items={[
670
+ {
671
+ itemColum: [
672
+ {
673
+ itemRow: [
674
+ {
675
+ content: (
676
+ <>
677
+ <i className="icon-rundown"></i>
678
+ </>
679
+ ),
680
+ },
681
+ ],
682
+ border: true,
683
+ },
684
+ {
685
+ itemRow: [
686
+ {
687
+ content: (
688
+ <>
689
+ <span className="sd-list-item__slugline">
690
+ 19:00 – 19:45
691
+ </span>
692
+ <IconLabel
693
+ style="translucent"
694
+ innerLabel="Duration:"
695
+ text="00:38"
696
+ size="small"
697
+ type="warning"
698
+ />
699
+ <IconLabel
700
+ style="translucent"
701
+ innerLabel="Planned Duration:"
702
+ text="00:45"
703
+ size="small"
704
+ />
705
+ <time
706
+ className="sd-margin-s--auto"
707
+ title="June 01, 2022 11:08 AM"
708
+ >
709
+ 11:08, 01.06.2022
710
+ </time>
711
+ </>
712
+ ),
713
+ },
714
+ {
715
+ content: (
716
+ <>
717
+ <Label text="Marker" color="blue--800" />
718
+ <span className="sd-list-item__compound-text">
719
+ <span className="sd-list-item__text-label">
720
+ Template:
721
+ </span>
722
+ <span>Marker Daily</span>
723
+ </span>
724
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">
725
+ Marker // 01.06.2022
726
+ </span>
727
+ <Label
728
+ style="translucent"
729
+ text="In Progress"
730
+ type="warning"
731
+ />
732
+ </>
733
+ ),
734
+ },
735
+ ],
736
+ fullwidth: true,
737
+ },
738
+ ],
739
+ action: (
740
+ <IconButton
741
+ icon="dots-vertical"
742
+ ariaValue="More actions"
743
+ onClick={() => false}
744
+ />
745
+ ),
746
+ locked: true,
747
+ onClick: () => this.setState({openEditor: !this.state.openEditor}),
748
+ },
749
+ {
750
+ itemColum: [
751
+ {
752
+ itemRow: [
753
+ {
754
+ content: (
755
+ <>
756
+ <i className="icon-rundown"></i>
757
+ </>
758
+ ),
759
+ },
760
+ ],
761
+ border: true,
762
+ },
763
+ {
764
+ itemRow: [
765
+ {
766
+ content: (
767
+ <>
768
+ <span className="sd-list-item__slugline">
769
+ 19:00 – 19:45
770
+ </span>
771
+ <IconLabel
772
+ style="translucent"
773
+ innerLabel="Duration:"
774
+ text="00:38"
775
+ size="small"
776
+ type="warning"
777
+ />
778
+ <IconLabel
779
+ style="translucent"
780
+ innerLabel="Planned Duration:"
781
+ text="00:45"
782
+ size="small"
783
+ />
784
+ <time
785
+ className="sd-margin-s--auto"
786
+ title="June 01, 2022 11:08 AM"
787
+ >
788
+ 11:08, 01.06.2022
789
+ </time>
790
+ </>
791
+ ),
792
+ },
793
+ {
794
+ content: (
795
+ <>
796
+ <Label text="Tabu" color="blue--800" />
797
+ <span className="sd-list-item__compound-text">
798
+ <span className="sd-list-item__text-label">
799
+ Template:
800
+ </span>
801
+ <span>Tabu Daily</span>
802
+ </span>
803
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">
804
+ Marker // 01.06.2022
805
+ </span>
806
+ <Label style="translucent" text="Draft" />
807
+ </>
808
+ ),
809
+ },
810
+ ],
811
+ fullwidth: true,
812
+ },
813
+ ],
814
+ action: (
815
+ <IconButton
816
+ icon="dots-vertical"
817
+ ariaValue="More actions"
818
+ onClick={() => false}
819
+ />
820
+ ),
821
+ onClick: () => this.setState({openPreview: !this.state.openPreview}),
822
+ },
823
+ ]}
824
+ />
573
825
  </Layout.MainPanel>
574
826
 
575
827
  {/* MAIN CONTENT (Monitoring) */}
576
828
  <Layout.RightPanel open={this.state.openPreview}>
577
- <Layout.Panel side='right'>
578
- <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})} />
829
+ <Layout.Panel side="right">
830
+ <Layout.PanelHeader
831
+ title="Item preview"
832
+ onClose={() => this.setState({openPreview: false})}
833
+ />
579
834
  <Layout.PanelContent>
580
835
  <Layout.PanelContentBlock flex={true}>
581
- <Layout.Container direction='column' gap='x-small'>
582
- <Layout.Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Layout.Container>
583
- <Layout.Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Layout.Container>
836
+ <Layout.Container direction="column" gap="x-small">
837
+ <Layout.Container direction="row" gap="small">
838
+ <Text color="light">Created 09.06.2022 by </Text>
839
+ <Text weight="medium">Mika Karapet</Text>
840
+ </Layout.Container>
841
+ <Layout.Container direction="row" gap="small">
842
+ <Text color="light">Updated 3 hours ago by </Text>
843
+ <Text weight="medium">John Doe</Text>
844
+ </Layout.Container>
584
845
  </Layout.Container>
585
- <Layout.Container className='sd-margin-s--auto sd-flex--items-center'>
846
+ <Layout.Container className="sd-margin-s--auto sd-flex--items-center">
586
847
  {/* <Dropdown
587
848
  align = 'right'
588
849
  items={[
@@ -600,33 +861,55 @@ export class CoreLayout extends React.Component<IProps, IState> {
600
861
  </Layout.PanelContentBlock>
601
862
 
602
863
  <Layout.PanelContentBlock>
603
- <Layout.Container direction='row' gap='large' className='sd-margin-b--3'>
604
- <Label size='large' text='Tabu' color='blue--800'/>
605
- <Layout.Container direction='row' gap='small'>
606
- <Text color='light' size='small' style='italic' >Template:</Text>
607
- <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
864
+ <Layout.Container direction="row" gap="large" className="sd-margin-b--3">
865
+ <Label size="large" text="Tabu" color="blue--800" />
866
+ <Layout.Container direction="row" gap="small">
867
+ <Text color="light" size="small" style="italic">
868
+ Template:
869
+ </Text>
870
+ <Text size="small" style="italic" weight="medium">
871
+ Tabu daily
872
+ </Text>
608
873
  </Layout.Container>
609
874
  </Layout.Container>
610
-
611
- <Layout.Container direction='column' className='sd-margin-y--2'>
875
+
876
+ <Layout.Container direction="column" className="sd-margin-y--2">
612
877
  {/* <FormLabel text='Title' /> */}
613
- <Heading type='h2'>Tabu // 01.06.2022</Heading>
878
+ <Heading type="h2">Tabu // 01.06.2022</Heading>
614
879
  </Layout.Container>
615
880
  <ButtonGroup>
616
- <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
617
- <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
618
- <Text color='light' size='small' className='sd-margin--0'>OF</Text>
619
- <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
881
+ <IconLabel
882
+ style="translucent"
883
+ innerLabel="Airtime:"
884
+ text="19:45 - 20:45"
885
+ type="primary"
886
+ />
887
+ <IconLabel
888
+ style="translucent"
889
+ innerLabel="Duration:"
890
+ text="00:56"
891
+ type="warning"
892
+ />
893
+ <Text color="light" size="small" className="sd-margin--0">
894
+ OF
895
+ </Text>
896
+ <IconLabel style="translucent" innerLabel="Planned:" text="01:00" />
620
897
  </ButtonGroup>
621
898
  <TableList
622
- className='sd-margin-y--4'
899
+ className="sd-margin-y--4"
623
900
  array={this.state.array}
624
901
  itemsDropdown={() => [
625
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
626
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
627
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
902
+ {
903
+ label: <Label style="translucent" type="primary" text="aacc" />,
904
+ onSelect: () => 1,
905
+ },
906
+ {label: <Label style="translucent" text="prlg" />, onSelect: () => 1},
907
+ {
908
+ label: <Label style="translucent" type="primary" text="prlg" />,
909
+ onSelect: () => 1,
910
+ },
628
911
  ]}
629
- />
912
+ />
630
913
  </Layout.PanelContentBlock>
631
914
  </Layout.PanelContent>
632
915
  </Layout.Panel>
@@ -636,7 +919,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
636
919
  <Layout.OverlayPanel />
637
920
  {/* OVERLAY PANEL (Send To) */}
638
921
  </Layout.LayoutContainer>
639
- }
922
+ )}
640
923
 
641
924
  <Layout.ContentSplitter visible={this.state.openEditor} />
642
925
 
@@ -646,24 +929,23 @@ export class CoreLayout extends React.Component<IProps, IState> {
646
929
  rightPanel={this.state.rightPanel}
647
930
  openPanel={() => {
648
931
  if (this.state.fullEditor) {
649
- this.setState({previousState: true})
932
+ this.setState({previousState: true});
650
933
  } else {
651
- this.setState({previousState: false})
934
+ this.setState({previousState: false});
652
935
  }
653
-
654
- this.setState({rightPanel: true})
936
+
937
+ this.setState({rightPanel: true});
655
938
  }}
656
939
  closePanel={() => {
657
940
  if (!this.state.previousState) {
658
- this.setState({rightPanel: false, fullEditor: false})
941
+ this.setState({rightPanel: false, fullEditor: false});
659
942
  } else {
660
- this.setState({rightPanel: false})
943
+ this.setState({rightPanel: false});
661
944
  }
662
945
  }}
663
946
  />
664
947
  </Layout.AuthoringContainer>
665
948
  {/* END RUNDOWN EDITOR */}
666
-
667
949
  </Layout.CoreLayout>
668
950
  );
669
951
  }