@onesy/ui-react
Version:
UI for React
493 lines • 19.7 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "tonal", "color", "size", "version", "value", "valueDefault", "onChange", "options", "name", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "getLabel", "getOptionName", "fullWidth", "chip", "clear", "readOnly", "noSelectText", "disabled", "renderValues", "renderChip", "IconClear", "IconDropdown", "inputProps", "InputWrapperProps", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "ListItemProps", "ListItemTypeProps", "ListItemTypePrimaryProps", "ListItemTypeSecondaryProps", "IconButtonProps", "IconProps", "className", "style", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { getObjectValue, is, isEnvironment, unique } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import IconMaterialClose from '@onesy/icons-material-rounded-react/IconMaterialCloseW100';
import IconMaterialArrowDropDown from '@onesy/icons-material-rounded-react/IconMaterialArrowDropDownW100';
import ListItemElement from '../ListItem';
import TypeElement from '../Type';
import MenuElement from '../Menu';
import ChipElement from '../Chip';
import ChipsElement from '../Chips';
import TextFieldElement from '../TextField';
import IconButtonElement from '../IconButton';
import LineElement from '../Line';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(theme => ({
root: {
flex: 'unset',
minWidth: '184px',
'& .onesy-TextField-input': {
position: 'absolute',
left: '0',
bottom: '0',
pointerEvents: 'none',
opacity: '0'
},
'& .onesy-TextField-input-wrapper': {
cursor: 'pointer'
}
},
wrapper: {
position: 'relative'
},
inputWrapper: {
overflow: 'hidden',
cursor: 'pointer',
'&.onesy-TextField-input-wrapper': {
cursor: 'pointer'
}
},
inputWrapper_chip_size_small: {
minHeight: '48px'
},
inputWrapper_chip_size_regular: {
minHeight: '56px'
},
inputWrapper_chip_size_large: {
minHeight: '64px'
},
input: {
display: 'flex',
alignItems: 'center',
minHeight: 20,
margin: '0',
border: '0',
color: theme.palette.text.default.primary,
background: 'transparent',
'-webkit-tap-highlight-color': 'transparent',
textAlign: 'start',
borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`,
cursor: 'pointer',
pointerEvents: 'none',
// overflow
width: '100%',
overflow: 'hidden',
whiteSpace: 'pre',
textOverflow: 'ellipsis'
},
input_size_small: _objectSpread({}, theme.typography.values.b2),
input_size_regular: _objectSpread({}, theme.typography.values.b2),
input_size_large: _objectSpread({}, theme.typography.values.b1),
chip: {
'&.onesy-TextField-input-wrapper': {
height: 'unset'
}
},
chipGroup: {
pointerEvents: 'auto'
},
chipGroup_padding: {
paddingTop: theme.methods.space.value(0.5, 'px')
},
arrow: {
transition: theme.methods.transitions.make('transform')
},
arrow_open: {
transform: 'rotate(-180deg)'
},
open: {
'&.onesy-TextField-root': {
cursor: 'default'
}
},
fullWidth: {
width: '100%'
},
readOnly: {
'&.onesy-TextField-root': {
cursor: 'default'
}
},
disabled: {
'&.onesy-TextField-root': {
cursor: 'default'
}
}
}), {
name: 'onesy-Select'
});
const getValue = value => value?.value !== undefined ? value.value : value;
const Select = props_ => {
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySelect?.props?.default), props_);
const Line = theme?.elements?.Line || LineElement;
const ListItem = theme?.elements?.ListItem || ListItemElement;
const Type = theme?.elements?.Type || TypeElement;
const Menu = theme?.elements?.Menu || MenuElement;
const Chip = theme?.elements?.Chip || ChipElement;
const Chips = theme?.elements?.Chips || ChipsElement;
const TextField = theme?.elements?.TextField || TextFieldElement;
const IconButton = theme?.elements?.IconButton || IconButtonElement;
const {
ref,
tonal = true,
color = 'primary',
size = 'regular',
version = 'filled',
value: value_,
valueDefault,
onChange: onChange_,
options,
name,
multiple,
prefix,
sufix,
start,
end,
autoWidth = true,
getLabel: getLabel_,
getOptionName,
fullWidth,
chip,
clear,
readOnly,
noSelectText,
disabled,
renderValues: renderValues_,
renderChip,
IconClear = IconMaterialClose,
IconDropdown = IconMaterialArrowDropDown,
inputProps,
InputWrapperProps,
WrapperProps,
ChipProps,
ChiProps,
ListProps = {
style: {
maxHeight: 250,
overflowY: 'auto',
overflowX: 'hidden'
}
},
MenuProps: MenuPropsProps,
ListItemProps,
ListItemTypeProps,
ListItemTypePrimaryProps,
ListItemTypeSecondaryProps,
IconButtonProps,
IconProps,
className,
style,
children: children_
} = props,
other = _objectWithoutProperties(props, _excluded);
const children = React.Children.toArray(children_);
const [value, setValue] = React.useState(() => {
const values = valueDefault !== undefined ? valueDefault : value_;
return multiple ? (is('array', values) ? values : [values]).filter(Boolean) : values;
});
const [open, setOpen] = React.useState(false);
const [mouseDown, setMouseDown] = React.useState(false);
const [focus, setFocus] = React.useState(false);
const {
classes
} = useStyle();
const refs = {
root: React.useRef(undefined),
wrapper: React.useRef(undefined),
menu: React.useRef(undefined),
input: React.useRef(undefined),
ids: {
list: React.useId()
}
};
const styles = {
root: {},
menu: {}
};
const MenuProps = _objectSpread({
portal: true
}, MenuPropsProps);
if (MenuProps?.portal && autoWidth) {
styles.menu.width = refs.wrapper.current?.clientWidth;
}
React.useEffect(() => {
const method = event => {
if (event.key === 'Escape') onClose();
};
const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
rootDocument.addEventListener('keydown', method);
return () => {
// Clean up
rootDocument.removeEventListener('keydown', method);
};
}, []);
React.useEffect(() => {
if (value_ !== undefined && value_ !== value) setValue(value_);
}, [value_]);
const onMouseDown = event_0 => {
if (!disabled && !readOnly) setMouseDown(true);
};
const onMouseUp = event_1 => {
if (!disabled && !readOnly) setMouseDown(false);
};
const onFocus = event_2 => {
if (!disabled && !readOnly) setFocus(true);
};
const onBlur = event_3 => {
if (!disabled && !readOnly) setFocus(false);
};
const onClick = event_4 => {
if (!disabled && !readOnly) setOpen(open_ => {
if (open_) setFocus(false);
return !open_;
});
};
const onClickArrowDown = event_5 => {
if (!disabled && !readOnly) setOpen(open__0 => !open__0);
};
const onEnterKeyDown = event_6 => {
if (event_6.key === 'Enter' && !disabled && !readOnly) setOpen(open__1 => {
if (open__1) refs.input.current.focus();
return !open__1;
});
};
const onClose = (refocus = true) => {
if (!disabled && !readOnly) {
setOpen(open__2 => {
if (open__2 && refocus) refs.input.current.focus();
return false;
});
}
};
const onChange = valueNew => {
// Inner controlled value
if (!props.hasOwnProperty('value')) setValue(valueNew);
if (is('function', onChange_)) onChange_(valueNew);
};
const onSelect = newValue => {
let values_0 = multiple ? is('array', value) ? value : [value] : value;
values_0 = multiple ? unique([...values_0, newValue]) : newValue;
onChange(values_0);
};
const onUnselect = itemValue => {
if (multiple) {
let values_1 = is('array', value) ? value : [value];
values_1 = values_1.filter(item => item !== itemValue);
onChange(values_1);
}
};
const onClear = (refocus_0 = false) => {
if (!disabled && !readOnly) {
onChange(multiple ? [] : null);
if (refocus_0) refs.input.current.focus();
}
};
const items = React.useMemo(() => {
return (options || []).map(item_0 => _objectSpread(_objectSpread({}, item_0), {}, {
name: String(item_0?.name !== undefined ? item_0?.name : item_0?.value !== undefined ? item_0.value : item_0),
value: item_0?.value !== undefined ? item_0?.value : item_0
}));
}, [options]);
const getLabel = (item_1, propsOther) => {
if (is('function', getLabel_)) return getLabel_(item_1, propsOther);
const properties = ['name', 'label', 'primary', 'secondary', 'tertiary', 'value', 'children'];
const objects = [item_1, item_1?.props].filter(Boolean);
for (const itemObject of objects) {
if (is('simple', itemObject)) return itemObject;
const valueItem = getObjectValue(itemObject, ...properties);
if (valueItem !== undefined) return valueItem;
}
return l(noSelectText) || l('Select an option');
};
const renderValue = (itemValue_0 = value) => {
const item_2 = !!items?.length ? items.find(item_ => getValue(item_) === getValue(itemValue_0)) : children.find(item__0 => getValue(item__0.props?.value) === getValue(itemValue_0));
return item_2 ? getLabel(item_2, props) : getLabel(itemValue_0, props) || '';
};
const renderValues = renderValues_ || ((value__ = value) => {
if (multiple) {
if (chip) {
return /*#__PURE__*/_jsx(Chips, _objectSpread(_objectSpread({
wrap: "wrap",
size: size,
className: classNames([classes.chipGroup, version !== 'outlined' && classes.chipGroup_padding])
}, ChiProps), {}, {
children: value__.map(item_3 => {
const other_ = {
onClick: event_7 => {
event_7.preventDefault();
event_7.stopPropagation();
},
onRemove: event_8 => {
event_8.preventDefault();
event_8.stopPropagation();
onUnselect(item_3);
},
input: true
};
if (is('function', renderChip)) return renderChip(item_3, renderValue(item_3), other_);
return /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread(_objectSpread({
size: "small"
}, other_), ChipProps), {}, {
children: renderValue(item_3)
}), item_3);
})
}));
}
const valuesAll = value.map(item_4 => renderValue(item_4));
if (valuesAll.every(item_5 => is('simple', item_5))) return valuesAll.join(', ');
return value?.length ? valuesAll : noSelectText || name;
}
return renderValue(value);
});
const endIcons = [end, clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
onClick: onClear,
size: "small",
"aria-label": l('Input clear')
}, IconButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconClear, _objectSpread({}, IconProps))
})), ...(!readOnly ? [/*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
size: "regular",
onClick: onClickArrowDown,
"aria-expanded": open,
"aria-controls": refs.ids.list
}, IconButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconDropdown, _objectSpread(_objectSpread({
size: "large"
}, IconProps), {}, {
className: classNames([IconProps?.className, classes.arrow, open && classes.arrow_open])
}))
}), 1)] : [])];
const sizeListItem = MenuProps?.size || size;
return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
gap: 0,
direction: "column",
fullWidth: fullWidth
}, WrapperProps), {}, {
ref: item_6 => {
if (WrapperProps?.ref) {
if (is('function', WrapperProps.ref)) WrapperProps.ref(item_6);else WrapperProps.ref.current = item_6;
}
refs.wrapper.current = item_6;
},
className: classNames([staticClassName('Select', theme) && ['onesy-Select-wrapper', fullWidth && 'onesy-full-width'], WrapperProps?.className, classes.wrapper]),
children: [/*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({
ref: refs.input,
rootRef: item_7 => {
if (ref) {
if (is('function', ref)) ref(item_7);else ref.current = item_7;
}
refs.root.current = item_7;
},
onBlur: onBlur,
onFocus: onFocus,
enabled: open || focus || mouseDown || !!(is('array', value) ? value.length : ![undefined, null].includes(value)),
focus: open || focus || mouseDown,
className: classNames([staticClassName('Select', theme) && ['onesy-Select-root', `onesy-Select-version-${version}`, `onesy-Select-size-${size}`, open && `onesy-Select-open`, mouseDown && `onesy-Select-mouse-down`, focus && `onesy-Select-focus`], className, classes.root, open && classes.open, disabled && classes.disabled]),
tonal: tonal,
color: color,
size: size,
version: version,
name: name,
prefix: prefix,
sufix: sufix,
start: start,
end: endIcons,
readOnly: readOnly,
endVerticalAlign: "center",
role: "combobox",
"aria-multiselectable": multiple,
"aria-controls": refs.ids.list,
"aria-expanded": open,
"aria-haspopup": "listbox",
"aria-labelledby": name,
"aria-disabled": disabled,
fullWidth: fullWidth,
disabled: disabled,
InputWrapperProps: _objectSpread(_objectSpread({
onMouseDown,
onMouseUp,
onClick,
onKeyDown: onEnterKeyDown
}, InputWrapperProps), {}, {
className: classNames([staticClassName('Select', theme) && ['onesy-Select-input-wrapper'], InputWrapperProps?.className, classes.inputWrapper, chip && [classes.chip, classes[`inputWrapper_chip_size_${size}`]], open && classes.open, readOnly && classes.readOnly])
}),
inputProps: _objectSpread({
disabled: true,
readOnly: true
}, inputProps),
style: _objectSpread(_objectSpread({}, style), styles.root)
}, other), {}, {
children: /*#__PURE__*/_jsx(Line, {
gap: 0,
direction: "row",
className: classNames([staticClassName('Select', theme) && ['onesy-Select-input'], classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
justify: other.align,
children: renderValues(value)
})
})), (!!items.length || children) && /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({
ref: refs.menu,
open: open,
portal: false,
onClose: () => onClose(false),
anchorElement: refs.root.current,
transformOrigin: "center top",
transformOriginSwitch: "center bottom",
maxWidth: "unset",
size: size,
menuItems: !!items.length ? items.map((item_8, index) => /*#__PURE__*/_jsx(ListItem, _objectSpread(_objectSpread(_objectSpread({
role: 'option',
selected: item_8.selected !== undefined ? item_8.selected : multiple ? value.includes(item_8?.value) : value === item_8?.value,
preselected: item_8.preselected !== undefined ? item_8.preselected : !(multiple ? value.includes(item_8?.value) : value === item_8?.value),
onMouseUp: onMouseUp,
onMouseDown: onMouseDown,
primary: getOptionName ? getOptionName(item_8.name, item_8, index) : /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
}, ListItemTypeProps), ListItemTypePrimaryProps), {}, {
className: classNames([ListItemTypeProps?.className, ListItemTypePrimaryProps?.className, 'onesy-Select-option', 'onesy-Select-option-primary', !(item_8.description || item_8.secondary || item_8.tertiary) && 'onesy-Select-option-primary-only']),
children: item_8.name
})),
secondary: item_8.description ? is('string', item_8.description) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
}, ListItemTypeProps), ListItemTypeSecondaryProps), {}, {
className: classNames([ListItemTypeProps?.className, ListItemTypeSecondaryProps?.className, 'onesy-Select-option', 'onesy-Select-option-secondary']),
children: item_8.description
})) : item_8.description : null,
value: item_8.value,
size: MenuProps?.size || size,
button: true
}, ListItemProps), item_8.props), {}, {
onClick: event_9 => {
if (multiple && value.includes(item_8?.value)) onUnselect(item_8?.value);else onSelect(item_8?.value);
if (is('function', item_8.props?.onClick)) item_8.props?.onClick(event_9);
if (!multiple) setOpen(false);
}
}), index)) : children.map((item_9, index_0) => (/*#__PURE__*/React.cloneElement(item_9, {
key: index_0,
role: 'option',
selected: item_9.props.selected !== undefined ? item_9.props.selected : multiple ? value.includes(item_9.props?.value) : value === item_9.props?.value,
preselected: item_9.props.preselected !== undefined ? item_9.props.preselected : !(multiple ? value.includes(item_9.props?.value) : value === item_9.props?.value),
onMouseUp,
onMouseDown,
onClick: event_10 => {
if (multiple && value.includes(item_9.props?.value)) onUnselect(item_9.props?.value);else onSelect(item_9.props?.value);
if (is('function', item_9.props?.onClick)) item_9.props?.onClick(event_10);
if (!multiple) setOpen(false);
}
})))
}, MenuProps), {}, {
AppendProps: _objectSpread({
alignment: 'start'
}, MenuProps?.AppendProps),
ModalProps: _objectSpread({}, MenuProps?.ModalProps),
ListProps: _objectSpread(_objectSpread({
menu: true,
size: ListProps?.size || MenuProps?.size || size,
role: 'listbox',
id: refs.ids.list,
'aria-label': name
}, ListProps), MenuProps?.ListProps),
style: _objectSpread(_objectSpread({}, styles.menu), MenuProps?.style),
className: classNames([MenuProps?.className])
}))]
}));
};
Select.displayName = 'onesy-Select';
export default Select;