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

feat: add address custom color
AElfProject · Mar 21, 2024 · 2c9683f · 2c9683f
2 parents 4e3ef8a + b435531
commit 2c9683f
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 12 deletions.
diff --git a/packages/component/src/Address/copy.tsx b/packages/component/src/Address/copy.tsx
@@ -4,7 +4,9 @@ import { message } from 'antd';
 import copy from 'copy-to-clipboard';
 
 export default function Copy({ value, className }: { value: string; className?: string }) {
-  const handleCopy = () => {
+  const handleCopy = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
     try {
       copy(value);
       message.success('Copied Successfully');

diff --git a/packages/component/src/Address/demos/customColor.tsx b/packages/component/src/Address/demos/customColor.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { HashAddress } from 'aelf-design';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <Space direction="vertical">
+      <HashAddress
+        address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G"
+        primaryLinkColor="red"
+        primaryIconColor="yellow"
+        addressHoverColor="orange"
+        addressActiveColor="blue"
+      />
+    </Space>
+  );
+};
+
+export default App;
diff --git a/packages/component/src/Address/index.md b/packages/component/src/Address/index.md
@@ -13,6 +13,10 @@ group:
 
 <code src="./demos/basic.tsx"></code>
 
+## Custom Colors
+
+<code src="./demos/customColor.tsx">custom colors</code>
+
 ## Size
 
 <code src="./demos/size.tsx"></code>
@@ -31,6 +35,11 @@ group:
 
 ## Token
 
+<!-- prettier-ignore -->
+:::info
+新增了primaryLinkColor | primaryIconColor | addressHoverColor | addressActiveColor 这四个颜色的api设置,组件api设置之后将会覆盖token的设置
+:::
+
 ```js
 <AELFDProvider
   customToken={{
@@ -62,3 +71,7 @@ group:
 | size | 设置元素大小 | `small \| default \| large \| ultra` <br/>`small`: font-size:12px <br/>`default`: font-size:14px <br/>`large`: font-size:16px <br/>`ultra`: font-size:20px | `default`&nbsp; | `1.0.0` |
 | ignorePrefixSuffix | 忽略添加前后缀 | `boolean` | `false` | `1.0.0` |
 | ignoreEvent | 忽略绑定点击事件 | `boolean` | `false` | `1.0.0` |
+| primaryLinkColor | 地址默认颜色 | `string` | `customToken.customAddress.primaryLinkColor` | `1.0.0` |
+| primaryIconColor | copy按钮颜色 | `string` | `customToken.customAddress.primaryIconColor` | `1.0.0` |
+| addressHoverColor | 地址和copy按钮hover颜色 | `string` | `customToken.customAddress.addressHoverColor` | `1.0.0` |
+| addressActiveColor | 地址和按钮点击颜色 | `string` | `customToken.customAddress.addressActiveColor` | `1.0.0` |
diff --git a/packages/component/src/Address/index.tsx b/packages/component/src/Address/index.tsx
@@ -22,6 +22,10 @@ export interface IHashAddressProps {
   size?: AddressSize;
   ignorePrefixSuffix?: boolean;
   ignoreEvent?: boolean;
+  primaryLinkColor?: string;
+  primaryIconColor?: string;
+  addressHoverColor?: string;
+  addressActiveColor?: string;
 }
 
 const addPrefixSuffix = (str: string, chain: TChain) => {
@@ -66,8 +70,23 @@ function Address({
   size = 'default',
   ignorePrefixSuffix = false,
   ignoreEvent = false,
+  primaryLinkColor,
+  primaryIconColor,
+  addressHoverColor,
+  addressActiveColor,
 }: IHashAddressProps) {
-  const { styles: st, cx, prefixCls } = useStyles({ size, ignoreEvent });
+  const {
+    styles: st,
+    cx,
+    prefixCls,
+  } = useStyles({
+    size,
+    ignoreEvent,
+    primaryLinkColor,
+    primaryIconColor,
+    addressHoverColor,
+    addressActiveColor,
+  });
 
   const addPrefixSuffixTxt = ignorePrefixSuffix ? address : addPrefixSuffix(address, chain);
   const omittedStr = getOmittedStr(addPrefixSuffixTxt, preLen, endLen);

diff --git a/packages/component/src/Address/style/index.ts b/packages/component/src/Address/style/index.ts
@@ -3,7 +3,24 @@ import { createStyles } from 'antd-style';
 import { AddressSize } from '../index';
 
 const useStyles = createStyles(
-  ({ token, css }, { size, ignoreEvent }: { size: AddressSize; ignoreEvent: boolean }) => {
+  (
+    { token, css },
+    {
+      size,
+      ignoreEvent,
+      primaryLinkColor,
+      primaryIconColor,
+      addressHoverColor,
+      addressActiveColor,
+    }: {
+      size: AddressSize;
+      ignoreEvent: boolean;
+      primaryLinkColor?: string;
+      primaryIconColor?: string;
+      addressHoverColor?: string;
+      addressActiveColor?: string;
+    },
+  ) => {
     return {
       addressWrap: css`
         font-weight: 500;
@@ -26,14 +43,14 @@ const useStyles = createStyles(
             : size === 'large'
               ? '24px'
               : '28px'};
-        color: ${token.customAddress?.primaryLinkColor};
+        color: ${primaryLinkColor || token.customAddress?.primaryLinkColor};
         word-break: break-all;
         /* flex: 1; */
         &:hover {
-          color: ${token.customAddress?.addressHoverColor};
+          color: ${addressHoverColor || token.customAddress?.addressHoverColor};
         }
         &:active {
-          color: ${token.customAddress?.addressActiveColor};
+          color: ${addressActiveColor || token.customAddress?.addressActiveColor};
         }
       `,
       copyBtnWrap: css`
@@ -66,16 +83,16 @@ const useStyles = createStyles(
               ? '18px'
               : '20px'};
         path {
-          fill: ${token.customAddress?.primaryIconColor};
+          fill: ${primaryIconColor || token.customAddress?.primaryIconColor};
         }
         &:hover {
           path {
-            fill: ${token.customAddress?.addressHoverColor};
+            fill: ${addressHoverColor || token.customAddress?.addressHoverColor};
           }
         }
         &:active {
           path {
-            fill: ${token.customAddress?.addressActiveColor};
+            fill: ${addressActiveColor || token.customAddress?.addressActiveColor};
           }
         }
       `,

diff --git a/packages/component/src/provider.tsx b/packages/component/src/provider.tsx
@@ -157,9 +157,9 @@ const AELFDProvider = (props: IAelfdThemeProviderProps) => {
             ...props?.theme?.components?.Modal,
           },
           Tooltip: {
-            colorBgSpotlight: appearance === 'dark' ? '#282828' : '#FFF',
-            colorTextLightSolid: appearance === 'dark' ? '#8C8C8C' : '#808080',
-            colorText: appearance === 'dark' ? '#8C8C8C' : '#808080',
+            colorBgSpotlight: appearance === 'dark' ? '#FFF' : '#282828',
+            colorTextLightSolid: appearance === 'dark' ? '#808080' : '#8C8C8C',
+            colorText: appearance === 'dark' ? '#808080' : '#8C8C8C',
             borderRadius: 8,
             fontSize: 12,
             lineHeight: 1.66666666666667,