refactor: 采用usePrefix以及withConfigConsumer进行组件 prefixCls 构建 (#485)

* feat: use-prefix-cls * fix: import * refactor(components): use component-prefix-cl in all components affects: @gio-design/components * refactor(components): use context rootPrefixCls in components affects: @gio-design/components * refactor(breadcrumb): change prefixCls in BreadcrumbItem affects: @gio-design/components Co-authored-by: i18u <iahu1988@gmail.com>
growingio · Nov 18, 2020 · d80ea0c · d80ea0c · vercel · Nov 18, 2020
1 parent 79974bc
commit d80ea0c
Show file tree

Hide file tree

Showing 110 changed files with 1,218 additions and 1,123 deletions.
diff --git a/packages/components/src/components/alert/alert.tsx b/packages/components/src/components/alert/alert.tsx
@@ -3,15 +3,17 @@ import classnames from 'classnames';
 import _ from 'lodash';
 import { CheckCircleFilled, WarningFilled, InformationFilled, CloseCircleFilled, Close } from '@gio-design/icons';
 import { AlertProps } from './interfaces';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 
 const Alert: React.FC<AlertProps> = (props: AlertProps) => {
+  const prefixCls = usePrefixCls('alert');
   const [alertStatus, setAlertStatus] = useState(true);
   const {
     message,
     description,
     closeable,
     showIcon = false,
-    colseText,
+    closeText,
     onClose,
     icon,
     type = 'info',
@@ -42,31 +44,31 @@ const Alert: React.FC<AlertProps> = (props: AlertProps) => {
     <div>
       <div
         className={classnames(
-          'gio-alert',
-          size === 'small' ? 'gio-alert-small' : '',
-          alertStatus ? `gio-alert-${type}` : 'gio-alert-close'
+          prefixCls,
+          size === 'small' ? `${prefixCls}-small` : '',
+          alertStatus ? `${prefixCls}-${type}` : `${prefixCls}-close`
         )}
       >
-        <div className="gio-alert-icon" style={{ display: showIcon ? 'block' : 'none' }}>
+        <div className={`${prefixCls}-icon`} style={{ display: showIcon ? 'block' : 'none' }}>
           {getIcon()}
         </div>
-        <div className="gio-alert-content">
-          <div className="gio-alert-content-title" style={{ display: message ? 'block' : 'none' }}>
+        <div className={`${prefixCls}-content`}>
+          <div className={`${prefixCls}-content-title`} style={{ display: message ? 'block' : 'none' }}>
             {message || null}
           </div>
-          <div className="gio-alert-content-description" style={{ display: description ? 'block' : 'none' }}>
+          <div className={`${prefixCls}-content-description`} style={{ display: description ? 'block' : 'none' }}>
             {description || null}
           </div>
         </div>
         <div
-          className="gio-alert-closeIcon"
+          className={`${prefixCls}-closeIcon`}
           style={{ display: closeable ? 'block' : 'none' }}
           onClick={closeAlert}
           role="button"
           tabIndex={0}
           onKeyPress={_.noop}
         >
-          {colseText || <Close />}
+          {closeText || <Close />}
         </div>
       </div>
     </div>

diff --git a/packages/components/src/components/alert/interfaces.ts b/packages/components/src/components/alert/interfaces.ts
@@ -14,7 +14,7 @@ export interface AlertProps {
   /**
    自定义关闭按钮
    */
-  colseText?: React.ReactNode;
+  closeText?: React.ReactNode;
   /**
    警告提示的辅助性文字介绍
    */

diff --git a/packages/components/src/components/alert/style/index.less b/packages/components/src/components/alert/style/index.less
@@ -1,6 +1,8 @@
 @import '../../../stylesheet/index.less';
 
-.gio-alert {
+@alert-prefix-cls: ~'@{component-prefix}-alert';
+
+.@{alert-prefix-cls} {
   display: flex;
   align-items: center;
   width: 100%;
@@ -16,95 +18,95 @@
     padding-top: 1px;
   }
 
-  & .gio-alert-content {
+  & .@{alert-prefix-cls}-content {
     flex: 1;
     margin: 0 8px;
     color: @color-text-alert-content;
     font-size: @size-font-14;
     font-family: @font-family-primary;
     line-height: 22px;
 
-    & .gio-alert-content-title {
+    & .@{alert-prefix-cls}-content-title {
       width: 100%;
       overflow: hidden;
       font-weight: @weight-font-medium;
       text-overflow: ellipsis;
     }
 
-    & .gio-alert-content-description {
+    & .@{alert-prefix-cls}-content-description {
       width: 100%;
       letter-spacing: 0;
     }
   }
 
-  & .gio-alert-closeIcon {
+  & .@{alert-prefix-cls}-closeIcon {
     flex-shrink: 0;
     align-self: flex-start;
     font-weight: @weight-font-semi-bold;
     cursor: pointer;
   }
 }
 
-.gio-alert-close {
+.@{alert-prefix-cls}-close {
   display: none;
 }
 
-.gio-alert-info {
+.@{alert-prefix-cls}-info {
   background-color: @color-background-alert-information;
 
-  & .gio-alert-closeIcon {
+  & .@{alert-prefix-cls}-closeIcon {
     svg {
       fill: @palette-blue-6;
     }
   }
 
-  & .gio-alert-icon {
+  & .@{alert-prefix-cls}-icon {
     svg {
       fill: @palette-blue-6;
     }
   }
 }
 
-.gio-alert-success {
+.@{alert-prefix-cls}-success {
   background-color: @color-background-alert-success;
-  & .gio-alert-closeIcon {
+  & .@{alert-prefix-cls}-closeIcon {
     fill: @palette-green-6;
   }
 
-  & .gio-alert-icon {
+  & .@{alert-prefix-cls}-icon {
     fill: @palette-green-6;
   }
 }
 
-.gio-alert-warning {
+.@{alert-prefix-cls}-warning {
   background-color: @color-background-alert-warning;
-  & .gio-alert-closeIcon {
+  & .@{alert-prefix-cls}-closeIcon {
     svg {
       fill: @palette-yellow-6;
     }
   }
 
-  & .gio-alert-icon {
+  & .@{alert-prefix-cls}-icon {
     svg {
       fill: @palette-yellow-6;
     }
   }
 }
 
-.gio-alert-error {
+.@{alert-prefix-cls}-error {
   background-color: @color-background-alert-error;
-  & .gio-alert-closeIcon {
+  & .@{alert-prefix-cls}-closeIcon {
     fill: @palette-red-6;
   }
 
-  & .gio-alert-icon {
+  & .@{alert-prefix-cls}-icon {
     fill: @palette-red-6;
   }
 }
 
-.gio-alert-small {
+.@{alert-prefix-cls}-small {
   padding: 8px 16px;
-  & .gio-alert-content {
+  & .@{alert-prefix-cls}-content {
     font-size: @size-font-12;
   }
 }
diff --git a/packages/components/src/components/avatar/Avatar.tsx b/packages/components/src/components/avatar/Avatar.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { More } from '@gio-design/icons';
 import { isNil } from 'lodash';
 import Tooltip from '../tooltip';
 import { AvatarProps } from './interfaces';
-import { ConfigContext } from '../config-provider';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import composeRef from '../../utils/composeRef';
 
 const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProps, ref: React.Ref<HTMLSpanElement>) => {
@@ -22,7 +22,6 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProp
     ...rest
   } = props;
 
-  const { getPrefixCls } = useContext(ConfigContext);
   const [isImgExist, setIsImgExist] = useState<boolean>(src !== undefined);
   const [scale, setScale] = useState<number>(1);
   const nodeRef = useRef<HTMLSpanElement>(null);
@@ -37,7 +36,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProp
     }
   }, [userName]);
 
-  const prefixCls = getPrefixCls('avatar', customizePrefixCls);
+  const prefixCls = usePrefixCls('avatar', customizePrefixCls);
   const classString = classNames(className, prefixCls, {
     [`${prefixCls}-sm`]: size === 'small',
     [`${prefixCls}-df`]: size === 'default',

diff --git a/packages/components/src/components/avatar/AvatarGroup.tsx b/packages/components/src/components/avatar/AvatarGroup.tsx
@@ -1,14 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
 import Avatar from './Avatar';
 import { AvatarGroupProps, UserAvatarType } from './interfaces';
-import { ConfigContext } from '../config-provider';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 
 const AvatarGroup: React.FC<AvatarGroupProps> = (props: AvatarGroupProps) => {
   const { number = 5, users = [], className, placement = 'bottom', style, displayTooltip = true } = props;
-  const { getPrefixCls } = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('avatar');
+  const prefixCls = usePrefixCls('avatar');
 
   let children = null;
   const renderAvatarGroup = (sliceUsers: UserAvatarType[]) =>

diff --git a/packages/components/src/components/banner/Banner.tsx b/packages/components/src/components/banner/Banner.tsx
@@ -1,16 +1,13 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { Close } from '@gio-design/icons';
 import className from 'classnames';
-import { ConfigContext } from '../config-provider';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import { BannerProps } from './interface';
 
 const Banner: React.FC<BannerProps> = (props: BannerProps) => {
-  const {
-    type = 'normal', content, closeable = true, onClose, button, prefixCls: customizePrefixCls,
-  } = props;
+  const { type = 'normal', content, closeable = true, onClose, button, prefixCls: customizePrefixCls } = props;
   const [visible, setVisible] = useState(true);
-  const { getPrefixCls } = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('banner', customizePrefixCls);
+  const prefixCls = usePrefixCls('banner', customizePrefixCls);
   const onCloseBanner = () => {
     setVisible(false);
     onClose?.();
@@ -22,13 +19,10 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
         `${prefixCls}`,
         `${prefixCls}-${type}`,
         closeable && `${prefixCls}-closeable`,
-        !visible && `${prefixCls}-close`,
+        !visible && `${prefixCls}-close`
       )}
     >
-      <div className={className(`${prefixCls}-content`, button && `${prefixCls}-content-button`)}>
-        {' '}
-        {content}
-      </div>
+      <div className={className(`${prefixCls}-content`, button && `${prefixCls}-content-button`)}> {content}</div>
       <div className={className(`${prefixCls}-button`)}>{button}</div>
       <div
         className={className(`${prefixCls}-closeIcon`)}

diff --git a/packages/components/src/components/breadcrumb/Breadcrumb.tsx b/packages/components/src/components/breadcrumb/Breadcrumb.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
-import { ConfigContext } from '../config-provider';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import { cloneElement } from '../../utils/reactNode';
 import devWarning from '../../utils/devWarning';
 import { Route, BreadcrumbProps } from './interface';
@@ -55,10 +55,8 @@ const Breadcrumb: BreadcrumbInterface = ({
   params = {},
   ...restProps
 }: BreadcrumbProps) => {
-  const { getPrefixCls } = React.useContext(ConfigContext);
-
   let crumbs;
-  const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
+  const prefixCls = usePrefixCls('breadcrumb', customizePrefixCls);
   if (routes && routes.length > 0) {
     const paths: string[] = [];
     crumbs = routes.map((route: Route) => {

diff --git a/packages/components/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/components/src/components/breadcrumb/BreadcrumbItem.tsx
@@ -3,27 +3,29 @@ import React from 'react';
 import classnames from 'classnames';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import { BreadcrumbItemProps } from './interface';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 
 interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
   GIO_BREADCRUMB_ITEM: boolean;
 }
 
 const BreadcrumbItem: BreadcrumbItemInterface = (props: BreadcrumbItemProps) => {
   const { children, separator, ...restProps } = props;
+  const prefixCls = usePrefixCls('breadcrumb');
   const link =
     'href' in restProps ? (
-      <a className="gio-breadcrumb-item-link-target" {...restProps}>
+      <a className={`${prefixCls}-item-link-target`} {...restProps}>
         {children}
       </a>
     ) : (
-      <span className="gio-breadcrumb-item-link-target" {...restProps}>
+      <span className={`${prefixCls}-item-link-target`} {...restProps}>
         {children}
       </span>
     );
 
   if (children) {
     return (
-      <span className={classnames('gio-breadcrumb-item', 'gio-breadcrumb-item-link')}>
+      <span className={classnames(`${prefixCls}-item`, `${prefixCls}-item-link`)}>
         {link}
         {separator && separator !== '' && <BreadcrumbSeparator separator={separator} />}
       </span>

diff --git a/packages/components/src/components/breadcrumb/BreadcrumbSeparator.tsx b/packages/components/src/components/breadcrumb/BreadcrumbSeparator.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import { BreadcrumbSeparatorProps } from './interface';
 
 interface BreadcrumbSeparatorInterface extends React.FC<BreadcrumbSeparatorProps> {
@@ -7,7 +8,8 @@ interface BreadcrumbSeparatorInterface extends React.FC<BreadcrumbSeparatorProps
 
 const BreadcrumbSeparator: BreadcrumbSeparatorInterface = (props: BreadcrumbSeparatorProps) => {
   const { separator = '/' } = props;
-  return <span className="gio-breadcrumb-separator">{separator}</span>;
+  const prefixCls = usePrefixCls('breadcrumb');
+  return <span className={`${prefixCls}-separator`}>{separator}</span>;
 };
 
 BreadcrumbSeparator.GIO_BREADCRUMB_SEPARATOR = true;

diff --git a/packages/components/src/components/breadcrumb/style/index.less b/packages/components/src/components/breadcrumb/style/index.less
@@ -1,12 +1,14 @@
 @import '../../../stylesheet/index.less';
 
-.gio-breadcrumb {
+@breadcrumb-prefix-cls: ~'@{component-prefix}-breadcrumb';
+
+.@{breadcrumb-prefix-cls} {
   height: 22px;
   color: @color-text-breadcrumb-normal;
   font-size: 14px;
 
-  &-item.gio-breadcrumb-item-link {
-    .gio-breadcrumb-item-link-target {
+  &-item.@{breadcrumb-prefix-cls}-item-link {
+    .@{breadcrumb-prefix-cls}-item-link-target {
       cursor: pointer;
 
       &:hover {

diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -6,6 +6,7 @@ import { ConfigContext } from '../config-provider';
 import SizeContext from '../config-provider/SizeContext';
 import { ButtonProps } from './interfaces';
 import { cloneElement } from '../../utils/reactNode';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -79,7 +80,8 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const size = React.useContext(SizeContext);
   const [innerLoading, setLoading] = React.useState<boolean | undefined>(loading);
   const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
-  const { getPrefixCls, autoInsertSpaceInButton } = React.useContext(ConfigContext);
+  const { autoInsertSpaceInButton } = React.useContext(ConfigContext);
+  const prefixCls = usePrefixCls('btn', customizePrefixCls);
   const buttonRef = (ref as any) || React.createRef<HTMLElement>();
 
   const isNeedInserted = () => React.Children.count(children) === 1 && !icon;
@@ -118,7 +120,6 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     }
   };
 
-  const prefixCls = getPrefixCls('btn', customizePrefixCls);
   const autoInsertSpace = autoInsertSpaceInButton !== false;
 
   const sizeCls = customizeSize || size;