056f56f5b4
* Creating InputGroup * Updating Views with new InputGroup * Creating Docz for InputGroup * Fixing eslint issues * Renaming inputGroup props naming to be more generic.
66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
import { Icon } from '@ohif/ui';
|
|
|
|
const baseLabelClassName =
|
|
'flex flex-col flex-1 text-white text-lg pl-1 select-none';
|
|
const spanClassName = 'flex flex-row items-center cursor-pointer';
|
|
const sortIconMap = {
|
|
ascending: 'sorting-active-up',
|
|
descending: 'sorting-active-down',
|
|
none: 'sorting',
|
|
};
|
|
|
|
const InputLabelWrapper = ({
|
|
label,
|
|
isSortable,
|
|
sortDirection,
|
|
onLabelClick,
|
|
className,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<label className={classnames(baseLabelClassName, className)}>
|
|
<span
|
|
role="button"
|
|
className={spanClassName}
|
|
onClick={onLabelClick}
|
|
onKeyDown={onLabelClick}
|
|
tabIndex="0"
|
|
>
|
|
{label}
|
|
{isSortable && (
|
|
<Icon
|
|
name={sortIconMap[sortDirection]}
|
|
className={classnames(
|
|
'mx-2 w-2',
|
|
sortDirection !== 'none'
|
|
? 'text-primary-light'
|
|
: 'text-primary-main'
|
|
)}
|
|
/>
|
|
)}
|
|
</span>
|
|
<span>{children}</span>
|
|
</label>
|
|
);
|
|
};
|
|
|
|
InputLabelWrapper.defaultProps = {
|
|
className: '',
|
|
};
|
|
|
|
InputLabelWrapper.propTypes = {
|
|
label: PropTypes.string.isRequired,
|
|
isSortable: PropTypes.bool.isRequired,
|
|
sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
|
|
.isRequired,
|
|
onLabelClick: PropTypes.func.isRequired,
|
|
className: PropTypes.string,
|
|
children: PropTypes.node,
|
|
};
|
|
|
|
export default InputLabelWrapper;
|