From 1cf2dec96bd86e64f99d8feb157dde76f575960d Mon Sep 17 00:00:00 2001
From: liaoxuezhi <liaoxuezhi@baidu.com>
Date: Mon, 27 May 2019 14:45:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E5=9F=8E=E5=B8=82=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/renderers/City.md      | 64 +++++++++++++++++++++++++++++++++++++
 examples/components/Doc.jsx |  7 ++++
 src/renderers/Form/City.tsx | 13 ++++++--
 3 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 docs/renderers/City.md

diff --git a/docs/renderers/City.md b/docs/renderers/City.md
new file mode 100644
index 000000000..b53837150
--- /dev/null
+++ b/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": "当前值"
+    }
+]
+```
\ No newline at end of file
diff --git a/examples/components/Doc.jsx b/examples/components/Doc.jsx
index fa68b9a41..7a21fa766 100644
--- a/examples/components/Doc.jsx
+++ b/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',
diff --git a/src/renderers/Form/City.tsx b/src/renderers/Form/City.tsx
index 15f64a411..7cfb628be 100644
--- a/src/renderers/Form/City.tsx
+++ b/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}
             />
         );