Merge pull request #785 from GuYith/master

feat: add divider
Tencent · Aug 12, 2023 · e385843 · e385843
2 parents 74db9f4 + 290e064
commit e385843
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 0 deletions.
diff --git a/tdesign/desktop/src/divider/_example/base.tsx b/tdesign/desktop/src/divider/_example/base.tsx
@@ -0,0 +1,24 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+
+@tag('divider-base')
+export default class DividerBase extends WeElement {
+  render() {
+    return (
+      <h>
+        <p>
+          通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
+        </p>
+        <t-divider></t-divider>
+        <p>
+          通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
+        </p>
+        <t-divider dashed></t-divider>
+        <p>
+          通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
+        </p>
+      </h>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/divider/_example/text.tsx b/tdesign/desktop/src/divider/_example/text.tsx
@@ -0,0 +1,30 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+
+@tag('divider-text')
+export default class DividerText extends WeElement {
+  render() {
+    return (
+      <h>
+        <p>
+          通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
+        </p>
+        <t-divider align="left">TDesign</t-divider>
+        <p>
+          通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
+        </p>
+        <t-divider align="center" style="background-color: red">
+          TDesign
+        </t-divider>
+        <p>
+          通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
+        </p>
+        <t-divider align="right"></t-divider>
+        <p>
+          通过高效广告平台，协助品牌和市场营销者触达数以亿计的中国消费者通过金融科技及企业服务，促进合作伙伴业务发展，助力实现数字化升级，我们大力投资于人才队伍和推动科技创新，积极参与互联网行业协同发展。
+        </p>
+      </h>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/divider/_example/vertical.tsx b/tdesign/desktop/src/divider/_example/vertical.tsx
@@ -0,0 +1,20 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+
+@tag('divider-vertical')
+export default class DividerVertical extends WeElement {
+  render() {
+    return (
+      <h>
+        <span>正直</span>
+        <t-divider layout="vertical"></t-divider>
+        <span>进取</span>
+        <t-divider layout="vertical"></t-divider>
+        <span>合作</span>
+        <t-divider layout="vertical"></t-divider>
+        <span>创新</span>
+      </h>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/divider/divider.tsx b/tdesign/desktop/src/divider/divider.tsx
@@ -0,0 +1,45 @@
+import { h, tag, WeElement, OmiProps, classNames } from 'omi'
+import { DividerProps } from './type'
+import './style/index.js'
+import css from './style/index'
+
+@tag('t-divider')
+export default class Link extends WeElement<DividerProps> {
+  static css = css as string
+
+  static defaultProps = {
+    align: 'center',
+    dashed: false,
+    layout: 'horizontal',
+  }
+
+  static propTypes = {
+    algin: String,
+    children: Object,
+    content: Object,
+    dashed: Boolean,
+    layout: String,
+    style: String,
+    class: String,
+  }
+
+  render(props: OmiProps<DividerProps>) {
+    const classPrefix = 't'
+    // TODO: children is null
+    const childNode = props.content || props.children
+
+    const showText = props.layout !== 'vertical' && !!childNode
+    const dividerClassNames = classNames(props.class, `${classPrefix}-divider`, {
+      [`${classPrefix}-divider--${props.layout}`]: props.layout,
+      [`${classPrefix}-divider--dashed`]: !!props.dashed,
+      [`${classPrefix}-divider--with-text`]: showText,
+      [`${classPrefix}-divider--with-text-${props.align}`]: showText,
+    })
+    console.log('props.style', props.style)
+    return (
+      <div class={dividerClassNames} style={props.style}>
+        {showText ? <span class={`${classPrefix}-divider__inner-text`}>{childNode}</span> : null}
+      </div>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/divider/index.html b/tdesign/desktop/src/divider/index.html
@@ -0,0 +1,10 @@
+<html>
+  <script type="module" src="_example/base.tsx"></script>
+  <script type="module" src="_example/text.tsx"></script>
+  <script type="module" src="_example/vertical.tsx"></script>
+</html>
+<body>
+  <divider-base></divider-base>
+  <divider-text></divider-text>
+  <divider-vertical></divider-vertical>
+</body>
diff --git a/tdesign/desktop/src/divider/index.tsx b/tdesign/desktop/src/divider/index.tsx
@@ -0,0 +1,9 @@
+import _Divider from './divider'
+
+import './style/index.js'
+
+export type { DividerProps } from './type'
+export * from './type'
+
+export const Divider = _Divider
+export default Divider
diff --git a/tdesign/desktop/src/divider/style/index.ts b/tdesign/desktop/src/divider/style/index.ts
@@ -0,0 +1,3 @@
+import dividerStyle from '../../_common/style/web/components/divider/_index.less'
+import theme from '../../_common/style/web/theme/_index.less'
+export default dividerStyle + theme
diff --git a/tdesign/desktop/src/divider/type.ts b/tdesign/desktop/src/divider/type.ts
@@ -0,0 +1,32 @@
+import { TNode } from '../common'
+
+export interface DividerProps {
+  /**
+   * 文本位置（仅在水平分割线有效）
+   * @default center
+   */
+  align?: 'left' | 'right' | 'center'
+  /**
+   * 子元素，同 content
+   */
+  children?: TNode
+  /**
+   * 子元素
+   */
+  content?: TNode
+  /**
+   * 是否虚线（仅在水平分割线有效）
+   * @default false
+   */
+  dashed?: boolean
+  /**
+   * 分隔线类型有两种：水平和垂直
+   * @default horizontal
+   */
+  layout?: 'horizontal' | 'vertical'
+  /**
+   * 样式
+   */
+  style?: string
+  class?: string
+}
diff --git a/tdesign/desktop/src/divider/vite.config.js b/tdesign/desktop/src/divider/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'h.f',
+  },
+})