@amaui/ui-react
Version:
UI for React
218 lines (216 loc) • 8.01 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["auto", "wrap", "columns", "gap", "rowGap", "columnGap", "parentGap", "parentRowGap", "parentColumnGap", "direction", "offsets", "values", "responsive", "RootProps", "Component", "style", "className", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { is, unique } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import LineElement from '../Line';
import useMediaQuery from '../useMediaQuery';
import { valueBreakpoints, staticClassName } from '../utils';
const useStyle = styleMethod(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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiGrid?.props?.default), props_), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [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 = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: React.useRef(undefined),
responsiveIFrame: React.useRef({})
};
const keys = React.useMemo(() => {
const result = [];
const items = [gap_, rowGap_, columnGap_, direction_, responsive_];
items.forEach(item => {
if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
});
return unique(result);
}, [gap_, rowGap_, columnGap_, direction_, responsive_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
element: refs.root.current
});
});
const gap = valueBreakpoints(gap_, 2, breakpoints, theme);
const rowGap = valueBreakpoints(rowGap_, undefined, breakpoints, theme);
const columnGap = valueBreakpoints(columnGap_, undefined, breakpoints, theme);
const direction = valueBreakpoints(direction_, 'column', breakpoints, theme);
const responsive = valueBreakpoints(responsive_, undefined, breakpoints, theme);
const responsiveValues = {
mobile: useMediaQuery(`(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 = is('string', rowGap) ? rowGap : `${rowGap * theme.space.unit}px`;
if (!valuesGaps.includes(columnGap)) styles.root.columnGap = is('string', columnGap) ? columnGap : `${columnGap * theme.space.unit}px`;
} else {
if (!valuesGaps.includes(gap)) styles.root.gap = 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 = is('object', values) && ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].find(item => !!values[item] && breakpoints[item]);
let width = values?.[breakpoint] || values?.default || is('number', values) && values || columns;
// responsive
// value provided, override
const isResponsive = responsive && responsiveValues.mobile;
const offset = offsets?.[breakpoint] || 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 /*#__PURE__*/React.createElement(Line, _extends({
ref: item => {
if (ref) {
if (is('function', ref)) ref(item);else ref.current = item;
}
refs.root.current = item;
},
Component: Component,
className: classNames([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: _objectSpread(_objectSpread({}, styles.root), style)
}, other, RootProps), React.Children.toArray(children).map(item => /*#__PURE__*/React.cloneElement(item, !item.type?.displayName?.includes('Grid') ? {} : _objectSpread({}, other.direction === 'row' && {
parentGap: gap,
parentRowGap: rowGap,
parentColumnGap: columnGap
}))));
});
Grid.displayName = 'amaui-Grid';
export default Grid;