@amaui/ui-react
Version:
UI for React
104 lines (102 loc) • 5.01 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/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: 'amaui-Icon'
});
const Icon = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiIcon?.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) && ['amaui-Icon-root', `amaui-Icon-size-${size}`, !noRtl && rtl && isRtlIcon ? 'amaui-Icon-direction-rtl' : 'amaui-Icon-direction-ltr', disabled && `amaui-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 = 'amaui-Icon';
export default Icon;