refactor: reorganize all components (#8303)

src/area/Area.tsx

@@ -0,0 +1,330 @@
+/* eslint-disable camelcase */
+import {
+  ref,
+  watch,
+  computed,
+  reactive,
+  nextTick,
+  PropType,
+  onMounted,
+  defineComponent,
+} from 'vue';
+
+// Utils
+import { deepClone } from '../utils/deep-clone';
+import { pick, createNamespace, ComponentInstance } from '../utils';
+import { pickerProps } from '../picker/Picker';
+
+// Composables
+import { useExpose } from '../composables/use-expose';
+
+// Components
+import Picker from '../picker';
+
+const [name, bem] = createNamespace('area');
+
+const EMPTY_CODE = '000000';
+
+function isOverseaCode(code: string) {
+  return code[0] === '9';
+}
+
+export type AreaList = {
+  city_list: Record<string, string>;
+  county_list: Record<string, string>;
+  province_list: Record<string, string>;
+};
+
+export type AreaColumnOption = {
+  name: string;
+  code: string;
+};
+
+type ColumnType = 'province' | 'county' | 'city';
+
+export default defineComponent({
+  name,
+
+  props: {
+    ...pickerProps,
+    value: String,
+    areaList: {
+      type: Object as PropType<AreaList>,
+      default: () => ({}),
+    },
+    columnsNum: {
+      type: [Number, String],
+      default: 3,
+    },
+    isOverseaCode: {
+      type: Function as PropType<(code: string) => boolean>,
+      default: isOverseaCode,
+    },
+    columnsPlaceholder: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+  },
+
+  emits: ['change', 'confirm'],
+
+  setup(props, { emit, slots }) {
+    const pickerRef = ref<ComponentInstance>();
+
+    const state = reactive({
+      code: props.value,
+      columns: [{ values: [] }, { values: [] }, { values: [] }],
+    });
+
+    const areaList = computed(() => {
+      const { areaList } = props;
+      return {
+        province: areaList.province_list || {},
+        city: areaList.city_list || {},
+        county: areaList.county_list || {},
+      };
+    });
+
+    const placeholderMap = computed(() => {
+      const { columnsPlaceholder } = props;
+      return {
+        province: columnsPlaceholder[0] || '',
+        city: columnsPlaceholder[1] || '',
+        county: columnsPlaceholder[2] || '',
+      };
+    });
+
+    const getDefaultCode = () => {
+      if (props.columnsPlaceholder.length) {
+        return EMPTY_CODE;
+      }
+
+      const { county, city } = areaList.value;
+
+      const countyCodes = Object.keys(county);
+      if (countyCodes[0]) {
+        return countyCodes[0];
+      }
+
+      const cityCodes = Object.keys(city);
+      if (cityCodes[0]) {
+        return cityCodes[0];
+      }
+
+      return '';
+    };
+
+    const getColumnValues = (type: ColumnType, code?: string) => {
+      let column: AreaColumnOption[] = [];
+      if (type !== 'province' && !code) {
+        return column;
+      }
+
+      const list = areaList.value[type];
+      column = Object.keys(list).map((listCode) => ({
+        code: listCode,
+        name: list[listCode],
+      }));
+
+      if (code) {
+        // oversea code
+        if (type === 'city' && props.isOverseaCode(code)) {
+          code = '9';
+        }
+        column = column.filter((item) => item.code.indexOf(code!) === 0);
+      }
+
+      if (placeholderMap.value[type] && column.length) {
+        // set columns placeholder
+        let codeFill = '';
+        if (type === 'city') {
+          codeFill = EMPTY_CODE.slice(2, 4);
+        } else if (type === 'county') {
+          codeFill = EMPTY_CODE.slice(4, 6);
+        }
+
+        column.unshift({
+          code: code + codeFill,
+          name: placeholderMap.value[type],
+        });
+      }
+
+      return column;
+    };
+
+    // get index by code
+    const getIndex = (type: ColumnType, code: string) => {
+      let compareNum = code.length;
+      if (type === 'province') {
+        compareNum = props.isOverseaCode(code) ? 1 : 2;
+      }
+      if (type === 'city') {
+        compareNum = 4;
+      }
+
+      code = code.slice(0, compareNum);
+
+      const list = getColumnValues(
+        type,
+        compareNum > 2 ? code.slice(0, compareNum - 2) : ''
+      );
+
+      for (let i = 0; i < list.length; i++) {
+        if (list[i].code.slice(0, compareNum) === code) {
+          return i;
+        }
+      }
+
+      return 0;
+    };
+
+    const setValues = () => {
+      let code = state.code || getDefaultCode();
+      const picker = pickerRef.value;
+      const province = getColumnValues('province');
+      const city = getColumnValues('city', code.slice(0, 2));
+
+      if (!picker) {
+        return;
+      }
+
+      picker.setColumnValues(0, province);
+      picker.setColumnValues(1, city);
+
+      if (
+        city.length &&
+        code.slice(2, 4) === '00' &&
+        !props.isOverseaCode(code)
+      ) {
+        [{ code }] = city;
+      }
+
+      picker.setColumnValues(2, getColumnValues('county', code.slice(0, 4)));
+      picker.setIndexes([
+        getIndex('province', code),
+        getIndex('city', code),
+        getIndex('county', code),
+      ]);
+    };
+
+    // parse output columns data
+    const parseValues = (values: AreaColumnOption[]) => {
+      return values.map((value, index) => {
+        if (value) {
+          value = deepClone(value);
+
+          if (!value.code || value.name === props.columnsPlaceholder[index]) {
+            value.code = '';
+            value.name = '';
+          }
+        }
+
+        return value;
+      });
+    };
+
+    const getValues = () => {
+      if (pickerRef.value) {
+        const values = pickerRef.value.getValues().filter(Boolean);
+        return parseValues(values);
+      }
+      return [];
+    };
+
+    const getArea = () => {
+      const values = getValues();
+      const area = {
+        code: '',
+        country: '',
+        province: '',
+        city: '',
+        county: '',
+      };
+
+      if (!values.length) {
+        return area;
+      }
+
+      const names = values.map((item) => item.name);
+      const validValues = values.filter((value) => value.code);
+
+      area.code = validValues.length
+        ? validValues[validValues.length - 1].code
+        : '';
+
+      if (props.isOverseaCode(area.code)) {
+        area.country = names[1] || '';
+        area.province = names[2] || '';
+      } else {
+        area.province = names[0] || '';
+        area.city = names[1] || '';
+        area.county = names[2] || '';
+      }
+
+      return area;
+    };
+
+    const reset = (newCode = '') => {
+      state.code = newCode;
+      setValues();
+    };
+
+    const onChange = (values: AreaColumnOption[], index: number) => {
+      state.code = values[index].code;
+      setValues();
+
+      const parsedValues = parseValues(pickerRef.value!.getValues());
+      emit('change', parsedValues, index);
+    };
+
+    const onConfirm = (values: AreaColumnOption[], index: number) => {
+      setValues();
+      emit('confirm', parseValues(values), index);
+    };
+
+    onMounted(setValues);
+
+    watch(
+      () => props.value,
+      (value) => {
+        state.code = value;
+        setValues();
+      }
+    );
+
+    watch(() => props.areaList, setValues, { deep: true });
+
+    watch(
+      () => props.columnsNum,
+      () => nextTick(setValues)
+    );
+
+    useExpose({ reset, getArea, getValues });
+
+    return () => {
+      const columns = state.columns.slice(0, +props.columnsNum);
+
+      return (
+        <Picker
+          v-slots={pick(slots, ['title', 'columns-top', 'columns-bottom'])}
+          ref={pickerRef}
+          class={bem()}
+          columns={columns}
+          valueKey="name"
+          onChange={onChange}
+          onConfirm={onConfirm}
+          {...pick(props, [
+            'title',
+            'loading',
+            'readonly',
+            'itemHeight',
+            'swipeDuration',
+            'visibleItemCount',
+            'cancelButtonText',
+            'confirmButtonText',
+          ])}
+        />
+      );
+    };
+  },
+});