From 1bfcbab2fa1f7d291cb461fcf3fd66ea0d87b6cc Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 7 Aug 2021 16:22:02 +0800 Subject: [PATCH] chore: migrate to useCustomFieldValue (#9201) --- src/button/Button.tsx | 3 +-- src/cell-group/CellGroup.tsx | 3 +-- src/checkbox-group/CheckboxGroup.tsx | 5 ++--- src/checkbox/Checkbox.tsx | 5 ++--- src/collapse/Collapse.tsx | 3 +-- src/composables/use-link-field.ts | 19 ------------------- src/dialog/Dialog.tsx | 5 +++-- src/dialog/function-call.tsx | 9 +++++++-- src/field/Field.tsx | 14 +++++++------- src/field/types.ts | 8 +------- src/form/Form.tsx | 3 +-- src/grid-item/GridItem.tsx | 3 +-- src/image-preview/ImagePreview.tsx | 3 ++- src/image-preview/function-call.tsx | 9 +++++++-- src/index-anchor/IndexAnchor.tsx | 8 ++++++-- src/nav-bar/NavBar.tsx | 8 ++++++-- src/pagination/Pagination.tsx | 3 +-- src/password-input/PasswordInput.tsx | 9 +++++++-- src/picker/Picker.tsx | 2 +- src/popover/Popover.tsx | 2 +- src/popup/Popup.tsx | 3 +-- src/popup/shared.ts | 3 +-- src/radio-group/RadioGroup.tsx | 5 ++--- src/rate/Rate.tsx | 4 ++-- src/slider/Slider.tsx | 5 ++--- src/step/Step.tsx | 3 +-- src/stepper/Stepper.tsx | 7 ++++--- src/swipe-cell/SwipeCell.tsx | 10 ++++++++-- src/switch/Switch.tsx | 4 ++-- src/tabbar/Tabbar.tsx | 11 ++++++++--- src/tabs/Tabs.tsx | 5 +++-- src/uploader/Uploader.tsx | 7 +++---- src/uploader/UploaderPreviewItem.tsx | 9 +++++++-- src/uploader/types.ts | 2 +- src/utils/constant.ts | 6 +++++- src/utils/index.ts | 8 +++++--- 36 files changed, 113 insertions(+), 103 deletions(-) diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 8e046295a..04a9c8eb9 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -6,8 +6,7 @@ import { } from 'vue'; // Utils -import { createNamespace, extend } from '../utils'; -import { BORDER_SURROUND } from '../utils/constant'; +import { createNamespace, BORDER_SURROUND, extend } from '../utils'; import { useRoute, routeProps } from '../composables/use-route'; // Components diff --git a/src/cell-group/CellGroup.tsx b/src/cell-group/CellGroup.tsx index 5ab322010..0d3ad1a8a 100644 --- a/src/cell-group/CellGroup.tsx +++ b/src/cell-group/CellGroup.tsx @@ -1,6 +1,5 @@ import { defineComponent } from 'vue'; -import { truthProp, createNamespace } from '../utils'; -import { BORDER_TOP_BOTTOM } from '../utils/constant'; +import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils'; const [name, bem] = createNamespace('cell-group'); diff --git a/src/checkbox-group/CheckboxGroup.tsx b/src/checkbox-group/CheckboxGroup.tsx index c72322c8a..f367007e8 100644 --- a/src/checkbox-group/CheckboxGroup.tsx +++ b/src/checkbox-group/CheckboxGroup.tsx @@ -10,9 +10,8 @@ import { import { createNamespace } from '../utils'; // Composables -import { useChildren } from '@vant/use'; +import { useChildren, useCustomFieldValue } from '@vant/use'; import { useExpose } from '../composables/use-expose'; -import { useLinkField } from '../composables/use-link-field'; // Types import type { CheckerDirection } from '../checkbox/Checker'; @@ -81,7 +80,7 @@ export default defineComponent({ ); useExpose({ toggleAll }); - useLinkField(() => props.modelValue); + useCustomFieldValue(() => props.modelValue); linkChildren({ props, updateValue, diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx index a7090cbf2..8812347da 100644 --- a/src/checkbox/Checkbox.tsx +++ b/src/checkbox/Checkbox.tsx @@ -5,9 +5,8 @@ import { createNamespace, extend, pick, truthProp } from '../utils'; import { CHECKBOX_GROUP_KEY } from '../checkbox-group/CheckboxGroup'; // Composables -import { useParent } from '@vant/use'; +import { useParent, useCustomFieldValue } from '@vant/use'; import { useExpose } from '../composables/use-expose'; -import { useLinkField } from '../composables/use-link-field'; // Components import Checker, { checkerProps } from './Checker'; @@ -82,7 +81,7 @@ export default defineComponent({ ); useExpose({ toggle, props, checked }); - useLinkField(() => props.modelValue); + useCustomFieldValue(() => props.modelValue); return () => ( = Symbol('van-form'); -export const FIELD_KEY: InjectionKey = Symbol('van-field'); - -export function useLinkField(getValue: () => unknown) { - const field = inject(FIELD_KEY, null); - - if (field && !field.childFieldValue.value) { - field.childFieldValue.value = getValue; - - watch(getValue, () => { - field.resetValidation(); - field.validateWithTrigger('onChange'); - }); - } -} diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx index 3a0900412..f8be65550 100644 --- a/src/dialog/Dialog.tsx +++ b/src/dialog/Dialog.tsx @@ -7,11 +7,12 @@ import { addUnit, truthProp, isFunction, + BORDER_TOP, + BORDER_LEFT, unknownProp, + callInterceptor, createNamespace, } from '../utils'; -import { callInterceptor } from '../utils/interceptor'; -import { BORDER_TOP, BORDER_LEFT } from '../utils/constant'; import { popupSharedProps, popupSharedPropKeys } from '../popup/shared'; // Components diff --git a/src/dialog/function-call.tsx b/src/dialog/function-call.tsx index d46d612a5..7940ce680 100644 --- a/src/dialog/function-call.tsx +++ b/src/dialog/function-call.tsx @@ -1,6 +1,11 @@ import { App, CSSProperties, TeleportProps } from 'vue'; -import { inBrowser, ComponentInstance, withInstall, extend } from '../utils'; -import { Interceptor } from '../utils/interceptor'; +import { + extend, + inBrowser, + withInstall, + Interceptor, + ComponentInstance, +} from '../utils'; import { mountComponent, usePopupState } from '../utils/mount-component'; import VanDialog, { DialogTheme, diff --git a/src/field/Field.tsx b/src/field/Field.tsx index 07e5603c8..811522a52 100644 --- a/src/field/Field.tsx +++ b/src/field/Field.tsx @@ -16,6 +16,7 @@ import { isDef, extend, addUnit, + FORM_KEY, unknownProp, resetScroll, formatNumber, @@ -34,9 +35,8 @@ import { import { cellProps } from '../cell/Cell'; // Composables -import { useParent } from '@vant/use'; +import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use'; import { useExpose } from '../composables/use-expose'; -import { FORM_KEY, FIELD_KEY } from '../composables/use-link-field'; // Components import { Icon } from '../icon'; @@ -146,7 +146,7 @@ export default defineComponent({ }); const inputRef = ref(); - const childFieldValue = ref<() => unknown>(); + const customValue = ref<() => unknown>(); const { parent: form } = useParent(FORM_KEY); @@ -176,8 +176,8 @@ export default defineComponent({ }); const formValue = computed(() => { - if (childFieldValue.value && slots.input) { - return childFieldValue.value(); + if (customValue.value && slots.input) { + return customValue.value(); } return props.modelValue; }); @@ -522,8 +522,8 @@ export default defineComponent({ resetValidation, }); - provide(FIELD_KEY, { - childFieldValue, + provide(CUSTOM_FIELD_INJECTION_KEY, { + customValue, resetValidation, validateWithTrigger, }); diff --git a/src/field/types.ts b/src/field/types.ts index 2e9e6fd3f..9fbe122d2 100644 --- a/src/field/types.ts +++ b/src/field/types.ts @@ -1,4 +1,4 @@ -import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue'; +import type { ComputedRef, ComponentPublicInstance } from 'vue'; import type { FieldProps } from './Field'; export type FieldType = @@ -40,12 +40,6 @@ export type FieldRule = { formatter?: (value: any, rule: FieldRule) => string; }; -export type FieldProvide = { - childFieldValue: Ref<(() => unknown) | undefined>; - resetValidation: () => void; - validateWithTrigger: (trigger: FieldValidateTrigger) => void; -}; - // Shared props of Field and Form export type FieldFormSharedProps = | 'colon' diff --git a/src/form/Form.tsx b/src/form/Form.tsx index 97f9f0050..f2393dd26 100644 --- a/src/form/Form.tsx +++ b/src/form/Form.tsx @@ -1,11 +1,10 @@ import { PropType, defineComponent, ExtractPropTypes } from 'vue'; // Utils -import { truthProp, createNamespace } from '../utils'; +import { truthProp, FORM_KEY, createNamespace } from '../utils'; // Composables import { useChildren } from '@vant/use'; -import { FORM_KEY } from '../composables/use-link-field'; import { useExpose } from '../composables/use-expose'; // Types diff --git a/src/grid-item/GridItem.tsx b/src/grid-item/GridItem.tsx index db1c14ea8..efca406b0 100644 --- a/src/grid-item/GridItem.tsx +++ b/src/grid-item/GridItem.tsx @@ -1,8 +1,7 @@ import { computed, CSSProperties, defineComponent } from 'vue'; // Utils -import { createNamespace, addUnit, extend } from '../utils'; -import { BORDER } from '../utils/constant'; +import { createNamespace, BORDER, addUnit, extend } from '../utils'; import { GRID_KEY } from '../grid/Grid'; // Composables diff --git a/src/image-preview/ImagePreview.tsx b/src/image-preview/ImagePreview.tsx index dcd7bb224..985ca96a4 100644 --- a/src/image-preview/ImagePreview.tsx +++ b/src/image-preview/ImagePreview.tsx @@ -14,10 +14,11 @@ import { pick, truthProp, unknownProp, + Interceptor, + callInterceptor, createNamespace, ComponentInstance, } from '../utils'; -import { callInterceptor, Interceptor } from '../utils/interceptor'; // Composables import { useWindowSize } from '@vant/use'; diff --git a/src/image-preview/function-call.tsx b/src/image-preview/function-call.tsx index c40c91d28..e22635753 100644 --- a/src/image-preview/function-call.tsx +++ b/src/image-preview/function-call.tsx @@ -1,7 +1,12 @@ import { App, CSSProperties, TeleportProps } from 'vue'; -import { ComponentInstance, extend, inBrowser, withInstall } from '../utils'; +import { + extend, + inBrowser, + withInstall, + Interceptor, + ComponentInstance, +} from '../utils'; import { mountComponent, usePopupState } from '../utils/mount-component'; -import { Interceptor } from '../utils/interceptor'; import { PopupCloseIconPosition } from '../popup'; import VanImagePreview from './ImagePreview'; diff --git a/src/index-anchor/IndexAnchor.tsx b/src/index-anchor/IndexAnchor.tsx index 1b6b3ca6e..60fa97a49 100644 --- a/src/index-anchor/IndexAnchor.tsx +++ b/src/index-anchor/IndexAnchor.tsx @@ -1,8 +1,12 @@ import { ref, reactive, computed, CSSProperties, defineComponent } from 'vue'; // Utils -import { createNamespace, extend, getZIndexStyle } from '../utils'; -import { BORDER_BOTTOM } from '../utils/constant'; +import { + extend, + BORDER_BOTTOM, + getZIndexStyle, + createNamespace, +} from '../utils'; import { INDEX_BAR_KEY } from '../index-bar/IndexBar'; import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll'; diff --git a/src/nav-bar/NavBar.tsx b/src/nav-bar/NavBar.tsx index d843ba8d9..8fbd02b52 100644 --- a/src/nav-bar/NavBar.tsx +++ b/src/nav-bar/NavBar.tsx @@ -1,8 +1,12 @@ import { ref, CSSProperties, defineComponent } from 'vue'; // Utils -import { truthProp, createNamespace, getZIndexStyle } from '../utils'; -import { BORDER_BOTTOM } from '../utils/constant'; +import { + truthProp, + BORDER_BOTTOM, + getZIndexStyle, + createNamespace, +} from '../utils'; // Composables import { usePlaceholder } from '../composables/use-placeholder'; diff --git a/src/pagination/Pagination.tsx b/src/pagination/Pagination.tsx index 6e953d894..617d78df3 100644 --- a/src/pagination/Pagination.tsx +++ b/src/pagination/Pagination.tsx @@ -1,6 +1,5 @@ import { computed, watch, PropType, defineComponent } from 'vue'; -import { createNamespace } from '../utils'; -import { BORDER } from '../utils/constant'; +import { BORDER, createNamespace } from '../utils'; const [name, bem, t] = createNamespace('pagination'); diff --git a/src/password-input/PasswordInput.tsx b/src/password-input/PasswordInput.tsx index 47be0b7c3..87037f2e8 100644 --- a/src/password-input/PasswordInput.tsx +++ b/src/password-input/PasswordInput.tsx @@ -1,6 +1,11 @@ import { defineComponent } from 'vue'; -import { createNamespace, addUnit, truthProp } from '../utils'; -import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant'; +import { + addUnit, + truthProp, + BORDER_LEFT, + BORDER_SURROUND, + createNamespace, +} from '../utils'; const [name, bem] = createNamespace('password-input'); diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx index de7d2d45d..407449c21 100644 --- a/src/picker/Picker.tsx +++ b/src/picker/Picker.tsx @@ -14,8 +14,8 @@ import { truthProp, preventDefault, createNamespace, + BORDER_UNSET_TOP_BOTTOM, } from '../utils'; -import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant'; // Composables import { useChildren } from '@vant/use'; diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx index cb7076ff9..a9d54f8b9 100644 --- a/src/popover/Popover.tsx +++ b/src/popover/Popover.tsx @@ -17,10 +17,10 @@ import { extend, truthProp, unknownProp, + BORDER_BOTTOM, createNamespace, ComponentInstance, } from '../utils'; -import { BORDER_BOTTOM } from '../utils/constant'; // Composables import { useClickAway } from '@vant/use'; diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx index cf1abbdcd..2f3c7badb 100644 --- a/src/popup/Popup.tsx +++ b/src/popup/Popup.tsx @@ -15,8 +15,7 @@ import { // Utils import { popupSharedProps } from './shared'; -import { createNamespace, extend, isDef } from '../utils'; -import { callInterceptor } from '../utils/interceptor'; +import { extend, isDef, callInterceptor, createNamespace } from '../utils'; // Composables import { useEventListener } from '@vant/use'; diff --git a/src/popup/shared.ts b/src/popup/shared.ts index b37b55bb2..2e0512925 100644 --- a/src/popup/shared.ts +++ b/src/popup/shared.ts @@ -1,6 +1,5 @@ import { PropType, CSSProperties, TeleportProps } from 'vue'; -import { truthProp, unknownProp } from '../utils'; -import type { Interceptor } from '../utils/interceptor'; +import { truthProp, unknownProp, Interceptor } from '../utils'; export const popupSharedProps = { // whether to show popup diff --git a/src/radio-group/RadioGroup.tsx b/src/radio-group/RadioGroup.tsx index 23a01b044..1cf79a85b 100644 --- a/src/radio-group/RadioGroup.tsx +++ b/src/radio-group/RadioGroup.tsx @@ -6,8 +6,7 @@ import { ExtractPropTypes, } from 'vue'; import { unknownProp, createNamespace } from '../utils'; -import { useChildren } from '@vant/use'; -import { useLinkField } from '../composables/use-link-field'; +import { useChildren, useCustomFieldValue } from '@vant/use'; import type { CheckerDirection } from '../checkbox/Checker'; const [name, bem] = createNamespace('radio-group'); @@ -49,7 +48,7 @@ export default defineComponent({ updateValue, }); - useLinkField(() => props.modelValue); + useCustomFieldValue(() => props.modelValue); return () => (
diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx index d5d19f567..13b848696 100644 --- a/src/rate/Rate.tsx +++ b/src/rate/Rate.tsx @@ -4,9 +4,9 @@ import { computed, defineComponent } from 'vue'; import { addUnit, truthProp, createNamespace, preventDefault } from '../utils'; // Composables +import { useCustomFieldValue } from '@vant/use'; import { useRefs } from '../composables/use-refs'; import { useTouch } from '../composables/use-touch'; -import { useLinkField } from '../composables/use-link-field'; // Components import { Icon } from '../icon'; @@ -221,7 +221,7 @@ export default defineComponent({ ); }; - useLinkField(() => props.modelValue); + useCustomFieldValue(() => props.modelValue); return () => (
props.modelValue); + useCustomFieldValue(() => props.modelValue); return () => (
props.modelValue); + useCustomFieldValue(() => props.modelValue); return () => (
diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx index 85e53a64b..490f10708 100644 --- a/src/swipe-cell/SwipeCell.tsx +++ b/src/swipe-cell/SwipeCell.tsx @@ -9,8 +9,14 @@ import { } from 'vue'; // Utils -import { clamp, isDef, createNamespace, preventDefault } from '../utils'; -import { callInterceptor, Interceptor } from '../utils/interceptor'; +import { + clamp, + isDef, + Interceptor, + preventDefault, + callInterceptor, + createNamespace, +} from '../utils'; // Composables import { useRect, useClickAway } from '@vant/use'; diff --git a/src/switch/Switch.tsx b/src/switch/Switch.tsx index e91747c04..2c2cda95d 100644 --- a/src/switch/Switch.tsx +++ b/src/switch/Switch.tsx @@ -1,6 +1,6 @@ import { defineComponent } from 'vue'; import { createNamespace, addUnit, unknownProp } from '../utils'; -import { useLinkField } from '../composables/use-link-field'; +import { useCustomFieldValue } from '@vant/use'; import { Loading } from '../loading'; const [name, bem] = createNamespace('switch'); @@ -45,7 +45,7 @@ export default defineComponent({ } }; - useLinkField(() => props.modelValue); + useCustomFieldValue(() => props.modelValue); return () => { const { size, loading, disabled, activeColor, inactiveColor } = props; diff --git a/src/tabbar/Tabbar.tsx b/src/tabbar/Tabbar.tsx index 9d44c924c..b97714481 100644 --- a/src/tabbar/Tabbar.tsx +++ b/src/tabbar/Tabbar.tsx @@ -7,9 +7,14 @@ import { } from 'vue'; // Utils -import { truthProp, createNamespace, getZIndexStyle } from '../utils'; -import { BORDER_TOP_BOTTOM } from '../utils/constant'; -import { callInterceptor, Interceptor } from '../utils/interceptor'; +import { + truthProp, + Interceptor, + getZIndexStyle, + createNamespace, + callInterceptor, + BORDER_TOP_BOTTOM, +} from '../utils'; // Composables import { useChildren } from '@vant/use'; diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx index 6241191f5..9ec5a3f65 100644 --- a/src/tabs/Tabs.tsx +++ b/src/tabs/Tabs.tsx @@ -21,16 +21,17 @@ import { isHidden, unitToPx, truthProp, + Interceptor, getVisibleTop, getElementTop, + callInterceptor, createNamespace, getVisibleHeight, setRootScrollTop, ComponentInstance, + BORDER_TOP_BOTTOM, } from '../utils'; import { scrollLeftTo, scrollTopTo } from './utils'; -import { BORDER_TOP_BOTTOM } from '../utils/constant'; -import { callInterceptor, Interceptor } from '../utils/interceptor'; // Composables import { diff --git a/src/uploader/Uploader.tsx b/src/uploader/Uploader.tsx index 2293ae4f8..68f109c6b 100644 --- a/src/uploader/Uploader.tsx +++ b/src/uploader/Uploader.tsx @@ -12,6 +12,7 @@ import { extend, isPromise, truthProp, + Interceptor, getSizeStyle, ComponentInstance, } from '../utils'; @@ -26,8 +27,8 @@ import { } from './utils'; // Composables +import { useCustomFieldValue } from '@vant/use'; import { useExpose } from '../composables/use-expose'; -import { useLinkField } from '../composables/use-link-field'; // Components import { Icon } from '../icon'; @@ -36,7 +37,6 @@ import UploaderPreviewItem from './UploaderPreviewItem'; // Types import type { ImageFit } from '../image'; -import type { Interceptor } from '../utils/interceptor'; import type { UploaderExpose, UploaderMaxSize, @@ -359,8 +359,7 @@ export default defineComponent({ chooseFile, closeImagePreview, }); - - useLinkField(() => props.modelValue); + useCustomFieldValue(() => props.modelValue); return () => (
diff --git a/src/uploader/UploaderPreviewItem.tsx b/src/uploader/UploaderPreviewItem.tsx index c2259d9e4..b552e36ef 100644 --- a/src/uploader/UploaderPreviewItem.tsx +++ b/src/uploader/UploaderPreviewItem.tsx @@ -2,8 +2,13 @@ import { PropType, defineComponent } from 'vue'; // Utils import { bem, isImageFile } from './utils'; -import { isDef, getSizeStyle, extend } from '../utils'; -import { callInterceptor, Interceptor } from '../utils/interceptor'; +import { + isDef, + extend, + Interceptor, + getSizeStyle, + callInterceptor, +} from '../utils'; // Components import { Icon } from '../icon'; diff --git a/src/uploader/types.ts b/src/uploader/types.ts index 3f4959d95..5b8530918 100644 --- a/src/uploader/types.ts +++ b/src/uploader/types.ts @@ -1,6 +1,6 @@ import type { ComponentPublicInstance } from 'vue'; import type { ImageFit } from '../image'; -import type { Interceptor } from '../utils/interceptor'; +import type { Interceptor } from '../utils'; import type { UploaderProps } from './Uploader'; export type UploaderResultType = 'dataUrl' | 'text' | 'file'; diff --git a/src/utils/constant.ts b/src/utils/constant.ts index 8e95a3151..bdd58a3a8 100644 --- a/src/utils/constant.ts +++ b/src/utils/constant.ts @@ -1,4 +1,6 @@ -// border +import type { InjectionKey } from 'vue'; +import type { FormProvide } from '../form/types'; + export const BORDER = 'van-hairline'; export const BORDER_TOP = `${BORDER}--top`; export const BORDER_LEFT = `${BORDER}--left`; @@ -6,3 +8,5 @@ export const BORDER_BOTTOM = `${BORDER}--bottom`; export const BORDER_SURROUND = `${BORDER}--surround`; export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`; export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`; + +export const FORM_KEY: InjectionKey = Symbol('van-form'); diff --git a/src/utils/index.ts b/src/utils/index.ts index d7f30f7cd..d9670bc2c 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,10 +1,12 @@ export * from './base'; export * from './create'; +export * from './constant'; export * from './validate'; +export * from './dom/style'; +export * from './dom/event'; +export * from './dom/scroll'; +export * from './interceptor'; export * from './with-install'; export * from './format/unit'; export * from './format/number'; export * from './format/string'; -export * from './dom/style'; -export * from './dom/event'; -export * from './dom/scroll';