From e3bb30a59151668e4361030756b7d1ccd9ec43a9 Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Tue, 25 Feb 2020 19:04:54 -0300 Subject: [PATCH] base branch for ui v2 --- .../content/aboutContent/__docs__/about.mdx | 42 ------ .../src/components/customForm/HotkeyField.js | 82 ----------- .../ui/src/components/customForm/index.js | 1 - platform/ui/src/components/index.js | 60 -------- .../languageSwitcher/LanguageSwitcher.js | 35 ----- .../src/components/languageSwitcher/index.js | 1 - .../components/tabComponents/TabComponents.js | 109 --------------- .../tabComponents/TabComponents.styl | 21 --- .../src/components/tabComponents/TabFooter.js | 54 -------- .../components/tabComponents/TabFooter.styl | 11 -- .../tabComponents/__docs__/tabComponents.mdx | 27 ---- .../components/tabComponents/__docs__/tabs.js | 26 ---- .../ui/src/components/tabComponents/index.js | 2 - platform/ui/src/index.js | 129 ------------------ 14 files changed, 600 deletions(-) delete mode 100644 platform/ui/src/components/content/aboutContent/__docs__/about.mdx delete mode 100644 platform/ui/src/components/customForm/HotkeyField.js delete mode 100644 platform/ui/src/components/customForm/index.js delete mode 100644 platform/ui/src/components/index.js delete mode 100644 platform/ui/src/components/languageSwitcher/LanguageSwitcher.js delete mode 100644 platform/ui/src/components/languageSwitcher/index.js delete mode 100644 platform/ui/src/components/tabComponents/TabComponents.js delete mode 100644 platform/ui/src/components/tabComponents/TabComponents.styl delete mode 100644 platform/ui/src/components/tabComponents/TabFooter.js delete mode 100644 platform/ui/src/components/tabComponents/TabFooter.styl delete mode 100644 platform/ui/src/components/tabComponents/__docs__/tabComponents.mdx delete mode 100644 platform/ui/src/components/tabComponents/__docs__/tabs.js delete mode 100644 platform/ui/src/components/tabComponents/index.js delete mode 100644 platform/ui/src/index.js diff --git a/platform/ui/src/components/content/aboutContent/__docs__/about.mdx b/platform/ui/src/components/content/aboutContent/__docs__/about.mdx deleted file mode 100644 index 21f22168d..000000000 --- a/platform/ui/src/components/content/aboutContent/__docs__/about.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -name: About Modal -menu: Components -route: /components/about-modal ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { AboutContent } from './../index.js' - -# About Modal - -## Basic usage - - - - - {({ state, setState }) => ( - - - setState({ isOpen: false })} - /> - - )} - - - - - -## API - - diff --git a/platform/ui/src/components/customForm/HotkeyField.js b/platform/ui/src/components/customForm/HotkeyField.js deleted file mode 100644 index bfc638d9d..000000000 --- a/platform/ui/src/components/customForm/HotkeyField.js +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { hotkeys } from '@ohif/core'; - -/** - * Take the pressed key array and return the readable string for the keys - * - * @param {Array} [keys=[]] - * @returns {string} string representation of an array of keys - */ -const formatKeysForInput = (keys = []) => keys.join('+'); - -/** - * formats given keys sequence to insert the modifier keys in the first index of the array - * @param {string} sequence keys sequence from MouseTrap Record -> "shift+left" - * @returns {Array} keys in array-format -> ['shift','left'] - */ -const getKeys = ({ sequence, modifier_keys }) => { - const keysArray = sequence.join(' ').split('+'); - let keys = []; - let modifiers = []; - keysArray.forEach(key => { - if (modifier_keys && modifier_keys.includes(key)) { - modifiers.push(key); - } else { - keys.push(key); - } - }); - return [...modifiers, ...keys]; -}; - -/** - * HotkeyField - * Renders a hotkey input - * - * @param {object} props component props - * @param {Array[]} props.keys array of keys to be controlled by this field - * @param {function} props.handleChange Callback function to communicate parent once value is changed - * @param {string} props.classNames string caontaining classes to be added in the input field - * @param {Array[]} props.modifier_keys - */ -function HotkeyField({ keys, handleChange, classNames, modifier_keys }) { - const inputValue = formatKeysForInput(keys); - - const onInputKeyDown = event => { - event.stopPropagation(); - event.preventDefault(); - - hotkeys.record(sequence => { - const keys = getKeys({ sequence, modifier_keys }); - hotkeys.unpause(); - handleChange(keys); - }); - }; - - const onFocus = () => { - hotkeys.pause(); - hotkeys.startRecording(); - }; - - return ( - - ); -} - -HotkeyField.propTypes = { - keys: PropTypes.array.isRequired, - handleChange: PropTypes.func.isRequired, - classNames: PropTypes.string, - modifier_keys: PropTypes.array, - allowed_keys: PropTypes.array, -}; - -export { HotkeyField }; diff --git a/platform/ui/src/components/customForm/index.js b/platform/ui/src/components/customForm/index.js deleted file mode 100644 index 7fc6b3435..000000000 --- a/platform/ui/src/components/customForm/index.js +++ /dev/null @@ -1 +0,0 @@ -export { HotkeyField } from './HotkeyField'; diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js deleted file mode 100644 index 3624e4115..000000000 --- a/platform/ui/src/components/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import { StudyBrowser, Thumbnail } from './studyBrowser'; -import { LayoutButton, LayoutChooser } from './layoutButton'; -import { MeasurementTable, MeasurementTableItem } from './measurementTable'; -import { Overlay, OverlayTrigger } from './overlayTrigger'; -import { TableList, TableListItem } from './tableList'; -import { AboutContent } from './content/aboutContent/AboutContent'; -import { TabComponents, TabFooter } from './tabComponents'; -import { HotkeyField } from './customForm'; -import { LanguageSwitcher } from './languageSwitcher'; - -import { Checkbox } from './checkbox'; -import { CineDialog } from './cineDialog'; -import { ViewportDownloadForm } from './content/viewportDownloadForm'; -import { QuickSwitch } from './quickSwitch'; -import { RoundedButtonGroup } from './roundedButtonGroup'; -import { SelectTree } from './selectTree'; -import { SimpleDialog } from './simpleDialog'; -import { OHIFModal } from './ohifModal'; -import { ContextMenu } from './contextMenu'; -import { - PageToolbar, - StudyList, - TableSearchFilter, - TablePagination, -} from './studyList'; -import { ToolbarSection } from './toolbarSection'; -import { Tooltip } from './tooltip'; - -export { - ContextMenu, - Checkbox, - CineDialog, - ViewportDownloadForm, - LayoutButton, - LayoutChooser, - MeasurementTable, - MeasurementTableItem, - Overlay, - OverlayTrigger, - QuickSwitch, - RoundedButtonGroup, - PageToolbar, - SelectTree, - SimpleDialog, - StudyBrowser, - StudyList, - TableList, - TableListItem, - Thumbnail, - TabComponents, - TabFooter, - HotkeyField, - LanguageSwitcher, - TableSearchFilter, - TablePagination, - ToolbarSection, - Tooltip, - AboutContent, - OHIFModal, -}; diff --git a/platform/ui/src/components/languageSwitcher/LanguageSwitcher.js b/platform/ui/src/components/languageSwitcher/LanguageSwitcher.js deleted file mode 100644 index bbd42c977..000000000 --- a/platform/ui/src/components/languageSwitcher/LanguageSwitcher.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import './LanguageSwitcher.styl'; - -const LanguageSwitcher = ({ language, onLanguageChange, languages }) => { - const onChange = event => { - const { value } = event.target; - onLanguageChange(value); - }; - - return ( - - ); -}; - -LanguageSwitcher.propTypes = { - language: PropTypes.string.isRequired, - languages: PropTypes.array.isRequired, - onLanguageChange: PropTypes.func.isRequired, -}; - -export { LanguageSwitcher }; diff --git a/platform/ui/src/components/languageSwitcher/index.js b/platform/ui/src/components/languageSwitcher/index.js deleted file mode 100644 index d21e84e1e..000000000 --- a/platform/ui/src/components/languageSwitcher/index.js +++ /dev/null @@ -1 +0,0 @@ -export { LanguageSwitcher } from './LanguageSwitcher'; diff --git a/platform/ui/src/components/tabComponents/TabComponents.js b/platform/ui/src/components/tabComponents/TabComponents.js deleted file mode 100644 index 5f312e0d1..000000000 --- a/platform/ui/src/components/tabComponents/TabComponents.js +++ /dev/null @@ -1,109 +0,0 @@ -import React, { useState } from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; - -// Style -import './TabComponents.styl'; - -/** - * Take name of the tab and create the data-cy value for it - * - * @param {string} [name=''] tab name - * @returns {string} data-cy value - */ -const getDataCy = (name = '') => { - return name - .split(' ') - .join('-') - .toLowerCase(); -}; - -/** - * Single tab data information - * - * @typedef {Object} tabData - * @property {string} name - name of the tab - * @property {Object} Component - tab component to be rendered - * @property {Object} customProps - tab custom properties - * @property {bool} hidden - bool to define if tab is hidden of not - */ - -/** - * Take a list of components data and render then into tabs - * - * @param {Object} props - * @param {[tabData]} props.tabs array of tab data - * @param {Object} props.customProps common custom properties - */ -function TabComponents({ tabs, customProps = {} }) { - const [currentTabIndex, setCurrentTabIndex] = useState(0); - - return ( - tabs.length > 0 && ( -
-
-
-
-
    - {tabs.map((tab, index) => { - const { name, hidden = false } = tab; - return ( - !hidden && ( -
  • { - setCurrentTabIndex(index); - }} - className={classnames( - 'nav-link', - index === currentTabIndex && 'active' - )} - data-cy={getDataCy(name)} - > - -
    • - ) - ); - })} -
-
-
-
- {tabs.map((tab, index) => { - const { - Component, - customProps: tabCustomProps, - hidden = false, - } = tab; - return ( - !hidden && ( -
- -
- ) - ); - })} -
- ) - ); -} - -TabComponents.propTypes = { - tabs: PropTypes.arrayOf( - PropTypes.shape({ - name: PropTypes.string, - Component: PropTypes.any, - customProps: PropTypes.object, - hidden: PropTypes.bool, - }) - ), - customProps: PropTypes.object, -}; - -export { TabComponents }; diff --git a/platform/ui/src/components/tabComponents/TabComponents.styl b/platform/ui/src/components/tabComponents/TabComponents.styl deleted file mode 100644 index 263b39ae9..000000000 --- a/platform/ui/src/components/tabComponents/TabComponents.styl +++ /dev/null @@ -1,21 +0,0 @@ -@import './../../design/styles/common/navbar.styl' - -.TabComponents - .TabComponents_tabHeader - display: flex - flex-direction: column - margin-left: -20px - margin-right: -20px - - .TabComponents_tabHeader_selector - border-bottom: 3px solid black - padding: 0 25px - - .TabComponents_content - min-height: 450px - display: none - - &.active - display: flex - flex-direction: column - justify-content: space-between diff --git a/platform/ui/src/components/tabComponents/TabFooter.js b/platform/ui/src/components/tabComponents/TabFooter.js deleted file mode 100644 index 8247fcc98..000000000 --- a/platform/ui/src/components/tabComponents/TabFooter.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import './TabFooter.styl'; - -// In case translate is not passed -const translate = word => word; - -function TabFooter({ - onResetPreferences, - onSave, - onCancel, - hasErrors, - t = translate, -}) { - return ( -
- -
-
- {t('Cancel')} -
- -
-
- ); -} - -TabFooter.propTypes = { - onResetPreferences: PropTypes.func, - onSave: PropTypes.func, - onCancel: PropTypes.func, - hasErrors: PropTypes.bool, - t: PropTypes.func, -}; - -export { TabFooter }; diff --git a/platform/ui/src/components/tabComponents/TabFooter.styl b/platform/ui/src/components/tabComponents/TabFooter.styl deleted file mode 100644 index c44957d93..000000000 --- a/platform/ui/src/components/tabComponents/TabFooter.styl +++ /dev/null @@ -1,11 +0,0 @@ -.footer - display: flex - flex-direction: row - justify-content: space-between - padding: 20px 20px 0 20px - margin: 0 -20px - border-top: 3px solid var(--primary-background-color) - - div - button:last-child - margin-left: 10px diff --git a/platform/ui/src/components/tabComponents/__docs__/tabComponents.mdx b/platform/ui/src/components/tabComponents/__docs__/tabComponents.mdx deleted file mode 100644 index 5f5e6531f..000000000 --- a/platform/ui/src/components/tabComponents/__docs__/tabComponents.mdx +++ /dev/null @@ -1,27 +0,0 @@ ---- -name: Tab Components -menu: Components -route: /components/tab-components ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { TabComponents } from './../index.js' - -// Data -import tabs from './tabs.js' - -# Tab Components - -## Basic usage - - - - - -## API - - diff --git a/platform/ui/src/components/tabComponents/__docs__/tabs.js b/platform/ui/src/components/tabComponents/__docs__/tabs.js deleted file mode 100644 index 8b2369558..000000000 --- a/platform/ui/src/components/tabComponents/__docs__/tabs.js +++ /dev/null @@ -1,26 +0,0 @@ -export default tabs = [ - { - name: 'tabName1', - Component: () => { - return
tab 1 Content
; - }, - customProps: {}, - hidden: false, - }, - { - name: 'tabName2', - Component: () => { - return
tab 2 Content
; - }, - customProps: {}, - hidden: false, - }, - { - name: 'tabName3', - Component: () => { - return
tab 3 Content
; - }, - customProps: {}, - hidden: true, - }, -]; diff --git a/platform/ui/src/components/tabComponents/index.js b/platform/ui/src/components/tabComponents/index.js deleted file mode 100644 index 01becf767..000000000 --- a/platform/ui/src/components/tabComponents/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { TabComponents } from './TabComponents'; -export { TabFooter } from './TabFooter'; diff --git a/platform/ui/src/index.js b/platform/ui/src/index.js deleted file mode 100644 index 451ac244e..000000000 --- a/platform/ui/src/index.js +++ /dev/null @@ -1,129 +0,0 @@ -import { - ContextMenu, - Checkbox, - CineDialog, - ViewportDownloadForm, - LayoutButton, - LayoutChooser, - MeasurementTable, - MeasurementTableItem, - Overlay, - OverlayTrigger, - PageToolbar, - QuickSwitch, - RoundedButtonGroup, - SelectTree, - SimpleDialog, - StudyBrowser, - StudyList, - TableList, - TableListItem, - Thumbnail, - TabComponents, - TabFooter, - HotkeyField, - LanguageSwitcher, - TableSearchFilter, - TablePagination, - ToolbarSection, - Tooltip, - AboutContent, - OHIFModal, -} from './components'; -import { useDebounce, useMedia } from './hooks'; - -// Elements -import { - ICONS, - Icon, - DropdownMenu as Dropdown, - Select, - OldSelect, - Label, - Range, - TextArea, - TextInput, -} from './elements'; - -// Alias this for now as not all dependents are using strict versioning -import ExpandableToolMenu from './viewer/ExpandableToolMenu.js'; -import PlayClipButton from './viewer/PlayClipButton.js'; -import { ScrollableArea } from './ScrollableArea/ScrollableArea.js'; -import Toolbar from './viewer/Toolbar.js'; -import ToolbarButton from './viewer/ToolbarButton.js'; -import ViewerbaseDragDropContext from './utils/viewerbaseDragDropContext.js'; -import { - SnackbarProvider, - useSnackbarContext, - withSnackbar, - DialogProvider, - useDialog, - withDialog, - ModalProvider, - ModalConsumer, - useModal, - withModal, -} from './contextProviders'; - -export { - // Elements - ICONS, - // - Checkbox, - Dropdown, - Label, - TextArea, - TextInput, - CineDialog, - ContextMenu, - ViewportDownloadForm, - ExpandableToolMenu, - Icon, - LayoutButton, - LayoutChooser, - MeasurementTable, - MeasurementTableItem, - Overlay, - OverlayTrigger, - PlayClipButton, - PageToolbar, - QuickSwitch, - Range, - RoundedButtonGroup, - ScrollableArea, - Select, - OldSelect, - SelectTree, - SimpleDialog, - StudyBrowser, - StudyList, - TableList, - TableListItem, - Thumbnail, - TabComponents, - TabFooter, - HotkeyField, - LanguageSwitcher, - TableSearchFilter, - TablePagination, - Toolbar, - ToolbarButton, - ToolbarSection, - Tooltip, - AboutContent, - ViewerbaseDragDropContext, - SnackbarProvider, - useSnackbarContext, - withSnackbar, - ModalProvider, - useModal, - ModalConsumer, - withModal, - OHIFModal, - DialogProvider, - withDialog, - useDialog, - // Hooks - useDebounce, - useMedia, -};