antd/es/form/hooks/useVariants.js

An enterprise-class UI design language and React components implementation

import * as React from 'react';
import { isPlainObject } from '../../_util/is';
import { ConfigContext, Variants } from '../../config-provider';
import { VariantContext } from '../context';
/**
 * Compatible for legacy `bordered` prop.
 */
const useVariant = (component, variant, legacyBordered, fallbackComponent) => {
  const options = isPlainObject(legacyBordered) ? legacyBordered : undefined;
  const config = React.useContext(ConfigContext);
  const {
    variant: configVariant,
    [component]: componentConfig
  } = config;
  const ctxVariant = React.useContext(VariantContext);
  const fallbackComponentConfig = fallbackComponent ? config[fallbackComponent] : undefined;
  const configComponentVariant = componentConfig?.variant ?? fallbackComponentConfig?.variant;
  const isVariantConfigured = typeof variant !== 'undefined' || legacyBordered === false || typeof ctxVariant !== 'undefined' || typeof configComponentVariant !== 'undefined' || typeof configVariant !== 'undefined';
  let mergedVariant;
  if (typeof variant !== 'undefined') {
    mergedVariant = variant;
  } else if (legacyBordered === false) {
    mergedVariant = 'borderless';
  } else {
    // form variant > component global variant > fallback component global variant > global variant
    mergedVariant = ctxVariant ?? configComponentVariant ?? configVariant ?? options?.defaultVariant ?? 'outlined';
  }
  const supportedVariants = options?.variants ?? Variants;
  if (options && !supportedVariants.includes(mergedVariant)) {
    mergedVariant = options.defaultVariant;
  }
  const enableVariantCls = supportedVariants.includes(mergedVariant);
  return [mergedVariant, enableVariantCls, isVariantConfigured];
};
export default useVariant;