2024-12-15 15:53:51 +08:00
|
|
|
import * as React from 'react';
|
2024-04-08 14:04:08 +08:00
|
|
|
|
2023-12-22 10:05:15 +08:00
|
|
|
import { VariantContext } from '../context';
|
2024-06-21 17:47:09 +08:00
|
|
|
import type { Variant, ConfigProviderProps } from '../../config-provider';
|
|
|
|
import { ConfigContext, Variants } from '../../config-provider';
|
2023-12-22 10:05:15 +08:00
|
|
|
|
2024-06-21 17:47:09 +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 = (
|
2024-06-21 17:47:09 +08:00
|
|
|
component: VariantComponents,
|
2023-12-22 10:05:15 +08:00
|
|
|
variant: Variant | undefined,
|
|
|
|
legacyBordered: boolean | undefined = undefined,
|
|
|
|
): [Variant, boolean] => {
|
2024-12-15 15:53:51 +08:00
|
|
|
const { variant: configVariant, [component]: componentConfig } = React.useContext(ConfigContext);
|
|
|
|
const ctxVariant = React.useContext(VariantContext);
|
2024-06-21 17:47:09 +08:00
|
|
|
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 {
|
2024-06-21 17:47:09 +08:00
|
|
|
// 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;
|