city 做微调

scss/components/form/_city.scss

@@ -1,12 +1,12 @@
 .#{$ns}CityPicker {
-  .#{$ns}Select + .#{$ns}Select {
-    margin-left: $gap-xs;
+  .#{$ns}Select {
+    margin-right: $gap-xs;
   }
 
   &-input {
     outline: none;
     vertical-align: middle;
-    margin-left: $gap-xs;
+    // margin-left: $gap-xs;
     border: $Form-input-borderWidth solid $Form-input-borderColor;
     border-radius: $Form-input-borderRadius;
     // height: $Form-input-height;

src/renderers/Form/City.tsx

@@ -18,7 +18,7 @@ export interface CityPickerProps {
   disabled?: boolean;
   allowCity: boolean;
   allowDistrict: boolean;
-  // allowStreet: boolean;
+  allowStreet: boolean;
 }
 
 export interface CityPickerState {
@@ -41,8 +41,8 @@ export class CityPicker extends React.Component<
     extractValue: true,
     delimiter: ',',
     allowCity: true,
-    allowDistrict: true
-    // allowStreet: false
+    allowDistrict: true,
+    allowStreet: false
   };
 
   state = {
@@ -56,15 +56,15 @@ export class CityPicker extends React.Component<
     street: ''
   };
 
-  componentWillMount() {
+  componentDidMount() {
     this.syncIn();
   }
 
-  componentWillReceiveProps(nextProps: CityPickerProps) {
+  componentDidUpdate(prevProps: CityPickerProps) {
     const props = this.props;
 
-    if (props.value !== nextProps.value) {
-      this.syncIn(nextProps);
+    if (props.value !== prevProps.value) {
+      this.syncIn(props);
     }
   }
 
@@ -192,26 +192,20 @@ export class CityPicker extends React.Component<
   syncOut() {
     const {
       onChange,
-      // allowStreet,
+      allowStreet,
       joinValues,
       extractValue,
       delimiter
     } = this.props;
 
-    const {
-      code,
-      province,
-      city,
-      district
-      // street
-    } = this.state;
+    const {code, province, city, district, street} = this.state;
 
     if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
       code
         ? onChange(
-            /*allowStreet && street ? [code, street].join(delimiter) :*/ String(
-              code
-            )
+            allowStreet && street
+              ? [code, street].join(delimiter)
+              : String(code)
           )
         : onChange('');
     } else {
@@ -219,8 +213,8 @@ export class CityPicker extends React.Component<
         code,
         province,
         city,
-        district
-        // street
+        district,
+        street
       });
     }
   }
@@ -231,8 +225,8 @@ export class CityPicker extends React.Component<
       className,
       disabled,
       allowCity,
-      allowDistrict
-      // allowStreet
+      allowDistrict,
+      allowStreet
     } = this.props;
 
     const {provinceCode, cityCode, districtCode, street} = this.state;
@@ -290,14 +284,15 @@ export class CityPicker extends React.Component<
           />
         ) : null}
 
-        {/*allowStreet && districtCode ? (
-                    <input
-                        className={cx('CityPicker-input')}
-                        value={street}
-                        onChange={this.handleStreetChange}
-                        onBlur={this.handleStreetEnd}
-                    />
-                ) : null*/}
+        {allowStreet && provinceCode ? (
+          <input
+            className={cx('CityPicker-input')}
+            value={street}
+            onChange={this.handleStreetChange}
+            onBlur={this.handleStreetEnd}
+            placeholder="请输入街道信息"
+          />
+        ) : null}
       </div>
     );
   }
@@ -311,7 +306,7 @@ export interface LocationControlProps extends FormControlProps {
   allowDistrict?: boolean;
   extractValue?: boolean;
   joinValues?: boolean;
-  // allowStreet?: boolean;
+  allowStreet?: boolean;
 }
 export class LocationControl extends React.Component<LocationControlProps> {
   render() {
@@ -321,8 +316,8 @@ export class LocationControl extends React.Component<LocationControlProps> {
       allowCity,
       allowDistrict,
       extractValue,
-      joinValues
-      // allowStreet
+      joinValues,
+      allowStreet
     } = this.props;
     return (
       <ThemedCity
@@ -332,7 +327,7 @@ export class LocationControl extends React.Component<LocationControlProps> {
         allowDistrict={allowDistrict}
         extractValue={extractValue}
         joinValues={joinValues}
-        // allowStreet={allowStreet}
+        allowStreet={allowStreet}
       />
     );
   }