ant-design/components/form/hooks/useVariants.ts

48 lines
1.3 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2023-12-22 10:05:15 +08:00
import { VariantContext } from '../context';
import type { Variant, ConfigProviderProps } from '../../config-provider';
import { ConfigContext, Variants } from '../../config-provider';
2023-12-22 10:05:15 +08:00
type VariantComponents = keyof Pick<
ConfigProviderProps,
| 'input'
| 'inputNumber'
| 'textArea'
| 'mentions'
| 'select'
| 'cascader'
| 'treeSelect'
| 'datePicker'
| 'timePicker'
| 'rangePicker'
>;
2023-12-22 10:05:15 +08:00
/**
* Compatible for legacy `bordered` prop.
*/
const useVariant = (
component: VariantComponents,
2023-12-22 10:05:15 +08:00
variant: Variant | undefined,
legacyBordered: boolean | undefined = undefined,
): [Variant, boolean] => {
const { variant: configVariant, [component]: componentConfig } = React.useContext(ConfigContext);
const ctxVariant = React.useContext(VariantContext);
const configComponentVariant = componentConfig?.variant;
2023-12-22 10:05:15 +08:00
let mergedVariant: Variant;
if (typeof variant !== 'undefined') {
mergedVariant = variant;
} else if (legacyBordered === false) {
mergedVariant = 'borderless';
} else {
// form variant > component global variant > global variant
mergedVariant = ctxVariant ?? configComponentVariant ?? configVariant ?? 'outlined';
2023-12-22 10:05:15 +08:00
}
const enableVariantCls = Variants.includes(mergedVariant);
return [mergedVariant, enableVariantCls];
};
export default useVariant;