feat(form): support plaintext on all form controls (#1328)

* refactor(uploader): use CloseButton in Uploader * feat(form): support plaintext on all form controls * fix: remove LocaleCommonType * docs(form): update docs for plaintext form controls
rsuite · Oct 29, 2020 · a26dfc6 · a26dfc6
1 parent 215aaf5
commit a26dfc6
Show file tree

Hide file tree

Showing 139 changed files with 2,294 additions and 1,585 deletions.
diff --git a/docs/locales/en-US/index.ts b/docs/locales/en-US/index.ts
@@ -15,7 +15,7 @@ export default {
     useWithCreateReactApp: 'Use in create-react-app',
     useNextApp: 'Use in Next.js',
     customizeTheme: 'Customize theme',
-    intl: 'Internationalization',
+    intl: 'Installation',
     rtl: 'Right-to-left',
     changeLog: 'Change log',
     palette: 'Palette',

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -25,7 +25,6 @@
     "color": "^3.1.2",
     "date-fns": "^2.13.0",
     "isomorphic-fetch": "^2.2.1",
-    "loadsh": "0.0.4",
     "nprogress": "^0.2.0",
     "react": "^16.13.1",
     "react-code-view": "^1.2.5",

diff --git a/docs/pages/components/auto-complete/en-US/index.md b/docs/pages/components/auto-complete/en-US/index.md
@@ -20,7 +20,7 @@ Autocomplete function of input field.
 
 <!--{include:`render-item.md`}-->
 
-### Disabled
+### Disabled and read only
 
 <!--{include:`disabled.md`}-->
 

diff --git a/docs/pages/components/auto-complete/fragments/disabled.md b/docs/pages/components/auto-complete/fragments/disabled.md
@@ -9,7 +9,18 @@ const data = [
   'HYPER Ad Serving',
   'HYPER Data Discovery'
 ];
-const instance = <AutoComplete data={data} disabled />;
+const instance = (
+  <div>
+    <label>Disabled:</label>
+    <AutoComplete data={data} disabled defaultValue="HYPER Web Analytics" />
+    <hr />
+    <label>Disabled:</label>
+    <AutoComplete data={data} readOnly defaultValue="HYPER Web Analytics" />
+    <hr />
+    <label>Plaintext:</label>
+    <AutoComplete data={data} plaintext defaultValue="HYPER Web Analytics" />
+  </div>
+);
 
 ReactDOM.render(instance);
 ```

diff --git a/docs/pages/components/auto-complete/zh-CN/index.md b/docs/pages/components/auto-complete/zh-CN/index.md
@@ -20,7 +20,7 @@
 
 <!--{include:`render-item.md`}-->
 
-### 禁用
+### 禁用与只读
 
 <!--{include:`disabled.md`}-->
 

diff --git a/docs/pages/components/cascader/en-US/index.md b/docs/pages/components/cascader/en-US/index.md
@@ -38,7 +38,7 @@ Single selection of data with hierarchical relationship structure.
 
 <!--{include:`custom.md`}-->
 
-### Disabled
+### Disabled and read only
 
 <!--{include:`disabled.md`}-->
 

diff --git a/docs/pages/components/cascader/fragments/disabled.md b/docs/pages/components/cascader/fragments/disabled.md
@@ -8,10 +8,23 @@
 
 const instance = (
   <div>
-    <Cascader data={data} disabled style={{ widht: 224 }} />
+    <label>Disabled: </label>
+    <Cascader disabled defaultValue="1-1" data={data} style={{ widht: 224 }} />
+
+    <label style={{ marginLeft: 10 }}>Disabled option: </label>
+    <Cascader
+      data={data}
+      defaultValue="1-1"
+      disabledItemValues={['2', '1-1']}
+      style={{ widht: 224 }}
+    />
+    <hr />
+    <label>Read only: </label>
+    <Cascader readOnly defaultValue="1-1" data={data} style={{ widht: 224 }} />
+
     <hr />
-    <p>Disabled Option</p>
-    <Cascader data={data} disabledItemValues={['2', '1-1']} style={{ widht: 224 }} />
+    <label>Plaintext: </label>
+    <Cascader plaintext defaultValue="1-1" data={data} style={{ widht: 224 }} />
   </div>
 );
 ReactDOM.render(instance);

diff --git a/docs/pages/components/cascader/zh-CN/index.md b/docs/pages/components/cascader/zh-CN/index.md
@@ -38,7 +38,7 @@
 
 <!--{include:`custom.md`}-->
 
-### 禁用
+### 禁用与只读
 
 <!--{include:`disabled.md`}-->
 

diff --git a/docs/pages/components/check-picker/en-US/index.md b/docs/pages/components/check-picker/en-US/index.md
@@ -44,7 +44,7 @@ Set the `sticky` property to put the selected in the options to the top.
 
 <!--{include:`custom.md`}-->
 
-### Disabled
+### Disabled and read only
 
 <!--{include:`disabled.md`}-->
 
@@ -111,7 +111,7 @@ type ValueType = (string | number)[];
 | onOpen             | () => void                                                                        | Callback fired when open component                          |
 | onSearch           | (searchKeyword:string, event) => void                                             | Callback fired when search                                  |
 | onSelect           | (value:ValueType, item: [DataItemType](#types) , event) => void                   | Callback fired when item is selected                        |
-| open               | boolean                                                                           | Whether open the component                                       |
+| open               | boolean                                                                           | Whether open the component                                  |
 | placeholder        | ReactNode `('Select')`                                                            | Setting placeholders                                        |
 | placement          | Placement`('bottomStart')`                                                        | The placement of component                                  |
 | preventOverflow    | boolean                                                                           | Prevent floating element overflow                           |

diff --git a/docs/pages/components/check-picker/fragments/disabled.md b/docs/pages/components/check-picker/fragments/disabled.md
@@ -8,15 +8,23 @@
 
 const instance = (
   <div>
-    <CheckPicker data={data} defaultValue={['Julius']} disabled />
-    <hr />
-    <p>Disable Option</p>
+    <label>Disabled: </label>
+    <CheckPicker disabled data={data} defaultValue={['Julius']} />
+
+    <label style={{ marginLeft: 10 }}>Disabled option: </label>
     <CheckPicker
       data={data}
       defaultValue={['Julius']}
       style={{ width: 224 }}
       disabledItemValues={['Eugenia', 'Travon', 'Vincenza']}
     />
+    <hr />
+    <label>Read only: </label>
+    <CheckPicker readOnly data={data} defaultValue={['Julius']} />
+
+    <hr />
+    <label>Plaintext: </label>
+    <CheckPicker plaintext data={data} defaultValue={['Julius']} />
   </div>
 );
 ReactDOM.render(instance);

diff --git a/docs/pages/components/check-picker/zh-CN/index.md b/docs/pages/components/check-picker/zh-CN/index.md
@@ -44,7 +44,7 @@
 
 <!--{include:`custom.md`}-->
 
-### 自定义选项
+### 禁用与只读
 
 <!--{include:`disabled.md`}-->
 

diff --git a/docs/pages/components/check-tree-picker/en-US/index.md b/docs/pages/components/check-tree-picker/en-US/index.md
@@ -2,8 +2,6 @@
 
 CheckTreePicker are supported in multiple selectors for multiple selection of complex data structures.
 
-- `<CheckTreePicker>` The selector component supports Checkbox on the TreePicker node for multiple selection.
-
 ## Import
 
 <!--{include:(components/check-tree-picker/fragments/import.md)}-->
@@ -12,11 +10,7 @@ CheckTreePicker are supported in multiple selectors for multiple selection of co
 
 ### Default
 
-<p>Cascade:</p>
-<!--{include:`basic-cascade.md`}-->
-</hr>
-<p>Not cascaded:</p>
-<!--{include:`basic-uncascade.md`}-->
+<!--{include:`basic.md`}-->
 
 ### Appearance
 
@@ -36,7 +30,7 @@ The cascade attribute can set whether or not CheckTreePicker can consider the ca
 
 <!--{include:`placement.md`}-->
 
-### Disabled and Uncheckable
+### Disabled and read only
 
 <!--{include:`disabled.md`}-->
 
@@ -53,7 +47,7 @@ The cascade attribute can set whether or not CheckTreePicker can consider the ca
 <!--{include:(_common/types/data-item-type.md)}-->
 <!--{include:(_common/types/placement.md)}-->
 
-### <CheckTreePicker>
+### `<CheckTreePicker>`
 
 | Property                | Type `(Default)`                                                                              | Description                                                               |
 | ----------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
@@ -64,7 +58,7 @@ The cascade attribute can set whether or not CheckTreePicker can consider the ca
 | cleanable               | boolean `(true)`                                                                              | whether the selected value can be cleared                                 |
 | container               | HTMLElement or (() => HTMLElement)                                                            | Sets the rendering container                                              |
 | countable               | boolean `(true)`                                                                              | whether display counts of checkItems                                      |
-| data \*                 | Array&lt;DataItemType&gt;                                                                     | tree data                                                                 |
+| data \*                 | DataItemType[]                                                                                | tree data                                                                 |
 | defaultExpandAll        | boolean                                                                                       | expand all tree node                                                      |
 | defaultExpandItemValues | any []                                                                                        | Set the value of the default expanded node                                |
 | defaultValue            | string[]                                                                                      | (UnControlled) default values of the selected tree node                   |
@@ -94,8 +88,8 @@ The cascade attribute can set whether or not CheckTreePicker can consider the ca
 | preventOverflow         | boolean                                                                                       | Prevent floating element overflow                                         |
 | renderExtraFooter       | () => ReactNode                                                                               | Custom render extra footer                                                |
 | renderMenu              | (menu:ReactNode) => ReactNode                                                                 | Customizing the Rendering Menu list                                       |
-| renderTreeIcon          | (nodeData:Array&lt;Object&gt;) => ReactNode                                                   | Custom render the icon of tree node                                       |
-| renderTreeNode          | (nodeData:Array&lt;DataItemType&gt;) => ReactNode                                             | Custom render tree node                                                   |
+| renderTreeIcon          | (nodeData:object) => ReactNode                                                                | Custom render the icon of tree node                                       |
+| renderTreeNode          | (nodeData:DataItemType[]) => ReactNode                                                        | Custom render tree node                                                   |
 | renderValue             | (values:any[], checkedItems:any[],selectedElement:ReactNode) => ReactNode                     | Custom render selected items                                              |
 | searchBy                | (keyword: string, label: ReactNode, item: ItemDataType) => boolean                            | Custom search rules                                                       |
 | searchable              | boolean `(true)`                                                                              | Whether display search input box                                          |

diff --git a/docs/pages/components/check-tree-picker/fragments/basic-uncascade.md b/docs/pages/components/check-tree-picker/fragments/basic-uncascade.md
diff --git a/...ck-tree-picker/fragments/basic-cascade.md → ...ents/check-tree-picker/fragments/basic.md b/...ck-tree-picker/fragments/basic-cascade.md → ...ents/check-tree-picker/fragments/basic.md
@@ -6,7 +6,7 @@
  * https://github.com/rsuite/rsuite/blob/master/docs/public/data/city-simplified.json
  */
 
-const instance = <CheckTreePicker defaultExpandAll data={data} style={{ width: 280 }} />;
+const instance = <CheckTreePicker data={data} style={{ width: 280 }} />;
 ReactDOM.render(instance);
 ```
 

diff --git a/docs/pages/components/check-tree-picker/fragments/custom.md b/docs/pages/components/check-tree-picker/fragments/custom.md
@@ -13,7 +13,7 @@ const instance = (
     style={{ width: 280 }}
     placeholder={
       <span>
-        <i className="rs-icon rs-icon-map-marker" /> 选择地区
+        <i className="rs-icon rs-icon-map-marker" /> Select region
       </span>
     }
     renderTreeNode={nodeData => {
@@ -27,7 +27,7 @@ const instance = (
       return (
         <span>
           <span style={{ color: '#575757' }}>
-            <i className="rs-icon rs-icon-map-marker" /> 地区 :
+            <i className="rs-icon rs-icon-map-marker" /> Region :
           </span>{' '}
           {checkedItems.map(item => item.label).join(' , ')}
         </span>

diff --git a/docs/pages/components/check-tree-picker/fragments/disabled.md b/docs/pages/components/check-tree-picker/fragments/disabled.md
@@ -6,25 +6,39 @@
  * https://github.com/rsuite/rsuite/blob/master/docs/public/data/city-simplified.json
  */
 
+const Label = props => {
+  return <label style={{ width: 120, display: 'inline-block', marginTop: 10 }} {...props} />;
+};
+
 const instance = (
   <div>
-    <CheckTreePicker data={data} disabled style={{ width: 280 }} />
-    <hr />
-    <p>Disabled item</p>
+    <Label>Disabled: </Label>
+    <CheckTreePicker disabled data={data} defaultValue={[24]} style={{ width: 220 }} />
+    <br />
+    <Label>Disabled option: </Label>
     <CheckTreePicker
       defaultExpandAll
       data={data}
       disabledItemValues={[1, 3, 36]}
-      style={{ width: 280 }}
+      defaultValue={[24]}
+      style={{ width: 220 }}
     />
-    <hr />
-    <p>Uncheckable</p>
+    <br />
+    <Label>Uncheckable: </Label>
     <CheckTreePicker
       defaultExpandAll
-      style={{ width: 280 }}
       data={data}
       uncheckableItemValues={[1, 3, 36]}
+      defaultValue={[24]}
+      style={{ width: 220 }}
     />
+
+    <hr />
+    <Label>Read only: </Label>
+    <CheckTreePicker readOnly data={data} defaultValue={[24]} style={{ width: 220 }} />
+    <hr />
+    <Label>Plaintext: </Label>
+    <CheckTreePicker plaintext data={data} defaultValue={[24]} style={{ width: 220 }} />
   </div>
 );
 ReactDOM.render(instance);