补充城市选择器文档

docs/renderers/City.md

@@ -0,0 +1,64 @@
+### City
+
+城市选择器，可用于让用户输入城市。
+
+-   `type` 请设置成 `city`
+-   `allowDistrict` 默认 `true` 允许输入区域
+-   `allowCity`  默认 `true` 允许输入城市
+-   `extractValue`  默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。
+-   更多配置请参考 [FormItem](./FormItem.md)
+
+```schema:height="200" scope="form"
+[
+    {
+      "name": "city",
+      "type": "city",
+      "label": "城市选择"
+    },
+
+    {
+        "type": "static",
+        "name": "city",
+        "label": "当前值"
+    }
+]
+```
+
+从配置项可以看出来，通过设置 `allowDistrict` 和 `allowCity` 是可以限制用户输入级别的，比如只选择省份。
+
+```schema:height="200" scope="form"
+[
+    {
+      "name": "city",
+      "type": "city",
+      "label": "城市选择",
+      "allowDistrict": false,
+      "allowCity": false
+    },
+
+    {
+        "type": "static",
+        "name": "city",
+        "label": "当前值"
+    }
+]
+```
+
+从上面的栗子可以看出来，值默认格式是编码（即 `code`），如果你想要详细点的信息，可以把 `extractValue` 设置成 `false`。
+
+```schema:height="200" scope="form"
+[
+    {
+      "name": "city",
+      "type": "city",
+      "label": "城市选择",
+      "extractValue": false
+    },
+
+    {
+        "type": "static",
+        "name": "city",
+        "label": "当前值"
+    }
+]
+```

examples/components/Doc.jsx

@@ -200,6 +200,13 @@ export default {
                                 cb(null, makeMarkdownRenderer(doc));
                             }),
                         },
+                        {
+                            label: 'City',
+                            path: '/docs/renderers/City',
+                            getComponent: (location, cb) => require(['../../docs/renderers/City.md'], (doc) => {
+                                cb(null, makeMarkdownRenderer(doc));
+                            }),
+                        },
                         {
                             label: 'Radios',
                             path: '/docs/renderers/Radios',

src/renderers/Form/City.tsx

@@ -17,7 +17,8 @@ import { Option } from './Options';
 export interface CityPickerProps {
     value:any;
     onChange: (value:any) => void;
-    joinValues: boolean;
+    extractValue: boolean;
+    joinValues?: boolean;
     delimiter: string;
     classnames: ClassNamesFn;
     classPrefix: string;
@@ -42,6 +43,7 @@ export interface CityPickerState {
 export class CityPicker extends React.Component<CityPickerProps, CityPickerState> {
     static defaultProps = {
         joinValues: true,
+        extractValue: true,
         delimiter: ',',
         allowCity: true,
         allowDistrict: true,
@@ -188,6 +190,7 @@ export class CityPicker extends React.Component<CityPickerProps, CityPickerState
             onChange,
             // allowStreet,
             joinValues,
+            extractValue,
             delimiter
         } = this.props;
 
@@ -199,7 +202,7 @@ export class CityPicker extends React.Component<CityPickerProps, CityPickerState
             // street
         } = this.state;
 
-        if (joinValues) {
+        if (typeof extractValue === "undefined" ? joinValues : extractValue ) {
             code ? onChange(/*allowStreet && street ? [code, street].join(delimiter) :*/ String(code)) : onChange('');
         } else {
             onChange({
@@ -295,6 +298,8 @@ export default ThemedCity;
 export interface LocationControlProps extends FormControlProps {
     allowCity?: boolean;
     allowDistrict?: boolean;
+    extractValue?: boolean;
+    joinValues?: boolean;
     // allowStreet?: boolean;
 };
 export class LocationControl extends React.Component<LocationControlProps> {
@@ -305,6 +310,8 @@ export class LocationControl extends React.Component<LocationControlProps> {
             onChange,
             allowCity,
             allowDistrict,
+            extractValue,
+            joinValues,
             // allowStreet
         } = this.props;
         return (
@@ -313,6 +320,8 @@ export class LocationControl extends React.Component<LocationControlProps> {
                 onChange={onChange}
                 allowCity={allowCity}
                 allowDistrict={allowDistrict}
+                extractValue={extractValue}
+                joinValues={joinValues}
                 // allowStreet={allowStreet}
             />
         );