@amaui/ui-react
Version:
UI for React
155 lines (154 loc) • 9.2 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 });
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");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
// reset
margin: '0',
padding: '0',
border: '0',
outline: 'none',
fontSize: '100%',
background: 'transparent',
boxSizing: 'border-box',
touchAction: 'manipulation'
},
// Color
color_inherit: { color: 'inherit' },
color_themed: { color: theme.palette.light ? theme.palette.text.default.primary : theme.palette.text.default.secondary },
color_inverted: { color: theme.palette.background.default.primary },
color_default: { color: theme.palette.text.default.primary },
color_primary: { color: theme.palette.text.primary.primary },
color_secondary: { color: theme.palette.text.secondary.primary },
color_tertiary: { color: theme.palette.text.tertiary.primary },
color_quaternary: { color: theme.palette.text.quaternary.primary },
color_success: { color: theme.palette.text.success.primary },
color_info: { color: theme.palette.text.info.primary },
color_warning: { color: theme.palette.text.warning.primary },
color_error: { color: theme.palette.text.error.primary },
color_neutral: { color: theme.palette.text.neutral.primary },
// Priority
priority_primary: { opacity: theme.palette.visual_contrast.default.opacity.primary },
priority_secondary: { opacity: theme.palette.visual_contrast.default.opacity.secondary },
priority_tertiary: { opacity: theme.palette.visual_contrast.default.opacity.tertiary },
priority_quaternary: { opacity: theme.palette.visual_contrast.default.opacity.quaternary },
// Version
version_d1: Object.assign({}, theme.typography.values.d1),
version_d1_responsive: { fontSize: `clamp(2.5rem, 2.8274vw, ${theme.typography.values.d1.fontSize})` },
version_d2: Object.assign({}, theme.typography.values.d2),
version_d2_responsive: { fontSize: `clamp(2.25rem, 2.232vw, ${theme.typography.values.d2.fontSize})` },
version_d3: Object.assign({}, theme.typography.values.d3),
version_d3_responsive: { fontSize: `clamp(2rem, 1.736vw, ${theme.typography.values.d3.fontSize})` },
version_h1: Object.assign({}, theme.typography.values.h1),
version_h1_responsive: { fontSize: `clamp(1.75rem, 1.5874vw, ${theme.typography.values.h1.fontSize})` },
version_h2: Object.assign({}, theme.typography.values.h2),
version_h2_responsive: { fontSize: `clamp(1.5rem, 1.3394vw, ${theme.typography.values.h2.fontSize})` },
version_h3: Object.assign({}, theme.typography.values.h3),
version_h3_responsive: { fontSize: `clamp(1.25rem, 1.1904vw, ${theme.typography.values.h3.fontSize})` },
version_t1: Object.assign({}, theme.typography.values.t1),
version_t1_responsive: { fontSize: `clamp(1.125rem, 1.0415vw, ${theme.typography.values.t1.fontSize})` },
version_t2: Object.assign({}, theme.typography.values.t2),
version_t2_responsive: { fontSize: `clamp(1rem, 0.7935vw, ${theme.typography.values.t2.fontSize})` },
version_t3: Object.assign({}, theme.typography.values.t3),
version_t3_responsive: { fontSize: `clamp(0.875rem, 0.6944vw, ${theme.typography.values.t3.fontSize})` },
version_l1: Object.assign({}, theme.typography.values.l1),
version_l1_responsive: { fontSize: `clamp(1rem, 0.7935vw, ${theme.typography.values.l1.fontSize})` },
version_l2: Object.assign({}, theme.typography.values.l2),
version_l2_responsive: { fontSize: `clamp(0.875rem, 0.6944vw, ${theme.typography.values.l2.fontSize})` },
version_l3: Object.assign({}, theme.typography.values.l3),
version_l3_responsive: { fontSize: `clamp(0.75rem, 0.5954vw, ${theme.typography.values.l3.fontSize})` },
version_b1: Object.assign({}, theme.typography.values.b1),
version_b1_responsive: { fontSize: `clamp(1rem, 0.7935vw, ${theme.typography.values.b1.fontSize})` },
version_b2: Object.assign({}, theme.typography.values.b2),
version_b2_responsive: { fontSize: `clamp(0.875rem, 0.6944vw, ${theme.typography.values.b2.fontSize})` },
version_b3: Object.assign({}, theme.typography.values.b3),
version_b3_responsive: { fontSize: `clamp(0.75rem, 0.5954vw, ${theme.typography.values.b3.fontSize})` },
version_m1: Object.assign({}, theme.typography.values.m1),
version_m1_responsive: { fontSize: `clamp(1rem, 0.7935vw, ${theme.typography.values.m1.fontSize})` },
version_m2: Object.assign({}, theme.typography.values.m2),
version_m2_responsive: { fontSize: `clamp(0.875rem, 0.6944vw, ${theme.typography.values.m2.fontSize})` },
version_m3: Object.assign({}, theme.typography.values.m3),
version_m3_responsive: { fontSize: `clamp(0.75rem, 0.5954vw, ${theme.typography.values.m3.fontSize})` },
align_left: { textAlign: 'left' },
align_start: { textAlign: 'start' },
align_center: { textAlign: 'center' },
align_end: { textAlign: 'end' },
align_right: { textAlign: 'right' },
align_unset: { textAlign: 'unset' },
transform_uppercase: { textTransform: 'uppercase' },
transform_lowercase: { textTransform: 'lowercase' },
transform_capitalize: { textTransform: 'capitalize' },
transform_unset: { textTransform: 'unset' },
fullWidth: { width: '100%' },
disabled: {
pointerEvents: 'none',
userSelect: 'none',
opacity: theme.palette.visual_contrast.default.opacity.disabled
}
}), { name: 'amaui-Type' });
const Type = react_1.default.forwardRef((props_, ref) => {
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.amauiType) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const { color = 'inherit', responsive = true, priority, version = 'b2', align, transform, size, weight, whiteSpace, fullWidth, disabled, Component: Component_, className, style, children } = props, other = __rest(props, ["color", "responsive", "priority", "version", "align", "transform", "size", "weight", "whiteSpace", "fullWidth", "disabled", "Component", "className", "style", "children"]);
const { classes } = useStyle();
const styles = {
root: {}
};
let Component = Component_;
const map = {
h1: ['d1', 'd2', 'd3', 'h1'],
h2: ['h2'],
h3: ['h3'],
h4: ['h4', 't1', 't2', 't3'],
h5: ['h5', 'l1', 'l2', 'l3'],
p: ['b1', 'b2', 'b3', 'm1', 'm2', 'm3']
};
Object.keys(map).forEach(item => {
if (map[item].includes(version) && !Component)
Component = item;
});
if (!Component)
Component = 'p';
if (!classes[`color_${color}`]) {
styles.root.color = color;
}
if (size !== undefined)
styles.root.fontSize = size;
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, style_react_1.classNames)([
(0, utils_1.staticClassName)('Type', theme) && [
'amaui-Type-root',
`amaui-Type-version-${version}`,
`amaui-Type-size-${size}`,
disabled && `amaui-Type-disabled`
],
className,
classes.root,
classes[`version_${version}`],
responsive && classes[`version_${version}_responsive`],
classes[`color_${color}`],
priority && classes[`priority_${priority}`],
align && classes[`align_${align}`],
transform && classes[`transform_${transform}`],
fullWidth && classes.fullWidth,
disabled && classes.disabled
]), style: Object.assign(Object.assign({ whiteSpace, fontWeight: weight }, style), styles.root) }, other, { children: children })));
});
Type.displayName = 'amaui-Type';
exports.default = Type;