98 lines
3.1 KiB
JavaScript
98 lines
3.1 KiB
JavaScript
"use client";
|
|
|
|
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { isNumber, isPlainObject, isString } from '../_util/is';
|
|
import { responsiveArray } from '../_util/responsiveObserver';
|
|
import { ConfigContext } from '../config-provider';
|
|
import useBreakpoint from './hooks/useBreakpoint';
|
|
import useGutter from './hooks/useGutter';
|
|
import RowContext from './RowContext';
|
|
import { useRowStyle } from './style';
|
|
const _RowAligns = ['top', 'middle', 'bottom', 'stretch'];
|
|
const _RowJustify = ['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'];
|
|
const useMergedPropByScreen = (oriProp, screen) => {
|
|
const [prop, setProp] = React.useState(() => isString(oriProp) ? oriProp : '');
|
|
const calcMergedAlignOrJustify = () => {
|
|
if (isString(oriProp)) {
|
|
setProp(oriProp);
|
|
}
|
|
if (!isPlainObject(oriProp)) {
|
|
return;
|
|
}
|
|
for (let i = 0; i < responsiveArray.length; i++) {
|
|
const breakpoint = responsiveArray[i];
|
|
// if do not match, do nothing
|
|
if (!screen || !screen[breakpoint]) {
|
|
continue;
|
|
}
|
|
const curVal = oriProp[breakpoint];
|
|
if (curVal !== undefined) {
|
|
setProp(curVal);
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
React.useEffect(() => {
|
|
calcMergedAlignOrJustify();
|
|
}, [JSON.stringify(oriProp), screen]);
|
|
return prop;
|
|
};
|
|
const Row = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
justify,
|
|
align,
|
|
className,
|
|
style,
|
|
children,
|
|
gutter = 0,
|
|
wrap,
|
|
...others
|
|
} = props;
|
|
const {
|
|
getPrefixCls,
|
|
direction
|
|
} = React.useContext(ConfigContext);
|
|
const screens = useBreakpoint(true, null);
|
|
const mergedAlign = useMergedPropByScreen(align, screens);
|
|
const mergedJustify = useMergedPropByScreen(justify, screens);
|
|
const prefixCls = getPrefixCls('row', customizePrefixCls);
|
|
const [hashId, cssVarCls] = useRowStyle(prefixCls);
|
|
const gutters = useGutter(gutter, screens);
|
|
const classes = clsx(prefixCls, {
|
|
[`${prefixCls}-no-wrap`]: wrap === false,
|
|
[`${prefixCls}-${mergedJustify}`]: mergedJustify,
|
|
[`${prefixCls}-${mergedAlign}`]: mergedAlign,
|
|
[`${prefixCls}-rtl`]: direction === 'rtl'
|
|
}, className, hashId, cssVarCls);
|
|
// Add gutter related style
|
|
const rowStyle = {};
|
|
if (gutters?.[0]) {
|
|
const horizontalGutter = isNumber(gutters[0]) ? `${gutters[0] / -2}px` : `calc(${gutters[0]} / -2)`;
|
|
rowStyle.marginInline = horizontalGutter;
|
|
}
|
|
// "gutters" is a new array in each rendering phase, it'll make 'React.useMemo' effectless.
|
|
// So we deconstruct "gutters" variable here.
|
|
const [gutterH, gutterV] = gutters;
|
|
rowStyle.rowGap = gutterV;
|
|
const rowContext = React.useMemo(() => ({
|
|
gutter: [gutterH, gutterV],
|
|
wrap
|
|
}), [gutterH, gutterV, wrap]);
|
|
return /*#__PURE__*/React.createElement(RowContext.Provider, {
|
|
value: rowContext
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
...others,
|
|
className: classes,
|
|
style: {
|
|
...rowStyle,
|
|
...style
|
|
},
|
|
ref: ref
|
|
}, children));
|
|
});
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Row.displayName = 'Row';
|
|
}
|
|
export default Row; |