ant-design/components/form/hooks/useVariants.ts
thinkasany 61f4aa82c0
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
feat: ConfigProvider support variant for Card (#52552)
* feat: ConfigProvider support bordered for Card

Co-authored-by: xiaobebe <wyy.xb@qq.com>

* Revert "feat: ConfigProvider support bordered for Card"

This reverts commit f84573cbbe.

* use useVariant

* docs

* update

* fix

* add warning

* fix

---------

Co-authored-by: xiaobebe <wyy.xb@qq.com>
2025-01-27 17:45:24 +08:00

49 lines
1.3 KiB
TypeScript

import * as React from 'react';
import { VariantContext } from '../context';
import type { Variant, ConfigProviderProps } from '../../config-provider';
import { ConfigContext, Variants } from '../../config-provider';
type VariantComponents = keyof Pick<
ConfigProviderProps,
| 'input'
| 'inputNumber'
| 'textArea'
| 'mentions'
| 'select'
| 'cascader'
| 'treeSelect'
| 'datePicker'
| 'timePicker'
| 'rangePicker'
| 'card'
>;
/**
* Compatible for legacy `bordered` prop.
*/
const useVariant = (
component: VariantComponents,
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;
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';
}
const enableVariantCls = Variants.includes(mergedVariant);
return [mergedVariant, enableVariantCls];
};
export default useVariant;