@amaui/ui-react/Line/Line.js

UI for React

"use strict";
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 Divider_1 = __importDefault(require("../Divider"));
const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
    root: {
        display: 'flex',
        boxSizing: 'border-box'
    },
    // flex
    flex: { flex: '1 1 auto' },
    // flexNo
    flexNo: { flex: '0 0 auto' },
    // full width
    fullWidth: { width: '100%' },
    // display
    display_inherit: { display: 'inherit' },
    display_flex: { display: 'flex' },
    display_inline_flex: { display: 'inline-flex' },
    // wrap
    wrap_inherit: { flexWrap: 'inherit' },
    wrap_nowrap: { flexWrap: 'nowrap' },
    wrap_wrap: { flexWrap: 'wrap' },
    'wrap_wrap-reverse': { flexWrap: 'wrap-reverse' },
    // direction
    direction_inherit: { flexDirection: 'inherit' },
    direction_row: { flexDirection: 'row' },
    'direction_row-reverse': { flexDirection: 'row-reverse' },
    direction_column: { flexDirection: 'column' },
    'direction_column-reverse': { flexDirection: 'column-reverse' },
    // align
    'align_inherit': { alignItems: 'inherit' },
    'align_initial': { alignItems: 'initial' },
    'align_flex-start': { alignItems: 'flex-start' },
    align_center: { alignItems: 'center' },
    'align_flex-end': { alignItems: 'flex-end' },
    'align_baseline': { alignItems: 'baseline' },
    'align_stretch': { alignItems: 'stretch' },
    // justify
    justify_inherit: { justifyContent: 'inherit' },
    justify_initial: { justifyContent: 'initial' },
    'justify_flex-start': { justifyContent: 'flex-start' },
    justify_center: { justifyContent: 'center' },
    'justify_flex-end': { justifyContent: 'flex-end' },
    'justify_space-around': { justifyContent: 'space-around' },
    'justify_space-between': { justifyContent: 'space-between' },
    'justify_space-evenly': { justifyContent: 'space-evenly' },
    // gaps
    // gap
    gap_0: { gap: '0' },
    'gap_05': { gap: `${0.5 * theme.space.unit}px` },
    'gap_1': { gap: `${1 * theme.space.unit}px` },
    'gap_2': { gap: `${2 * theme.space.unit}px` },
    'gap_3': { gap: `${3 * theme.space.unit}px` },
    'gap_4': { gap: `${4 * theme.space.unit}px` },
    'gap_8': { gap: `${8 * theme.space.unit}px` },
    'gap_12': { gap: `${12 * theme.space.unit}px` },
    'gap_16': { gap: `${16 * theme.space.unit}px` },
    // rowGap
    rowGap_0: { rowGap: '0' },
    'rowGap_05': { rowGap: `${0.5 * theme.space.unit}px` },
    'rowGap_1': { rowGap: `${1 * theme.space.unit}px` },
    'rowGap_2': { rowGap: `${2 * theme.space.unit}px` },
    'rowGap_3': { rowGap: `${3 * theme.space.unit}px` },
    'rowGap_4': { rowGap: `${4 * theme.space.unit}px` },
    'rowGap_8': { rowGap: `${8 * theme.space.unit}px` },
    'rowGap_12': { rowGap: `${12 * theme.space.unit}px` },
    'rowGap_16': { rowGap: `${16 * theme.space.unit}px` },
    // columnGap
    columnGap_0: { columnGap: '0' },
    'columnGap_05': { columnGap: `${0.5 * theme.space.unit}px` },
    'columnGap_1': { columnGap: `${1 * theme.space.unit}px` },
    'columnGap_2': { columnGap: `${2 * theme.space.unit}px` },
    'columnGap_3': { columnGap: `${3 * theme.space.unit}px` },
    'columnGap_4': { columnGap: `${4 * theme.space.unit}px` },
    'columnGap_8': { columnGap: `${8 * theme.space.unit}px` },
    'columnGap_12': { columnGap: `${12 * theme.space.unit}px` },
    'columnGap_16': { columnGap: `${16 * theme.space.unit}px` }
}), { name: 'amaui-Line' });
const Line = 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.amauiLine) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
    const { display: display_, align: align_, justify: justify_, direction: direction_, gap: gap_, rowGap: rowGap_, columnGap: columnGap_, divider: divider_, wrap: wrap_, flex: flex_, flexNo: flexNo_, fullWidth: fullWidth_, DividerProps, Component = 'div', className, style, children } = props, other = __rest(props, ["display", "align", "justify", "direction", "gap", "rowGap", "columnGap", "divider", "wrap", "flex", "flexNo", "fullWidth", "DividerProps", "Component", "className", "style", "children"]);
    const { classes } = useStyle();
    const refs = {
        root: react_1.default.useRef(undefined)
    };
    const keys = react_1.default.useMemo(() => {
        const result = [];
        const items = [display_, align_, justify_, direction_, gap_, rowGap_, columnGap_, divider_, wrap_, flex_, flexNo_, fullWidth_];
        items.forEach(item => {
            if ((0, utils_1.is)('object', item))
                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
        });
        return (0, utils_1.unique)(result);
    }, [display_, align_, justify_, direction_, gap_, rowGap_, columnGap_, divider_, wrap_, flex_, flexNo_, fullWidth_]);
    const breakpoints = {};
    keys.forEach(key => {
        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
    });
    const display = (0, utils_2.valueBreakpoints)(display_, 'flex', breakpoints, theme);
    const align = (0, utils_2.valueBreakpoints)(align_, 'flex-start', breakpoints, theme);
    const justify = (0, utils_2.valueBreakpoints)(justify_, 'flex-start', breakpoints, theme);
    const direction = (0, utils_2.valueBreakpoints)(direction_, 'column', breakpoints, theme);
    const gap = (0, utils_2.valueBreakpoints)(gap_, 2, breakpoints, theme);
    const rowGap = (0, utils_2.valueBreakpoints)(rowGap_, undefined, breakpoints, theme);
    const columnGap = (0, utils_2.valueBreakpoints)(columnGap_, undefined, breakpoints, theme);
    const divider = (0, utils_2.valueBreakpoints)(divider_, undefined, breakpoints, theme);
    const wrap = (0, utils_2.valueBreakpoints)(wrap_, undefined, breakpoints, theme);
    const flex = (0, utils_2.valueBreakpoints)(flex_, undefined, breakpoints, theme);
    const flexNo = (0, utils_2.valueBreakpoints)(flexNo_, undefined, breakpoints, theme);
    const fullWidth = (0, utils_2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
    const styles = {
        root: {},
        divider: {}
    };
    const valuesGaps = [0, 0.5, 1, 2, 3, 4, 8, 12, 16];
    if (rowGap !== undefined || columnGap !== undefined) {
        if (rowGap !== undefined && !valuesGaps.includes(rowGap))
            styles.root.rowGap = (0, utils_1.is)('string', rowGap) ? rowGap : `${rowGap * theme.space.unit}px`;
        if (columnGap !== undefined && !valuesGaps.includes(columnGap))
            styles.root.columnGap = (0, utils_1.is)('string', columnGap) ? columnGap : `${columnGap * theme.space.unit}px`;
    }
    else {
        if (!valuesGaps.includes(gap))
            styles.root.gap = (0, utils_1.is)('string', gap) ? gap : `${gap * theme.space.unit}px`;
    }
    const Divider_ = ((0, jsx_runtime_1.jsx)(Divider, Object.assign({ flex: true, orientation: direction.includes('row') ? 'vertical' : 'horizontal' }, DividerProps)));
    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: item => {
            if (ref) {
                if ((0, utils_1.is)('function', ref))
                    ref(item);
                else
                    ref.current = item;
            }
            refs.root.current = item;
        }, className: (0, style_react_1.classNames)([
            (0, utils_2.staticClassName)('Line', theme) && [
                'amaui-Line-root',
                `amaui-Line-direction-${direction}`
            ],
            className,
            classes.root,
            classes[`display_${display.replace('-', '_')}`],
            classes[`wrap_${wrap}`],
            classes[`direction_${direction}`],
            classes[`align_${align}`],
            classes[`justify_${justify}`],
            classes[`gap_${String(gap).replace('.', '')}`],
            classes[`rowGap_${String(rowGap).replace('.', '')}`],
            classes[`columnGap_${String(columnGap).replace('.', '')}`],
            flex && classes.flex,
            flexNo && classes.flexNo,
            fullWidth && classes.fullWidth
        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: react_1.default.Children.toArray(children).flatMap((item, index) => (!divider || index === children.length - 1) ? [item] : [item, Divider_]) })));
});
Line.displayName = 'amaui-Line';
exports.default = Line;