Skip to content

Commit 569a0c4

Browse files
wangdicoderwangdicoder
committed
Merge branch 'master' of github.com:wangdicoder/tiny-design
2 parents 8691714 + b81d406 commit 569a0c4

24 files changed

Lines changed: 1130 additions & 9 deletions

‎.changeset/input-otp-onchange-behavior.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@tiny-design/react": minor
3+
---
4+
5+
Improve `InputOTP` behaviour:
6+
7+
- Fire `onChange` on every value update instead of only when all cells are filled.
8+
- Fix masked cell rendering logic.
9+
- Adjust caret colour to follow current text colour.
10+
- Update docs and tests for the new behaviour and add Chinese docs entry.

‎apps/docs/src/assets/icon/input-otp.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎apps/docs/src/routers.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ const c = {
129129
speedDial: ll(() => import('../../../packages/react/src/speed-dial/index.md'), () => import('../../../packages/react/src/speed-dial/index.zh_CN.md')),
130130
anchor: ll(() => import('../../../packages/react/src/anchor/index.md'), () => import('../../../packages/react/src/anchor/index.zh_CN.md')),
131131
autoComplete: ll(() => import('../../../packages/react/src/auto-complete/index.md'), () => import('../../../packages/react/src/auto-complete/index.zh_CN.md')),
132+
inputOTP: ll(() => import('../../../packages/react/src/input-otp/index.md'), () => import('../../../packages/react/src/input-otp/index.zh_CN.md')),
132133
overlay: ll(() => import('../../../packages/react/src/overlay/index.md'), () => import('../../../packages/react/src/overlay/index.zh_CN.md')),
133134
};
134135

@@ -161,7 +162,7 @@ export const getComponentMenu = (s: SiteLocale): RouterItem[] => {
161162
{
162163
title: s.categories.layout,
163164
children: [
164-
{ title: 'Aspect Ratio', route: 'aspect-ratio', component: pick(c.aspectRatio, z) },
165+
{ title: 'AspectRatio', route: 'aspect-ratio', component: pick(c.aspectRatio, z) },
165166
{ title: 'Divider', route: 'divider', component: pick(c.divider, z) },
166167
{ title: 'Flex', route: 'flex', component: pick(c.flex, z) },
167168
{ title: 'Grid', route: 'grid', component: pick(c.grid, z) },
@@ -216,15 +217,16 @@ export const getComponentMenu = (s: SiteLocale): RouterItem[] => {
216217
{ title: 'ColorPicker', route: 'color-picker', component: pick(c.colorPicker, z) },
217218
{ title: 'DatePicker', route: 'date-picker', component: pick(c.datePicker, z) },
218219
{ title: 'Input', route: 'input', component: pick(c.input, z) },
219-
{ title: 'Input Number', route: 'input-number', component: pick(c.inputNumber, z) },
220-
{ title: 'Input Password', route: 'input-password', component: pick(c.inputPassword, z) },
221-
{ title: 'Native Select', route: 'native-select', component: pick(c.nativeSelect, z) },
220+
{ title: 'InputNumber', route: 'input-number', component: pick(c.inputNumber, z) },
221+
{ title: 'InputPassword', route: 'input-password', component: pick(c.inputPassword, z) },
222+
{ title: 'InputOTP', route: 'input-otp', component: pick(c.inputOTP, z) },
223+
{ title: 'NativeSelect', route: 'native-select', component: pick(c.nativeSelect, z) },
222224
{ title: 'Radio', route: 'radio', component: pick(c.radio, z) },
223225
{ title: 'Rate', route: 'rate', component: pick(c.rate, z) },
224226
{ title: 'Segmented', route: 'segmented', component: pick(c.segmented, z) },
225227
{ title: 'Select', route: 'select', component: pick(c.select, z) },
226228
{ title: 'Slider', route: 'slider', component: pick(c.slider, z) },
227-
{ title: 'Split Button', route: 'split-button', component: pick(c.splitButton, z) },
229+
{ title: 'SplitButton', route: 'split-button', component: pick(c.splitButton, z) },
228230
{ title: 'Switch', route: 'switch', component: pick(c.switch, z) },
229231
{ title: 'Tabs', route: 'tabs', component: pick(c.tabs, z) },
230232
{ title: 'Textarea', route: 'textarea', component: pick(c.textarea, z) },
@@ -240,15 +242,15 @@ export const getComponentMenu = (s: SiteLocale): RouterItem[] => {
240242
{ title: 'Drawer', route: 'drawer', component: pick(c.drawer, z) },
241243
{ title: 'Loader', route: 'loader', component: pick(c.loader, z) },
242244
{ title: 'Overlay', route: 'overlay', component: pick(c.overlay, z) },
243-
{ title: 'Loading Bar', route: 'loading-bar', component: pick(c.loadingBar, z) },
245+
{ title: 'LoadingBar', route: 'loading-bar', component: pick(c.loadingBar, z) },
244246
{ title: 'Message', route: 'message', component: pick(c.message, z) },
245247
{ title: 'Modal', route: 'modal', component: pick(c.modal, z) },
246248
{ title: 'Notification', route: 'notification', component: pick(c.notification, z) },
247249
{ title: 'PopConfirm', route: 'pop-confirm', component: pick(c.popConfirm, z) },
248250
{ title: 'Result', route: 'result', component: pick(c.result, z) },
249-
{ title: 'Scroll Indicator', route: 'scroll-indicator', component: pick(c.scrollIndicator, z) },
251+
{ title: 'ScrollIndicator', route: 'scroll-indicator', component: pick(c.scrollIndicator, z) },
250252
{ title: 'Skeleton', route: 'skeleton', component: pick(c.skeleton, z) },
251-
{ title: 'Strength Indicator', route: 'strength-indicator', component: pick(c.strengthIndicator, z) },
253+
{ title: 'StrengthIndicator', route: 'strength-indicator', component: pick(c.strengthIndicator, z) },
252254
],
253255
},
254256
{

‎packages/react/src/form/ARCHITECTURE.md‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
# Form Component Architecture
2+
3+
## Overview
4+
5+
The Form system uses a **pub/sub pattern** built around a central `FormInstance` class, with two React Contexts wiring everything together.
6+
7+
```
8+
Form (Provider)
9+
├── FormInstanceContext → shares the FormInstance (state store)
10+
├── FormOptionsContext → shares layout/validation options
11+
└── Form.Item (Consumer) → subscribes to FormInstance for its field
12+
```
13+
14+
### FormInstance — The State Store
15+
16+
A plain class (not React state) that holds all form data:
17+
18+
| Concern | Storage | Key Methods |
19+
|---|---|---|
20+
| **Values** | `values: { [name]: any }` | `getFieldValue`, `setFieldValue`, `setFieldValues` |
21+
| **Errors** | `errors: { [name]: string[] }` | `getFieldError`, `setFieldError` |
22+
| **Rules** | `rules: { [name]: Rule[] }` | `setFieldRules` |
23+
| **Subscriptions** | `listeners: ((name) => void)[]` | `subscribe`, `notify` |
24+
25+
When a value or validation result changes, `notify(name)` fires and every subscribed `FormItem` checks if the notification is relevant to it.
26+
27+
### Form — The Wrapper
28+
29+
- Creates (or accepts via `form` prop) a `FormInstance`, stored in a `useRef`
30+
- Provides it to children via `FormInstanceContext`
31+
- Provides layout options (`labelCol`, `wrapperCol`, `validateTrigger`, `layout`) via `FormOptionsContext`
32+
- Handles **submit**: calls `validateFields()` on all fields, then routes to `onFinish` or `onFinishFailed`
33+
- Handles **reset**: calls `resetFields()` which resets values to `initialValues` and notifies all fields with `'*'`
34+
35+
### Form.Item — The Field Connector
36+
37+
Each `Form.Item` with a `name` prop:
38+
39+
1. **Registers rules** — On mount, calls `form.setFieldRules(name, rules)`
40+
2. **Subscribes** — Calls `form.subscribe(callback)` in a `useEffect`. Updates local `value`/`error` state only if the notification matches its own `name` (or either side uses `'*'`)
41+
3. **Injects props via `cloneElement`** — The child component gets:
42+
- `value` (or the prop name from `valuePropName`) — bound to `form.getFieldValue(name)`
43+
- `onChange` — calls `form.setFieldValue()` and optionally validates (if `validateTrigger === 'onChange'`)
44+
- `onBlur` — validates on blur (if `validateTrigger === 'onBlur'`)
45+
4. **Renders layout** — Uses `Row`/`Col` grid for label and input columns
46+
5. **Shows errors** — Displays validation errors with a slide-down `<Transition>` animation
47+
48+
### useForm Hook
49+
50+
A factory function that creates a `FormInstance` externally:
51+
52+
```ts
53+
const [form] = Form.useForm({ username: '', password: '' });
54+
// Pass to <Form form={form}> to control the form programmatically
55+
```
56+
57+
If no `form` prop is provided, `Form` creates one internally.
58+
59+
### Validation (form-helper.ts)
60+
61+
The `validate` function checks a value against a `Rule` supporting: `required`, `type`, `max`, `min`, `len`, `enum`, `pattern`, `whitespace`, `transform`, and custom `validator` functions.
62+
63+
---
64+
65+
## Diagrams
66+
67+
### Component Hierarchy & Context Flow
68+
69+
```mermaid
70+
graph TD
71+
subgraph Form["<Form>"]
72+
FI["FormInstance (useRef)"]
73+
FIC["FormInstanceContext.Provider"]
74+
FOC["FormOptionsContext.Provider"]
75+
end
76+
77+
subgraph FormItem1["<Form.Item name='username'>"]
78+
SUB1["subscribe(listener)"]
79+
CE1["cloneElement(child, {value, onChange, onBlur})"]
80+
ERR1["Error display with Transition"]
81+
end
82+
83+
subgraph FormItem2["<Form.Item name='password'>"]
84+
SUB2["subscribe(listener)"]
85+
CE2["cloneElement(child, {value, onChange, onBlur})"]
86+
ERR2["Error display with Transition"]
87+
end
88+
89+
FI --> FIC
90+
FIC --> FormItem1
91+
FIC --> FormItem2
92+
FOC --> FormItem1
93+
FOC --> FormItem2
94+
```
95+
96+
### Data Flow: User Input
97+
98+
```mermaid
99+
sequenceDiagram
100+
participant User
101+
participant Input as Child Input
102+
participant Item as Form.Item
103+
participant Store as FormInstance
104+
105+
Note over Item: On mount: subscribe + setFieldRules
106+
107+
User->>Input: Types a character
108+
Input->>Item: onChange fires
109+
Item->>Store: setFieldValue(name, value)
110+
Store->>Store: notify(name)
111+
Store->>Item: Listener callback fires
112+
Item->>Item: setValue → re-render
113+
Item->>Input: cloneElement with new value
114+
115+
alt validateTrigger === "onChange"
116+
Item->>Store: validateField(name)
117+
Store->>Store: run rules via validate()
118+
Store->>Store: setFieldError + notify
119+
Store->>Item: Listener fires again
120+
Item->>Item: setError → show/hide error
121+
end
122+
```
123+
124+
### Data Flow: Form Submit
125+
126+
```mermaid
127+
sequenceDiagram
128+
participant User
129+
participant Form
130+
participant Store as FormInstance
131+
participant Items as All Form.Items
132+
133+
User->>Form: Submit
134+
Form->>Form: e.preventDefault()
135+
Form->>Store: validateFields()
136+
Store->>Store: validateField() for each rule set
137+
Store->>Items: notify each field name
138+
Items->>Items: Update error states
139+
140+
Form->>Store: getFieldValues()
141+
Form->>Store: getFieldErrors()
142+
143+
alt Has errors
144+
Form->>Form: onFinishFailed({ values, errors })
145+
else No errors
146+
Form->>Form: onFinish(values)
147+
end
148+
```
149+
150+
### Data Flow: Form Reset
151+
152+
```mermaid
153+
sequenceDiagram
154+
participant User
155+
participant Form
156+
participant Store as FormInstance
157+
participant Items as All Form.Items
158+
159+
User->>Form: Reset
160+
Form->>Store: resetFields()
161+
Store->>Store: errors = {}
162+
Store->>Store: values = deepCopy(initValues)
163+
Store->>Items: notify("*")
164+
Items->>Items: All items re-read value and error → re-render
165+
```
166+
167+
### Validation Rules
168+
169+
```mermaid
170+
graph LR
171+
V["validate(value, rule)"] --> R["required: empty check"]
172+
V --> T["type: typeof check"]
173+
V --> MX["max / len: upper bound"]
174+
V --> MN["min: lower bound"]
175+
V --> E["enum: inclusion check"]
176+
V --> P["pattern: regex test"]
177+
V --> W["whitespace: trim check"]
178+
V --> TR["transform: pre-process value"]
179+
V --> C["validator: custom fn"]
180+
```

‎packages/react/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export { default as Form } from './form';
3030
export { default as Image } from './image';
3131
export { default as Input } from './input';
3232
export { default as InputNumber } from './input-number';
33+
export { default as InputOTP } from './input-otp';
3334
export { default as InputPassword } from './input-password';
3435
export { default as IntlProvider } from './intl-provider';
3536
export { default as Keyboard } from './keyboard';

‎packages/react/src/input-otp/__tests__/__snapshots__/input-otp.test.tsx.snap‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<InputOTP /> should match the snapshot 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="ty-input-otp ty-input-otp_md"
7+
role="group"
8+
>
9+
<input
10+
aria-label="OTP Input 1"
11+
autocomplete="one-time-code"
12+
class="ty-input-otp__cell ty-input-otp__cell_md"
13+
inputmode="numeric"
14+
type="text"
15+
value=""
16+
/>
17+
<input
18+
aria-label="OTP Input 2"
19+
autocomplete="one-time-code"
20+
class="ty-input-otp__cell ty-input-otp__cell_md"
21+
inputmode="numeric"
22+
type="text"
23+
value=""
24+
/>
25+
<input
26+
aria-label="OTP Input 3"
27+
autocomplete="one-time-code"
28+
class="ty-input-otp__cell ty-input-otp__cell_md"
29+
inputmode="numeric"
30+
type="text"
31+
value=""
32+
/>
33+
<input
34+
aria-label="OTP Input 4"
35+
autocomplete="one-time-code"
36+
class="ty-input-otp__cell ty-input-otp__cell_md"
37+
inputmode="numeric"
38+
type="text"
39+
value=""
40+
/>
41+
<input
42+
aria-label="OTP Input 5"
43+
autocomplete="one-time-code"
44+
class="ty-input-otp__cell ty-input-otp__cell_md"
45+
inputmode="numeric"
46+
type="text"
47+
value=""
48+
/>
49+
<input
50+
aria-label="OTP Input 6"
51+
autocomplete="one-time-code"
52+
class="ty-input-otp__cell ty-input-otp__cell_md"
53+
inputmode="numeric"
54+
type="text"
55+
value=""
56+
/>
57+
</div>
58+
</DocumentFragment>
59+
`;

0 commit comments

Comments
 (0)