Merge pull request #787 from GuYith/master

feat: add space
Tencent · Aug 14, 2023 · 9a3cd60 · 9a3cd60
2 parents 72a222a + 0d21072
commit 9a3cd60
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 7 deletions.
diff --git a/tdesign/desktop/src/divider/divider.tsx b/tdesign/desktop/src/divider/divider.tsx
@@ -1,6 +1,5 @@
 import { h, tag, WeElement, OmiProps, classNames } from 'omi'
 import { DividerProps } from './type'
-import './style/index.js'
 import css from './style/index'
 
 @tag('t-divider')

diff --git a/tdesign/desktop/src/divider/index.tsx b/tdesign/desktop/src/divider/index.tsx
@@ -1,7 +1,5 @@
 import _Divider from './divider'
 
-import './style/index.js'
-
 export type { DividerProps } from './type'
 export * from './type'
 

diff --git a/tdesign/desktop/src/link/index.tsx b/tdesign/desktop/src/link/index.tsx
@@ -1,7 +1,5 @@
 import _Link from './link'
 
-import './style/index.js'
-
 export type { LinkProps } from './type'
 
 export const Link = _Link

diff --git a/tdesign/desktop/src/link/link.tsx b/tdesign/desktop/src/link/link.tsx
@@ -1,7 +1,6 @@
 import { h, tag, extractClass, WeElement, OmiProps } from 'omi'
 import { LinkProps } from './type'
 import parseTNode from '../utils/parseTNode'
-import './style/index.js'
 import css from './style/index'
 
 @tag('t-link')
@@ -38,7 +37,7 @@ export default class Link extends WeElement<LinkProps> {
  const classPrefix = 't'
 
  const childNode = props.content || props.children
- const linkClass = extractClass(props, `${classPrefix}-link`, `${classPrefix}-link--theme-${props.theme}`, {
+ const linkClass = extractClass(`${classPrefix}-link`, `${classPrefix}-link--theme-${props.theme}`, {
  [`${classPrefix}-size-s`]: props.size === 'small',
  [`${classPrefix}-size-l`]: props.size === 'large',
  [`${classPrefix}-is-disabled`]: !!props.disabled,

diff --git a/tdesign/desktop/src/space/_example/base.tsx b/tdesign/desktop/src/space/_example/base.tsx
@@ -0,0 +1,22 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+import '../../button/index'
+
+@tag('space-base')
+export default class SpaceBase extends WeElement {
+ render() {
+ return (
+ <h>
+ <t-space>
+ <t-button>Button</t-button>
+ <t-button>Button</t-button>
+ <t-button>Button</t-button>
+ <p>button</p>
+ <p>button</p>
+ <p>button</p>
+ </t-space>
+ </h>
+ )
+ }
+}
diff --git a/tdesign/desktop/src/space/index.html b/tdesign/desktop/src/space/index.html
@@ -0,0 +1,6 @@
+<html>
+ <script type="module" src="_example/base.tsx"></script>
+</html>
+<body>
+ <space-base></space-base>
+</body>
diff --git a/tdesign/desktop/src/space/index.tsx b/tdesign/desktop/src/space/index.tsx
@@ -0,0 +1,7 @@
+import _Space from './space'
+
+export type { SpaceProps } from './type'
+
+export const Space = _Space
+
+export default Space
diff --git a/tdesign/desktop/src/space/space.tsx b/tdesign/desktop/src/space/space.tsx
@@ -0,0 +1,86 @@
+import { h, tag, WeElement, OmiProps, classNames } from 'omi'
+import { SpaceProps } from './type'
+
+import css from './style/index'
+import { toArray } from 'lodash'
+const SizeMap = { small: '8px', medium: '16px', large: '24px' }
+@tag('t-space')
+export default class Link extends WeElement<SpaceProps> {
+ static css = css as string
+ static defaultProps = { breakLine: false, direction: 'horizontal', size: 'medium' }
+ static propTypes = {
+ algin: String,
+ breakLine: Boolean,
+ direction: String,
+ separator: Object,
+ size: Object,
+ style: String,
+ class: String,
+ }
+
+ renderGap = ''
+ renderStyle = {
+ gap: this.renderGap,
+ ...(this.props.breakLine ? { flewWrap: 'wrap' } : {}),
+ ...this.props.style,
+ }
+
+ install() {
+ if (Array.isArray(this.props.size)) {
+ this.renderGap = this.props.size
+ .map((s: string | number) => {
+ if (typeof s === 'number') return `${s}px`
+ if (typeof s === 'string') return SizeMap[s] || this.props.size
+ return s
+ })
+ .join(' ')
+ } else if (typeof this.props.size === 'string') {
+ this.renderGap = SizeMap[this.props.size] || this.props.size
+ } else if (typeof this.props.size === 'number') {
+ this.renderGap = `${this.props.size}px`
+ }
+
+ this.renderStyle = {
+ gap: this.renderGap,
+ ...(this.props.breakLine ? { flewWrap: 'wrap' } : {}),
+ ...this.props.style,
+ }
+
+ console.log('this.renderStyle: ', this.renderStyle)
+ }
+
+ render(props: OmiProps<SpaceProps>) {
+ const classPrefix = 't'
+
+ function renderChildren() {
+ const children = toArray(props.children)
+ const childCount = children.length
+ return children.map((child, index) => {
+ // const separatorNode = renderTNodeJSX(this, 'separator') check 效果
+ const showSeparator = index + 1 !== childCount && props.separator
+ return (
+ <>
+ <div key={index} className={`${classPrefix}-space-item`}>
+ {child}
+ </div>
+ {showSeparator && <div className={`${classPrefix}-space-item-separator`}>{props.separator}</div>}
+ </>
+ )
+ })
+ }
+ console.log('props.children', props.children)
+ return (
+ <>
+ <div
+ style={this.renderStyle}
+ class={classNames(`${classPrefix}-space`, props.class, {
+ [`${classPrefix}-space-align-${props.align}`]: props.align,
+ [`${classPrefix}-space-${props.direction}`]: props.direction,
+ })}
+ >
+ {renderChildren()}
+ </div>
+ </>
+ )
+ }
+}
diff --git a/tdesign/desktop/src/space/style/index.ts b/tdesign/desktop/src/space/style/index.ts
@@ -0,0 +1,3 @@
+import spaceStyle from '../../_common/style/web/components/space/_index.less'
+import theme from '../../_common/style/web/theme/_index.less'
+export default spaceStyle + theme
diff --git a/tdesign/desktop/src/space/type.ts b/tdesign/desktop/src/space/type.ts
@@ -0,0 +1,31 @@
+import { TNode, SizeEnum } from '../common'
+
+export interface SpaceProps {
+ /**
+ * 对齐方式
+ */
+ align?: 'start' | 'end' | 'center' | 'baseline'
+ /**
+ * 是否自动换行，仅在 horizontal 时有效
+ * @default false
+ */
+ breakLine?: boolean
+ /**
+ * 间距方向
+ * @default horizontal
+ */
+ direction?: 'vertical' | 'horizontal'
+ /**
+ * 分隔符
+ */
+ separator?: TNode
+ /**
+ * 间距大小
+ * @default 'medium'
+ */
+ size?: SpaceSize | SpaceSize[]
+ style: String
+ class: String
+}
+
+export type SpaceSize = number | string | SizeEnum
diff --git a/tdesign/desktop/src/space/vite.config.js b/tdesign/desktop/src/space/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ esbuild: {
+ jsxFactory: 'h',
+ jsxFragment: 'h.f',
+ },
+})