@onesy/ui-react
Version:
UI for React
104 lines (102 loc) • 4.86 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["viewBox", "name", "short_name", "tonal", "tone", "color", "size", "noRtl", "disabled", "Component", "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 { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import { iconSizeToFontSize, staticClassName } from '../utils';
export const rtl_icons = ['ArrowForwardIos', 'ArrowBackIos', 'ArrowBack', 'ArrowForward', 'ArrowLeft', 'ArrowRight', 'AssignmentReturn', 'CallMade', 'CallMissedOutgoing', 'ChevronLeft', 'ChevronRight', 'DeviceUnknown', 'FeaturedPlayList', 'FlightLand', 'FormatIndentIncrease', 'Functions', 'Input', 'Label', 'LastPage', 'LiveHelp', 'NavigateBefore', 'Note', 'QueueMusic', 'ReplyAll', 'ShortText', 'StarHalf', 'Toc', 'Undo', 'WrapText', 'FirstPage', 'LastPage', 'NavigateNext', 'NavigateBefore'];
const useStyle = styleMethod(theme => ({
root: {
userSelect: 'none',
display: 'inline-flex',
flexShrink: '0',
color: 'inherit',
fill: 'currentColor',
pointerEvents: 'none',
// Make width and height in em unit
// means it will scale based on parent's font-size
// so entire svg will scale based on font-size only
width: '1em',
height: '1em',
transition: theme.methods.transitions.make(['fill', 'transform', 'filter'], {
duration: 'sm',
timing_function: 'standard'
})
},
rtl: {
transform: 'scaleX(-1)',
filter: 'FlipH'
},
disabled: {
opacity: theme.palette.visual_contrast.default.opacity.disabled
}
}), {
name: 'onesy-Icon'
});
const Icon = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useOnesyTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyIcon?.props?.default), props_), [props_]);
const {
viewBox = '0 0 24 24',
name,
short_name,
tonal = true,
tone = 60,
color: color_ = 'inherit',
size = 'regular',
noRtl,
disabled,
Component = 'svg',
className,
style,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const [rtl, setRtl] = React.useState(theme.direction === 'rtl');
const {
classes
} = useStyle();
React.useEffect(() => {
// Update rtl based on theme value
const method = (update, themeNew) => setRtl(themeNew.direction === 'rtl');
theme.subscriptions.update.subscribe(method);
return () => {
theme.subscriptions.update.unsubscribe(method);
};
}, []);
const fontSize = iconSizeToFontSize(size);
const isRtlIcon = rtl_icons.includes(short_name);
let color = color_;
if (!['unset'].includes(color)) {
if (tonal) {
const palette = color === 'default' ? theme.palette.color.neutral : !theme.palette.color[color] ? theme.methods.color(color) : theme.palette.color[color];
color = theme.methods.palette.color.value(color, tone, true, palette);
} else color = color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color]?.main || color;
} else {
color = '';
}
return /*#__PURE__*/React.createElement(Component, _extends({
ref: ref,
className: classNames([staticClassName('Icon', theme) && ['onesy-Icon-root', `onesy-Icon-size-${size}`, !noRtl && rtl && isRtlIcon ? 'onesy-Icon-direction-rtl' : 'onesy-Icon-direction-ltr', disabled && `onesy-Icon-disabled`], className, classes.root, !noRtl && rtl && isRtlIcon && classes.rtl, disabled && classes.disabled])
// Default '0 0 24 24' for material icons
,
viewBox: viewBox
// Prevents svg oversize on load
,
width: "1em",
height: "1em",
focusable: "false",
"aria-hidden": true,
style: _objectSpread({
// Prevents svg fill update on load
fill: 'currentcolor',
color,
fontSize
}, style)
}, other), children);
});
Icon.displayName = 'onesy-Icon';
export default Icon;