ant-design/components/grid/row.tsx
azro352 18400fbdee
Make breakpoints use the token feature (#39105)
* Add XXXL size

* Update index.zh-CN.md

* Update components/list/index.zh-CN.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

* Try to use `useToken` for building responsiveMap

* Try useResponsiveObserve

* Fix useResponsiveObserve

* Some try

* Some try

* Some try

* Remove impossible test

* Remove impossible test

* Fix token.screenXSMax

* Try to put test back as token.screenXSMax is fixed

* Remove impossible test now

* Subscribers, subuid and screen are no longer static

* reorganize def

* chore: not affect no-related file

* chore: not affect no-related file

* test: update test case

* chore: adjust memo logic

Co-authored-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
2022-12-15 14:14:07 +08:00

199 lines
5.9 KiB
TypeScript

import classNames from 'classnames';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
import useResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
import RowContext from './RowContext';
import { useRowStyle } from './style';
const RowAligns = ['top', 'middle', 'bottom', 'stretch'] as const;
const RowJustify = [
'start',
'end',
'center',
'space-around',
'space-between',
'space-evenly',
] as const;
type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
type ResponsiveLike<T> = {
[key in Responsive]?: T;
};
type Gap = number | undefined;
export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
type ResponsiveAligns = ResponsiveLike<typeof RowAligns[number]>;
type ResponsiveJustify = ResponsiveLike<typeof RowJustify[number]>;
export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
gutter?: Gutter | [Gutter, Gutter];
align?: typeof RowAligns[number] | ResponsiveAligns;
justify?: typeof RowJustify[number] | ResponsiveJustify;
prefixCls?: string;
wrap?: boolean;
}
function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'], screen: ScreenMap) {
const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '');
const clacMergeAlignOrJustify = () => {
if (typeof oriProp !== 'object') {
return;
}
for (let i = 0; i < responsiveArray.length; i++) {
const breakpoint: Breakpoint = responsiveArray[i];
// if do not match, do nothing
if (!screen[breakpoint]) continue;
const curVal = oriProp[breakpoint];
if (curVal !== undefined) {
setProp(curVal);
return;
}
}
};
React.useEffect(() => {
clacMergeAlignOrJustify();
}, [JSON.stringify(oriProp), screen]);
return prop;
}
const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
justify,
align,
className,
style,
children,
gutter = 0,
wrap,
...others
} = props;
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const [screens, setScreens] = React.useState<ScreenMap>({
xs: true,
sm: true,
md: true,
lg: true,
xl: true,
xxl: true,
});
// to save screens info when responsiveObserve callback had been call
const [curScreens, setCurScreens] = React.useState<ScreenMap>({
xs: false,
sm: false,
md: false,
lg: false,
xl: false,
xxl: false,
});
// ================================== calc reponsive data ==================================
const mergeAlign = useMergePropByScreen(align, curScreens);
const mergeJustify = useMergePropByScreen(justify, curScreens);
const supportFlexGap = useFlexGapSupport();
const gutterRef = React.useRef<Gutter | [Gutter, Gutter]>(gutter);
const responsiveObserve = useResponsiveObserve();
// ================================== Effect ==================================
React.useEffect(() => {
const token = responsiveObserve.subscribe((screen) => {
setCurScreens(screen);
const currentGutter = gutterRef.current || 0;
if (
(!Array.isArray(currentGutter) && typeof currentGutter === 'object') ||
(Array.isArray(currentGutter) &&
(typeof currentGutter[0] === 'object' || typeof currentGutter[1] === 'object'))
) {
setScreens(screen);
}
});
return () => responsiveObserve.unsubscribe(token);
}, []);
// ================================== Render ==================================
const getGutter = (): [Gap, Gap] => {
const results: [Gap, Gap] = [undefined, undefined];
const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
normalizedGutter.forEach((g, index) => {
if (typeof g === 'object') {
for (let i = 0; i < responsiveArray.length; i++) {
const breakpoint: Breakpoint = responsiveArray[i];
if (screens[breakpoint] && g[breakpoint] !== undefined) {
results[index] = g[breakpoint] as number;
break;
}
}
} else {
results[index] = g;
}
});
return results;
};
const prefixCls = getPrefixCls('row', customizePrefixCls);
const [wrapSSR, hashId] = useRowStyle(prefixCls);
const gutters = getGutter();
const classes = classNames(
prefixCls,
{
[`${prefixCls}-no-wrap`]: wrap === false,
[`${prefixCls}-${mergeJustify}`]: mergeJustify,
[`${prefixCls}-${mergeAlign}`]: mergeAlign,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
hashId,
);
// Add gutter related style
const rowStyle: React.CSSProperties = {};
const horizontalGutter = gutters[0] != null && gutters[0] > 0 ? gutters[0] / -2 : undefined;
const verticalGutter = gutters[1] != null && gutters[1] > 0 ? gutters[1] / -2 : undefined;
if (horizontalGutter) {
rowStyle.marginLeft = horizontalGutter;
rowStyle.marginRight = horizontalGutter;
}
if (supportFlexGap) {
// Set gap direct if flex gap support
[, rowStyle.rowGap] = gutters;
} else if (verticalGutter) {
rowStyle.marginTop = verticalGutter;
rowStyle.marginBottom = verticalGutter;
}
// "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;
const rowContext = React.useMemo(
() => ({ gutter: [gutterH, gutterV] as [number, number], wrap, supportFlexGap }),
[gutterH, gutterV, wrap, supportFlexGap],
);
return wrapSSR(
<RowContext.Provider value={rowContext}>
<div {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>
{children}
</div>
</RowContext.Provider>,
);
});
if (process.env.NODE_ENV !== 'production') {
Row.displayName = 'Row';
}
export default Row;