feat: OHIF-v3 UI Component Library (#2653)
* wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems * fix: storybook webpack config * feat: add more stories * feat: add more stories * feat: add more stories * feat: fix logo and babel runtime error * feat: move to mdx docs for ui * feat: enhanced mdx for header and styles * feat: Add button usecases * feat: Add buttonGroup docs * feat: Add docs and use case to cine and contex menu * feat: fix decorators * feat: add header and dropdown docs * feat: add Icon and input docs * feat: add more docs * feat: add more stories * fix: feedback section * feat: Add doc page * feat: Add typography and color stories * yarn lock * add analytics to v3-ui * new banner image * new viewport component * update review comments
This commit is contained in:
Alireza authored and GitHub committed
1 parent
eb77cb76b6
commit
5c8ee7f906
79 files changed
+9004
-2915
No files matched your search
@@ -4,12 +4,17 @@ import classNames from 'classnames';
|
||||
import { HotkeyField, Typography } from '../';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
|
||||
/* TODO: Move these configs and utils to core? */
|
||||
import { MODIFIER_KEYS } from './hotkeysConfig';
|
||||
import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils';
|
||||
|
||||
const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErrors, onChange, hotkeysModule }) => {
|
||||
const HotkeysPreferences = ({
|
||||
disabled,
|
||||
hotkeyDefinitions,
|
||||
errors: controlledErrors,
|
||||
onChange,
|
||||
hotkeysModule,
|
||||
}) => {
|
||||
const { t } = useTranslation('UserPreferencesModal');
|
||||
|
||||
const visibleHotkeys = Object.keys(hotkeyDefinitions)
|
||||
@@ -42,51 +47,74 @@ const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErr
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='flex flex-row justify-center'>
|
||||
<div className='flex flex-row justify-evenly w-full'>
|
||||
<div className="flex flex-row justify-center">
|
||||
<div className="flex flex-row w-full justify-evenly">
|
||||
{splitedHotkeys.map((hotkeys, index) => {
|
||||
return (
|
||||
<div key={`HotkeyGroup@${index}`} className='flex flex-row'>
|
||||
<div className='p-2 text-right flex flex-col'>
|
||||
<div key={`HotkeyGroup@${index}`} className="flex flex-row">
|
||||
<div className="flex flex-col p-2 text-right">
|
||||
{hotkeys.map((hotkey, hotkeyIndex) => {
|
||||
const [id, definition] = hotkey;
|
||||
const isFirst = hotkeyIndex === 0;
|
||||
const error = errors[id];
|
||||
|
||||
const onChangeHandler = keys => onHotkeyChangeHandler(id, { ...definition, keys });
|
||||
const onChangeHandler = keys =>
|
||||
onHotkeyChangeHandler(id, { ...definition, keys });
|
||||
|
||||
return (
|
||||
<div key={`HotkeyItem@${hotkeyIndex}`} className='flex flex-row justify-end mb-2'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<div
|
||||
key={`HotkeyItem@${hotkeyIndex}`}
|
||||
className="flex flex-row justify-end mb-2"
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<Typography
|
||||
variant='subtitle'
|
||||
className={classNames('pr-6 w-full text-right text-primary-light', !isFirst && 'hidden')}
|
||||
variant="subtitle"
|
||||
className={classNames(
|
||||
'pr-6 w-full text-right text-primary-light',
|
||||
!isFirst && 'hidden'
|
||||
)}
|
||||
>
|
||||
{t('Function')}
|
||||
</Typography>
|
||||
</Typography>
|
||||
<Typography
|
||||
variant='subtitle'
|
||||
className={classNames('pr-6 h-full flex flex-row items-center whitespace-nowrap', isFirst && 'mt-5')}>
|
||||
variant="subtitle"
|
||||
className={classNames(
|
||||
'pr-6 h-full flex flex-row items-center whitespace-nowrap',
|
||||
isFirst && 'mt-5'
|
||||
)}
|
||||
>
|
||||
{definition.label}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<div className="flex flex-col">
|
||||
<Typography
|
||||
variant='subtitle'
|
||||
className={classNames('pr-6 pl-0 text-left text-primary-light', !isFirst && 'hidden')}
|
||||
variant="subtitle"
|
||||
className={classNames(
|
||||
'pr-6 pl-0 text-left text-primary-light',
|
||||
!isFirst && 'hidden'
|
||||
)}
|
||||
>
|
||||
{t('Shortcut')}
|
||||
</Typography>
|
||||
<div className={classNames('flex flex-col w-32', isFirst && 'mt-5')}>
|
||||
</Typography>
|
||||
<div
|
||||
className={classNames(
|
||||
'flex flex-col w-32',
|
||||
isFirst && 'mt-5'
|
||||
)}
|
||||
>
|
||||
<HotkeyField
|
||||
disabled={disabled}
|
||||
keys={definition.keys}
|
||||
modifierKeys={MODIFIER_KEYS}
|
||||
onChange={onChangeHandler}
|
||||
hotkeys={hotkeysModule}
|
||||
className='text-lg h-8'
|
||||
className="h-8 text-lg"
|
||||
/>
|
||||
{error && <span className='p-2 text-left text-red-600 text-sm'>{error}</span>}
|
||||
{error && (
|
||||
<span className="p-2 text-sm text-left text-red-600">
|
||||
{error}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,7 +129,7 @@ const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErr
|
||||
);
|
||||
};
|
||||
|
||||
const noop = () => { };
|
||||
const noop = () => {};
|
||||
|
||||
HotkeysPreferences.propTypes = {
|
||||
onChange: PropTypes.func,
|
||||
@@ -113,12 +141,12 @@ HotkeysPreferences.propTypes = {
|
||||
unpause: PropTypes.func.isRequired,
|
||||
startRecording: PropTypes.func.isRequired,
|
||||
record: PropTypes.func.isRequired,
|
||||
}).isRequired
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
HotkeysPreferences.defaultProps = {
|
||||
onChange: noop,
|
||||
disabled: false
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
export default HotkeysPreferences;
|
||||
Reference in new issue
Block a user