@meethive/components 0.0.3 → 0.0.5

package/lib/EditTable/FormItem.js

@@ -1,169 +1,140 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, reactive, computed, watch, provide, onBeforeUnmount } from 'vue'
-import { Tooltip as ATooltip } from 'ant-design-vue'
-import { get, isArray } from 'lodash-es'
-import { useProvideFormItemContext } from 'ant-design-vue/es/form/FormItemContext'
-import { useInjectError, useInjectForm } from './hooks'
-import { TABLE_FORM_ITEM_ERROR } from './consts'
-import genEditTableStyle from './style'
-
-export default defineComponent({
-  name: 'JEditTableFormItem',
-  components: {
-    ATooltip
-  },
-  props: {
-    name: {
-      type: [String, Array],
-      default: undefined
-    },
-    required: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    const prefixCls = computed(() => 'jetlinks-edit-table')
-    const [wrapSSR, hashId] = genEditTableStyle(prefixCls)
-
-    const context = useInjectForm()
-    const globalErrorMessage = useInjectError()
-
-    let hideTimer = null
-
-    const eventKey = computed(() => {
-      const names = isArray(props.name) ? props.name : [props.name]
-      return names.join('-')
-    })
-
-    const errorMap = reactive({
-      message: '',
-      visible: false
-    })
-
-    const filedId = computed(() => {
-      const names = isArray(props.name) ? props.name : [props.name]
-      const [index, ...extra] = names
-      return `${index}-${extra.join('.')}`
-    })
-
-    const filedName = computed(() => {
-      const names = isArray(props.name) ? props.name : [props.name]
-      return [...names].pop()
-    })
-
-    const filedValue = computed(() => {
-      return get(context.dataSource.value, props.name )
-    })
-
-    provide(TABLE_FORM_ITEM_ERROR, errorMap)
-
-    const popContainer = (e) => {
-      return e
-    }
-
-    const removeTimer = () => {
-      if (hideTimer) {
-        window.clearTimeout(hideTimer)
-        hideTimer = null
-      }
-    }
-
-    const showErrorTip = (msg) => {
-      removeTimer()
-      errorMap.message = msg
-      errorMap.visible = true
-    }
-
-    const hideErrorTip = () => {
-      errorMap.visible = false
-      removeTimer()
-      hideTimer = window.setTimeout(() => {
-        errorMap.message = ''
-      }, 300)
-    }
-
-    const validateRules = () => {
-      let index = 0
-      if (isArray(props.name)) {
-        index = props.name[0] 
-      }
-      const promise = context.validateItem(
-        { [filedName.value ]: get(context.dataSource.value, props.name ) },
-        index
-      )
-
-      promise.catch((res) => {
-        const error = _optionalChain([res, 'optionalAccess', _ => _.filter, 'call', _2 => _2((item) => item.field === filedName.value)]) || []
-        if (error.length === 0) {
-          hideErrorTip()
-          context.removeFieldError(eventKey.value)
-        } else {
-          removeTimer()
-          errorMap.message = _optionalChain([error, 'access', _3 => _3[0], 'optionalAccess', _4 => _4.message]) || errorMap.message
-          errorMap.visible = !!error.length
-          context.addFieldError(eventKey.value, errorMap.message)
-        }
-        return errorMap.message
-      })
-
-      return promise
-    }
-
-    const onFieldBlur = () => {
-      // validateRules()
-    }
-
-    const onFieldChange = () => {
-      validateRules()
-      emit('change')
-    }
-
-    watch(
-      () => globalErrorMessage.value,
-      (val) => {
-        if (val[eventKey.value]) {
-          showErrorTip(val[eventKey.value])
-        } else {
-          hideErrorTip()
-        }
-      },
-      { immediate: true, deep: true }
-    )
-
-    useProvideFormItemContext(
-      {
-        id: filedId,
-        onFieldChange,
-        onFieldBlur
-      } ,
-      computed(() => get(context.dataSource.value, props.name ))
-    )
-
-    onBeforeUnmount(() => {
-      hideErrorTip()
-    })
-
-    watch(
-      () => [filedName.value, props.name],
-      () => {
-        context.addField(eventKey.value, {
-          filedName: filedName.value,
-          eventKey: eventKey.value,
-          names: props.name,
-          validateRules,
-          showErrorTip
-        })
-      },
-      { immediate: true }
-    )
-
-    return {
-      hashId,
-      eventKey,
-      errorMap,
-      popContainer
-    }
-  }
-})
+import { defineComponent, reactive, computed, watch, provide, onBeforeUnmount } from 'vue';
+import { Tooltip as ATooltip } from 'ant-design-vue';
+import { get, isArray } from 'lodash-es';
+import { useProvideFormItemContext } from 'ant-design-vue/es/form/FormItemContext';
+import { useInjectError, useInjectForm } from './hooks';
+import { TABLE_FORM_ITEM_ERROR } from './consts';
+import genEditTableStyle from './style';
+export default defineComponent({
+  name: 'JEditTableFormItem',
+  components: {
+    ATooltip
+  },
+  props: {
+    name: {
+      type: [String, Array],
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['change'],
+  setup(props, {
+    emit
+  }) {
+    const prefixCls = computed(() => 'jetlinks-edit-table');
+    const [wrapSSR, hashId] = genEditTableStyle(prefixCls);
+    const context = useInjectForm();
+    const globalErrorMessage = useInjectError();
+    let hideTimer = null;
+    const eventKey = computed(() => {
+      const names = isArray(props.name) ? props.name : [props.name];
+      return names.join('-');
+    });
+    const errorMap = reactive({
+      message: '',
+      visible: false
+    });
+    const filedId = computed(() => {
+      const names = isArray(props.name) ? props.name : [props.name];
+      const [index, ...extra] = names;
+      return `${index}-${extra.join('.')}`;
+    });
+    const filedName = computed(() => {
+      const names = isArray(props.name) ? props.name : [props.name];
+      return [...names].pop();
+    });
+    const filedValue = computed(() => {
+      return get(context.dataSource.value, props.name);
+    });
+    provide(TABLE_FORM_ITEM_ERROR, errorMap);
+    const popContainer = e => {
+      return e;
+    };
+    const removeTimer = () => {
+      if (hideTimer) {
+        window.clearTimeout(hideTimer);
+        hideTimer = null;
+      }
+    };
+    const showErrorTip = msg => {
+      removeTimer();
+      errorMap.message = msg;
+      errorMap.visible = true;
+    };
+    const hideErrorTip = () => {
+      errorMap.visible = false;
+      removeTimer();
+      hideTimer = window.setTimeout(() => {
+        errorMap.message = '';
+      }, 300);
+    };
+    const validateRules = () => {
+      let index = 0;
+      if (isArray(props.name)) {
+        index = props.name[0];
+      }
+      const promise = context.validateItem({
+        [filedName.value]: get(context.dataSource.value, props.name)
+      }, index);
+      promise.catch(res => {
+        const error = res?.filter(item => item.field === filedName.value) || [];
+        if (error.length === 0) {
+          hideErrorTip();
+          context.removeFieldError(eventKey.value);
+        } else {
+          removeTimer();
+          errorMap.message = error[0]?.message || errorMap.message;
+          errorMap.visible = !!error.length;
+          context.addFieldError(eventKey.value, errorMap.message);
+        }
+        return errorMap.message;
+      });
+      return promise;
+    };
+    const onFieldBlur = () => {
+      // validateRules()
+    };
+    const onFieldChange = () => {
+      validateRules();
+      emit('change');
+    };
+    watch(() => globalErrorMessage.value, val => {
+      if (val[eventKey.value]) {
+        showErrorTip(val[eventKey.value]);
+      } else {
+        hideErrorTip();
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    useProvideFormItemContext({
+      id: filedId,
+      onFieldChange,
+      onFieldBlur
+    }, computed(() => get(context.dataSource.value, props.name)));
+    onBeforeUnmount(() => {
+      hideErrorTip();
+    });
+    watch(() => [filedName.value, props.name], () => {
+      context.addField(eventKey.value, {
+        filedName: filedName.value,
+        eventKey: eventKey.value,
+        names: props.name,
+        validateRules,
+        showErrorTip
+      });
+    }, {
+      immediate: true
+    });
+    return {
+      hashId,
+      eventKey,
+      errorMap,
+      popContainer
+    };
+  }
+});