@amaui/ui-react
Version:
UI for React
295 lines (294 loc) • 15.8 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 utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const Type_1 = __importDefault(require("../Type"));
const Fade_1 = __importDefault(require("../Fade"));
const Line_1 = __importDefault(require("../Line"));
const Tooltip_1 = __importDefault(require("../Tooltip"));
const Transition_1 = __importDefault(require("../Transition"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
display: 'inline-flex',
justifyContent: 'center',
flex: '1 1 auto',
userSelect: 'none',
cursor: 'pointer',
padding: `${theme.methods.space.value(1.5, 'px')} 0 ${theme.methods.space.value(2, 'px')}`,
minHeight: '80px',
},
vertical: {
flex: '0 0 auto',
padding: '0px',
minHeight: '52px',
width: '100%'
},
iconWrapper: {
position: 'absolute',
top: '0',
height: '32px',
width: '64px'
},
iconWrapper_center: {
top: '50%',
transform: 'translateY(-50%)',
transition: theme.methods.transitions.make(['top', 'transform']),
},
iconWrapper_center_selected: {
top: '0',
transform: 'translateY(0)'
},
icon: {
lineHeight: '0'
},
labelWrapper: {
position: 'absolute',
bottom: '0'
},
label: {
position: 'absolute',
bottom: '0'
},
indicator: {
position: 'absolute',
inset: '0',
width: '100%',
height: '100%',
borderRadius: theme.methods.shape.radius.value(40, 'px'),
opacity: '0',
transform: 'scaleX(0.74)',
transition: theme.methods.transitions.make(['opacity', 'transform']),
pointerEvents: 'none',
background: 'currentColor',
},
indicator_enter: {
opacity: '0',
transform: 'scaleX(0.74)',
},
indicator_entering: {
opacity: '1',
transform: 'scaleX(1)'
},
indicator_entered: {
opacity: '1',
transform: 'scaleX(1)'
},
indicator_exit: {
opacity: '1',
transform: 'scaleX(1)'
},
indicator_exiting: {
opacity: '0',
transform: 'scaleX(1)',
transition: theme.methods.transitions.make(['opacity', 'transform'], { duration: 0 })
},
indicator_exited: {
opacity: '0',
transform: 'scaleX(0.74)'
},
indicator_hover: { opacity: theme.palette.visual_contrast.default.opacity.hover },
indicator_selected: { opacity: theme.palette.visual_contrast.default.opacity.selected },
indicator_focus: { opacity: theme.palette.visual_contrast.default.opacity.focus },
indicator_pressed: { opacity: theme.palette.visual_contrast.default.opacity.press },
disabled: {
opacity: theme.palette.visual_contrast.default.opacity.disabled,
pointerEvents: 'none',
cursor: 'default'
}
}), { name: 'amaui-NavigationItem' });
const NavigationItem = 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.amauiNavigationItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_1.default; }, [theme]);
const { tonal = true, color = 'primary', version = 'regular', value, vertical, name, label, icon, iconSelected, selected, disabled, IconWrapperComponent = 'span', onFocus: onFocus_, onBlur: onBlur_, onKeyDown: onKeyDown_, onMouseDown: onMouseDown_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, onTouchStart: onTouchStart_, TooltipProps, IconWrapperProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "value", "vertical", "name", "label", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "IconWrapperProps", "className", "style", "children"]);
const { classes } = useStyle();
const [focus, setFocus] = react_1.default.useState(false);
const [hover, setHover] = react_1.default.useState(false);
const [mouseDown, setMouseDown] = react_1.default.useState(false);
const refs = {
root: react_1.default.useRef(undefined),
props: react_1.default.useRef(undefined),
hover: react_1.default.useRef(undefined)
};
const styles = {
root: {},
icon: {},
label: {},
indicator: {}
};
refs.props.current = props;
refs.hover.current = hover;
react_1.default.useEffect(() => {
var _a;
const onMouseUp = () => {
if (!refs.props.current.disabled) {
setMouseDown(false);
setFocus(false);
}
};
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
rootDocument.addEventListener('mouseup', onMouseUp);
return () => {
rootDocument.removeEventListener('mouseup', onMouseUp);
};
}, []);
react_1.default.useEffect(() => {
if (!selected) {
if (refs.hover.current)
setHover(false);
}
}, [selected]);
const onKeyDown = react_1.default.useCallback((event) => {
if (!disabled) {
if (event.key === 'Enter') {
if ((0, utils_1.is)('function', props.onClick))
props.onClick(event);
}
}
if ((0, utils_1.is)('function', onKeyDown_))
onKeyDown_(event);
}, []);
const onFocus = react_1.default.useCallback((event) => {
if (!disabled)
setFocus(true);
if ((0, utils_1.is)('function', onFocus_))
onFocus_(event);
}, []);
const onBlur = react_1.default.useCallback((event) => {
if (!disabled)
setFocus(false);
if ((0, utils_1.is)('function', onBlur_))
onBlur_(event);
}, []);
const onTouchStart = react_1.default.useCallback((event) => {
if (!disabled)
setMouseDown(true);
if ((0, utils_1.is)('function', onTouchStart))
onTouchStart(event);
}, []);
const onMouseDown = react_1.default.useCallback((event) => {
if (!disabled)
setMouseDown(true);
if ((0, utils_1.is)('function', onMouseDown_))
onMouseDown_(event);
}, []);
const onMouseEnter = react_1.default.useCallback((event) => {
if (!disabled)
setHover(true);
if ((0, utils_1.is)('function', onMouseEnter_))
onMouseEnter_(event);
}, []);
const onMouseLeave = react_1.default.useCallback((event) => {
if (!refs.props.current.disabled)
setHover(false);
if ((0, utils_1.is)('function', onMouseLeave_))
onMouseLeave_(event);
}, []);
let palette;
if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
palette = theme.methods.color(color);
}
if (!tonal) {
let background = (_a = theme.palette.color[color]) === null || _a === void 0 ? void 0 : _a.main;
if (color === 'default')
background = theme.palette.background.default.primary;
styles.icon.color = styles.label.color = styles.indicator.color = theme.methods.palette.color.text((palette === null || palette === void 0 ? void 0 : palette.main) || background, true, 'light');
}
else {
styles.indicator.color = (palette === null || palette === void 0 ? void 0 : palette.main) || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main);
styles.icon.color = styles.label.color = theme.methods.palette.color.value(color, 5, true, palette);
}
const LabelWrapper = version === 'auto' ? Fade : react_1.default.Fragment;
const LabelWrapperProps = {};
if (version === 'auto') {
LabelWrapperProps.in = selected;
LabelWrapperProps.className = (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationItem', theme) && [
'amaui-NavigationItem-label'
],
classes.labelWrapper
]);
}
const Icon = (selected && iconSelected) || icon;
return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: label || value, position: 'top', alignment: 'center', longPress: true, touch: false, hover: false, focus: false }, TooltipProps, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ tabIndex: !disabled ? 0 : undefined, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationItem', theme) && [
'amaui-NavigationItem-root',
selected && 'amaui-NavigationItem-selected',
hover && `amaui-NavigationItem-hover`,
mouseDown && `amaui-NavigationItem-mouse-down`,
focus && `amaui-NavigationItem-focus`,
disabled && `amaui-NavigationItem-disabled`
],
className,
classes.root,
vertical && classes.vertical,
disabled && classes.disabled
]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, direction: 'column', align: 'center', justify: 'center', gap: 0.5, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationItem', theme) && [
'amaui-NavigationItem-item'
],
classes.item
]) }, { children: [Icon && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ Component: 'span', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationItem', theme) && [
'amaui-NavigationItem-icon-wrapper'
],
classes.iconWrapper,
['none', 'auto'].includes(version) && classes.iconWrapper_center,
['auto'].includes(version) && selected && classes.iconWrapper_center_selected
]) }, { children: [(0, jsx_runtime_1.jsx)(Transition, Object.assign({ in: hover || focus || selected }, { children: (status) => ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationItem', theme) && [
'amaui-NavigationItem-indicator'
],
classes.indicator,
classes[`indicator_${status}`],
selected && classes.indicator_selected,
hover && classes.indicator_hover,
focus && classes.indicator_focus,
mouseDown && classes.indicator_pressed
]), style: styles.indicator })) })), (0, jsx_runtime_1.jsx)(IconWrapperComponent, Object.assign({}, IconWrapperProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationItem', theme) && [
'amaui-NavigationItem-icon'
],
IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className,
classes.icon
]) }, { children: react_1.default.cloneElement(Icon, {
style: Object.assign(Object.assign({}, Icon.props.style), styles.icon)
}) }))] }))), ['regular', 'auto'].includes(version) && ((0, jsx_runtime_1.jsx)(LabelWrapper, Object.assign({}, LabelWrapperProps, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationItem', theme) && [
'amaui-NavigationItem-label'
],
classes.label
]), style: styles.label }, { children: name !== undefined ? name : label })) })))] })) })) })));
});
NavigationItem.displayName = 'amaui-NavigationItem';
exports.default = NavigationItem;