@amaui/ui-react
Version:
UI for React
170 lines (169 loc) • 9.27 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 Line_1 = __importDefault(require("../Line"));
const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
width: '100%',
flex: '0 1 auto'
},
auto: {
flex: '1 1 auto',
width: 'auto'
},
// 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-Grid' });
const Grid = 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.amauiGrid) === 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 { auto, wrap, columns = 12, gap: gap_, rowGap: rowGap_, columnGap: columnGap_, parentGap, parentRowGap, parentColumnGap, direction: direction_, offsets, values, responsive: responsive_, RootProps, Component = 'div', style, className, children } = props, other = __rest(props, ["auto", "wrap", "columns", "gap", "rowGap", "columnGap", "parentGap", "parentRowGap", "parentColumnGap", "direction", "offsets", "values", "responsive", "RootProps", "Component", "style", "className", "children"]);
const { classes } = useStyle();
const refs = {
root: react_1.default.useRef(undefined),
responsiveIFrame: react_1.default.useRef({})
};
const keys = react_1.default.useMemo(() => {
const result = [];
const items = [gap_, rowGap_, columnGap_, direction_, responsive_];
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);
}, [gap_, rowGap_, columnGap_, direction_, responsive_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
});
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 direction = (0, utils_2.valueBreakpoints)(direction_, 'column', breakpoints, theme);
const responsive = (0, utils_2.valueBreakpoints)(responsive_, undefined, breakpoints, theme);
const responsiveValues = {
mobile: (0, useMediaQuery_1.default)(`(max-width: 767px)`, { element: refs.root.current })
};
const styles = {
root: {},
divider: {}
};
const valuesGaps = [0, 0.5, 1, 2, 3, 4, 8, 12, 16];
if (rowGap !== undefined || columnGap !== undefined) {
if (!valuesGaps.includes(rowGap))
styles.root.rowGap = (0, utils_1.is)('string', rowGap) ? rowGap : `${rowGap * theme.space.unit}px`;
if (!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`;
}
other.wrap = wrap;
other.gap = gap;
other.columnGap = columnGap;
other.direction = direction;
// Width
// first smallest to largest
// that is true
const breakpoint = (0, utils_1.is)('object', values) && ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].find(item => !!values[item] && breakpoints[item]);
let width = (values === null || values === void 0 ? void 0 : values[breakpoint]) || (values === null || values === void 0 ? void 0 : values.default) || ((0, utils_1.is)('number', values) && values) || columns;
// responsive
// value provided, override
const isResponsive = responsive && responsiveValues.mobile;
const offset = (offsets === null || offsets === void 0 ? void 0 : offsets[breakpoint]) || (offsets === null || offsets === void 0 ? void 0 : offsets.default) || 0;
const valueGap = (parentColumnGap !== undefined ? parentColumnGap : parentGap) || 0;
const part = width / columns;
const partGap = (valueGap * theme.space.unit) - ((valueGap * theme.space.unit) * part);
if (auto)
width = undefined;
else if (isResponsive)
width = '100%';
else if (width === columns)
width = '100%';
else
width = `calc(${part * 100}% - ${partGap}px)`;
if (isResponsive) {
other.direction = 'column';
}
styles.root.width = width;
if (offset > 0)
styles.root.marginInlineStart = `${(offset / columns) * 100}%`;
return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, Component: Component, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Grid', theme) && [
'amaui-Grid-root'
],
className,
classes.root,
auto && classes.auto,
classes[`gap_${String(gap).replace('.', '')}`],
classes[`rowGap_${String(rowGap).replace('.', '')}`],
classes[`columnGap_${String(columnGap).replace('.', '')}`]
]), style: Object.assign(Object.assign({}, styles.root), style) }, other, RootProps, { children: react_1.default.Children.toArray(children).map((item) => {
var _a, _b;
return (react_1.default.cloneElement(item, !((_b = (_a = item.type) === null || _a === void 0 ? void 0 : _a.displayName) === null || _b === void 0 ? void 0 : _b.includes('Grid')) ? {} : Object.assign({}, (other.direction === 'row' && {
parentGap: gap,
parentRowGap: rowGap,
parentColumnGap: columnGap
}))));
}) })));
});
Grid.displayName = 'amaui-Grid';
exports.default = Grid;