refactor: 移除 labelWith 通过 css 变量控制，修改文档，demo 中的表单类型增加多语言支持

jdf2e · Jun 14, 2023 · 16d3e9b · 16d3e9b
1 parent 84aa09f
commit 16d3e9b
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 83 deletions.
diff --git a/migrate-from-v1.md b/migrate-from-v1.md
@@ -177,6 +177,7 @@
 - 增加 initialValues，用于设置表单初始值，同时用于表单的重置
 - 增加 name 属性
 #### Form.Item
+- 移除 labelWidth, 通过 --nutui-form-item-label-width 控制宽度
 - 增加 required，用于必选样式控制
 - 增加 trigger，用于设置数据更新的时机
 - 增加 valuePropName ，用于收集子组件受控的属性映射

diff --git a/src/packages/form/demo.taro.tsx b/src/packages/form/demo.taro.tsx
@@ -67,6 +67,14 @@ interface T {
   tagTip: string
   male: string
   female: string
+  input: string
+  checkboxGroup: string
+  option: string
+  radio: string
+  radioGroup: string
+  radioOption: string
+  picker: string
+  select: string
 }
 
 const FormDemo = () => {
@@ -116,6 +124,14 @@ const FormDemo = () => {
       tagTip: '请输入标注',
       male: '男性',
       female: '女性',
+      input: '输入框',
+      checkboxGroup: '复选按钮分组',
+      option: '选项',
+      radio: '单选按钮',
+      radioGroup: '单选按钮分组',
+      radioOption: '选项',
+      picker: '选择器',
+      select: '请选择',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -163,6 +179,14 @@ const FormDemo = () => {
       tagTip: 'Please enter tag',
       male: 'Male',
       female: 'Female',
+      input: 'Input',
+      checkboxGroup: 'Checkbox.Group',
+      option: 'Option',
+      radio: 'Radio',
+      radioGroup: 'Radio.Group',
+      radioOption: 'radio',
+      picker: 'Picker',
+      select: 'Please select',
     },
   })
   const [state, SetState] = useState({
@@ -401,6 +425,7 @@ const FormDemo = () => {
 
         <h2>{translated.title5}</h2>
         <Form
+          style={{ '--nutui-form-item-label-width': '120px' }}
           footer={
             <div
               style={{
@@ -420,38 +445,46 @@ const FormDemo = () => {
           onFinish={(values) => submitSucceed(values)}
           onFinishFailed={(values, errors) => submitFailed(errors)}
         >
-          <Form.Item label="Input" name="form_input">
-            <Input placeholder="Please enter something" />
+          <Form.Item label={translated.input} name="form_input">
+            <Input placeholder={translated.nameTip1} />
           </Form.Item>
-          <Form.Item label="Switch" name="switch">
+          <Form.Item label={translated.switch} name="switch">
             <Switch />
           </Form.Item>
-          <Form.Item label="Checkbox" name="checkbox">
-            <Checkbox labelPosition="right" label="Option 1" />
+          <Form.Item label={translated.checkbox} name="checkbox">
+            <Checkbox labelPosition="right" label={`${translated.option} 1`} />
           </Form.Item>
-          <Form.Item label="Check Group" name="checkbox_group">
+          <Form.Item label={translated.checkboxGroup} name="checkbox_group">
             <Checkbox.Group>
-              <Checkbox labelPosition="right" label="Option 1" value={1} />
-              <Checkbox labelPosition="right" label="Option 2" value={2} />
+              <Checkbox
+                labelPosition="right"
+                label={`${translated.option} 1`}
+                value={1}
+              />
+              <Checkbox
+                labelPosition="right"
+                label={`${translated.option} 2`}
+                value={2}
+              />
             </Checkbox.Group>
           </Form.Item>
-          <Form.Item label="Radio" name="radio">
-            <Radio value="1">Radio 1</Radio>
+          <Form.Item label={translated.radio} name="radio">
+            <Radio value="1">{translated.radioOption} 1</Radio>
           </Form.Item>
-          <Form.Item label="Radio Group" name="radio_group">
+          <Form.Item label={translated.radioGroup} name="radio_group">
             <Radio.Group>
-              <Radio value="1">Radio 1</Radio>
-              <Radio value="2">Radio 2</Radio>
+              <Radio value="1">{translated.radioOption} 1</Radio>
+              <Radio value="2">{translated.radioOption} 2</Radio>
             </Radio.Group>
           </Form.Item>
-          <Form.Item label="Rate" name="rate">
-            <Rate defaultValue={0} />
+          <Form.Item label={translated.rate} name="rate">
+            <Rate />
           </Form.Item>
-          <Form.Item label="Range" name="range">
+          <Form.Item label={translated.range} name="range">
             <Range max={10} min={-10} />
           </Form.Item>
           <Form.Item
-            label="Picker"
+            label={translated.picker}
             name="picker"
             trigger="onConfirm"
             getValueFromEvent={(...args) => args[1]}
@@ -472,7 +505,7 @@ const FormDemo = () => {
                       value.length
                         ? pickerOptions.filter((po) => po.value === value[0])[0]
                             ?.text
-                        : 'Please select'
+                        : translated.select
                     }
                     extra={<Right />}
                     align="center"
@@ -482,14 +515,14 @@ const FormDemo = () => {
             </Picker>
           </Form.Item>
           <Form.Item
-            label="Uploader"
+            label={translated.uploader}
             name="files"
             initialValue={[
               {
                 name: 'file1.png',
                 url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
                 status: 'success',
-                message: '上传成功',
+                message: 'success',
                 type: 'image',
                 uid: '122',
               },

diff --git a/src/packages/form/demo.tsx b/src/packages/form/demo.tsx
@@ -62,6 +62,14 @@ interface T {
   tagTip: string
   male: string
   female: string
+  input: string
+  checkboxGroup: string
+  option: string
+  radio: string
+  radioGroup: string
+  radioOption: string
+  picker: string
+  select: string
 }
 
 const FormDemo = () => {
@@ -111,6 +119,14 @@ const FormDemo = () => {
       tagTip: '请输入标注',
       male: '男性',
       female: '女性',
+      input: '输入框',
+      checkboxGroup: '复选按钮分组',
+      option: '选项',
+      radio: '单选按钮',
+      radioGroup: '单选按钮分组',
+      radioOption: '选项',
+      picker: '选择器',
+      select: '请选择',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -158,6 +174,14 @@ const FormDemo = () => {
       tagTip: 'Please enter tag',
       male: 'Male',
       female: 'Female',
+      input: 'Input',
+      checkboxGroup: 'Checkbox.Group',
+      option: 'Option',
+      radio: 'Radio',
+      radioGroup: 'Radio.Group',
+      radioOption: 'radio',
+      picker: 'Picker',
+      select: 'Please select',
     },
   })
 
@@ -357,6 +381,7 @@ const FormDemo = () => {
 
         <h2>{translated.title5}</h2>
         <Form
+          style={{ '--nutui-form-item-label-width': '120px' }}
           footer={
             <div
               style={{
@@ -376,38 +401,46 @@ const FormDemo = () => {
           onFinish={(values) => submitSucceed(values)}
           onFinishFailed={(values, errors) => submitFailed(errors)}
         >
-          <Form.Item label="Input" name="form_input">
-            <Input placeholder="Please enter something" />
+          <Form.Item label={translated.input} name="form_input">
+            <Input placeholder={translated.nameTip1} />
           </Form.Item>
-          <Form.Item label="Switch" name="switch">
+          <Form.Item label={translated.switch} name="switch">
             <Switch />
           </Form.Item>
-          <Form.Item label="Checkbox" name="checkbox">
-            <Checkbox labelPosition="right" label="Option 1" />
+          <Form.Item label={translated.checkbox} name="checkbox">
+            <Checkbox labelPosition="right" label={`${translated.option} 1`} />
           </Form.Item>
-          <Form.Item label="Check Group" name="checkbox_group">
+          <Form.Item label={translated.checkboxGroup} name="checkbox_group">
             <Checkbox.Group>
-              <Checkbox labelPosition="right" label="Option 1" value={1} />
-              <Checkbox labelPosition="right" label="Option 2" value={2} />
+              <Checkbox
+                labelPosition="right"
+                label={`${translated.option} 1`}
+                value={1}
+              />
+              <Checkbox
+                labelPosition="right"
+                label={`${translated.option} 2`}
+                value={2}
+              />
             </Checkbox.Group>
           </Form.Item>
-          <Form.Item label="Radio" name="radio">
-            <Radio value="1">Radio 1</Radio>
+          <Form.Item label={translated.radio} name="radio">
+            <Radio value="1">{translated.radioOption} 1</Radio>
           </Form.Item>
-          <Form.Item label="Radio Group" name="radio_group">
+          <Form.Item label={translated.radioGroup} name="radio_group">
             <Radio.Group>
-              <Radio value="1">Radio 1</Radio>
-              <Radio value="2">Radio 2</Radio>
+              <Radio value="1">{translated.radioOption} 1</Radio>
+              <Radio value="2">{translated.radioOption} 2</Radio>
             </Radio.Group>
           </Form.Item>
-          <Form.Item label="Rate" name="rate">
-            <Rate defaultValue={0} />
+          <Form.Item label={translated.rate} name="rate">
+            <Rate />
           </Form.Item>
-          <Form.Item label="Range" name="range">
+          <Form.Item label={translated.range} name="range">
             <Range max={10} min={-10} />
           </Form.Item>
           <Form.Item
-            label="Picker"
+            label={translated.picker}
             name="picker"
             trigger="onConfirm"
             getValueFromEvent={(...args) => args[1]}
@@ -428,7 +461,7 @@ const FormDemo = () => {
                       value.length
                         ? pickerOptions.filter((po) => po.value === value[0])[0]
                             ?.text
-                        : 'Please select'
+                        : translated.select
                     }
                     extra={<Right />}
                     align="center"
@@ -438,7 +471,7 @@ const FormDemo = () => {
             </Picker>
           </Form.Item>
           <Form.Item
-            label="Uploader"
+            label={translated.uploader}
             name="files"
             initialValue={[
               {

diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md
@@ -321,6 +321,7 @@ const App = () => {
   return (
     <>
       <Form
+        style={{ '--nutui-form-item-label-width': '120px' }}
         footer={
           <div
             style={{
@@ -452,7 +453,6 @@ export default App;
 |--------------------|--------------|---------------|----------|
 | required | The red star of the required form item label, only used to control the style | `boolean` | `false` |
 | name | In the case of using the form validation function, this attribute is required | `string` | `-` |
-| labelWidth | The width of the form item label, the default unit is `px` | `number` | `90` |
 | errorMessageAlign | Error text alignment | `'center'\| 'right'\|'left'` | `left` |
 | initialValue | set the default value of child elements | `any` | `-` |
 | trigger | Set the timing to collect field value changes | `string` | `-` |

diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md
@@ -313,6 +313,7 @@ const App = () => {
   return (
     <>
       <Form
+        style={{ '--nutui-form-item-label-width': '120px' }}
         footer={
           <div
             style={{
@@ -444,7 +445,6 @@ export default App;
 | --- | --- | --- |---------|
 | required | 必填表单项 label 的红色星标,仅用于控制样式 | `boolean` | `false` |
 | name | 在使用表单校验功能的情况下，该属性是必填的 | `string` | `-`     |
-| labelWidth | 表单项 label 宽度，默认单位为`px` | `number` | `90`  |
 | errorMessageAlign | 错误提示文案对齐方式 | `'center'\| 'right'\|'left'` | `left` |
 | initialValue | 设置子元素默认值 | `any` | `-`     |
 | trigger | 设置收集字段值变更的时机 | `string` | `-`     |

diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md
@@ -319,6 +319,7 @@ const App = () => {
   return (
     <>
       <Form
+        style={{ '--nutui-form-item-label-width': '120px' }}
         footer={
           <div
             style={{
@@ -450,7 +451,6 @@ export default App;
 | --- | --- | --- |---------|
 | required | 必填表单项 label 的红色星标,仅用于控制样式 | `boolean` | `false` |
 | name | 在使用表单校验功能的情况下，该属性是必填的 | `string` | `-`     |
-| labelWidth | 表单项 label 宽度，默认单位为`px` | `number` | `90`  |
 | errorMessageAlign | 错误提示文案对齐方式 | `'center'\| 'right'\|'left'` | `left` |
 | initialValue | 设置子元素默认值 | `any` | `-`     |
 | trigger | 设置收集字段值变更的时机 | `string` | `-`     |

diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md
@@ -314,6 +314,7 @@ const App = () => {
   return (
     <>
       <Form
+        style={{ '--nutui-form-item-label-width': '120px' }}
         footer={
           <div
             style={{
@@ -445,7 +446,6 @@ export default App;
 | --- | --- | --- | --- |
 | required | 必填表單項 label 的紅色星標,僅用於控製樣式 | `boolean` | `false` |
 | name | 在使用表單校驗功能的情況下，該屬性是必填的 | `string` | `-` |
-| labelWidth | 表單項 label 寬度，默認單位為`px` | `number \` | `string` |
 | errorMessageAlign | 錯誤提示文案對齊方式 | \`\`'center'| 'right'\` | \`'left'\`\` |
 | initialValue | 設置子元素默認值 | `any` | `-` |
 | trigger | 設置收集字段值變更的時機 | `string` | `-` |

diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
@@ -87,6 +87,7 @@
         padding: 0 !important;
 
         .nut-textarea__textarea {
+          font: inherit;
           text-align: $form-item-body-input-text-align;
         }
       }