chore: use React.useContext() replace <Context.Provider /> (#39950)

* chore: use React.useContext() replace <Context.Provider /> * fix * fix * fix * fix * fix
2024-11-24 11:10:01 +08:00 · 2023-01-01 21:17:05 +08:00 · 2023-01-01 21:17:05 +08:00 · 59a332bf47
commit 59a332bf47
parent e9b5805fc2
5 changed files with 169 additions and 175 deletions
--- a/components/avatar/SizeContext.tsx
+++ b/components/avatar/SizeContext.tsx
@ -10,12 +10,9 @@ export interface SizeContextProps {
  children?: React.ReactNode;
 }

-export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
-  <SizeContext.Consumer>
-    {(originSize) => (
-      <SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>
-    )}
-  </SizeContext.Consumer>
-);
+export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => {
+  const originSize = React.useContext<AvatarSize>(SizeContext);
+  return <SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>;
+};

 export default SizeContext;
--- a/components/config-provider/SizeContext.tsx
+++ b/components/config-provider/SizeContext.tsx
@ -9,12 +9,9 @@ export interface SizeContextProps {
  children?: React.ReactNode;
 }

-export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
-  <SizeContext.Consumer>
-    {(originSize) => (
-      <SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>
-    )}
-  </SizeContext.Consumer>
-);
+export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => {
+  const originSize = React.useContext<SizeType>(SizeContext);
+  return <SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>;
+};

 export default SizeContext;
--- a/components/form/FormItemLabel.tsx
+++ b/components/form/FormItemLabel.tsx
@ -55,89 +55,89 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
 }) => {
  const [formLocale] = useLocaleReceiver('Form');

-  if (!label) return null;
+  const {
+    vertical,
+    labelAlign: contextLabelAlign,
+    labelCol: contextLabelCol,
+    labelWrap,
+    colon: contextColon,
+  } = React.useContext<FormContextProps>(FormContext);
+
+  if (!label) {
+    return null;
+  }
+
+  const mergedLabelCol: ColProps = labelCol || contextLabelCol || {};
+
+  const mergedLabelAlign: FormLabelAlign | undefined = labelAlign || contextLabelAlign;
+
+  const labelClsBasic = `${prefixCls}-item-label`;
+  const labelColClassName = classNames(
+    labelClsBasic,
+    mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
+    mergedLabelCol.className,
+    {
+      [`${labelClsBasic}-wrap`]: !!labelWrap,
+    },
+  );
+
+  let labelChildren = label;
+
+  // Keep label is original where there should have no colon
+  const computedColon = colon === true || (contextColon !== false && colon !== false);
+  const haveColon = computedColon && !vertical;
+
+  // Remove duplicated user input colon
+  if (haveColon && typeof label === 'string' && (label as string).trim() !== '') {
+    labelChildren = (label as string).replace(/[:|：]\s*$/, '');
+  }
+
+  // Tooltip
+  const tooltipProps = toTooltipProps(tooltip);
+
+  if (tooltipProps) {
+    const { icon = <QuestionCircleOutlined />, ...restTooltipProps } = tooltipProps;
+    const tooltipNode = (
+      <Tooltip {...restTooltipProps}>
+        {React.cloneElement(icon, { className: `${prefixCls}-item-tooltip`, title: '' })}
+      </Tooltip>
+    );
+
+    labelChildren = (
+      <>
+        {labelChildren}
+        {tooltipNode}
+      </>
+    );
+  }
+
+  if (requiredMark === 'optional' && !required) {
+    labelChildren = (
+      <>
+        {labelChildren}
+        <span className={`${prefixCls}-item-optional`} title="">
+          {formLocale?.optional || defaultLocale.Form?.optional}
+        </span>
+      </>
+    );
+  }
+
+  const labelClassName = classNames({
+    [`${prefixCls}-item-required`]: required,
+    [`${prefixCls}-item-required-mark-optional`]: requiredMark === 'optional',
+    [`${prefixCls}-item-no-colon`]: !computedColon,
+  });

  return (
-    <FormContext.Consumer key="label">
-      {({
-        vertical,
-        labelAlign: contextLabelAlign,
-        labelCol: contextLabelCol,
-        labelWrap,
-        colon: contextColon,
-      }: FormContextProps) => {
-        const mergedLabelCol: ColProps = labelCol || contextLabelCol || {};
-
-        const mergedLabelAlign: FormLabelAlign | undefined = labelAlign || contextLabelAlign;
-
-        const labelClsBasic = `${prefixCls}-item-label`;
-        const labelColClassName = classNames(
-          labelClsBasic,
-          mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
-          mergedLabelCol.className,
-          {
-            [`${labelClsBasic}-wrap`]: !!labelWrap,
-          },
-        );
-
-        let labelChildren = label;
-        // Keep label is original where there should have no colon
-        const computedColon = colon === true || (contextColon !== false && colon !== false);
-        const haveColon = computedColon && !vertical;
-        // Remove duplicated user input colon
-        if (haveColon && typeof label === 'string' && (label as string).trim() !== '') {
-          labelChildren = (label as string).replace(/[:|：]\s*$/, '');
-        }
-
-        // Tooltip
-        const tooltipProps = toTooltipProps(tooltip);
-        if (tooltipProps) {
-          const { icon = <QuestionCircleOutlined />, ...restTooltipProps } = tooltipProps;
-          const tooltipNode = (
-            <Tooltip {...restTooltipProps}>
-              {React.cloneElement(icon, { className: `${prefixCls}-item-tooltip`, title: '' })}
-            </Tooltip>
-          );
-
-          labelChildren = (
-            <>
-              {labelChildren}
-              {tooltipNode}
-            </>
-          );
-        }
-
-        // Add required mark if optional
-        if (requiredMark === 'optional' && !required) {
-          labelChildren = (
-            <>
-              {labelChildren}
-              <span className={`${prefixCls}-item-optional`} title="">
-                {formLocale?.optional || defaultLocale.Form?.optional}
-              </span>
-            </>
-          );
-        }
-
-        const labelClassName = classNames({
-          [`${prefixCls}-item-required`]: required,
-          [`${prefixCls}-item-required-mark-optional`]: requiredMark === 'optional',
-          [`${prefixCls}-item-no-colon`]: !computedColon,
-        });
-
-        return (
-          <Col {...mergedLabelCol} className={labelColClassName}>
-            <label
-              htmlFor={htmlFor}
-              className={labelClassName}
-              title={typeof label === 'string' ? label : ''}
-            >
-              {labelChildren}
-            </label>
-          </Col>
-        );
-      }}
-    </FormContext.Consumer>
+    <Col {...mergedLabelCol} className={labelColClassName}>
+      <label
+        htmlFor={htmlFor}
+        className={labelClassName}
+        title={typeof label === 'string' ? label : ''}
+      >
+        {labelChildren}
+      </label>
+    </Col>
  );
 };

--- a/components/menu/MenuItem.tsx
+++ b/components/menu/MenuItem.tsx
@ -38,59 +38,62 @@ const MenuItem: React.FC<MenuItemProps> = (props) => {
    }
    return wrapNode;
  };
-  const renderItem = ({ siderCollapsed }: SiderContextProps) => {
-    let tooltipTitle = title;
-    if (typeof title === 'undefined') {
-      tooltipTitle = firstLevel ? children : '';
-    } else if (title === false) {
-      tooltipTitle = '';
-    }
-    const tooltipProps: TooltipProps = { title: tooltipTitle };
-    if (!siderCollapsed && !isInlineCollapsed) {
-      tooltipProps.title = null;
-      // Reset `open` to fix control mode tooltip display not correct
-      // ref: https://github.com/ant-design/ant-design/issues/16742
-      tooltipProps.open = false;
-    }
-    const childrenLength = toArray(children).length;

-    let returnNode = (
-      <Item
-        {...omit(props, ['title', 'icon', 'danger'])}
-        className={classNames(
-          {
-            [`${prefixCls}-item-danger`]: danger,
-            [`${prefixCls}-item-only-child`]: (icon ? childrenLength + 1 : childrenLength) === 1,
-          },
-          className,
-        )}
-        title={typeof title === 'string' ? title : undefined}
+  const { siderCollapsed } = React.useContext<SiderContextProps>(SiderContext);
+
+  let tooltipTitle = title;
+
+  if (typeof title === 'undefined') {
+    tooltipTitle = firstLevel ? children : '';
+  } else if (title === false) {
+    tooltipTitle = '';
+  }
+
+  const tooltipProps: TooltipProps = { title: tooltipTitle };
+
+  if (!siderCollapsed && !isInlineCollapsed) {
+    tooltipProps.title = null;
+    // Reset `open` to fix control mode tooltip display not correct
+    // ref: https://github.com/ant-design/ant-design/issues/16742
+    tooltipProps.open = false;
+  }
+
+  const childrenLength = toArray(children).length;
+
+  let returnNode = (
+    <Item
+      {...omit(props, ['title', 'icon', 'danger'])}
+      className={classNames(
+        {
+          [`${prefixCls}-item-danger`]: danger,
+          [`${prefixCls}-item-only-child`]: (icon ? childrenLength + 1 : childrenLength) === 1,
+        },
+        className,
+      )}
+      title={typeof title === 'string' ? title : undefined}
+    >
+      {cloneElement(icon, {
+        className: classNames(
+          isValidElement(icon) ? icon.props?.className : '',
+          `${prefixCls}-item-icon`,
+        ),
+      })}
+      {renderItemChildren(isInlineCollapsed)}
+    </Item>
+  );
+
+  if (!disableMenuItemTitleTooltip) {
+    returnNode = (
+      <Tooltip
+        {...tooltipProps}
+        placement={direction === 'rtl' ? 'left' : 'right'}
+        overlayClassName={`${prefixCls}-inline-collapsed-tooltip`}
      >
-        {cloneElement(icon, {
-          className: classNames(
-            isValidElement(icon) ? icon.props?.className : '',
-            `${prefixCls}-item-icon`,
-          ),
-        })}
-        {renderItemChildren(isInlineCollapsed)}
-      </Item>
+        {returnNode}
+      </Tooltip>
    );
-
-    if (!disableMenuItemTitleTooltip) {
-      returnNode = (
-        <Tooltip
-          {...tooltipProps}
-          placement={direction === 'rtl' ? 'left' : 'right'}
-          overlayClassName={`${prefixCls}-inline-collapsed-tooltip`}
-        >
-          {returnNode}
-        </Tooltip>
-      );
-    }
-
-    return returnNode;
-  };
-  return <SiderContext.Consumer>{renderItem}</SiderContext.Consumer>;
+  }
+  return returnNode;
 };

 export default MenuItem;
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@ -47,7 +47,7 @@ function Tabs({
  ...props
 }: TabsProps) {
  const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = props;
-  const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
+  const { direction, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('tabs', customizePrefixCls);
  const [wrapSSR, hashId] = useStyle(prefixCls);

@ -74,36 +74,33 @@ function Tabs({

  const mergedAnimated = useAnimateConfig(prefixCls, animated);

+  const contextSize = React.useContext<SizeType>(SizeContext);
+
+  const size = propSize !== undefined ? propSize : contextSize;
+
  return wrapSSR(
-    <SizeContext.Consumer>
-      {(contextSize) => {
-        const size = propSize !== undefined ? propSize : contextSize;
-        return (
-          <RcTabs
-            direction={direction}
-            getPopupContainer={getPopupContainer}
-            moreTransitionName={`${rootPrefixCls}-slide-up`}
-            {...props}
-            items={mergedItems}
-            className={classNames(
-              {
-                [`${prefixCls}-${size}`]: size,
-                [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
-                [`${prefixCls}-editable-card`]: type === 'editable-card',
-                [`${prefixCls}-centered`]: centered,
-              },
-              className,
-              hashId,
-            )}
-            popupClassName={classNames(popupClassName, hashId)}
-            editable={editable}
-            moreIcon={moreIcon}
-            prefixCls={prefixCls}
-            animated={mergedAnimated}
-          />
-        );
-      }}
-    </SizeContext.Consumer>,
+    <RcTabs
+      direction={direction}
+      getPopupContainer={getPopupContainer}
+      moreTransitionName={`${rootPrefixCls}-slide-up`}
+      {...props}
+      items={mergedItems}
+      className={classNames(
+        {
+          [`${prefixCls}-${size}`]: size,
+          [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
+          [`${prefixCls}-editable-card`]: type === 'editable-card',
+          [`${prefixCls}-centered`]: centered,
+        },
+        className,
+        hashId,
+      )}
+      popupClassName={classNames(popupClassName, hashId)}
+      editable={editable}
+      moreIcon={moreIcon}
+      prefixCls={prefixCls}
+      animated={mergedAnimated}
+    />,
  );
 }