feat(icon): add tdesign-icons-web-components 🎉

增加icon组件

re TDesignOteam#73

Author: duenyang

package-lock.json

@@ -66,7 +66,7 @@
     "omi": "7.6.7",
     "omi-transition": "^0.1.8",
     "tailwind-merge": "^2.2.1",
-    "tdesign-icons-web-components": "^0.0.1-alpha.1"
+    "tdesign-icons-web-components": "^0.0.1-alpha.3"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

package.json

@@ -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'),

site/sidebar.config.ts

@@ -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/base.tsx

@@ -13,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',

src/button/button.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/fake-arrow.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,
   };

src/common/portal.tsx

@@ -32,7 +32,7 @@ spline: base
 您也可以以 IconFont 的形式使用图标，通过如下来使用图标。
 
 ```js
-import 'tdesign-icons-web-components/esm/iconfont/index.css';// 极少的字体定义代码`
+import 'tdesign-icons-web-components/esm/iconfont/index.css';// 极少的字体定义代码
 
 import 'tdesign-icons-web-components/esm/iconfont';
 ```

src/icon/README.md

@@ -25,6 +25,18 @@ const loadingDefaultProps: TdLoadingProps = {
 export default class Loading extends Component<LoadingProps> {
   static defaultProps = loadingDefaultProps;
 
+  static propTypes = {
+    delay: Number,
+    fullscreen: Boolean,
+    indicator: Object,
+    inheritColor: Boolean,
+    loading: Boolean,
+    preventScrollThrough: Boolean,
+    showOverlay: Boolean,
+    size: String,
+    zIndex: Number,
+  };
+
   showLoading = false;
 
   showLoadingFlag = false;

src/loading/loading.tsx

@@ -1,5 +1,5 @@
 import 'tdesign-web-components/button';
-import 'tdesign-web-components/icon';
+import 'tdesign-icons-web-components';
 import 'tdesign-web-components/menu';
 
 import { Component, signal } from 'omi';

src/menu/_example/closable-side.tsx

@@ -15,6 +15,34 @@ export interface PopupProps extends TdPopupProps, StyledProps {
   updateScrollTop?: (content: HTMLElement) => void;
 }
 
+export const PopupTypes = {
+  attach: [String, Function],
+  content: [String, Number, Object, Function],
+  delay: [Number, Array],
+  destroyOnClose: Boolean,
+  disabled: Boolean,
+  hideEmptyPopup: Boolean,
+  overlayClassName: String,
+  overlayInnerClassName: String,
+  overlayInnerStyle: [Object, Function],
+  overlayStyle: [Object, Function],
+  arrowStyle: [Object, Function],
+  placement: String,
+  popperOptions: Object,
+  showArrow: Boolean,
+  trigger: String,
+  triggerElement: [String, Number, Object, Function],
+  visible: Boolean,
+  defaultVisible: Boolean,
+  zIndex: Number,
+  onScroll: Function,
+  onScrollToBottom: Function,
+  onVisibleChange: Function,
+  strategy: String,
+  expandAnimation: Boolean,
+  updateScrollTop: Function,
+};
+
 @tag('t-popup')
 export default class Popup extends Component<PopupProps> {
   static css = `
@@ -26,6 +54,8 @@ export default class Popup extends Component<PopupProps> {
     }
   `;
 
+  static propTypes = PopupTypes;
+
   static defaultProps = {
     attach: 'body',
     destroyOnClose: false,

src/popup/popup.tsx

@@ -14,6 +14,17 @@ export interface SwitchProps<T extends SwitchValue = SwitchValue> extends TdSwit
 
 @tag('t-switch')
 export default class Switch extends Component<SwitchProps> {
+  static propTypes = {
+    value: [String, Number, Boolean],
+    defaultValue: [String, Number, Boolean],
+    label: [Array, Function],
+    disabled: Boolean,
+    loading: Boolean,
+    size: String,
+    customValue: Array,
+    onChange: Function,
+  };
+
   constructor() {
     super();
     this.props = {

src/switch/switch.tsx

@@ -4,6 +4,7 @@ import { Component, createRef, OmiProps, tag } from 'omi';
 
 import classname, { getClassPrefix } from '../_util/classname';
 import { type PopupVisibleChangeContext } from '../popup';
+import { PopupTypes } from '../popup/popup';
 import { TdTooltipProps } from './type';
 
 export type TooltipProps = TdTooltipProps;
@@ -20,6 +21,17 @@ export const tooltipDefaultProps: TooltipProps = {
 export default class Tooltip extends Component<TooltipProps> {
   static defaultProps = tooltipDefaultProps;
 
+  static propTypes = {
+    ...PopupTypes,
+    delay: Number,
+    destroyOnClose: Boolean,
+    duration: Number,
+    placement: String,
+    showArrow: Boolean,
+    theme: String,
+    ignoreAttributes: Array,
+  };
+
   popupRef = createRef();
 
   timerRef = createRef();