@onesy/ui-react
Version:
UI for React
265 lines (264 loc) • 9.73 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _compilerRuntime = require("react/compiler-runtime");
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "size", "version", "value", "noShrink", "thickness", "rounded", "pathProps", "pathBackgroundProps", "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) { (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 noShrinkStrokeDashOffset = 194;
const useStyle = (0, _styleReact.style)(theme => ({
'@keyframes spin': {
'0%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(360deg)'
}
},
'@keyframes shrink': {
'0%': {
strokeDashoffset: '240px'
},
'50%': {
strokeDashoffset: `${noShrinkStrokeDashOffset}px`,
transform: 'rotate(134deg)'
},
'100%': {
strokeDashoffset: '240px',
transform: 'rotate(360deg)'
}
},
root: {
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
pointerEvents: 'none',
fontSize: '3rem'
},
// Version
version_indeterminate: {
animation: `$spin 1.4s linear infinite`
},
version_determinate: {
transform: 'rotate(-90deg)'
},
// Size
size_extra_small: {
fontSize: '1rem'
},
size_small: {
fontSize: '1.5rem'
},
size_regular: {
fontSize: '3rem'
},
size_large: {
fontSize: '3.5rem'
},
// Color
color_default: {
color: theme.palette.text.default.primary
},
color_neutral: {
color: theme.palette.color.neutral.main
},
color_primary: {
color: theme.palette.color.primary.main
},
color_secondary: {
color: theme.palette.color.secondary.main
},
color_tertiary: {
color: theme.palette.color.tertiary.main
},
color_quaternary: {
color: theme.palette.color.quaternary.main
},
color_info: {
color: theme.palette.color.info.main
},
color_success: {
color: theme.palette.color.success.main
},
color_warning: {
color: theme.palette.color.warning.main
},
color_error: {
color: theme.palette.color.error.main
},
// Tonal
tonal_color_neutral: {
color: theme.methods.palette.color.value('neutral', 50)
},
tonal_color_primary: {
color: theme.methods.palette.color.value('primary', 50)
},
tonal_color_secondary: {
color: theme.methods.palette.color.value('secondary', 50)
},
tonal_color_tertiary: {
color: theme.methods.palette.color.value('tertiary', 50)
},
tonal_color_quaternary: {
color: theme.methods.palette.color.value('quaternary', 50)
},
tonal_color_info: {
color: theme.methods.palette.color.value('info', 50)
},
tonal_color_success: {
color: theme.methods.palette.color.value('success', 50)
},
tonal_color_warning: {
color: theme.methods.palette.color.value('warning', 50)
},
tonal_color_error: {
color: theme.methods.palette.color.value('error', 50)
},
svg: {
width: '1em',
height: '1em',
color: 'inherit',
stroke: 'currentcolor'
},
path: {
strokeLinecap: 'square',
transformOrigin: 'center',
strokeDasharray: '240px',
strokeDashoffset: '0px'
},
// Version
path_indeterminate: {
animation: `$shrink 1.4s ease-in-out infinite`
},
path_indeterminate_noShrink: {
strokeDashoffset: `${noShrinkStrokeDashOffset}px`,
animation: 'none'
},
path_determinate: {
strokeDasharray: '101',
strokeDashoffset: '0',
transition: theme.methods.transitions.make('stroke-dashoffset')
},
pathBackground: {
strokeLinecap: 'square',
strokeDasharray: '240px',
strokeDashoffset: '0px',
stroke: 'transparent'
}
}), {
name: 'onesy-RoundProgress'
});
const RoundProgress = props_ => {
var _theme$ui, _theme$ui2;
const $ = (0, _compilerRuntime.c)(3);
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.onesyRoundProgress) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const {
ref,
tonal: t0,
color: t1,
size: t2,
version: t3,
value,
noShrink,
thickness: t4,
rounded: t5,
pathProps: t6,
pathBackgroundProps,
className,
style,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const tonal = t0 === undefined ? true : t0;
const color = t1 === undefined ? "primary" : t1;
const size = t2 === undefined ? "regular" : t2;
const version = t3 === undefined ? "indeterminate" : t3;
const thickness = t4 === undefined ? 2 : t4;
const rounded_ = t5 === undefined ? true : t5;
const pathProps = t6 === undefined ? {} : t6;
const {
classes
} = useStyle();
let rounded = rounded_;
const styles = {
root: {},
circle: {}
};
if (!classes[`size_${size}`]) {
styles.root.fontSize = (0, _utils.is)("number", size) ? `${size}px` : size;
}
if (!classes[`color_${color}`]) {
styles.root.color = color;
if (tonal) {
const palette = theme.methods.color(color);
styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
}
}
if (version === "determinate") {
rounded = false;
pathProps.pathLength = 100;
styles.circle.strokeDashoffset = 101 - value;
if (styles.circle.strokeDashoffset === 1) {
styles.circle.strokeDashoffset = 0;
}
other["aria-valuenow"] = value;
other["aria-valuemin"] = 0;
other["aria-valuemax"] = 100;
other["aria-valuetext"] = `${value}%`;
}
const t7 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("RoundedProgress", theme) && ["onesy-RoundedProgress-root", `onesy-RoundedProgress-version-${version}`, `onesy-RoundedProgress-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`color_${color}`], classes[`version_${version}`], tonal && classes[`tonal_color_${color}`]]);
let t8;
if ($[0] !== classes.svg || $[1] !== theme) {
t8 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("RoundedProgress", theme) && ["onesy-RoundedProgress-svg"], classes.svg]);
$[0] = classes.svg;
$[1] = theme;
$[2] = t8;
} else {
t8 = $[2];
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
ref: ref,
className: t7,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({
viewBox: "0 0 24 24",
className: t8,
style: _objectSpread(_objectSpread({}, styles.root), style)
}, other), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", _objectSpread(_objectSpread(_objectSpread({
fill: "none",
strokeWidth: thickness,
cx: "12",
cy: "12",
r: "10"
}, !rounded && {
strokeLinecap: "butt"
}), pathBackgroundProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("RoundedProgress", theme) && ["onesy-RoundedProgress-path-background"], pathBackgroundProps === null || pathBackgroundProps === void 0 ? void 0 : pathBackgroundProps.className, classes.pathBackground, classes[`path_${version}`]])
})), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", _objectSpread(_objectSpread(_objectSpread({
fill: "none",
strokeWidth: thickness,
cx: "12",
cy: "12",
r: "10"
}, !rounded && {
strokeLinecap: "butt"
}), pathProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("RoundedProgress", theme) && ["onesy-RoundedProgress-path"], pathProps === null || pathProps === void 0 ? void 0 : pathProps.className, classes.path, classes[`path_${version}`], noShrink && classes.path_indeterminate_noShrink]),
style: _objectSpread(_objectSpread({}, styles.circle), pathProps === null || pathProps === void 0 ? void 0 : pathProps.style)
}))]
})), children]
});
};
RoundProgress.displayName = 'onesy-RoundProgress';
var _default = exports.default = RoundProgress;