2023-09-14 17:04:05 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
|
|
|
|
import type { FlexProps } from './interface';
|
|
|
|
|
2024-04-11 22:29:50 +08:00
|
|
|
export const flexWrapValues: React.CSSProperties['flexWrap'][] = ['wrap', 'nowrap', 'wrap-reverse'];
|
2023-09-14 17:04:05 +08:00
|
|
|
|
2024-04-11 22:29:50 +08:00
|
|
|
export const justifyContentValues: React.CSSProperties['justifyContent'][] = [
|
2023-09-14 17:04:05 +08:00
|
|
|
'flex-start',
|
|
|
|
'flex-end',
|
|
|
|
'start',
|
|
|
|
'end',
|
|
|
|
'center',
|
|
|
|
'space-between',
|
|
|
|
'space-around',
|
|
|
|
'space-evenly',
|
|
|
|
'stretch',
|
|
|
|
'normal',
|
|
|
|
'left',
|
|
|
|
'right',
|
2024-04-11 22:29:50 +08:00
|
|
|
];
|
2023-09-14 17:04:05 +08:00
|
|
|
|
2024-04-11 22:29:50 +08:00
|
|
|
export const alignItemsValues: React.CSSProperties['alignItems'][] = [
|
2023-09-14 17:04:05 +08:00
|
|
|
'center',
|
|
|
|
'start',
|
|
|
|
'end',
|
|
|
|
'flex-start',
|
|
|
|
'flex-end',
|
|
|
|
'self-start',
|
|
|
|
'self-end',
|
|
|
|
'baseline',
|
|
|
|
'normal',
|
|
|
|
'stretch',
|
2024-04-11 22:29:50 +08:00
|
|
|
];
|
2023-09-14 17:04:05 +08:00
|
|
|
|
|
|
|
const genClsWrap = (prefixCls: string, props: FlexProps) => {
|
2024-04-11 22:29:50 +08:00
|
|
|
const wrap = props.wrap === true ? 'wrap' : props.wrap;
|
|
|
|
return {
|
|
|
|
[`${prefixCls}-wrap-${wrap}`]: wrap && flexWrapValues.includes(wrap),
|
|
|
|
};
|
2023-09-14 17:04:05 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const genClsAlign = (prefixCls: string, props: FlexProps) => {
|
|
|
|
const alignCls: Record<PropertyKey, boolean> = {};
|
|
|
|
alignItemsValues.forEach((cssKey) => {
|
|
|
|
alignCls[`${prefixCls}-align-${cssKey}`] = props.align === cssKey;
|
|
|
|
});
|
|
|
|
alignCls[`${prefixCls}-align-stretch`] = !props.align && !!props.vertical;
|
|
|
|
return alignCls;
|
|
|
|
};
|
|
|
|
|
|
|
|
const genClsJustify = (prefixCls: string, props: FlexProps) => {
|
|
|
|
const justifyCls: Record<PropertyKey, boolean> = {};
|
|
|
|
justifyContentValues.forEach((cssKey) => {
|
|
|
|
justifyCls[`${prefixCls}-justify-${cssKey}`] = props.justify === cssKey;
|
|
|
|
});
|
|
|
|
return justifyCls;
|
|
|
|
};
|
|
|
|
|
|
|
|
function createFlexClassNames(prefixCls: string, props: FlexProps) {
|
|
|
|
return classNames({
|
|
|
|
...genClsWrap(prefixCls, props),
|
|
|
|
...genClsAlign(prefixCls, props),
|
|
|
|
...genClsJustify(prefixCls, props),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export default createFlexClassNames;
|