ant-design/components/grid/row.tsx

140 lines
4.4 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
import RowContext from './RowContext';
import { tuple } from '../_util/type';
import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
merge featrue into master (#30636) * feat: add Table expandable fixed (#29959) * fix: Use flex gap of space (#30023) * fix: use flex gap when supported * test: update snapshot * refactor: Use single hooks * feat: Allow breadcrumb component in PageHeader (#30019) * Allow breadcrumb component in PageHeader * Allow breadcrumb component in PageHeader * Allow breadcrumb component in PageHeader * Rename variable rename var from _breadcrumbRender to breadcrumbRenderDomFromProps * feat: add onChange for Statistic.Countdown (#30265) * feat: add onChange for countdown * update the demo * feat(upload): add onDrop (#30319) * feat(upload): Add onDrop * Replace "if prop" logic with existential operator * Remove redundant conditional * feat(upload): itemRender add actions params (#30236) * feat(upload): itemRender add actions params * chore: optimize type definition * chore: update doc * chore: rename actions * chore: trigger ci * chore: rename method name of actions * feat: Add missing dutch translations (#30389) * feat: Add missing dutch translations * fix: Translate remaining english values * fix: Update snapshot for ui tests * test: increase code coverage to 100% (#30415) * test: fix Space code coverage * test: should use nl_BE locale for DatePicker * fix: Switch tabIndex type (#30416) * feat: updated Romanian internationalization (#30419) * feat: updated Romanian internationalization * fixed lint error * feat: Menu support accessibility & keyboard access (#30382) * chore: Use focus style * fix: prefixCls * fix: prefixCls * fix: inline tooltip * fix: inlineCollapse logic * fix: ts definition * test: Update snapshot * test: Update snapshot * fix: dropdown logic * test: Update snapshot * test: Fix some test case * bump rc-menu * test: More test case * fix test finder * test: fix test case * test: Update snapshot * test: Update snapshot * chore: Update ssr effect * test: Update ConfigProvider snapshot * test: Fix Table Filter test case * test: Fix table test case * chore: Update style * chore: beauti css * bump rc-menu * test: update snapshot * test: update snapshot * test: Fix menu test * test: Fix test case * test: Coverage * chore: clean up * bump rc-menu * ehance accessibility style * feat(radioGroup): support data-* and aria-* props (#30507) close #30501 * feat: Typography add italic type (#30458) * Typography增加斜体字支持 * update snapshot * 文档添加版本号 Co-authored-by: lidahao <lidahao@sisyphe.com.cn> * chore: alpha Menu fix merge (#30546) * chore: Update script * bump alpha version * chore: Update script desc * chore: bump rc-tabs & rc-mentions * chore: Adjust style * chore: 4.16.0-alpha.1 * test: Fix mention test case * fix: sider of layout width style * chore: bump 4.16.0-alpha.2 * fix: Tabs tabBarGutter should work as expected (#30545) close #30526 * feat: Table summary support sticky mode (#30631) * chore: Bump rc-table * feat: Patch summary fixed color * fix: style className * test: Update snapshot Co-authored-by: xrkffgg <xrkffgg@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: gepd <guillermoepd@hotmail.com> Co-authored-by: appleshell <appleshell@outlook.com> Co-authored-by: Eric Bonow <ebonow@hotmail.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> Co-authored-by: Kermit <kermitlx@outlook.com> Co-authored-by: Lewis <lewisfidlers@gmail.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: Ștefan Filip <stefy.filip@gmail.com> Co-authored-by: vldh <alwaysloseall@sina.com> Co-authored-by: lidahao <lidahao@sisyphe.com.cn>
2021-05-24 16:24:00 +08:00
import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
import { useRowStyle } from './style';
2019-09-23 11:58:03 +08:00
const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
type Gap = number | undefined;
export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
gutter?: Gutter | [Gutter, Gutter];
align?: typeof RowAligns[number];
justify?: typeof RowJustify[number];
prefixCls?: string;
wrap?: boolean;
}
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,
});
const supportFlexGap = useFlexGapSupport();
const gutterRef = React.useRef<Gutter | [Gutter, Gutter]>(gutter);
2019-08-05 18:38:10 +08:00
// ================================== Effect ==================================
React.useEffect(() => {
const token = ResponsiveObserve.subscribe(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);
}, []);
2019-08-05 18:38:10 +08:00
// ================================== Render ==================================
const getGutter = (): [Gap, Gap] => {
const results: [Gap, Gap] = [undefined, undefined];
const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
2019-10-20 12:48:03 +08:00
normalizedGutter.forEach((g, index) => {
if (typeof g === 'object') {
for (let i = 0; i < responsiveArray.length; i++) {
const breakpoint: Breakpoint = responsiveArray[i];
2019-10-20 12:48:03 +08:00
if (screens[breakpoint] && g[breakpoint] !== undefined) {
results[index] = g[breakpoint] as number;
break;
}
2017-11-01 20:31:26 +08:00
}
} else {
results[index] = g;
2017-11-01 20:31:26 +08:00
}
});
2019-10-20 12:48:03 +08:00
return results;
};
2019-08-05 18:38:10 +08:00
const prefixCls = getPrefixCls('row', customizePrefixCls);
const [wrapSSR, hashId] = useRowStyle(prefixCls);
const gutters = getGutter();
const classes = classNames(
prefixCls,
{
[`${prefixCls}-no-wrap`]: wrap === false,
[`${prefixCls}-${justify}`]: justify,
[`${prefixCls}-${align}`]: align,
[`${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 role="row" {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>
{children}
</div>
</RowContext.Provider>,
);
});
Row.displayName = 'Row';
export default Row;