feat: 增加了space组件 (#1259)

jdf2e · Jul 27, 2023 · 165c891 · 165c891
1 parent 71bd729
commit 165c891
Show file tree

Hide file tree

Showing 17 changed files with 1,080 additions and 1 deletion.
diff --git a/scripts/format-table-markdown.js b/scripts/format-table-markdown.js
@@ -11,7 +11,6 @@ function convertMdTables(inputFile, outputFile) {
 
   // 在 HTML 中查找表格，并将其转换为数组
   const tables = html.match(/<table[\s\S]*?<\/table>/g)
-
   // 将数组中的每个表格转换为对象
   const tableObjects = tables.map((table) => {
     const rows = table.match(/<tr[\s\S]*?<\/tr>/g)

diff --git a/src/config.json b/src/config.json
@@ -212,6 +212,17 @@
           "exportEmpty": true,
           "author": "yushuang24"
         },
+        {
+          "version": "1.0.0",
+          "name": "Space",
+          "type": "component",
+          "cName": "间距",
+          "desc": "元素之间的间距，保持相同的宽度",
+          "sort": 8,
+          "show": true,
+          "taro": true,
+          "author": "ivan"
+        },
         {
           "version": "2.0.0",
           "name": "Sticky",

diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
@@ -747,3 +747,4 @@ export type NutCSSVariables =
   | 'nutuiRowContentHeight'
   | 'nutuiRowContentLineHeight'
   | 'nutuiColDefaultMarginBottom'
+  | 'nutuiSpaceGap'
diff --git a/src/packages/space/__test__/__snapshots__/space.spec.tsx.snap b/src/packages/space/__test__/__snapshots__/space.spec.tsx.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match snapshot 1`] = `
+<div>
+  <div
+    class="nut-space nut-space-horizontal"
+  >
+    <div
+      class="nut-space-item"
+    >
+      <button
+        class="nut-button nut-button--normal nut-button--round"
+        type="button"
+      >
+        <div
+          class="nut-button__warp"
+        >
+          <div
+            class=""
+          >
+            按钮1
+          </div>
+        </div>
+      </button>
+    </div>
+    <div
+      class="nut-space-item"
+    >
+      <button
+        class="nut-button nut-button--normal nut-button--round"
+        type="button"
+      >
+        <div
+          class="nut-button__warp"
+        >
+          <div
+            class=""
+          >
+            按钮2
+          </div>
+        </div>
+      </button>
+    </div>
+    <div
+      class="nut-space-item"
+    >
+      <button
+        class="nut-button nut-button--normal nut-button--round"
+        type="button"
+      >
+        <div
+          class="nut-button__warp"
+        >
+          <div
+            class=""
+          >
+            按钮3
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/packages/space/__test__/space.spec.tsx b/src/packages/space/__test__/space.spec.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Space } from '../space'
+import Button from '@/packages/button'
+
+const prefixCls = 'nut-space'
+
+test('should match snapshot', () => {
+  const { container } = render(
+    <Space>
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+    </Space>
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('render with props direction', () => {
+  const { container } = render(
+    <Space direction="vertical">
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+    </Space>
+  )
+  const nutSpace = container.getElementsByClassName('nut-space')[0]
+  expect(nutSpace).toHaveClass(`${prefixCls}-vertical`)
+})
+
+test('render with props align', () => {
+  const { container } = render(
+    <Space align="end">
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+    </Space>
+  )
+  const nutSpace = container.getElementsByClassName('nut-space')[0]
+  expect(nutSpace).toHaveClass(`${prefixCls}-align-end`)
+})
+
+test('render with props justify', () => {
+  const { container } = render(
+    <Space justify="center">
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+    </Space>
+  )
+  const nutSpace = container.getElementsByClassName('nut-space')[0]
+  expect(nutSpace).toHaveClass(`${prefixCls}-justify-center`)
+})
+
+test('render with props wrap', () => {
+  const { container } = render(
+    <Space wrap>
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+      <Button>按钮4</Button>
+      <Button>按钮5</Button>
+      <Button>按钮6</Button>
+    </Space>
+  )
+  const nutSpace = container.getElementsByClassName('nut-space')[0]
+  expect(nutSpace).toHaveClass(`${prefixCls}-wrap`)
+})
diff --git a/src/packages/space/demo.taro.tsx b/src/packages/space/demo.taro.tsx
@@ -0,0 +1,117 @@
+import React from 'react'
+import {
+  Space,
+  Button,
+  Cell,
+  ConfigProvider,
+} from '@/packages/nutui.react.taro'
+import { useTranslate } from '@/sites/assets/locale'
+
+interface Button {
+  button1: string
+  button2: string
+  button3: string
+  button4: string
+  button5: string
+  button6: string
+}
+interface T extends Button {
+  basic: string
+  wrap: string
+  direction: string
+  spaceGap: string
+}
+
+const SpaceDemo = () => {
+  const [translated] = useTranslate<T>({
+    'zh-CN': {
+      basic: '基本用法',
+      wrap: '换行',
+      direction: '垂直',
+      spaceGap: '间距大小',
+      button1: '按钮1',
+      button2: '按钮2',
+      button3: '按钮3',
+      button4: '按钮4',
+      button5: '按钮5',
+      button6: '按钮6',
+    },
+    'zh-TW': {
+      basic: '基本用法',
+      wrap: '換行',
+      direction: '垂直',
+      spaceGap: '間距大小',
+      button1: '按钮1',
+      button2: '按钮2',
+      button3: '按钮3',
+      button4: '按钮4',
+      button5: '按钮5',
+      button6: '按钮6',
+    },
+    'en-US': {
+      basic: 'Basic Usage',
+      wrap: 'wrap',
+      direction: 'Direction',
+      spaceGap: 'SpaceGap',
+      button1: 'button1',
+      button2: 'button2',
+      button3: 'button3',
+      button4: 'button4',
+      button5: 'button5',
+      button6: 'button6',
+    },
+  })
+
+  return (
+    <>
+      <div className="demo">
+        <h2>{translated.basic}</h2>
+        <Cell>
+          <Space>
+            <Button>按钮1</Button>
+            <Button>按钮2</Button>
+            <Button>按钮3</Button>
+          </Space>
+        </Cell>
+
+        <h2>{translated.wrap}</h2>
+        <Cell>
+          <Space wrap>
+            <Button>按钮1</Button>
+            <Button>按钮2</Button>
+            <Button>按钮3</Button>
+            <Button>按钮4</Button>
+            <Button>按钮5</Button>
+            <Button>按钮6</Button>
+          </Space>
+        </Cell>
+
+        <h2>{translated.direction}</h2>
+        <Cell>
+          <Space direction="vertical">
+            <Button>按钮1</Button>
+            <Button>按钮2</Button>
+            <Button>按钮3</Button>
+          </Space>
+        </Cell>
+
+        <h2>{translated.spaceGap}</h2>
+        <Cell>
+          <ConfigProvider
+            theme={{
+              nutuiSpaceGap: '20px',
+            }}
+          >
+            <Space>
+              <Button>按钮1</Button>
+              <Button>按钮2</Button>
+              <Button>按钮3</Button>
+            </Space>
+          </ConfigProvider>
+        </Cell>
+      </div>
+    </>
+  )
+}
+
+export default SpaceDemo
diff --git a/src/packages/space/demo.tsx b/src/packages/space/demo.tsx
@@ -0,0 +1,114 @@
+import React from 'react'
+import { Space } from './space'
+import Button from '@/packages/button'
+import Cell from '@/packages/cell'
+import ConfigProvider from '@/packages/configprovider'
+import { useTranslate } from '@/sites/assets/locale'
+
+interface Button {
+  button1: string
+  button2: string
+  button3: string
+  button4: string
+  button5: string
+  button6: string
+}
+interface T extends Button {
+  basic: string
+  wrap: string
+  direction: string
+  spaceGap: string
+}
+const SpaceDemo = () => {
+  const [translated] = useTranslate<T>({
+    'zh-CN': {
+      basic: '基本用法',
+      wrap: '换行',
+      direction: '垂直',
+      spaceGap: '间距大小',
+      button1: '按钮1',
+      button2: '按钮2',
+      button3: '按钮3',
+      button4: '按钮4',
+      button5: '按钮5',
+      button6: '按钮6',
+    },
+    'zh-TW': {
+      basic: '基本用法',
+      wrap: '換行',
+      direction: '垂直',
+      spaceGap: '間距大小',
+      button1: '按钮1',
+      button2: '按钮2',
+      button3: '按钮3',
+      button4: '按钮4',
+      button5: '按钮5',
+      button6: '按钮6',
+    },
+    'en-US': {
+      basic: 'Basic Usage',
+      wrap: 'wrap',
+      direction: 'Direction',
+      spaceGap: 'SpaceGap',
+      button1: 'button1',
+      button2: 'button2',
+      button3: 'button3',
+      button4: 'button4',
+      button5: 'button5',
+      button6: 'button6',
+    },
+  })
+
+  return (
+    <>
+      <div className="demo">
+        <h2>{translated.basic}</h2>
+        <Cell>
+          <Space>
+            <Button>{translated.button1}</Button>
+            <Button>{translated.button2}</Button>
+            <Button>{translated.button3}</Button>
+          </Space>
+        </Cell>
+
+        <h2>{translated.wrap}</h2>
+        <Cell>
+          <Space wrap>
+            <Button>{translated.button1}</Button>
+            <Button>{translated.button2}</Button>
+            <Button>{translated.button3}</Button>
+            <Button>{translated.button4}</Button>
+            <Button>{translated.button5}</Button>
+            <Button>{translated.button6}</Button>
+          </Space>
+        </Cell>
+
+        <h2>{translated.direction}</h2>
+        <Cell>
+          <Space direction="vertical">
+            <Button>{translated.button1}</Button>
+            <Button>{translated.button2}</Button>
+            <Button>{translated.button3}</Button>
+          </Space>
+        </Cell>
+
+        <h2>{translated.spaceGap}</h2>
+        <Cell>
+          <ConfigProvider
+            theme={{
+              nutuiSpaceGap: '20px',
+            }}
+          >
+            <Space>
+              <Button>{translated.button1}</Button>
+              <Button>{translated.button2}</Button>
+              <Button>{translated.button3}</Button>
+            </Space>
+          </ConfigProvider>
+        </Cell>
+      </div>
+    </>
+  )
+}
+
+export default SpaceDemo