Feature/icon

.husky/prepare-commit-msg

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx czg --hook || true
+exec < /dev/tty && npx git-cz --hook

package.json

@@ -65,7 +65,8 @@
     "lodash": "~4.17.15",
     "omi": "7.6.7",
     "omi-transition": "^0.1.8",
-    "tailwind-merge": "^2.2.1"
+    "tailwind-merge": "^2.2.1",
+    "tdesign-icons-web-components": "^0.0.1-alpha.3"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -114,6 +115,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.55.0",
     "tailwindcss": "^3.3.3",
+    "tdesign-icons-view": "^0.2.7",
     "tdesign-site-components": "^0.15.2",
     "tdesign-theme-generator": "^1.0.15",
     "ts-node": "^10.9.1",

script/generate-entry.js

@@ -8,7 +8,7 @@ const __dirname = path.dirname(__filename);
 const componentsPath = path.resolve(__dirname, '../src');
 
 const components = fs.readdirSync(componentsPath).filter((name) => {
-  if (name === 'style' || name.startsWith('_')) return false;
+  if (['style', 'icon'].includes(name) || name.startsWith('_')) return false;
   const componentPath = path.resolve(componentsPath, name);
   if (fs.statSync(componentPath).isDirectory()) {
     return true;

site/main.tsx

@@ -3,6 +3,7 @@ import 'tdesign-theme-generator';
 import 'tdesign-site-components/lib/styles/style.css';
 import './tailwind/index.ts';
 import 'tdesign-web-components/style/index.js';
+import 'tdesign-icons-view';
 
 import { Router } from 'omi-router';
 

site/sidebar.config.ts

@@ -47,7 +47,7 @@ export default [
         component: () => import('tdesign-web-components/button/README.md'),
       },
       {
-        title: 'Icon 图表',
+        title: 'Icon 图标',
         name: 'icon',
         path: '/components/icon',
         component: () => import('tdesign-web-components/icon/README.md'),

src/_util/dom.ts

@@ -1,6 +1,6 @@
+import isString from 'lodash/isString';
 import raf from 'raf';
 
-import { AttachNode, AttachNodeReturnValue } from '../common';
 import { easeInOutCubic, EasingFunction } from './easing';
 // 用于判断是否可使用 dom
 export const canUseDocument = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
@@ -70,27 +70,19 @@ export const scrollTo = (target: number, opt: ScrollTopOptions) => {
   });
 };
 
-export function getAttach(attach: AttachNode, triggerNode?: HTMLElement): AttachNodeReturnValue {
-  if (!canUseDocument) return null;
-
-  let el: AttachNodeReturnValue;
-  if (typeof attach === 'string') {
-    el = document.querySelector(attach);
+export const getAttach = (node: any): HTMLElement => {
+  const attachNode = typeof node === 'function' ? node() : node;
+  if (!attachNode) {
+    return document.body;
   }
-  if (typeof attach === 'function') {
-    el = attach(triggerNode);
+  if (isString(attachNode)) {
+    return document.querySelector(attachNode);
   }
-  if (typeof attach === 'object') {
-    if ((attach as any) instanceof window.HTMLElement) {
-      el = attach;
-    }
+  if (attachNode instanceof HTMLElement) {
+    return attachNode;
   }
-
-  // fix el in iframe
-  if (el && el.nodeType === 1) return el;
-
   return document.body;
-}
+};
 
 export const addClass = function (el: Element, cls: string) {
   if (!el) return;

src/button/_example/base.tsx

@@ -4,10 +4,14 @@ import 'tdesign-web-components/space';
 import { Component } from 'omi';
 
 export default class Button extends Component {
+  btnClick = () => {
+    console.log('btn click');
+  };
+
   render() {
     return (
       <t-space>
-        <t-button theme="default" variant="base">
+        <t-button theme="default" variant="base" onClick={this.btnClick}>
           填充按钮
         </t-button>
         <t-button theme="default" variant="outline">

src/button/_example/icon.tsx

@@ -1,5 +1,5 @@
 import 'tdesign-web-components/button';
-import 'tdesign-web-components/icon';
+import 'tdesign-icons-web-components';
 import 'tdesign-web-components/space';
 
 export default function Button() {

src/button/button.tsx

@@ -1,6 +1,9 @@
+import 'tdesign-icons-web-components/esm/components/loading';
+
 import { Component, tag } from 'omi';
 
 import classname, { getClassPrefix } from '../_util/classname';
+import { convertToLightDomNode } from '../_util/lightDom';
 import { StyledProps } from '../common';
 import { TdButtonProps } from './type';
 
@@ -10,6 +13,24 @@ export interface ButtonProps extends TdButtonProps, StyledProps {}
 export default class Button extends Component<ButtonProps> {
   static css = [];
 
+  static propTypes = {
+    theme: String,
+    type: String,
+    variant: String,
+    size: String,
+    shape: String,
+    icon: Object,
+    loading: Boolean,
+    ghost: Boolean,
+    block: Boolean,
+    disabled: Boolean,
+    href: String,
+    tag: String,
+    content: [String, Object],
+    onClick: Function,
+    ignoreAttributes: Array,
+  };
+
   static defaultProps = {
     tag: 'button',
     variant: 'base',
@@ -62,8 +83,8 @@ export default class Button extends Component<ButtonProps> {
       });
     }
 
-    let iconNode = icon;
-    if (loading) iconNode = <t-icon className="mr-[2px]" name={'loading'} />;
+    let iconNode = convertToLightDomNode(icon);
+    if (loading) iconNode = convertToLightDomNode(<t-icon-loading className="mr-[2px]" />);
 
     const Tag = this.tag as string;
     return (

src/common/fake-arrow.tsx

@@ -18,8 +18,13 @@ export interface FakeArrowProps {
 export default class FakeArrow extends Component<FakeArrowProps> {
   componentName = `${classPrefix}-fake-arrow`;
 
+  static propTypes = {
+    isActive: Boolean,
+    disabled: Boolean,
+  };
+
   static css = `
-.t-fake-arrow.t-is-disabled  {
+.${classPrefix}-fake-arrow.${classPrefix}-is-disabled  {
   cursor: not-allowed;
   color: var(--td-text-color-disabled, var(--td-font-gray-4));
 }

src/common/portal.tsx

@@ -40,6 +40,11 @@ export function getAttach(attach: PortalProps['attach'], triggerNode?: HTMLEleme
 export default class Portal extends Component<PortalProps> {
   static css = [];
 
+  static propTypes = {
+    attach: [Object, Function, String, Boolean],
+    triggerNode: Object,
+  };
+
   static defaultProps = {
     attach: false,
   };