@onesy/ui-react
Version:
UI for React
451 lines (449 loc) • 16.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.IconMaterialDone = exports.IconDoneAnimated = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _compilerRuntime = require("react/compiler-runtime");
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Transition = _interopRequireDefault(require("../Transition"));
var _Line = _interopRequireDefault(require("../Line"));
var _utils2 = require("../utils");
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _jsxRuntime = require("react/jsx-runtime");
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) { (0, _defineProperty2.default)(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; }
const IconMaterialDone = props => {
const $ = (0, _compilerRuntime.c)(8);
let className;
let other;
if ($[0] !== props) {
var _props = props;
({
className
} = _props);
other = (0, _objectWithoutProperties2.default)(_props, _excluded);
_props;
$[0] = props;
$[1] = className;
$[2] = other;
} else {
className = $[1];
other = $[2];
}
let t0;
if ($[3] !== className) {
t0 = /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_Icon.default, _objectSpread(_objectSpread({
name: "DoneSharp",
short_name: "Done"
}, other), {}, {
children: t0
}));
$[5] = other;
$[6] = t0;
$[7] = t1;
} else {
t1 = $[7];
}
return t1;
};
exports.IconMaterialDone = IconMaterialDone;
const useStyle = (0, _styleReact.style)(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'
});
const IconDoneAnimated = props => {
var _theme$elements, _style;
const $ = (0, _compilerRuntime.c)(31);
const {
classes
} = useStyle();
const theme = (0, _styleReact.useOnesyTheme)();
const Transition = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Transition) || _Transition.default;
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 = (0, _objectWithoutProperties2.default)(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 = style) === null || _style === void 0 ? void 0 : _style.fontSize)) {
var _style2, _style3, _style4;
t0 = props.simple ? {} : {
adding: {
width: (_style2 = style) === null || _style2 === void 0 ? void 0 : _style2.fontSize
},
added: {
width: (_style3 = style) === null || _style3 === void 0 ? void 0 : _style3.fontSize
}
};
$[9] = props.simple;
$[10] = (_style4 = style) === null || _style4 === void 0 ? void 0 : _style4.fontSize;
$[11] = t0;
} else {
t0 = $[11];
}
const styles = t0;
let t1;
if ($[12] !== onExited || $[13] !== simple) {
t1 = () => {
if ((0, _utils.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.default.cloneElement(/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: className,
style: style,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconMaterialDone, _objectSpread({
className: (0, _styleReact.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__*/(0, _jsxRuntime.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;
};
exports.IconDoneAnimated = IconDoneAnimated;
const Buttons = props_ => {
var _theme$ui, _theme$ui2, _theme$elements2;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyButtons) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Line) || _Line.default;
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 = (0, _objectWithoutProperties2.default)(props, _excluded3);
const {
classes
} = useStyle();
const [init, setInit] = _react.default.useState(false);
const [selected, setSelected] = _react.default.useState(() => {
const valueNew = valueDefault !== undefined ? valueDefault : value;
return valueNew !== undefined ? (0, _utils.is)('array', valueNew) ? valueNew : [valueNew] : [];
});
const refs = {
root: _react.default.useRef(undefined),
noCheckIcon: _react.default.useRef(noCheckIcon)
};
const keys = _react.default.useMemo(() => {
const result = [];
const items = [orientation_];
items.forEach(item => {
if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return (0, _utils.unique)(result);
}, [orientation_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const orientation = (0, _utils2.valueBreakpoints)(orientation_, 'horizontal', breakpoints, theme);
refs.noCheckIcon.current = noCheckIcon;
_react.default.useEffect(() => {
setInit(true);
}, []);
_react.default.useEffect(() => {
if (init && value !== selected) setSelected((0, _utils.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 = (0, _utils.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 = (0, _utils.unique)([...selected, itemProps.value]);
}
}
}
if (valueNew_0 !== undefined) {
// Update inner or controlled
if (!props.hasOwnProperty('value')) setSelected(valueNew_0);
if ((0, _utils.is)('function', onChange)) onChange(valueNew_0);
}
};
const children = _react.default.Children.toArray(children_)
// Clamp array to max of 5 values
// .slice(0, 5)
.map((item_2, index) => {
var _item_2$props, _item_2$props2, _item_2$props3, _item_2$props4, _item_2$props5, _item_2$props6;
return /*#__PURE__*/_react.default.cloneElement(item_2, _objectSpread(_objectSpread({
key: index,
className: (0, _styleReact.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 ((0, _utils.is)('function', item_2.props.onClick)) item_2.props.onClick();
}
}, !refs.noCheckIcon.current && selected.includes(item_2.props.value) ? {
start: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDoneAnimated, {
in: true,
add: true,
simple: true
})
} : {}), {}, {
version: ((_item_2$props = item_2.props) === null || _item_2$props === void 0 ? void 0 : _item_2$props.version) !== undefined ? item_2.props.version : version,
color: selected.includes(item_2.props.value) ? colorSelected || (((_item_2$props2 = item_2.props) === null || _item_2$props2 === void 0 ? void 0 : _item_2$props2.color) !== undefined ? item_2.props.color : color) : ((_item_2$props3 = item_2.props) === null || _item_2$props3 === void 0 ? void 0 : _item_2$props3.color) !== undefined ? item_2.props.color : color,
size: ((_item_2$props4 = item_2.props) === null || _item_2$props4 === void 0 ? void 0 : _item_2$props4.size) !== undefined ? item_2.props.size : size,
tonal: ((_item_2$props5 = item_2.props) === null || _item_2$props5 === void 0 ? void 0 : _item_2$props5.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$props6 = item_2.props) === null || _item_2$props6 === void 0 ? void 0 : _item_2$props6.disabled) !== undefined ? item_2.props.disabled : disabled
}));
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
ref: item_3 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
}
refs.root.current = item_3;
},
gap: 0,
direction: "row",
display: "inline-flex",
className: (0, _styleReact.classNames)([(0, _utils2.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';
var _default = exports.default = Buttons;