docs: support en-US (#9)

linxianxi · Sep 1, 2023 · eaddc4b · eaddc4b
1 parent 2e8e107
commit eaddc4b
Show file tree

Hide file tree

Showing 16 changed files with 196 additions and 32 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -15,4 +15,8 @@ export default defineConfig({
   html2sketch: {},
   mfsu: false,
   outputPath: '.doc',
+  locales: [
+    { id: 'en-US', name: 'EN' },
+    { id: 'zh-CN', name: '中文' },
+  ],
 });
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,7 +1,7 @@
 ---
-title: 更新日志
+title: Changelog
 nav:
-  title: 更新日志
+  title: Changelog
   order: 999
 ---
 

diff --git a/docs/changelog.zh-CN.md b/docs/changelog.zh-CN.md
@@ -0,0 +1,8 @@
+---
+title: 更新记录
+nav:
+  title: 更新记录
+  order: 999
+---
+
+<embed src="../CHANGELOG.md"></embed>
diff --git a/docs/guides/api.md b/docs/guides/api.md
@@ -4,44 +4,45 @@ group:
   title: Usage
   order: 0
 order: 0
-nav: 快速上手
+nav: Get Started
 ---
 
 ### Selectable
 
-| 参数             | 说明                                                                                | 类型                                                                                                           | 默认值              |
-| ---------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------- |
-| defaultValue     | 默认已选择的值                                                                      | (string \| number)[]                                                                                           | -                   |
-| value            | 受控已选择的值                                                                      | (string \| number)[]                                                                                           | -                   |
-| disabled         | 是否禁用                                                                            | boolean                                                                                                        | false               |
-| mode             | 模式                                                                                | `add` \| `remove` \| `reverse`                                                                                 | `add`               |
-| selectFromInside | 是否可以从每项的内部开始框选                                                        | boolean                                                                                                        | true                |
-| getContainer     | 指定容器，设置后，容器需要设置 `position`，因为选择框是 `absolute` 要相对于容器定位 | () => HTMLElement                                                                                              | () => document.body |
-| boxStyle         | 框选框的样式                                                                        | React.CSSProperties                                                                                            | -                   |
-| boxClassName     | 框选框的类名                                                                        | string                                                                                                         | -                   |
-| onStart          | 框选开始时触发的事件                                                                | () => void                                                                                                     | -                   |
-| onEnd            | 框选结束时触发的事件                                                                | (selectingValue: (string \| number)[], { added: (string \| number)[], removed: (string \| number)[] }) => void | -                   |
+| 参数             | 说明                                                                                                                 | 类型                                                                                                           | 默认值              |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------- |
+| defaultValue     | Initial selected option                                                                                              | (string \| number)[]                                                                                           | -                   |
+| value            | Current selected option                                                                                              | (string \| number)[]                                                                                           | -                   |
+| disabled         | Whether to disable                                                                                                   | boolean                                                                                                        | false               |
+| mode             | Selection mode                                                                                                       | `add` \| `remove` \| `reverse`                                                                                 | `add`               |
+| selectFromInside | Whether to select from the target inside                                                                             | boolean                                                                                                        | true                |
+| getContainer     | Specify the container. After setting, the container needs to set `position`, because the selection box is `absolute` | () => HTMLElement                                                                                              | () => document.body |
+| boxStyle         | Selection box style                                                                                                  | React.CSSProperties                                                                                            | -                   |
+| boxClassName     | Selection box className                                                                                              | string                                                                                                         | -                   |
+| onStart          | Called when selection starts                                                                                         | () => void                                                                                                     | -                   |
+| onEnd            | Called when selection ends                                                                                           | (selectingValue: (string \| number)[], { added: (string \| number)[], removed: (string \| number)[] }) => void | -                   |
 
 ### useSelectable
 
 ```typescript
-const { setNodeRef, isSelected, isAdding, isRemoving, isDragging } = useSelectable({
+const { setNodeRef, isSelected, isAdding, isRemoving, isSelecting, isDragging } = useSelectable({
   value,
   disabled,
   rule,
 });
 ```
 
-| 参数     | 说明                 | 类型                       | 默认值      |
-| -------- | -------------------- | -------------------------- | ----------- |
-| value    | string \| number     | 当前可框选元素的值         | -           |
-| disabled | 是否禁用             | boolean                    | false       |
-| rule     | 选中规则，碰撞或包含 | `collision` \| `inclusion` | `collision` |
+| 参数     | 说明                                        | 类型                       | 默认值      |
+| -------- | ------------------------------------------- | -------------------------- | ----------- |
+| value    | The value of the current selectable element | string \| number           | -           |
+| disabled | Whether to disable                          | boolean                    | false       |
+| rule     | Selection rule                              | `collision` \| `inclusion` | `collision` |
 
-| 参数       | 说明               | 类型                                   |
-| ---------- | ------------------ | -------------------------------------- |
-| setNodeRef | 设置当前可框选元素 | (element: HTMLElement \| null) => void |
-| isSelected | 是否已经选中       | boolean                                |
-| isAdding   | 是否正在添加       | boolean                                |
-| isRemoving | 是否正在删除       | boolean                                |
-| isDragging | 是否正在框选       | boolean                                |
+| 参数        | 说明                                   | 类型                                   |
+| ----------- | -------------------------------------- | -------------------------------------- |
+| setNodeRef  | Set the selectable element             | (element: HTMLElement \| null) => void |
+| isDragging  | Whether it is currently dragging       | boolean                                |
+| isSelected  | Whether it has been selected           | boolean                                |
+| isAdding    | Whether it is currently being added    | boolean                                |
+| isRemoving  | Whether it is currently being removed  | boolean                                |
+| isSelecting | Whether it is currently being selected | boolean                                |
diff --git a/docs/guides/api.zh-CN.md b/docs/guides/api.zh-CN.md
@@ -0,0 +1,48 @@
+---
+title: API
+group:
+  title: 快速上手
+  order: 0
+order: 0
+nav: 快速上手
+---
+
+### Selectable
+
+| 参数             | 说明                                                                                | 类型                                                                                                           | 默认值              |
+| ---------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------- |
+| defaultValue     | 默认已选择的值                                                                      | (string \| number)[]                                                                                           | -                   |
+| value            | 受控已选择的值                                                                      | (string \| number)[]                                                                                           | -                   |
+| disabled         | 是否禁用                                                                            | boolean                                                                                                        | false               |
+| mode             | 模式                                                                                | `add` \| `remove` \| `reverse`                                                                                 | `add`               |
+| selectFromInside | 是否可以从目标内部开始框选                                                          | boolean                                                                                                        | true                |
+| getContainer     | 指定容器，设置后，容器需要设置 `position`，因为选择框是 `absolute` 要相对于容器定位 | () => HTMLElement                                                                                              | () => document.body |
+| boxStyle         | 框选框的样式                                                                        | React.CSSProperties                                                                                            | -                   |
+| boxClassName     | 框选框的类名                                                                        | string                                                                                                         | -                   |
+| onStart          | 框选开始时触发的事件                                                                | () => void                                                                                                     | -                   |
+| onEnd            | 框选结束时触发的事件                                                                | (selectingValue: (string \| number)[], { added: (string \| number)[], removed: (string \| number)[] }) => void | -                   |
+
+### useSelectable
+
+```typescript
+const { setNodeRef, isSelected, isAdding, isRemoving, isSelecting, isDragging } = useSelectable({
+  value,
+  disabled,
+  rule,
+});
+```
+
+| 参数     | 说明                 | 类型                       | 默认值      |
+| -------- | -------------------- | -------------------------- | ----------- |
+| value    | 当前可框选元素的值   | string \| number           | -           |
+| disabled | 是否禁用             | boolean                    | false       |
+| rule     | 选中规则，碰撞或包含 | `collision` \| `inclusion` | `collision` |
+
+| 参数        | 说明               | 类型                                   |
+| ----------- | ------------------ | -------------------------------------- |
+| setNodeRef  | 设置当前可框选元素 | (element: HTMLElement \| null) => void |
+| isDragging  | 是否正在框选       | boolean                                |
+| isSelected  | 是否已经选中       | boolean                                |
+| isAdding    | 当前是否正在添加   | boolean                                |
+| isRemoving  | 当前是否正在删除   | boolean                                |
+| isSelecting | 当前是否被框选     | boolean                                |
diff --git a/docs/guides/basic.zh-CN.md b/docs/guides/basic.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: 基本使用
+group:
+  title: 示例
+  order: 1
+order: 0
+---
+
+### 基本使用
+
+<code src="../examples/basic.tsx"></code>
diff --git a/docs/guides/click-to-select.zh-CN.md b/docs/guides/click-to-select.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: 点击进行选择
+group:
+  title: 示例
+  order: 1
+order: 5
+---
+
+### 可以添加 onClick 事件实现点击进行选择
+
+<code src="../examples/click-to-select.tsx"></code>
diff --git a/docs/guides/faq.md b/docs/guides/faq.md
@@ -4,9 +4,9 @@ group:
   title: Usage
   order: 0
 order: 1
-nav: 快速上手
+nav: Get Started
 ---
 
-### 为什么设置了样式 `user-select: none` 后，鼠标从设置了此样式的元素内部开始框选之后拖到容器边缘无法滚动？
+### Why after setting the style `user-select: none`, the mouse cannot scroll after starting the box selection from inside the element set with this style and dragging it to the edge of the container?
 
-经过测试，这是 `chrome` 的行为，`safari` 则不会。如果想让文字无法被选择，推荐使用 `::selection` 选择器在容器内设置为 `background-color: transparent`。
+After testing, this is the behavior of `chrome`, and `safari` does not. If you want the text not to be selectable, it is recommended to use the `::selection` selector to set `background-color: transparent` inside the container.
diff --git a/docs/guides/faq.zh-CN.md b/docs/guides/faq.zh-CN.md
@@ -0,0 +1,12 @@
+---
+title: FAQ
+group:
+  title: 快速上手
+  order: 0
+order: 1
+nav: 快速上手
+---
+
+### 为什么设置了样式 `user-select: none` 后，鼠标从设置了此样式的元素内部开始框选之后拖到容器边缘无法滚动？
+
+经过测试，这是 `chrome` 的行为，`safari` 则不会。如果想让文字无法被选择，推荐使用 `::selection` 选择器在容器内设置为 `background-color: transparent`。
diff --git a/docs/guides/reset-at-end.zh-CN.md b/docs/guides/reset-at-end.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: 框选结束时重置
+group:
+  title: 示例
+  order: 1
+order: 2
+---
+
+### 框选结束时重置之前的选择
+
+<code src="../examples/reset-at-end.tsx"></code>
diff --git a/docs/guides/reset-at-start.zh-CN.md b/docs/guides/reset-at-start.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: 框选开始时重置
+group:
+  title: 示例
+  order: 1
+order: 1
+---
+
+### 框选开始时重置之前的选择
+
+<code src="../examples/reset-at-start.tsx"></code>
diff --git a/docs/guides/scroll-container.zh-CN.md b/docs/guides/scroll-container.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: 设置框选滚动的容器
+group:
+  title: 示例
+  order: 1
+order: 3
+---
+
+### 可以设置框选滚动的容器
+
+<code src="../examples/scroll-container.tsx"></code>
diff --git a/docs/guides/shift-remove.zh-CN.md b/docs/guides/shift-remove.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: 按住 shift 框选删除
+group:
+  title: 示例
+  order: 1
+order: 4
+---
+
+### 按住 shift 框选进行删除
+
+<code src="../examples/shift-remove.tsx"></code>
diff --git a/docs/guides/virtual-list.zh-CN.md b/docs/guides/virtual-list.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: 虚拟列表
+group:
+  title: 示例
+  order: 1
+order: 6
+---
+
+### 配合 `react-window` 实现在虚拟列表中进行框选
+
+<code src="../examples/virtual-list.tsx"></code>
diff --git a/docs/index.md b/docs/index.md
@@ -1,9 +1,11 @@
 ---
+nav: Home
+
 hero:
   title: react-selectable-box
   description: A React component that allows you to select elements in the drag area using the mouse
   actions:
-    - text: 快速上手
+    - text: Get Started
       link: /guides/api
     - text: Github
       link: https://github.com/linxianxi/react-selectable-box

diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md
@@ -0,0 +1,12 @@
+---
+hero:
+  title: react-selectable-box
+  description: 一个可以用鼠标框选元素的 React 组件
+  actions:
+    - text: 快速上手
+      link: /guides/api
+    - text: Github
+      link: https://github.com/linxianxi/react-selectable-box
+---
+
+<embed src="../README.md"></embed>