base branch for ui v2
This commit is contained in:
Rodrigo Antinarelli
James A. Petts
parent
3110978d03
commit
e3bb30a591
@ -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
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State initial={{
|
|
||||||
isOpen: false
|
|
||||||
}}>
|
|
||||||
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<button
|
|
||||||
className="btn btn-primary"
|
|
||||||
type="button"
|
|
||||||
onClick={ () => setState({ isOpen: true }) }
|
|
||||||
>
|
|
||||||
Open about modal
|
|
||||||
</button>
|
|
||||||
<AboutContent
|
|
||||||
{...state}
|
|
||||||
onCancel={() => setState({ isOpen: false })}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</State>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={AboutContent} />
|
|
||||||
@ -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 (
|
|
||||||
<input
|
|
||||||
readOnly={true}
|
|
||||||
type="text"
|
|
||||||
value={inputValue}
|
|
||||||
className={classNames}
|
|
||||||
onKeyDown={onInputKeyDown}
|
|
||||||
onFocus={onFocus}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
HotkeyField.propTypes = {
|
|
||||||
keys: PropTypes.array.isRequired,
|
|
||||||
handleChange: PropTypes.func.isRequired,
|
|
||||||
classNames: PropTypes.string,
|
|
||||||
modifier_keys: PropTypes.array,
|
|
||||||
allowed_keys: PropTypes.array,
|
|
||||||
};
|
|
||||||
|
|
||||||
export { HotkeyField };
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export { HotkeyField } from './HotkeyField';
|
|
||||||
@ -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,
|
|
||||||
};
|
|
||||||
@ -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 (
|
|
||||||
<select
|
|
||||||
name="language-select"
|
|
||||||
id="language-select"
|
|
||||||
className="language-select"
|
|
||||||
value={language}
|
|
||||||
onChange={onChange}
|
|
||||||
>
|
|
||||||
{languages.map(lng => (
|
|
||||||
<option key={lng.value} value={lng.value}>
|
|
||||||
{lng.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
LanguageSwitcher.propTypes = {
|
|
||||||
language: PropTypes.string.isRequired,
|
|
||||||
languages: PropTypes.array.isRequired,
|
|
||||||
onLanguageChange: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export { LanguageSwitcher };
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export { LanguageSwitcher } from './LanguageSwitcher';
|
|
||||||
@ -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 && (
|
|
||||||
<div className="TabComponents">
|
|
||||||
<div className="TabComponents_tabHeader">
|
|
||||||
<div className="TabComponents_tabHeader_selector">
|
|
||||||
<div className="dialog-separator-after">
|
|
||||||
<ul className="nav nav-tabs">
|
|
||||||
{tabs.map((tab, index) => {
|
|
||||||
const { name, hidden = false } = tab;
|
|
||||||
return (
|
|
||||||
!hidden && (
|
|
||||||
<li
|
|
||||||
key={index}
|
|
||||||
onClick={() => {
|
|
||||||
setCurrentTabIndex(index);
|
|
||||||
}}
|
|
||||||
className={classnames(
|
|
||||||
'nav-link',
|
|
||||||
index === currentTabIndex && 'active'
|
|
||||||
)}
|
|
||||||
data-cy={getDataCy(name)}
|
|
||||||
>
|
|
||||||
<button>{name}</button>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{tabs.map((tab, index) => {
|
|
||||||
const {
|
|
||||||
Component,
|
|
||||||
customProps: tabCustomProps,
|
|
||||||
hidden = false,
|
|
||||||
} = tab;
|
|
||||||
return (
|
|
||||||
!hidden && (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className={classnames(
|
|
||||||
'TabComponents_content',
|
|
||||||
index === currentTabIndex && 'active'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Component {...customProps} {...tabCustomProps} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TabComponents.propTypes = {
|
|
||||||
tabs: PropTypes.arrayOf(
|
|
||||||
PropTypes.shape({
|
|
||||||
name: PropTypes.string,
|
|
||||||
Component: PropTypes.any,
|
|
||||||
customProps: PropTypes.object,
|
|
||||||
hidden: PropTypes.bool,
|
|
||||||
})
|
|
||||||
),
|
|
||||||
customProps: PropTypes.object,
|
|
||||||
};
|
|
||||||
|
|
||||||
export { TabComponents };
|
|
||||||
@ -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
|
|
||||||
@ -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 (
|
|
||||||
<div className="footer">
|
|
||||||
<button
|
|
||||||
className="btn btn-danger pull-left"
|
|
||||||
data-cy="reset-default-btn"
|
|
||||||
onClick={onResetPreferences}
|
|
||||||
>
|
|
||||||
{t('Reset to Defaults')}
|
|
||||||
</button>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
onClick={onCancel}
|
|
||||||
data-cy="cancel-btn"
|
|
||||||
className="btn btn-default"
|
|
||||||
>
|
|
||||||
{t('Cancel')}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="btn btn-primary"
|
|
||||||
data-cy="save-btn"
|
|
||||||
disabled={hasErrors}
|
|
||||||
onClick={onSave}
|
|
||||||
>
|
|
||||||
{t('Save')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TabFooter.propTypes = {
|
|
||||||
onResetPreferences: PropTypes.func,
|
|
||||||
onSave: PropTypes.func,
|
|
||||||
onCancel: PropTypes.func,
|
|
||||||
hasErrors: PropTypes.bool,
|
|
||||||
t: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
export { TabFooter };
|
|
||||||
@ -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
|
|
||||||
@ -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
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<TabComponents
|
|
||||||
tabs={tabs}
|
|
||||||
customProps={}
|
|
||||||
/>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={TabComponents} />
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
export default tabs = [
|
|
||||||
{
|
|
||||||
name: 'tabName1',
|
|
||||||
Component: () => {
|
|
||||||
return <div>tab 1 Content</div>;
|
|
||||||
},
|
|
||||||
customProps: {},
|
|
||||||
hidden: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'tabName2',
|
|
||||||
Component: () => {
|
|
||||||
return <div>tab 2 Content</div>;
|
|
||||||
},
|
|
||||||
customProps: {},
|
|
||||||
hidden: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'tabName3',
|
|
||||||
Component: () => {
|
|
||||||
return <div>tab 3 Content</div>;
|
|
||||||
},
|
|
||||||
customProps: {},
|
|
||||||
hidden: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
export { TabComponents } from './TabComponents';
|
|
||||||
export { TabFooter } from './TabFooter';
|
|
||||||
@ -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,
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user