feat(web-components): add innerClass and innerStyle (#112)

Tencent · Oct 16, 2024 · 9b4d3e3 · 9b4d3e3
1 parent 8f67778
commit 9b4d3e3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/packages/web-components/src/icon.tsx b/packages/web-components/src/icon.tsx
@@ -7,10 +7,11 @@ import { getStylesheet } from './util/check-url-and-load';
 
 export interface IconProps extends OmiDOMAttributes {
   style?: CSSStyleDeclaration;
+  innerStyle?: CSSStyleDeclaration;
   /**
-   * 类名，叫cls是为了和className区分
+   * 类名，叫innerClass是为了和最外层className区分
    */
-  cls?: string;
+  innerClass?: string;
   size?: 'small' | 'medium' | 'large' | string | number;
 }
 
@@ -45,34 +46,34 @@ function render(node: VNode, id: string, rootProps?: { [key: string]: any }): VN
   );
 }
 
-export class IconBase extends Component<IconProps> {
+export class IconBase<T extends IconProps> extends Component<T> {
   static css = [getStylesheet()];
 
   static icon: VNode | null = null;
 
   static propTypes = {
-    cls: String,
+    innerClass: String,
+    innerStyle: Object,
     size: String,
-    style: Object,
   }
 
   render(props) {
     const {
       id,
-      cls,
       size,
-      style,
+      innerClass,
+      innerStyle,
       ...restProps
     } = props;
 
     delete restProps.cls;
     delete (restProps as any)?.className;
 
     const { className: sizeClassName, style: sizeStyle } = getSizeProps(size);
-    const combinCls = classname('t-icon', `t-icon-${id}`, cls, sizeClassName);
+    const combinCls = classname('t-icon', `t-icon-${id}`, sizeClassName, innerClass);
     return render((this.constructor as typeof IconBase).icon as VNode, `${id}`, {
       className: combinCls,
-      style: { ...style, ...sizeStyle },
+      style: { ...sizeStyle, ...innerStyle },
       ...restProps,
     });
   }

diff --git a/packages/web-components/src/iconfont/index.tsx b/packages/web-components/src/iconfont/index.tsx
@@ -75,9 +75,9 @@ export default class IconFont extends Component<IconFontProps> {
     name: String,
     url: [String, Array],
     loadDefaultIcons: Boolean,
-    cls: String,
     size: String,
-    style: Object,
+    innerClass: String,
+    innerStyle: Object,
   }
 
   get isBuiltInIcon() {
@@ -90,21 +90,22 @@ export default class IconFont extends Component<IconFontProps> {
       [this.props.name || '']: this.props.url,
       [`${this.classPrefix}-icon`]: !this.props.url || this.isBuiltInIcon,
       [`${this.classPrefix}-icon-${this.props.name}`]: !this.props.url,
-    }, sizeClassName, this.props.cls);
+    }, sizeClassName, this.props.innerClass);
   }
 
   render(props: OmiProps<IconFontProps, any>) {
     const {
       size,
       tag: Tag = 'i',
-      style: customStyle,
+      innerStyle,
       ...htmlProps
     } = props;
 
     delete htmlProps.loadDefaultIcons;
     delete htmlProps.url;
-    delete htmlProps.cls;
     delete htmlProps.className;
+    delete htmlProps.class;
+    delete htmlProps.style;
     delete htmlProps.name;
 
     const { style: sizeStyle } = getSizeProps(size);
@@ -114,7 +115,7 @@ export default class IconFont extends Component<IconFontProps> {
       <style>{`.t-icon-${this.props.name}:before {content: "${fontCode}";}`}</style>
       <Tag
         class={this.class}
-        style={{ ...customStyle, ...sizeStyle }}
+        style={{ ...sizeStyle, ...innerStyle }}
         part='t-icon'
         {...htmlProps}
       ></Tag>

diff --git a/packages/web-components/src/svg-sprite/index.tsx b/packages/web-components/src/svg-sprite/index.tsx
@@ -61,9 +61,9 @@ export class Icon extends Component<SpriteIconProps> {
     name: String,
     url: [String, Array],
     loadDefaultIcons: Boolean,
-    cls: String,
     size: String,
-    style: Object,
+    innerClass: String,
+    innerStyle: Object,
   }
 
   classPrefix = getClassPrefix();
@@ -72,7 +72,7 @@ export class Icon extends Component<SpriteIconProps> {
 
   get class() {
     const {
-      url, name, size, cls: customClassName,
+      url, name, size, innerClass: customClassName,
     } = this.props;
     const iconName = url ? name : `${this.classPrefix}-icon-${name}`;
     const { className: sizeClassName } = getSizeProps(size);
@@ -94,13 +94,14 @@ export class Icon extends Component<SpriteIconProps> {
     const {
       name = '',
       size,
-      style,
+      innerStyle,
       ...restProps
     } = props;
 
     delete restProps.loadDefaultIcons;
-    delete restProps.cls;
+    delete restProps.class;
     delete (restProps as any)?.className;
+    delete restProps.style;
     delete restProps.url;
 
     const { style: sizeStyle } = getSizeProps(size);
@@ -109,7 +110,7 @@ export class Icon extends Component<SpriteIconProps> {
       const node = JSON.parse(this.svgIconJson?.[name] || '{}');
       return render(node, `${name}`, {
         className: this.class,
-        style: { ...style, ...sizeStyle },
+        style: { ...sizeStyle, ...innerStyle },
         ...restProps,
         part: 't-icon',
       });