@amaui/ui-react
Version:
UI for React
99 lines (98 loc) • 5.56 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.rtl_icons = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const style_react_1 = require("@amaui/style-react");
const utils_1 = require("../utils");
exports.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 = (0, style_react_1.style)(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 = react_1.default.forwardRef((props_, ref) => {
var _a;
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiIcon) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.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 = __rest(props, ["viewBox", "name", "short_name", "tonal", "tone", "color", "size", "noRtl", "disabled", "Component", "className", "style", "children"]);
const [rtl, setRtl] = react_1.default.useState(theme.direction === 'rtl');
const { classes } = useStyle();
react_1.default.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 = (0, utils_1.iconSizeToFontSize)(size);
const isRtlIcon = exports.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 : ((_a = theme.palette.color[color]) === null || _a === void 0 ? void 0 : _a.main) || color);
}
else {
color = '';
}
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, style_react_1.classNames)([
(0, utils_1.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: Object.assign({
// Prevents svg fill update on load
fill: 'currentcolor', color,
fontSize }, style) }, other, { children: children })));
});
Icon.displayName = 'amaui-Icon';
exports.default = Icon;