45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import * as E from '@handpear/enums';
|
|
import { useResponding } from './useResponding';
|
|
|
|
interface SingleColRespondingWidthProps {
|
|
colForm?: Record<keyof typeof E.COL_FORM, number> | number;
|
|
colFormLabel?: Record<keyof typeof E.COL_FORM_LABEL, Record<'span', number>> | number;
|
|
colFormWrapper?: Record<keyof typeof E.COL_FORM_WRAPPER, Record<'span', number>> | number;
|
|
}
|
|
|
|
/** 根据表单 col label wrapper 的配置获取单行节点响应式样式 */
|
|
export function useSingleColRespondingWidth(props?: SingleColRespondingWidthProps) {
|
|
const [label, setLabel] = useState<`calc(${string})` | number>('calc(100%)');
|
|
const [wrapper, setWrapper] = useState<`calc(${string})` | number>('calc(100%)');
|
|
const { responding } = useResponding();
|
|
|
|
useEffect(() => {
|
|
const { colForm = E.COL_FORM, colFormLabel = E.COL_FORM_LABEL, colFormWrapper = E.COL_FORM_WRAPPER } = props || {};
|
|
const grids = 24;
|
|
let cf: number;
|
|
let cfl: number;
|
|
let cfw: number;
|
|
|
|
if (typeof colForm === 'number') cf = colForm;
|
|
else cf = colForm[responding];
|
|
|
|
if (typeof colFormLabel === 'number') cfl = colFormLabel;
|
|
else cfl = colFormLabel[responding].span;
|
|
|
|
if (typeof colFormWrapper === 'number') cfw = colFormWrapper;
|
|
else cfw = colFormWrapper[responding].span;
|
|
|
|
setLabel(`calc(100% / ${grids / cf} / ${grids / cfl})`);
|
|
// prettier-ignore
|
|
setWrapper(`calc(100% - calc(100% / ${grids / cf} / ${grids / cfl}) - calc(100% / ${grids / cf} * (${grids - cfl - cfw} / ${grids})))`);
|
|
|
|
return () => {
|
|
setLabel('calc(100%)');
|
|
setWrapper('calc(100%)');
|
|
};
|
|
}, [responding, props]);
|
|
|
|
return { label, wrapper };
|
|
}
|