Merge pull request #54 from duenyang/feature/switch

feat(switch): switch complete 🎉

DEVELOP_GUIDE.md

@@ -123,11 +123,15 @@ npm run start
 },
 ```
 
+### Demo 格式
+
+目前支持 omi class 组件和 function 组件demo，前者适用于有状态的demo，后者适用于静态的demo展示，具体可参考`switch`组件
+
 ### 组件 Demo 演示配置
 
 为了保证与 vue 等其他仓库演示文档内容统一，目前将公共基础演示 demo 与说明归档在 `src/_common/docs/web/api/[组件].md` 中，其中需要各个技术栈的组件提供文档里面所要求的基础 demo 文件否则会编译警告。
 
-例如 `tooltip` 组件则需要 `_expample` 文件夹中包含有 `arrow.jsx`、 `noArrow.jsx` 文件
+例如 `tooltip` 组件则需要 `_expample` 文件夹中包含有 `arrow.tsx`、 `noArrow.tsx` 文件
 
 ```md
 # Tooltip 文字提示

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 === '_common' || name === 'style') return false;
+  if (name === 'style' || name.startsWith('_')) return false;
   const componentPath = path.resolve(componentsPath, name);
   if (fs.statSync(componentPath).isDirectory()) {
     return true;
@@ -21,5 +21,3 @@ const code = components.reduce((pre, next) => `${pre}export * from './${next}';\
 fs.writeFileSync(path.resolve(componentsPath, 'index.ts'), code, {
   encoding: 'utf-8',
 });
-
-console.log(code);

script/plugin-tdoc/md-to-wc.mjs

@@ -126,7 +126,7 @@ export default async function mdToReact(options) {
     sourcemap: true,
   });
 
-  return { code: result.code, map: result.map };
+  return { code: result.code.replace(/{/g, '{').replace(/}/g, '}'), map: result.map };
 }
 
 const DEFAULT_TABS = [
@@ -199,14 +199,16 @@ async function customRender({ source, file, md }) {
     ).html;
     mdSegment.apiMd = md.render.call(
       md,
-      `${pageData.toc ? '[toc]\n' : ''}${apiMd.replace(/<!--[\s\S]+?-->/g, '')}`,
+      `${pageData.toc ? '[toc]\n' : ''}${apiMd
+        .replace(/<!--[\s\S]+?-->/g, '')
+        .replace(/\{/g, '&#123;')
+        .replace(/\}/g, '&#125;')}`, // 防止esbuild编译报错
     ).html;
   } else {
     mdSegment.docMd = md.render.call(
       md,
       `${pageData.toc ? '[toc]\n' : ''}${content.replace(/<!--[\s\S]+?-->/g, '')}`,
     ).html;
   }
-
   return mdSegment;
 }

site/sidebar.config.ts

@@ -89,7 +89,7 @@ export default [
         title: 'Switch 开关',
         name: 'switch',
         path: '/components/switch',
-        // component: () => import('tdesign-web-components/switch/README.md'),
+        component: () => import('tdesign-web-components/switch/README.md'),
       },
     ],
   },

src/_util/classname.ts

@@ -0,0 +1,49 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export default function classname(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function getClassPrefix() {
+  return (window as any).__TDESIGN_THEME_PREFIX__ || 't';
+}
+
+export const classPrefix = getClassPrefix();
+
+export function getCommonClassName() {
+  const names = {
+    SIZE: {
+      default: '',
+      xs: `${classPrefix}-size-xs`,
+      small: `${classPrefix}-size-s`,
+      medium: `${classPrefix}-size-m`,
+      large: `${classPrefix}-size-l`,
+      xl: `${classPrefix}-size-xl`,
+      block: `${classPrefix}-size-full-width`,
+    },
+    STATUS: {
+      loading: `${classPrefix}-is-loading`,
+      disabled: `${classPrefix}-is-disabled`,
+      focused: `${classPrefix}-is-focused`,
+      success: `${classPrefix}-is-success`,
+      error: `${classPrefix}-is-error`,
+      warning: `${classPrefix}-is-warning`,
+      selected: `${classPrefix}-is-selected`,
+      active: `${classPrefix}-is-active`,
+      checked: `${classPrefix}-is-checked`,
+      current: `${classPrefix}-is-current`,
+      hidden: `${classPrefix}-is-hidden`,
+      visible: `${classPrefix}-is-visible`,
+      expanded: `${classPrefix}-is-expanded`,
+      indeterminate: `${classPrefix}-is-indeterminate`,
+    },
+  };
+  return {
+    SIZE: names.SIZE,
+    STATUS: names.STATUS,
+    sizeClassNames: names.SIZE,
+    statusClassNames: names.STATUS,
+    classPrefix,
+  };
+}

src/_util/parseTNode.ts

@@ -0,0 +1,38 @@
+import isFunction from 'lodash/isFunction';
+import { cloneElement } from 'omi';
+
+import log from '../_common/js/log';
+import { TNode } from '../common';
+
+// 解析 TNode 数据结构
+export default function parseTNode(
+  renderNode: TNode | TNode<any> | undefined,
+  renderParams?: any,
+  defaultNode?: TNode,
+): TNode {
+  let node: TNode = null;
+
+  if (typeof renderNode === 'function') {
+    node = renderNode(renderParams);
+  } else if (renderNode !== null) {
+    node = renderNode ?? defaultNode;
+  }
+  return node as TNode;
+}
+
+/**
+ * 解析各种数据类型的 TNode
+ * 函数类型：content={(props) => <Icon></Icon>}
+ * 组件类型：content={<Button>click me</Button>} 这种方式可以避免函数重复渲染，对应的 props 已经注入
+ * 字符类型
+ */
+export function parseContentTNode<T>(tnode: TNode<T>, props: T) {
+  if (isFunction(tnode)) return tnode(props) as TNode;
+  if (!tnode || ['string', 'number', 'boolean'].includes(typeof tnode)) return tnode as TNode;
+  try {
+    return cloneElement(tnode, { ...props });
+  } catch (e) {
+    log.warn('parseContentTNode', `${tnode} is not a valid ReactNode`);
+    return null;
+  }
+}

src/button/_example/base.tsx

@@ -1,11 +1,12 @@
 import 'tdesign-web-components/button';
+import 'tdesign-web-components/space';
 
 import { Component } from 'omi';
 
 export default class Button extends Component {
   render() {
     return (
-      <div style={{ gap: 16, display: 'inline-flex' }}>
+      <t-space>
         <t-button theme="default" variant="base">
           填充按钮
         </t-button>
@@ -18,7 +19,7 @@ export default class Button extends Component {
         <t-button theme="default" variant="text">
           文字按钮
         </t-button>
-      </div>
+      </t-space>
     );
   }
 }