2022-05-09 22:20:07 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
2022-06-27 14:25:59 +08:00
|
|
|
import type { FullToken, GenerateStyle } from '../../theme';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme';
|
2022-04-08 15:24:07 +08:00
|
|
|
|
|
|
|
interface GridRowToken extends FullToken<'Grid'> {}
|
2022-03-31 12:45:41 +08:00
|
|
|
|
2022-04-08 15:24:07 +08:00
|
|
|
interface GridColToken extends FullToken<'Grid'> {
|
2022-03-31 12:45:41 +08:00
|
|
|
gridColumns: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
// ============================== Row-Shared ==============================
|
|
|
|
const genGridRowStyle: GenerateStyle<GridRowToken> = (token): CSSObject => {
|
2022-04-08 15:24:07 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-31 12:45:41 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
// Grid system
|
2022-04-08 15:24:07 +08:00
|
|
|
[componentCls]: {
|
2022-03-31 12:45:41 +08:00
|
|
|
display: 'flex',
|
|
|
|
flexFlow: 'row wrap',
|
|
|
|
|
|
|
|
'&::before, &::after': {
|
|
|
|
display: 'flex',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-no-wrap': {
|
|
|
|
flexWrap: 'nowrap',
|
|
|
|
},
|
|
|
|
|
|
|
|
// The origin of the X-axis
|
|
|
|
'&-start': {
|
|
|
|
justifyContent: 'flex-start',
|
|
|
|
},
|
|
|
|
|
|
|
|
// The center of the X-axis
|
|
|
|
'&-center': {
|
|
|
|
justifyContent: 'center',
|
|
|
|
},
|
|
|
|
|
|
|
|
// The opposite of the X-axis
|
|
|
|
'&-end': {
|
|
|
|
justifyContent: 'flex-end',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-space-between': {
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-space-around ': {
|
|
|
|
justifyContent: 'space-around',
|
|
|
|
},
|
|
|
|
|
|
|
|
// Align at the top
|
|
|
|
'&-top': {
|
|
|
|
alignItems: 'flex-start',
|
|
|
|
},
|
|
|
|
|
|
|
|
// Align at the center
|
|
|
|
'&-middle': {
|
|
|
|
alignItems: 'center',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-bottom': {
|
|
|
|
alignItems: 'flex-end',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// ============================== Col-Shared ==============================
|
|
|
|
const genGridColStyle: GenerateStyle<GridColToken> = (token): CSSObject => {
|
2022-04-08 15:24:07 +08:00
|
|
|
const { componentCls } = token;
|
2022-03-31 12:45:41 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
// Grid system
|
2022-04-08 15:24:07 +08:00
|
|
|
[componentCls]: {
|
2022-03-31 12:45:41 +08:00
|
|
|
position: 'relative',
|
|
|
|
maxWidth: '100%',
|
|
|
|
// Prevent columns from collapsing when empty
|
|
|
|
minHeight: 1,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObject => {
|
2022-04-08 15:24:07 +08:00
|
|
|
const { componentCls, gridColumns } = token;
|
2022-03-31 12:45:41 +08:00
|
|
|
|
|
|
|
const gridColumnsStyle: CSSObject = {};
|
|
|
|
for (let i = gridColumns; i >= 0; i--) {
|
|
|
|
if (i === 0) {
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
|
2022-03-31 12:45:41 +08:00
|
|
|
display: 'none',
|
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}-push-${i}`] = {
|
2022-04-19 11:27:09 +08:00
|
|
|
insetInlineStart: 'auto',
|
2022-03-31 12:45:41 +08:00
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}-pull-${i}`] = {
|
2022-04-19 11:27:09 +08:00
|
|
|
insetInlineEnd: 'auto',
|
2022-03-31 12:45:41 +08:00
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = {
|
2022-04-19 11:27:09 +08:00
|
|
|
insetInlineStart: 'auto',
|
2022-03-31 12:45:41 +08:00
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-pull-${i}`] = {
|
2022-04-19 11:27:09 +08:00
|
|
|
insetInlineEnd: 'auto',
|
2022-03-31 12:45:41 +08:00
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = {
|
2022-04-19 11:27:09 +08:00
|
|
|
marginInlineEnd: 0,
|
2022-03-31 12:45:41 +08:00
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = {
|
2022-03-31 12:45:41 +08:00
|
|
|
order: 0,
|
|
|
|
};
|
|
|
|
} else {
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
|
2022-03-31 12:45:41 +08:00
|
|
|
display: 'block',
|
|
|
|
flex: `0 0 ${(i / gridColumns) * 100}%`,
|
|
|
|
maxWidth: `${(i / gridColumns) * 100}%`,
|
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = {
|
2022-04-19 11:27:09 +08:00
|
|
|
insetInlineStart: `${(i / gridColumns) * 100}%`,
|
2022-03-31 12:45:41 +08:00
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-pull-${i}`] = {
|
2022-04-19 11:27:09 +08:00
|
|
|
insetInlineEnd: `${(i / gridColumns) * 100}%`,
|
2022-03-31 12:45:41 +08:00
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = {
|
2022-04-19 11:27:09 +08:00
|
|
|
marginInlineStart: `${(i / gridColumns) * 100}%`,
|
2022-03-31 12:45:41 +08:00
|
|
|
};
|
2022-04-08 15:24:07 +08:00
|
|
|
gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = {
|
2022-03-31 12:45:41 +08:00
|
|
|
order: i,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return gridColumnsStyle;
|
|
|
|
};
|
|
|
|
|
|
|
|
const genGridStyle = (token: GridColToken, sizeCls: string): CSSObject =>
|
|
|
|
genLoopGridColumnsStyle(token, sizeCls);
|
|
|
|
|
|
|
|
const genGridMediaStyle = (
|
|
|
|
token: GridColToken,
|
|
|
|
screenSize: number,
|
|
|
|
sizeCls: string,
|
|
|
|
): CSSObject => ({
|
|
|
|
[`@media (min-width: ${screenSize}px)`]: {
|
|
|
|
...genGridStyle(token, sizeCls),
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
// ============================== Export ==============================
|
2022-04-08 15:24:07 +08:00
|
|
|
export const useRowStyle = genComponentStyleHook('Grid', token => [genGridRowStyle(token)]);
|
2022-03-31 12:45:41 +08:00
|
|
|
|
2022-04-08 15:24:07 +08:00
|
|
|
export const useColStyle = genComponentStyleHook('Grid', token => {
|
2022-04-11 16:04:00 +08:00
|
|
|
const gridToken: GridColToken = mergeToken<GridColToken>(token, {
|
2022-06-01 16:59:43 +08:00
|
|
|
gridColumns: 24, // Row is divided into 24 parts in Grid
|
2022-04-11 16:04:00 +08:00
|
|
|
});
|
2022-03-31 12:45:41 +08:00
|
|
|
|
|
|
|
const gridMediaSizesMap = {
|
|
|
|
'-sm': gridToken.screenSMMin,
|
|
|
|
'-md': gridToken.screenMDMin,
|
|
|
|
'-lg': gridToken.screenLGMin,
|
|
|
|
'-xl': gridToken.screenXLMin,
|
|
|
|
'-xxl': gridToken.screenXXLMin,
|
|
|
|
};
|
|
|
|
|
|
|
|
return [
|
2022-04-08 15:24:07 +08:00
|
|
|
genGridColStyle(gridToken),
|
|
|
|
genGridStyle(gridToken, ''),
|
|
|
|
genGridStyle(gridToken, '-xs'),
|
|
|
|
Object.keys(gridMediaSizesMap)
|
|
|
|
.map((key: keyof typeof gridMediaSizesMap) =>
|
|
|
|
genGridMediaStyle(gridToken, gridMediaSizesMap[key], key),
|
|
|
|
)
|
|
|
|
.reduce((pre, cur) => ({ ...pre, ...cur }), {}),
|
2022-03-31 12:45:41 +08:00
|
|
|
];
|
2022-04-08 15:24:07 +08:00
|
|
|
});
|