Merge pull request #88 from AElf-devops/feature/doc-upload

feat: add suggest icons
AElfProject · Mar 22, 2024 · 22fcc6d · 22fcc6d
2 parents ca58a4b + 5da9ac5
commit 22fcc6d
Show file tree

Hide file tree

Showing 64 changed files with 223 additions and 168 deletions.
diff --git a/.dumi/theme/builtins/IconSearch/fields.ts b/.dumi/theme/builtins/IconSearch/fields.ts
@@ -1,6 +1,6 @@
-import * as AntdIcons from '@ant-design/icons/lib/icons';
+import * as AntdWeb3Icons from '@aelf-design/internal-icons';
 
-const all = Object.keys(AntdIcons)
+const all = Object.keys(AntdWeb3Icons)
   .map((n) => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
   .filter((n, i, arr) => arr.indexOf(n) === i);
 

diff --git a/packages/component/src/Carousel/index.tsx b/packages/component/src/Carousel/index.tsx
@@ -82,8 +82,6 @@ export default function Carousel(props: ICarouselProps) {
             color={token.customCarousel?.colorNavigation}
             hoverColor={token.customCarousel?.colorNavigationHover}
             activeColor={token.customCarousel?.colorNavigationActive}
-            width={16}
-            height={60}
           />
         </div>
         <div className="swiper-button-prev">
@@ -92,8 +90,6 @@ export default function Carousel(props: ICarouselProps) {
             color={token.customCarousel?.colorNavigation}
             hoverColor={token.customCarousel?.colorNavigationHover}
             activeColor={token.customCarousel?.colorNavigationActive}
-            width={16}
-            height={60}
           />
         </div>
       </Swiper>

diff --git a/packages/component/src/Input/index.tsx b/packages/component/src/Input/index.tsx
@@ -45,8 +45,6 @@ const getClearIcon = (
         color={token?.colorBorder}
         hoverColor={token?.Table?.headerBg}
         activeColor={token?.colorTextDisabled}
-        width="16px"
-        height="16px"
       />
     </div>
   );
@@ -103,11 +101,7 @@ function InputPassword({
               }
       }
       iconRender={(visible) =>
-        visible ? (
-          <EyeTwoToneIcon {...iconProps} width={16} height={16} />
-        ) : (
-          <EyeInvisibleOutlinedIcon {...iconProps} width={16} height={16} />
-        )
+        visible ? <EyeTwoToneIcon {...iconProps} /> : <EyeInvisibleOutlinedIcon {...iconProps} />
       }
     ></AntdInput.Password>
   );

diff --git a/packages/component/src/Modal/index.tsx b/packages/component/src/Modal/index.tsx
@@ -20,7 +20,7 @@ function Modal({ wrapClassName, width = 438, closeIcon = true, children, ...prop
       closeIcon={
         closeIcon ? (
           <div className={styles.closeIconWrap}>
-            <CloseIcon color={token?.colorTextBase} width="16px" height="16px" />
+            <CloseIcon color={token?.colorTextBase} />
           </div>
         ) : null
       }

diff --git a/packages/component/src/Pagination/index.tsx b/packages/component/src/Pagination/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { DownArrowIcon, LeftArrowIcon, RightArrowIcon } from '@aelf-design/internal-icons';
+import { DownArrowIcon, LeftOutlined, RightOutlined } from '@aelf-design/internal-icons';
 import { Select } from 'antd';
 import { debounce } from 'lodash-es';
 
@@ -167,7 +167,7 @@ export default function Pagination({
             size="small"
             ghost
             onClick={runPrevChange}
-            icon={<LeftArrowIcon />}
+            icon={<LeftOutlined />}
           />
         </div>
         <div className={cx(prefixCls + '-pageNumber-container', styles.pageNumberContainer)}>
@@ -181,7 +181,7 @@ export default function Pagination({
             ghost
             disabled={isLastPage}
             onClick={runNextChange}
-            icon={<RightArrowIcon />}
+            icon={<RightOutlined />}
           />
         </div>
         <div>

diff --git a/packages/component/src/Upload/index.tsx b/packages/component/src/Upload/index.tsx
@@ -46,8 +46,6 @@ function UploadItemRender({
               color={token.colorPrimary}
               hoverColor={token.colorPrimaryHover}
               activeColor={token.colorPrimaryActive}
-              width={16}
-              height={16}
             />
             <span className="clear-text">Delete</span>
           </div>
@@ -58,7 +56,7 @@ function UploadItemRender({
   ) : (
     <div className={cx(styles.FilePreviewContainer)}>
       <div className="file-icon-container">
-        <FileIcon width={56} height={56} />
+        <FileIcon />
         <div className="file-tips">Ready for review</div>
       </div>
       <div className="file-info">
@@ -73,8 +71,6 @@ function UploadItemRender({
             color={token.colorPrimary}
             hoverColor={token.colorPrimaryHover}
             activeColor={token.colorPrimaryActive}
-            width={16}
-            height={16}
           />
           <span className="clear-text">Remove</span>
         </div>

diff --git a/packages/component/src/UploadButton/index.tsx b/packages/component/src/UploadButton/index.tsx
@@ -16,7 +16,7 @@ export default function UploadButton(props: IUploadButtonProps) {
   const token = useTheme();
   return (
     <div className={cx(prefixCls + '-upload-button', styles.uploadButton)}>
-      <UploadIcon color={uploadIconColor || token.colorPrimary} width={40} height={40} />
+      <UploadIcon color={uploadIconColor || token.colorPrimary} />
       <div className={styles.message}>
         <div className={styles.uploadText}>{uploadText || 'Upload'}</div>
         {tips || (

diff --git a/packages/internal-icons/src/components/CircleClose.tsx b/packages/internal-icons/src/components/CircleClose.tsx
@@ -8,14 +8,7 @@ const componentName = 'CircleCloseIconOutlined';
 export const CircleCloseIconOutlined = React.forwardRef<HTMLSpanElement, IconProps>(
   (props, ref) => {
     return (
-      <AelfIcon
-        component={AelfSVGComponent}
-        componentName={componentName}
-        defaultWidth={16}
-        defaultHeight={16}
-        ref={ref}
-        {...props}
-      />
+      <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
     );
   },
 );

diff --git a/packages/internal-icons/src/components/ClearIcon.tsx b/packages/internal-icons/src/components/ClearIcon.tsx
@@ -7,14 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'ClearIconFilled';
 export const ClearIconFilled = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      componentName={componentName}
-      defaultWidth={16}
-      defaultHeight={16}
-      ref={ref}
-      {...props}
-    />
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
   );
 });
 ClearIconFilled.displayName = componentName;
diff --git a/packages/internal-icons/src/components/CloseIcon.tsx b/packages/internal-icons/src/components/CloseIcon.tsx
@@ -7,14 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'CloseIcon';
 export const CloseIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      componentName={componentName}
-      defaultWidth={16}
-      defaultHeight={16}
-      ref={ref}
-      {...props}
-    />
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
   );
 });
 CloseIcon.displayName = 'CloseIcon';
diff --git a/packages/internal-icons/src/components/CopyIcon.tsx b/packages/internal-icons/src/components/CopyIcon.tsx
@@ -7,14 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'CopyIcon';
 export const CopyIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      componentName={componentName}
-      defaultWidth={16}
-      defaultHeight={16}
-      ref={ref}
-      {...props}
-    />
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
   );
 });
 CopyIcon.displayName = componentName;
diff --git a/packages/internal-icons/src/components/DownArrowIcon.tsx b/packages/internal-icons/src/components/DownArrowIcon.tsx
@@ -7,14 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'DownArrowIcon';
 export const DownArrowIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      componentName={componentName}
-      defaultWidth={12}
-      defaultHeight={12}
-      ref={ref}
-      {...props}
-    />
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
   );
 });
 DownArrowIcon.displayName = 'DownArrowIcon';
diff --git a/packages/internal-icons/src/components/EyeInvisibleOutlinedIcon.tsx b/packages/internal-icons/src/components/EyeInvisibleOutlinedIcon.tsx
@@ -11,8 +11,7 @@ export const EyeInvisibleOutlinedIcon = React.forwardRef<HTMLSpanElement, IconPr
       <AelfIcon
         component={AelfSVGComponent}
         componentName={componentName}
-        defaultWidth={18}
-        defaultHeight={18}
+        style={{ fontSize: '18px' }}
         ref={ref}
         {...props}
       />

diff --git a/packages/internal-icons/src/components/EyeTwoToneIcon.tsx b/packages/internal-icons/src/components/EyeTwoToneIcon.tsx
@@ -7,14 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'EyeTwoToneIcon';
 export const EyeTwoToneIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      componentName={componentName}
-      defaultWidth={18}
-      defaultHeight={14}
-      ref={ref}
-      {...props}
-    />
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
   );
 });
 EyeTwoToneIcon.displayName = 'EyeTwoToneIcon';
diff --git a/packages/internal-icons/src/components/FileIcon.tsx b/packages/internal-icons/src/components/FileIcon.tsx
@@ -10,8 +10,7 @@ export const FileIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref
     <AelfIcon
       component={AelfSVGComponent}
       componentName={componentName}
-      defaultWidth={56}
-      defaultHeight={56}
+      style={{ fontSize: '56px' }}
       ref={ref}
       {...props}
     />

diff --git a/packages/internal-icons/src/components/LeftArrowIcon.tsx b/packages/internal-icons/src/components/LeftArrowIcon.tsx
diff --git a/packages/internal-icons/src/components/NextButtonIcon.tsx b/packages/internal-icons/src/components/NextButtonIcon.tsx
@@ -10,8 +10,10 @@ export const NextButtonIcon = React.forwardRef<HTMLSpanElement, IconProps>((prop
     <AelfIcon
       component={AelfSVGComponent}
       componentName={componentName}
-      defaultWidth={16}
-      defaultHeight={60}
+      style={{
+        width: '16px',
+        height: '60px',
+      }}
       ref={ref}
       {...props}
     />

diff --git a/packages/internal-icons/src/components/PrevButtonIcon.tsx b/packages/internal-icons/src/components/PrevButtonIcon.tsx
@@ -10,8 +10,10 @@ export const PrevButtonIcon = React.forwardRef<HTMLSpanElement, IconProps>((prop
     <AelfIcon
       component={AelfSVGComponent}
       componentName={componentName}
-      defaultWidth={16}
-      defaultHeight={60}
+      style={{
+        width: '16px',
+        height: '60px',
+      }}
       ref={ref}
       {...props}
     />

diff --git a/packages/internal-icons/src/components/ProgressErrorIcon.tsx b/packages/internal-icons/src/components/ProgressErrorIcon.tsx
@@ -10,8 +10,9 @@ export const ProgressErrorIcon = React.forwardRef<HTMLSpanElement, IconProps>((p
     <AelfIcon
       component={AelfSVGComponent}
       componentName={componentName}
-      defaultWidth={24}
-      defaultHeight={24}
+      style={{
+        fontSize: '24px',
+      }}
       ref={ref}
       {...props}
     />

diff --git a/packages/internal-icons/src/components/ProgressSuccessIcon.tsx b/packages/internal-icons/src/components/ProgressSuccessIcon.tsx
@@ -10,8 +10,9 @@ export const ProgressSuccessIcon = React.forwardRef<HTMLSpanElement, IconProps>(
     <AelfIcon
       component={AelfSVGComponent}
       componentName={componentName}
-      defaultWidth={24}
-      defaultHeight={24}
+      style={{
+        fontSize: '24px',
+      }}
       ref={ref}
       {...props}
     />

diff --git a/packages/internal-icons/src/components/QueryIcon.tsx b/packages/internal-icons/src/components/QueryIcon.tsx
@@ -10,8 +10,9 @@ export const QueryIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, re
     <AelfIcon
       component={AelfSVGComponent}
       componentName={componentName}
-      defaultWidth={18}
-      defaultHeight={18}
+      style={{
+        fontSize: '18px',
+      }}
       ref={ref}
       {...props}
     />

diff --git a/packages/internal-icons/src/components/RightArrowIcon.tsx b/packages/internal-icons/src/components/RightArrowIcon.tsx
diff --git a/packages/internal-icons/src/components/UploadIcon.tsx b/packages/internal-icons/src/components/UploadIcon.tsx
@@ -7,7 +7,13 @@ import { type IconProps } from '../type';
 const componentName = 'UploadIcon';
 export const UploadIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
+    <AelfIcon
+      component={AelfSVGComponent}
+      style={{ fontSize: '40px' }}
+      componentName={componentName}
+      ref={ref}
+      {...props}
+    />
   );
 });
 UploadIcon.displayName = componentName;
diff --git a/...rc/components/direction/rightOutlined.tsx → ...rc/components/direction/RightOutlined.tsx b/...rc/components/direction/rightOutlined.tsx → ...rc/components/direction/RightOutlined.tsx
diff --git a/packages/internal-icons/src/components/direction/index.tsx b/packages/internal-icons/src/components/direction/index.tsx
@@ -9,11 +9,11 @@ export * from './LeftOutlined';
 export * from './MenuFoldOutlined';
 export * from './MenuUnfoldOutlined';
 export * from './RightArrowOutlined';
-export * from './RightOutlined';
 export * from './RollBackOutlined';
 export * from './RotateLeftOutlined';
 export * from './SwapLeftOutlined';
 export * from './SwapOutlined';
 export * from './SwapRightOutlined';
 export * from './UpArrowOutlined';
 export * from './UpOutlined';
+export * from './RightOutlined';
diff --git a/packages/internal-icons/src/components/suggestion/AddOutlined.tsx b/packages/internal-icons/src/components/suggestion/AddOutlined.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/suggestion/add.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'AddOutlined';
+export const AddOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return (
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
+  );
+});
+AddOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/suggestion/CheckOutlined.tsx b/packages/internal-icons/src/components/suggestion/CheckOutlined.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/suggestion/check.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'CheckOutlined';
+export const CheckOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return (
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
+  );
+});
+CheckOutlined.displayName = componentName;