Merge pull request #98 from AElf-devops/feat/filled-icons

add forwardRef , rename icon package name

.dumi/theme/builtins/IconSearch/CopyableIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AntdWeb3Icons from '@aelf-design/internal-icons';
+import * as AntdWeb3Icons from '@aelf-design/icons';
 import { Badge, message } from 'antd';
 import classNames from 'classnames';
 import CopyToClipboard from 'react-copy-to-clipboard';

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, useCallback, useMemo, useState } from 'react';
-import * as AntdWeb3Icons from '@aelf-design/internal-icons';
+import * as AntdWeb3Icons from '@aelf-design/icons';
 import AntdIcon from '@ant-design/icons';
 import { Affix, Empty, Grid, Input, Segmented, type SegmentedProps } from 'antd';
 import { createStyles, useTheme } from 'antd-style';

.dumi/theme/builtins/IconSearch/fields.ts

@@ -1,4 +1,4 @@
-import * as AntdIcons from '@aelf-design/internal-icons';
+import * as AntdIcons from '@aelf-design/icons';
 
 const categoriesConfig = require('./icon-config.json');
 

.eslintrc

@@ -3,27 +3,27 @@
     "browser": true,
     "es2020": true,
     "jest": true,
-    "node": true,
+    "node": true
   },
   "settings": {
     "react": {
-      "version": "detect",
-    },
+      "version": "detect"
+    }
   },
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
+    "plugin:prettier/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
-      "jsx": true,
+      "jsx": true
     },
     "ecmaVersion": 11,
-    "sourceType": "module",
+    "sourceType": "module"
   },
   "plugins": ["react", "react-hooks", "@typescript-eslint"],
   "rules": {
@@ -34,6 +34,6 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-unused-vars": "warn",
-    "@typescript-eslint/no-explicit-any": "off",
-  },
+    "@typescript-eslint/no-explicit-any": "off"
+  }
 }

docs/iconDemos/basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AddCircleOutlined, DownOutlined } from '@aelf-design/internal-icons';
+import { AddCircleOutlined, DownOutlined } from '@aelf-design/icons';
 import { Space } from 'antd';
 
 const App: React.FC = () => (

docs/iconDemos/custom.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AddCircleOutlined, AelfIcon } from '@aelf-design/internal-icons';
+import { AddCircleOutlined, AelfIcon } from '@aelf-design/icons';
 import { Space } from 'antd';
 import type { GetProps } from 'antd';
 

docs/iconDemos/customColor.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AddCircleOutlined, DownOutlined } from '@aelf-design/internal-icons';
+import { AddCircleOutlined, DownOutlined } from '@aelf-design/icons';
 import { Space } from 'antd';
 
 const App: React.FC = () => (

package.json

@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@aelf-design/common": "workspace:*",
-    "@aelf-design/internal-icons": "workspace:*",
+    "@aelf-design/icons": "workspace:*",
     "@ant-design/icons": "^5.2.6",
     "@babel/parser": "^7.24.0",
     "@biomejs/biome": "^1.4.1",

packages/component/package.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@aelf-design/common": "workspace:*",
-    "@aelf-design/internal-icons": "workspace:*",
+    "@aelf-design/icons": "workspace:*",
     "@ant-design/cssinjs": "^1.18.2",
     "@ctrl/tinycolor": "^4.0.2",
     "antd": "^5.12.4",

packages/component/src/Address/copy.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CopyOutlined } from '@aelf-design/internal-icons';
+import { CopyOutlined } from '@aelf-design/icons';
 import { message } from 'antd';
 import copy from 'copy-to-clipboard';
 

packages/component/src/Button/demos/type.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchOutlined } from '@aelf-design/internal-icons';
+import { SearchOutlined } from '@aelf-design/icons';
 import { Button } from 'aelf-design';
 import { Space } from 'antd';
 

packages/component/src/Carousel/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, SetStateAction, useState } from 'react';
-import { NextButtonIcon, PrevButtonIcon } from '@aelf-design/internal-icons';
+import { NextButtonIcon, PrevButtonIcon } from '@aelf-design/icons';
 import { useResponsive, useTheme } from 'antd-style';
 import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
 import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react';

packages/component/src/Collapse/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { DownOutlined } from '@aelf-design/internal-icons';
+import { DownOutlined } from '@aelf-design/icons';
 import { Collapse as AntdCollapse, CollapseProps } from 'antd';
 
 import useStyles from './style';

packages/component/src/Input/index.tsx

@@ -1,10 +1,5 @@
 import React, { forwardRef, ReactNode, Ref } from 'react';
-import {
-  CloseFilled,
-  EyeInvisibleOutlined,
-  EyeOutlined,
-  IconProps,
-} from '@aelf-design/internal-icons';
+import { CloseFilled, EyeInvisibleOutlined, EyeOutlined, IconProps } from '@aelf-design/icons';
 import { Input as AntdInput, InputProps, InputRef } from 'antd';
 import { Theme, useTheme } from 'antd-style';
 import { OverrideToken } from 'antd/es/theme/interface';

packages/component/src/Modal/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { CloseOutlined } from '@aelf-design/internal-icons';
+import { CloseOutlined } from '@aelf-design/icons';
 import { Modal as AntdModal, ModalProps } from 'antd';
 import { useTheme } from 'antd-style';
 

packages/component/src/Pagination/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { DownOutlined, LeftOutlined, RightOutlined } from '@aelf-design/internal-icons';
+import { DownOutlined, LeftOutlined, RightOutlined } from '@aelf-design/icons';
 import { Select } from 'antd';
 import { debounce } from 'lodash-es';
 

packages/component/src/RichProgress/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo, ReactNode } from 'react';
-import { ProgressErrorIcon, ProgressSuccessIcon } from '@aelf-design/internal-icons';
+import { ProgressErrorIcon, ProgressSuccessIcon } from '@aelf-design/icons';
 import { useResponsive } from 'antd-style';
 
 import Progress from '../Progress';

packages/component/src/Search/index.tsx

@@ -1,6 +1,6 @@
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
-import { DownOutlined, SearchOutlined } from '@aelf-design/internal-icons';
+import { DownOutlined, SearchOutlined } from '@aelf-design/icons';
 import type { MenuProps } from 'antd';
 import type { MenuItemType } from 'antd/lib/menu/hooks/useItems';
 
@@ -25,6 +25,7 @@ export interface ISearchProps extends Omit<IInputProps, 'size' | 'addonAfter' |
   prefixWidth?: number;
   withSearchIcon?: WithSearchIconType;
   className?: string;
+  style?: React.CSSProperties;
   inputClassName?: string;
   onSelectChange?: MenuClickEventHandler;
   onSearchBtnClick?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -41,6 +42,7 @@ function Search({
   inputClassName,
   onSelectChange,
   onSearchBtnClick,
+  style,
   ...props
 }: ISearchProps) {
   const [checkedItem, setCheckedItem] = useState(filterItems[0]);
@@ -135,7 +137,7 @@ function Search({
   ]);
 
   return (
-    <div className={cx(styles.search, className)}>
+    <div className={cx(styles.search, className)} style={style}>
       <div className={styles.searchInput}>
         <Input
           {...props}

packages/component/src/Table/demos/basic.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { IPaginationProps, Table } from 'aelf-design';
 import { ColumnsType } from 'antd/es/table';
 

packages/component/src/Table/index.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { Table as AntdTable, TableProps } from 'antd';
 import { AnyObject } from 'antd/es/_util/type';
+import { TableRef } from 'antd/es/table';
 
 import Pagination, { IPaginationProps } from '../Pagination';
 import useStyles from './style';
@@ -9,18 +10,21 @@ export interface ITableProps<T> extends Omit<TableProps<T>, 'pagination'> {
   pagination?: IPaginationProps;
 }
 
-function Table<T extends AnyObject>({ pagination, ...params }: ITableProps<T>) {
+const Table = <T extends AnyObject>(
+  { pagination, ...params }: ITableProps<T>,
+  ref: React.Ref<TableRef>,
+) => {
   const { styles, cx, prefixCls } = useStyles();
   return (
     <div className={cx(prefixCls + '-table-container', styles.TableContainer)}>
-      <AntdTable<T> {...params} pagination={false} />
+      <AntdTable<T> {...params} pagination={false} ref={ref} />
       {pagination && (
         <div className={cx(styles.tablePaginationContainer)}>
           <Pagination {...pagination} />
         </div>
       )}
     </div>
   );
-}
+};
 
-export default Table;
+export default forwardRef(Table);

packages/component/src/Tabs/demos/basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DownOutlined } from '@aelf-design/internal-icons';
+import { DownOutlined } from '@aelf-design/icons';
 import { Tabs } from 'aelf-design';
 import { Space } from 'antd';
 

packages/component/src/Tooltip/index.tsx

@@ -1,16 +1,18 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Tooltip as AntdTooltip, TooltipProps as AntdTooltipProps } from 'antd';
+import { TooltipRef } from 'antd/es/tooltip';
 
 import useStyles from './style';
 
 export type ITooltipProps = AntdTooltipProps;
 
-export default function Tooltip(props: ITooltipProps) {
+const Tooltip = forwardRef<TooltipRef, ITooltipProps>((props: ITooltipProps, ref) => {
   const { styles, cx, prefixCls } = useStyles();
   const { children } = props;
   return (
     <AntdTooltip
       {...props}
+      ref={ref}
       overlayClassName={cx(
         prefixCls + '-custom-tooltip',
         styles.customTooltip,
@@ -20,4 +22,6 @@ export default function Tooltip(props: ITooltipProps) {
       {children}
     </AntdTooltip>
   );
-}
+});
+Tooltip.displayName = 'Tooltip';
+export default Tooltip;

packages/component/src/Upload/index.tsx

@@ -1,8 +1,9 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { DeleteOutlined, FileIcon } from '@aelf-design/internal-icons';
+import React, { forwardRef, ReactElement, ReactNode } from 'react';
+import { DeleteOutlined, FileIcon } from '@aelf-design/icons';
 import { Upload as AntdUpload, UploadProps as AntdUploadProps, Image } from 'antd';
 import { useTheme } from 'antd-style';
 import { UploadFile } from 'antd/es/upload';
+import { UploadRef } from 'antd/es/upload/Upload';
 
 import UploadButton from '../UploadButton';
 import useStyles from './style';
@@ -79,14 +80,15 @@ function UploadItemRender({
   );
 }
 
-function Upload(props: IUploadProps) {
+const InternalUpload = forwardRef<UploadRef, IUploadProps>((props: IUploadProps, ref) => {
   const { styles, cx, prefixCls } = useStyles();
   const { tips, showUploadButton = true, uploadText, uploadIconColor } = props;
   return (
     <div className={(cx(prefixCls + '-upload-container'), styles.AelfdUploadContainer)}>
       <AntdUpload
         {...props}
         listType="picture-card"
+        ref={ref}
         itemRender={(originNode, file, fileList, actions) => {
           return (
             <UploadItemRender
@@ -104,7 +106,13 @@ function Upload(props: IUploadProps) {
       </AntdUpload>
     </div>
   );
-}
+});
+InternalUpload.displayName = 'Upload';
+type InternalUploadType = typeof InternalUpload;
+type CompoundedComponent = InternalUploadType & {
+  LIST_IGNORE: string;
+};
+const Upload = InternalUpload as CompoundedComponent;
 
 Upload.LIST_IGNORE = AntdUpload.LIST_IGNORE;
 

packages/component/src/UploadButton/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { UploadOutlined } from '@aelf-design/internal-icons';
+import React, { forwardRef } from 'react';
+import { UploadOutlined } from '@aelf-design/icons';
 import { useTheme } from 'antd-style';
 
 import useStyles from './style';
@@ -8,26 +8,36 @@ export interface IUploadButtonProps {
   uploadText?: string;
   tips?: React.ReactNode;
   uploadIconColor?: string;
+  style?: React.CSSProperties;
+  className?: string;
 }
 
-export default function UploadButton(props: IUploadButtonProps) {
-  const { uploadIconColor, uploadText, tips } = props;
-  const { styles, cx, prefixCls } = useStyles();
-  const token = useTheme();
-  return (
-    <div className={cx(prefixCls + '-upload-button', styles.uploadButton)}>
-      <UploadOutlined style={{ fontSize: 40 }} color={uploadIconColor || token.colorPrimary} />
-      <div className={styles.message}>
-        <div className={styles.uploadText}>{uploadText || 'Upload'}</div>
-        {tips || (
-          <>
-            <div className={styles.messageTitle}>
-              {`Formats supported JPG, JPEG, PNG. Max size 100MB.`}
-              {`Recommend ratio 16:9.`}
-            </div>
-          </>
-        )}
+const UploadButton = forwardRef<HTMLDivElement, IUploadButtonProps>(
+  (props: IUploadButtonProps, ref) => {
+    const { uploadIconColor, uploadText, tips, className, style } = props;
+    const { styles, cx, prefixCls } = useStyles();
+    const token = useTheme();
+    return (
+      <div
+        className={cx(prefixCls + '-upload-button', styles.uploadButton, className)}
+        style={style}
+        ref={ref}
+      >
+        <UploadOutlined style={{ fontSize: 40 }} color={uploadIconColor || token.colorPrimary} />
+        <div className={styles.message}>
+          <div className={styles.uploadText}>{uploadText || 'Upload'}</div>
+          {tips || (
+            <>
+              <div className={styles.messageTitle}>
+                {`Formats supported JPG, JPEG, PNG. Max size 100MB.`}
+                {`Recommend ratio 16:9.`}
+              </div>
+            </>
+          )}
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  },
+);
+UploadButton.displayName = 'UploadButton';
+export default UploadButton;

packages/internal-icons/package.json → packages/icons/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@aelf-design/internal-icons",
+  "name": "@aelf-design/icons",
   "version": "1.0.0-alpha.10",
   "type": "module",
   "main": "dist/esm/index.js",

packages/internal-icons/src/index.ts → packages/icons/src/index.ts

@@ -10,6 +10,7 @@ export * from './components/suggestion/index';
 export * from './components/chat/index';
 export * from './components/interactive/index';
 export * from './components/filled/index';
+
 export * from './icon/AelfIcon';
 export * from './hooks';