@onesy/ui-react
Version:
UI for React
280 lines (278 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = 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 _IconButton = _interopRequireDefault(require("../IconButton"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["size", "Component", "className", "style", "children"],
_excluded2 = ["tonal", "color", "version", "size", "render", "inputRef", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "disabled", "Component", "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 useStyle = (0, _styleReact.style)(theme => ({
root: {
position: 'relative',
'& *': {
boxSizing: 'border-box'
}
},
input: {
position: 'absolute',
inset: '0',
width: '100%',
height: '100%',
opacity: '0',
cursor: 'inherit',
zIndex: '1'
},
icon: {
zIndex: '1',
pointerEvents: 'none'
},
iconBox: {
border: '0.12em solid currentColor',
borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.75em)`
},
iconBox_size_small: {
width: '0.75em',
height: '0.75em'
},
iconBox_size_regular: {
width: '1em',
height: '1em'
},
iconBox_size_large: {
width: '1.25em',
height: '1.25em'
},
iconDot: {
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
inset: '0',
width: '100%',
height: '100%',
background: 'currentColor',
borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.75em)`,
zIndex: '3',
transform: 'scale(0)',
transition: theme.methods.transitions.make('transform', {
duration: 'xxs'
})
},
checked: {
transform: 'scale(0.5)'
},
disabled: {
cursor: 'default'
}
}), {
name: 'onesy-Radio'
});
const IconItem = props => {
const $ = (0, _compilerRuntime.c)(21);
let children;
let className;
let other;
let size;
let style;
let t0;
if ($[0] !== props) {
var _props = props;
({
size,
Component: t0,
className,
style,
children
} = _props);
other = (0, _objectWithoutProperties2.default)(_props, _excluded);
_props;
$[0] = props;
$[1] = children;
$[2] = className;
$[3] = other;
$[4] = size;
$[5] = style;
$[6] = t0;
} else {
children = $[1];
className = $[2];
other = $[3];
size = $[4];
style = $[5];
t0 = $[6];
}
const Component = t0 === undefined ? "span" : t0;
let styles;
if ($[7] !== size) {
styles = {
root: {}
};
const fontSize = (0, _utils2.iconSizeToFontSize)(size);
styles.root.fontSize = `calc(${fontSize} / 1.2)`;
$[7] = size;
$[8] = styles;
} else {
styles = $[8];
}
let t1;
if ($[9] !== style || $[10] !== styles.root) {
t1 = _objectSpread(_objectSpread({}, style), styles.root);
$[9] = style;
$[10] = styles.root;
$[11] = t1;
} else {
t1 = $[11];
}
let t2;
if ($[12] !== children || $[13] !== other) {
t2 = children && /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({}, other));
$[12] = children;
$[13] = other;
$[14] = t2;
} else {
t2 = $[14];
}
let t3;
if ($[15] !== Component || $[16] !== className || $[17] !== size || $[18] !== t1 || $[19] !== t2) {
t3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
className: className,
style: t1,
size: size,
children: t2
});
$[15] = Component;
$[16] = className;
$[17] = size;
$[18] = t1;
$[19] = t2;
$[20] = t3;
} else {
t3 = $[20];
}
return t3;
};
const Radio = props_ => {
var _theme$ui, _theme$ui2, _theme$elements;
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.onesyRadio) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const IconButton = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.IconButton) || _IconButton.default;
const {
tonal = true,
color = 'primary',
version = 'text',
size = 'regular',
render,
inputRef,
colorUnchecked = 'default',
valueDefault: valueDefault_,
checkedDefault: checkedDefault_,
value: value_,
checked: checked_,
onChange,
disabled,
Component = 'span',
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded2);
const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
const checked = value_ !== undefined ? value_ : checked_;
const [value, setValue] = _react.default.useState((checkedDefault !== undefined ? checkedDefault : checked) || false);
const refs = {
value: _react.default.useRef(undefined),
input: _react.default.useRef(undefined)
};
refs.value.current = value;
const {
classes
} = useStyle();
const styles = {
iconBox: {}
};
_react.default.useEffect(() => {
if (checked !== undefined && checked !== refs.value.current) setValue(checked);
}, [checked]);
const onUpdate = event => {
if (!disabled) {
// Inner controlled checkbox
if (!props.hasOwnProperty('checked')) setValue(event.target.checked);
if ((0, _utils.is)('function', onChange)) onChange(event.target.checked, event);
}
};
const onKeyDown = event_0 => {
switch (event_0.key) {
case 'Enter':
if (refs.input.current) refs.input.current.click();
break;
default:
break;
}
};
let palette;
if (!theme.palette.color[color]) palette = theme.methods.color(color);
if (tonal) {
// Text
// Outlined
if (['text', 'outlined', undefined].includes(version)) {
styles.iconBox.color = styles.iconBox.color = theme.methods.palette.color.value(color, 30, true, palette);
}
// Outlined
if (version === 'outlined') styles.iconBox.color = styles.iconBox.color = theme.methods.palette.color.value(color, 40, true, palette);
}
let colorValue = color;
if (!value) colorValue = colorUnchecked;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
tabIndex: !disabled ? 0 : -1,
tonal: tonal,
color: colorValue,
version: version,
size: size,
onKeyDown: onKeyDown,
firstLevelChildren: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
ref: item => {
if (inputRef) inputRef.current = item;
refs.input.current = item;
},
tabIndex: -1,
type: "checkbox",
checked: value,
onChange: onUpdate,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Radio', theme) && ['onesy-Radio-input'], classes.input]),
disabled: disabled
}),
role: "radio",
"aria-checked": value,
"aria-disabled": disabled,
disabled: disabled,
Component: Component,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Radio', theme) && ['onesy-Radio-root', `onesy-Radio-version-${version}`, `onesy-Radio-size-${size}`, value && `onesy-Radio-checked`, disabled && `onesy-Radio-disabled`], className, classes.root, disabled && classes.disabled])
}, other), {}, {
children: (0, _utils.is)('function', render) ? render(value, _objectSpread(_objectSpread(_objectSpread({}, props), other), {}, {
tonal,
color,
version
})) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconItem, {
Component: "div",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Radio', theme) && ['onesy-Radio-icon', 'onesy-Radio-icon-box'], classes.icon, classes.iconBox, classes[`iconBox_size_${size}`], classes[version], disabled && classes.disabled]),
style: styles.iconBox
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconItem, {
Component: "div",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Radio', theme) && ['onesy-Radio-icon', 'onesy-Radio-icon-dot', value && 'onesy-Radio-icon-dot-checked'], classes.icon, classes.iconDot, value && classes.checked])
})]
})
}));
};
Radio.displayName = 'onesy-Radio';
var _default = exports.default = Radio;