[improvement] rename packages dir to src (#3659)

src/contact-edit/index.js

@@ -0,0 +1,130 @@
+import { createNamespace } from '../utils';
+import Button from '../button';
+import Field from '../field';
+import Toast from '../toast';
+import Dialog from '../dialog';
+import { isMobile } from '../utils/validate/mobile';
+
+const [createComponent, bem, t] = createNamespace('contact-edit');
+
+const defaultContact = {
+  tel: '',
+  name: ''
+};
+
+export default createComponent({
+  props: {
+    isEdit: Boolean,
+    isSaving: Boolean,
+    isDeleting: Boolean,
+    contactInfo: {
+      type: Object,
+      default: () => ({ ...defaultContact })
+    },
+    telValidator: {
+      type: Function,
+      default: isMobile
+    }
+  },
+
+  data() {
+    return {
+      data: {
+        ...defaultContact,
+        ...this.contactInfo
+      },
+      errorInfo: {
+        name: false,
+        tel: false
+      }
+    };
+  },
+
+  watch: {
+    contactInfo(val) {
+      this.data = {
+        ...defaultContact,
+        ...val
+      };
+    }
+  },
+
+  methods: {
+    onFocus(key) {
+      this.errorInfo[key] = false;
+    },
+
+    getErrorMessageByKey(key) {
+      const value = this.data[key].trim();
+      switch (key) {
+        case 'name':
+          return value ? '' : t('nameEmpty');
+        case 'tel':
+          return this.telValidator(value) ? '' : t('telInvalid');
+      }
+    },
+
+    onSave() {
+      const isValid = ['name', 'tel'].every(item => {
+        const msg = this.getErrorMessageByKey(item);
+        if (msg) {
+          this.errorInfo[item] = true;
+          Toast(msg);
+        }
+        return !msg;
+      });
+
+      if (isValid && !this.isSaving) {
+        this.$emit('save', this.data);
+      }
+    },
+
+    onDelete() {
+      Dialog.confirm({
+        message: t('confirmDelete')
+      }).then(() => {
+        this.$emit('delete', this.data);
+      });
+    }
+  },
+
+  render(h) {
+    const { data, errorInfo } = this;
+    const onFocus = name => () => this.onFocus(name);
+
+    return (
+      <div class={bem()}>
+        <Field
+          vModel={data.name}
+          clearable
+          maxlength="30"
+          label={t('name')}
+          placeholder={t('nameEmpty')}
+          error={errorInfo.name}
+          onFocus={onFocus('name')}
+        />
+        <Field
+          vModel={data.tel}
+          clearable
+          type="tel"
+          label={t('tel')}
+          placeholder={t('telEmpty')}
+          error={errorInfo.tel}
+          onFocus={onFocus('tel')}
+        />
+        <div class={bem('buttons')}>
+          <Button
+            block
+            type="danger"
+            text={t('save')}
+            loading={this.isSaving}
+            onClick={this.onSave}
+          />
+          {this.isEdit && (
+            <Button block text={t('delete')} loading={this.isDeleting} onClick={this.onDelete} />
+          )}
+        </div>
+      </div>
+    );
+  }
+});

src/contact-edit/index.less

@@ -0,0 +1,15 @@
+@import '../style/var';
+
+.van-contact-edit {
+  &__buttons {
+    padding: @contact-edit-buttons-padding;
+  }
+
+  .van-cell__title {
+    max-width: @contact-edit-field-label-width;
+  }
+
+  .van-button {
+    margin-bottom: @contact-edit-button-margin-bottom;
+  }
+}