@onesy/ui-react
Version:
UI for React
436 lines (435 loc) • 13.7 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["className"],
_excluded2 = ["in", "simple", "onExited", "fullWidth", "noExitAnimation", "add", "className", "style"],
_excluded3 = ["ref", "tonal", "color", "version", "colorSelected", "size", "value", "valueDefault", "onChange", "select", "unselect", "orientation", "noCheckIcon", "elevation", "border", "chip", "fullWidth", "disabled", "className", "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 { c as _c } from "react/compiler-runtime";
import React from 'react';
import { is, unique } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import TransitionElement from '../Transition';
import LineElement from '../Line';
import { staticClassName, valueBreakpoints } from '../utils';
import useMediaQuery from '../useMediaQuery';
import Icon from '../Icon';
import { jsx as _jsx } from "react/jsx-runtime";
export const IconMaterialDone = props => {
const $ = _c(8);
let className;
let other;
if ($[0] !== props) {
var _props = props;
({
className
} = _props);
other = _objectWithoutProperties(_props, _excluded);
_props;
$[0] = props;
$[1] = className;
$[2] = other;
} else {
className = $[1];
other = $[2];
}
let t0;
if ($[3] !== className) {
t0 = /*#__PURE__*/_jsx("path", {
className: className,
fill: "none",
d: "M4.5 11.5L9.5 16.5L19.5 6.5"
});
$[3] = className;
$[4] = t0;
} else {
t0 = $[4];
}
let t1;
if ($[5] !== other || $[6] !== t0) {
t1 = /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({
name: "DoneSharp",
short_name: "Done"
}, other), {}, {
children: t0
}));
$[5] = other;
$[6] = t0;
$[7] = t1;
} else {
t1 = $[7];
}
return t1;
};
const useStyle = styleMethod(theme => ({
root: {
position: 'relative',
maxWidth: '100%'
},
orientation_horizontal_size_small: {
'&:not(.onesy-ToggleButtons-root) > *': {
height: '28px'
}
},
orientation_horizontal_size_regular: {
'&:not(.onesy-ToggleButtons-root) > *': {
height: '42px'
}
},
orientation_horizontal_size_large: {
'&:not(.onesy-ToggleButtons-root) > *': {
height: '63px'
}
},
orientation_horizontal: {
overflow: 'auto hidden'
},
orientation_vertical: {
flexDirection: 'column',
'& > *': {
width: '100% !important'
}
},
// Shadows
elevation: {
boxShadow: theme.shadows.values.neutral[1],
transition: theme.methods.transitions.make('box-shadow'),
'&:hover': {
boxShadow: theme.shadows.values.neutral[3]
}
},
start_orientation_horizontal: {
'&:not(:first-of-type)': {
borderStartStartRadius: '0px',
borderEndStartRadius: '0px',
'&$outlined': {
marginInlineStart: '-1px'
},
'&$border:not($outlined)': {
borderInlineStart: '1px solid currentColor'
}
}
},
end_orientation_horizontal: {
'&:not(:last-of-type)': {
borderStartEndRadius: '0px',
borderEndEndRadius: '0px'
}
},
start_orientation_vertical: {
'&:not(:first-of-type)': {
borderStartStartRadius: '0px',
borderStartEndRadius: '0px',
'&$outlined': {
marginBlockStart: '-1px'
},
'&$border:not($outlined)': {
borderBlockStart: '1px solid currentColor'
}
}
},
end_orientation_vertical: {
'&:not(:last-of-type)': {
borderEndEndRadius: '0px',
borderEndStartRadius: '0px'
}
},
path: {
strokeWidth: '1.5px',
strokeDasharray: '30',
strokeDashoffset: '30',
stroke: 'currentcolor',
transition: theme.methods.transitions.make('stroke-dashoffset', {
duration: 'xxs',
timing_function: 'accelerated'
})
},
pathIn: {
strokeDashoffset: '0',
transition: theme.methods.transitions.make('stroke-dashoffset', {
duration: 'xxs',
delay: 45,
timing_function: 'accelerated'
})
},
fullWidth: {
width: '100%'
},
selected: {
zIndex: '1'
},
disabled: {}
}), {
name: 'onesy-Buttons'
});
export const IconDoneAnimated = props => {
const $ = _c(31);
const {
classes
} = useStyle();
const theme = useOnesyTheme();
const Transition = theme?.elements?.Transition || TransitionElement;
let add;
let className;
let inProp;
let noExitAnimation;
let onExited;
let other;
let simple;
let style;
if ($[0] !== props) {
const {
in: t0,
simple: t1,
onExited: t2,
fullWidth,
noExitAnimation: t3,
add: t4,
className: t5,
style: t6
} = props,
t7 = _objectWithoutProperties(props, _excluded2);
inProp = t0;
simple = t1;
onExited = t2;
noExitAnimation = t3;
add = t4;
className = t5;
style = t6;
other = t7;
$[0] = props;
$[1] = add;
$[2] = className;
$[3] = inProp;
$[4] = noExitAnimation;
$[5] = onExited;
$[6] = other;
$[7] = simple;
$[8] = style;
} else {
add = $[1];
className = $[2];
inProp = $[3];
noExitAnimation = $[4];
onExited = $[5];
other = $[6];
simple = $[7];
style = $[8];
}
let t0;
if ($[9] !== props.simple || $[10] !== style?.fontSize) {
t0 = props.simple ? {} : {
adding: {
width: style?.fontSize
},
added: {
width: style?.fontSize
}
};
$[9] = props.simple;
$[10] = style?.fontSize;
$[11] = t0;
} else {
t0 = $[11];
}
const styles = t0;
let t1;
if ($[12] !== onExited || $[13] !== simple) {
t1 = () => {
if (is("function", onExited) && !simple) {
onExited();
}
};
$[12] = onExited;
$[13] = simple;
$[14] = t1;
} else {
t1 = $[14];
}
let t2;
if ($[15] !== className || $[16] !== classes.path || $[17] !== classes.pathIn || $[18] !== noExitAnimation || $[19] !== other || $[20] !== simple || $[21] !== style || $[22] !== styles || $[23] !== theme.methods.transitions) {
t2 = status => /*#__PURE__*/React.cloneElement(/*#__PURE__*/_jsx("span", {
className: className,
style: style,
children: /*#__PURE__*/_jsx(IconMaterialDone, _objectSpread({
className: classNames([classes.path, (["adding", "added", "enter", "entering", "entered"].includes(status) || noExitAnimation) && classes.pathIn]),
size: "inherit"
}, other))
}), {
style: _objectSpread(_objectSpread(_objectSpread({
display: "inline-flex",
overflow: "hidden"
}, !simple ? {
width: 0
} : {}), {}, {
transition: theme.methods.transitions.make("width", {
duration: "xs",
timing_function: "accelerated"
})
}, styles[status]), style)
});
$[15] = className;
$[16] = classes.path;
$[17] = classes.pathIn;
$[18] = noExitAnimation;
$[19] = other;
$[20] = simple;
$[21] = style;
$[22] = styles;
$[23] = theme.methods.transitions;
$[24] = t2;
} else {
t2 = $[24];
}
let t3;
if ($[25] !== Transition || $[26] !== add || $[27] !== inProp || $[28] !== t1 || $[29] !== t2) {
t3 = /*#__PURE__*/_jsx(Transition, {
in: inProp,
onExited: t1,
add: add,
enterOnAdd: false,
children: t2
});
$[25] = Transition;
$[26] = add;
$[27] = inProp;
$[28] = t1;
$[29] = t2;
$[30] = t3;
} else {
t3 = $[30];
}
return t3;
};
const Buttons = props_ => {
const theme = useOnesyTheme();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyButtons?.props?.default), props_);
const Line = theme?.elements?.Line || LineElement;
const {
ref,
tonal = true,
color = 'primary',
version = 'outlined',
colorSelected = props.color,
size = 'regular',
value,
valueDefault,
onChange,
select,
unselect = true,
orientation: orientation_,
noCheckIcon,
elevation = true,
border = true,
chip,
fullWidth,
disabled,
className,
children: children_
} = props,
other = _objectWithoutProperties(props, _excluded3);
const {
classes
} = useStyle();
const [init, setInit] = React.useState(false);
const [selected, setSelected] = React.useState(() => {
const valueNew = valueDefault !== undefined ? valueDefault : value;
return valueNew !== undefined ? is('array', valueNew) ? valueNew : [valueNew] : [];
});
const refs = {
root: React.useRef(undefined),
noCheckIcon: React.useRef(noCheckIcon)
};
const keys = React.useMemo(() => {
const result = [];
const items = [orientation_];
items.forEach(item => {
if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return unique(result);
}, [orientation_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const orientation = valueBreakpoints(orientation_, 'horizontal', breakpoints, theme);
refs.noCheckIcon.current = noCheckIcon;
React.useEffect(() => {
setInit(true);
}, []);
React.useEffect(() => {
if (init && value !== selected) setSelected(is('array', value) ? value : [value]);
}, [value]);
const onSelect = (itemProps, start = false) => {
let valueNew_0;
if (start) {
if (selected.includes(itemProps.value)) {
valueNew_0 = selected.filter(item_0 => item_0 !== itemProps.value);
} else {
if (select === 'single') valueNew_0 = [itemProps.value];
if (select === 'multiple') valueNew_0 = unique([...selected, itemProps.value]);
}
} else {
// Unselect
if (selected.includes(itemProps.value) && (unselect || select === 'multiple' && selected.length > 1)) {
valueNew_0 = selected.filter(item_1 => item_1 !== itemProps.value);
} else {
if (select === 'single') {
valueNew_0 = [itemProps.value];
}
if (select === 'multiple') {
valueNew_0 = unique([...selected, itemProps.value]);
}
}
}
if (valueNew_0 !== undefined) {
// Update inner or controlled
if (!props.hasOwnProperty('value')) setSelected(valueNew_0);
if (is('function', onChange)) onChange(valueNew_0);
}
};
const children = React.Children.toArray(children_)
// Clamp array to max of 5 values
// .slice(0, 5)
.map((item_2, index) => /*#__PURE__*/React.cloneElement(item_2, _objectSpread(_objectSpread({
key: index,
className: classNames([item_2.className, classes.item, classes[version], classes[`start_orientation_${orientation}`], classes[`end_orientation_${orientation}`], selected.includes(item_2.props.value) && classes.selected, border && classes.border]),
onClick: () => {
onSelect(item_2.props, !!item_2.props.start);
// Invoke items on click method
if (is('function', item_2.props.onClick)) item_2.props.onClick();
}
}, !refs.noCheckIcon.current && selected.includes(item_2.props.value) ? {
start: /*#__PURE__*/_jsx(IconDoneAnimated, {
in: true,
add: true,
simple: true
})
} : {}), {}, {
version: item_2.props?.version !== undefined ? item_2.props.version : version,
color: selected.includes(item_2.props.value) ? colorSelected || (item_2.props?.color !== undefined ? item_2.props.color : color) : item_2.props?.color !== undefined ? item_2.props.color : color,
size: item_2.props?.size !== undefined ? item_2.props.size : size,
tonal: item_2.props?.tonal !== undefined ? item_2.props.tonal : tonal,
elevation: false,
selected: item_2.props.selected !== undefined ? item_2.props.selected : selected.includes(item_2.props.value),
disabled: item_2.props?.disabled !== undefined ? item_2.props.disabled : disabled
})));
return /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
ref: item_3 => {
if (ref) {
if (is('function', ref)) ref(item_3);else ref.current = item_3;
}
refs.root.current = item_3;
},
gap: 0,
direction: "row",
display: "inline-flex",
className: classNames([staticClassName('Buttons', theme) && ['onesy-Buttons-root', `onesy-Buttons-version-${version}`, `onesy-Buttons-size-${size}`, disabled && `onesy-Buttons-disabled`], className, classes.root, classes[`orientation_${orientation}`], classes[`orientation_${orientation}_size_${size}`], fullWidth && classes.fullWidth, elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, disabled && classes.disabled])
}, other), {}, {
children: children
}));
};
Buttons.displayName = 'onesy-Buttons';
export default Buttons;