refactor: 统一导出组件变量名 (#894,#845)

uiwjs · Aug 6, 2022 · 2dc3087 · 2dc3087
1 parent 689acf0
commit 2dc3087
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 73 deletions.
diff --git a/packages/react-form/src/style/item.ts b/packages/react-form/src/style/item.ts
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { HTMLInputProps, ThemeVariantValueOptions } from '@uiw/utils';
 import { InputStyleBase } from '@uiw/react-input';
-import { SelectWarp } from '@uiw/react-select';
+import { SelectStyleWarp } from '@uiw/react-select';
 import { TextareaStyleWarp } from '@uiw/react-textarea';
 
 interface FormStyleItemProps extends HTMLInputProps, ThemeVariantValueOptions {
@@ -34,7 +34,7 @@ export const FormStyleItem = styled.div<FormStyleItemProps>`
   ${(props) =>
     props.hasError &&
     css`
-      ${InputStyleBase},${SelectWarp},${TextareaStyleWarp} {
+      ${InputStyleBase},${SelectStyleWarp},${TextareaStyleWarp} {
         box-shadow: 0 0 0 1px #dc3545, 0 0 0 3px rgba(220, 53, 69, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
         &:hover {
           box-shadow: 0 0 0 1px #dc3545, 0 0 0 3px rgba(220, 53, 69, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);

diff --git a/packages/react-message/README.md b/packages/react-message/README.md
@@ -83,22 +83,22 @@ export default Demo
 
 ```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
-import { Message, Divider } from 'uiw';
+import { Message, Divider ,Icon} from 'uiw';
 
 const chat = ( <svg width="20" height="20" viewBox="0 0 20 20"> <path d="M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z" fillRule="evenodd" /> </svg> );
 const closed = <svg viewBox="0 0 16 16" width="16" height="16"> <path fillRule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z" /> </svg>;
 class Demo extends React.Component {
   render() {
     return (
       <div>
-        <Message showIcon icon="apple" type="error" title="自定义图标" description="这里自定义Icon组件图标。" />
-        <Message showIcon icon={chat} type="info" title="自定义图标" description="这里自定义 SVG 图标。" />
-        <Message showIcon icon={closed} type="success" title="自定义图标" description="这里自定义 SVG 图标。" />
+        <Message showIcon icon={<Icon type="apple" />} type="error" title="自定义图标" description="这里自定义Icon组件图标。" />
+        <Message showIcon icon={<Icon type={chat} />} type="info" title="自定义图标" description="这里自定义 SVG 图标。" />
+        <Message showIcon icon={<Icon type={closed} />} type="success" title="自定义图标" description="这里自定义 SVG 图标。" />
         <Divider />
-        <Message showIcon icon={chat} type="success" title="成功提示标题，自定义图标。" />
-        <Message showIcon icon={closed} type="warning" title="警告提示标题，自定义图标。" />
-        <Message showIcon icon="apple" type="info" title="说明提示标题，自定义图标。" />
-        <Message showIcon icon="file-jpg" type="error" title="错误提示标题，自定义图标。" />
+        <Message showIcon icon={<Icon type={chat} />} type="success" title="成功提示标题，自定义图标。" />
+        <Message showIcon icon={<Icon type={closed} />} type="warning" title="警告提示标题，自定义图标。" />
+        <Message showIcon icon={<Icon type="apple" />} type="info" title="说明提示标题，自定义图标。" />
+        <Message showIcon icon={<Icon type="file-jpg" />} type="error" title="错误提示标题，自定义图标。" />
       </div>
     )
   }
@@ -143,5 +143,5 @@ export default Demo
 | rounded | 是否显示圆角 | Boolean | - |
 | showIcon | 设定显示图标 | Boolean | - |
 | isCloseButtonShown | 显示关闭按钮 | Boolean | - |
-| icon | 自定义图标，设置 `showIcon=true` 才会起作用。 | String/ReactNode | - |
+| icon | 自定义图标，设置 `showIcon=true` 才会起作用。 | ReactNode | - |
 | onClose | 点击默认关闭按钮时触发的回调函数	 | Function | - |
diff --git a/packages/react-message/src/index.tsx b/packages/react-message/src/index.tsx
@@ -1,13 +1,22 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import Icon, { IconProps } from '@uiw/react-icon';
+import { IconStyleBase } from '@uiw/react-icon';
 // import './style/index.less';
 import { IProps, HTMLDivProps } from '@uiw/utils';
-
-import { MessageDivWrap, MessageTitleSpan, MessageDescriptionSpan, MessageButtonStyleWarp } from './style';
+import { CircleCheck } from '@uiw/icons/lib/CircleCheck';
+import { Close } from '@uiw/icons/lib/Close';
+import { Warning } from '@uiw/icons/lib/Warning';
+import { Information } from '@uiw/icons/lib/Information';
+import { CircleClose } from '@uiw/icons/lib/CircleClose';
+import {
+  MessageStyleDivWrap,
+  MessageStyleTitleSpan,
+  MessageStyleDescriptionSpan,
+  MessageStyleButtonWarp,
+} from './style';
 export interface MessageProps extends IProps, Omit<HTMLDivProps, 'title'> {
   title?: React.ReactNode;
-  icon?: IconProps['type'];
+  icon?: React.ReactNode;
   type?: 'success' | 'warning' | 'info' | 'error';
   description?: React.ReactNode;
   showIcon?: boolean;
@@ -39,26 +48,31 @@ export default class Message extends React.Component<MessageProps, IMessageState
   };
   renderIcon = () => {
     const { type, showIcon } = this.props;
-    let icon = this.props.icon;
-    if (!icon && showIcon) {
+    let base: any = this.props.icon;
+    if (!base && showIcon) {
+      let fill;
       switch (type) {
         case 'success':
-          icon = 'circle-check';
+          fill = '#28a745';
+          base = CircleCheck;
           break;
         case 'warning':
-          icon = 'warning';
+          fill = '#ffc107';
+          base = Warning;
           break;
         case 'info':
-          icon = 'information';
+          fill = '#008ef0';
+          base = Information;
           break;
         case 'error':
-          icon = 'circle-close';
+          fill = '#dc3545';
+          base = CircleClose;
           break;
         default:
           break;
       }
+      return <IconStyleBase fill={fill} as={base} />;
     }
-    return icon;
   };
   render() {
     const {
@@ -87,18 +101,23 @@ export default class Message extends React.Component<MessageProps, IMessageState
       .trim();
 
     const Child = (
-      <MessageDivWrap params={{ rounded, type, title, children, showIcon, icon }} className={cls} {...elementProps}>
+      <MessageStyleDivWrap params={{ rounded, type, title, children, showIcon }} className={cls} {...elementProps}>
         {isCloseButtonShown && (
-          <MessageButtonStyleWarp basic onClick={this.handleClosed} icon={<Icon type="close" />} type="light" />
+          <MessageStyleButtonWarp
+            basic
+            onClick={this.handleClosed}
+            icon={<IconStyleBase fill="rgba(0, 0, 0, 0.38)" as={Close} />}
+            type="light"
+          />
         )}
-        {showIcon && <Icon type={this.renderIcon()} />}
-        <MessageTitleSpan params={{ showIcon, title, children }} className={`${prefixCls}-title`}>
+        {showIcon && (icon ? icon : this.renderIcon())}
+        <MessageStyleTitleSpan params={{ showIcon, title, children }} className={`${prefixCls}-title`}>
           {title}
-        </MessageTitleSpan>
-        <MessageDescriptionSpan params={{ showIcon, title, children }} className={`${prefixCls}-description`}>
+        </MessageStyleTitleSpan>
+        <MessageStyleDescriptionSpan params={{ showIcon, title, children }} className={`${prefixCls}-description`}>
           {children}
-        </MessageDescriptionSpan>
-      </MessageDivWrap>
+        </MessageStyleDescriptionSpan>
+      </MessageStyleDivWrap>
     );
     if (!isCloseButtonShown) {
       return Child;

diff --git a/packages/react-message/src/style/index.ts b/packages/react-message/src/style/index.ts
@@ -3,32 +3,31 @@ import { IconStyleBase } from '@uiw/react-icon';
 import { getThemeVariantValue, ThemeVariantValueOptions } from '@uiw/utils';
 import Button, { ButtonProps } from '@uiw/react-button';
 
-interface divWrapProps
+interface DivWrapProps
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
     ThemeVariantValueOptions {
   params: {
     rounded: boolean | undefined;
     type: 'success' | 'warning' | 'info' | 'error' | undefined;
     children: any;
     showIcon: boolean | undefined;
-    icon: any;
     title: React.ReactNode;
   };
 }
 
-export const MessageWrap = styled.div`
+const MessageStyleWrap = styled.div`
   padding: 10px 15px;
   position: relative;
   font-size: 14px;
 `;
 // 最外层div
-export const MessageDivWrap = styled(MessageWrap)<divWrapProps>`
+export const MessageStyleDivWrap = styled(MessageStyleWrap)<DivWrapProps>`
   margin-top: 10px;
   ${(props) => {
     if (props.params?.showIcon) {
       if (props.params?.children && props.params?.title) {
         return css`
-          > .w-icon {
+          > ${IconStyleBase} {
             font-size: 24px;
           }
         `;
@@ -120,11 +119,11 @@ interface spanPeops extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpa
   };
 }
 // 原始span
-export const MessageSpanWrap = styled.span`
+const MessageStyleSpanWrap = styled.span`
   display: block;
 `;
 // 详情description
-export const MessageDescriptionSpan = styled(MessageSpanWrap)<spanPeops>`
+export const MessageStyleDescriptionSpan = styled(MessageStyleSpanWrap)<spanPeops>`
   color: rgba(0, 0, 0, 0.65);
   ${(props) =>
     props.params.showIcon &&
@@ -135,7 +134,7 @@ export const MessageDescriptionSpan = styled(MessageSpanWrap)<spanPeops>`
     `}
 `;
 // 标题title
-export const MessageTitleSpan = styled(MessageDescriptionSpan)<spanPeops>`
+export const MessageStyleTitleSpan = styled(MessageStyleDescriptionSpan)<spanPeops>`
   color: rgba(0, 0, 0, 0.85);
   ${(props) =>
     props.params.showIcon &&
@@ -146,30 +145,9 @@ export const MessageTitleSpan = styled(MessageDescriptionSpan)<spanPeops>`
     `}
 `;
 
-interface MessageIconWarpProps extends ThemeVariantValueOptions {
-  params: {
-    children: React.ReactNode;
-    showIcon: boolean | undefined;
-    title: React.ReactNode;
-  };
-}
-// icon
-export const MessageIconWarp = styled.span<MessageIconWarpProps>`
-  ${(props) =>
-    props.params?.showIcon &&
-    props.params.title &&
-    props.params.children &&
-    css`
-      font-size: 24px;
-    `}
-  top: 14px;
-  left: 14px;
-  position: absolute;
-`;
-
 interface messageButtonProps extends ButtonProps {}
 
-export const MessageButtonStyleWarp = styled(Button)<messageButtonProps>`
+export const MessageStyleButtonWarp = styled(Button)<messageButtonProps>`
   position: absolute;
   right: 10px;
   top: 10px;
@@ -185,7 +163,7 @@ export const MessageButtonStyleWarp = styled(Button)<messageButtonProps>`
   }
 `;
 
-MessageDivWrap.defaultProps = {
+MessageStyleDivWrap.defaultProps = {
   defaultTheme: {
     backgroundMessageSuccess: '#afecbd',
     colorMessageSuccess: '#28a745',

diff --git a/packages/react-pagination/src/style/index.ts b/packages/react-pagination/src/style/index.ts
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { SelectWarp } from '@uiw/react-select';
+import { SelectStyleWarp } from '@uiw/react-select';
 import { ThemeVariantValueOptions, getThemeVariantValue } from '@uiw/utils';
 
 export const PaginationDefaultTheme = {
@@ -186,7 +186,7 @@ export const PaginationStyleBaseLI = styled.li<PaginationStyleBaseLIProps>`
   ${(props) =>
     props.params?.isOptions &&
     css`
-      ${SelectWarp} {
+      ${SelectStyleWarp} {
         border: none !important;
         padding-top: 0;
         padding-bottom: 0;

diff --git a/packages/react-pin-code/src/index.tsx b/packages/react-pin-code/src/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { IProps, noop } from '@uiw/utils';
 import Input, { InputProps } from '@uiw/react-input';
 // import './style/input.less';
-import { DivWrap, InputWrap } from './style';
+import { PinCodeStyleDivWrap, PinCodeStyleInputWrap } from './style';
 
 export interface PinCodeProps extends IProps {
   value?: string[];
@@ -79,7 +79,7 @@ function InternalPinCode(props: PinCodeProps = {}, ref: React.ForwardedRef<HTMLD
   }
 
   return (
-    <DivWrap className={cls} style={style} {...otherProps} ref={ref}>
+    <PinCodeStyleDivWrap className={cls} style={style} {...otherProps} ref={ref}>
       {[...values].map((val, key) => {
         const inpProps: InputProps = {
           min: 0,
@@ -100,7 +100,7 @@ function InternalPinCode(props: PinCodeProps = {}, ref: React.ForwardedRef<HTMLD
           inpProps.autoFocus = true;
         }
         const child = (
-          <InputWrap
+          <PinCodeStyleInputWrap
             ref={(instance) => {
               if (instance) {
                 input[key] = instance;
@@ -112,7 +112,7 @@ function InternalPinCode(props: PinCodeProps = {}, ref: React.ForwardedRef<HTMLD
         );
         return child;
       })}
-    </DivWrap>
+    </PinCodeStyleDivWrap>
   );
 }
 

diff --git a/packages/react-pin-code/src/style/index.ts b/packages/react-pin-code/src/style/index.ts
@@ -2,11 +2,11 @@ import styled, { css } from 'styled-components';
 import Input, { InputProps, InputStyleBase } from '@uiw/react-input';
 
 // React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-export const DivWrap = styled.div`
+export const PinCodeStyleDivWrap = styled.div`
   display: flex;
 `;
 
-export const InputWrap = styled(Input)<InputProps>`
+export const PinCodeStyleInputWrap = styled(Input)<InputProps>`
   width: 30px;
   & + & {
     margin-left: 8px;

diff --git a/packages/react-select/src/index.tsx b/packages/react-select/src/index.tsx
@@ -4,7 +4,7 @@ import Option from './Option';
 import Group from './Group';
 // import './style/index.less';
 
-import { SelectWarp } from './style';
+import { SelectStyleWarp } from './style';
 export * from './style';
 export interface SelectProps extends IProps, Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   size?: 'large' | 'default' | 'small';
@@ -14,7 +14,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>((props, ref) =>
   const { prefixCls = 'w-select', className, size = 'default', ...other } = props;
   const cls = [prefixCls, className, size ? `${prefixCls}-${size}` : null].filter(Boolean).join(' ').trim();
 
-  return <SelectWarp {...other} ref={ref} className={cls} params={{ size }} />;
+  return <SelectStyleWarp {...other} ref={ref} className={cls} params={{ size }} />;
 });
 
 type Select = typeof Select & {

diff --git a/packages/react-select/src/style/index.ts b/packages/react-select/src/style/index.ts
@@ -11,7 +11,7 @@ interface SelectWarpProps extends ThemeVariantValueOptions, Omit<SelectProps, 's
   };
 }
 
-export const SelectWarp = styled.select<SelectWarpProps>`
+export const SelectStyleWarp = styled.select<SelectWarpProps>`
   display: inline-flex;
   appearance: none;
   cursor: ${(props) => getThemeVariantValue(props, 'cursorSelectDefault')};
@@ -65,7 +65,7 @@ export const SelectWarp = styled.select<SelectWarpProps>`
     `}
 `;
 
-SelectWarp.defaultProps = {
+SelectStyleWarp.defaultProps = {
   defaultTheme: {
     // 大小内边距设置
     paddingSelectSmall: '3px 25px 3px 7px',