[improvement] AddressEdit: jsx (#2503)

packages/address-edit/Detail.js

@@ -0,0 +1,81 @@
+import { use, isAndroid } from '../utils';
+import Cell from '../cell';
+import Field from '../field';
+
+const [sfc, bem, t] = use('address-edit-detail');
+const android = isAndroid();
+
+export default sfc({
+  props: {
+    value: String,
+    error: Boolean,
+    focused: Boolean,
+    detailRows: Number,
+    searchResult: Array,
+    showSearchResult: Boolean
+  },
+
+  computed: {
+    searchList() {
+      if (this.showSearchResult && this.focused) {
+        return this.searchResult || [];
+      }
+      return [];
+    },
+
+    showIcon() {
+      return this.value && this.focused;
+    }
+  },
+
+  methods: {
+    onSelect(express) {
+      this.$emit('select-search', express);
+      this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
+    }
+  },
+
+  render(h) {
+    return (
+      <Cell class={bem()}>
+        <Field
+          autosize
+          ref="field"
+          rows={this.detailRows}
+          clearable={!android}
+          type="textarea"
+          maxlength="200"
+          value={this.value}
+          error={this.error}
+          label={t('label')}
+          placeholder={t('placeholder')}
+          {...{ on: this.$listeners }}
+        >
+          {this.showIcon && android && (
+            <div
+              slot="icon"
+              class={bem('finish')}
+              onClick={() => {
+                this.$refs.field.blur();
+              }}
+            >
+              {t('complete')}
+            </div>
+          )}
+        </Field>
+        {this.searchList.map(express => (
+          <Cell
+            key={express.name + express.address}
+            title={express.name}
+            label={express.address}
+            icon="location-o"
+            clickable
+            onClick={() => {
+              this.onSelect(express);
+            }}
+          />
+        ))}
+      </Cell>
+    );
+  }
+});