mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(use-form-item): add mergedDisabled option

Browse Source
This commit is contained in:
07akioni 2021-07-30 23:59:41 +08:00
parent a8bfba0356
commit 1256df68cf
3 changed files with 61 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/_mixins/use-form-item.ts
View File

@ -28,6 +28,7 @@ export const formItemInjectionKey: InjectionKey<FormItemInjection> =
interface UseFormItemOptions<T> {
defaultSize?: FormItemSize
mergedSize?: (formItem: FormItemInjection | null) => T
mergedDisabled?: (formItem: FormItemInjection | null) => boolean
}
interface UseFormItemProps<T> {
@ -46,7 +47,11 @@ export interface UseFormItem<T> {
export default function useFormItem<T extends AllowedSize = FormItemSize> (
props: UseFormItemProps<T>,
{ defaultSize = 'medium', mergedSize }: UseFormItemOptions<T> = {}
{
defaultSize = 'medium',
mergedSize,
mergedDisabled
}: UseFormItemOptions<T> = {}
): UseFormItem<T> {
const NFormItem = inject(formItemInjectionKey, null)
provide(formItemInjectionKey, null)
@ -65,7 +70,10 @@ export default function useFormItem<T extends AllowedSize = FormItemSize> (
return defaultSize as T
}
)
const mergedDisabledRef = computed(() => {
const mergedDisabledRef = computed(
mergedDisabled
? () => mergedDisabled(NFormItem)
: () => {
const { disabled } = props
if (disabled !== undefined) {
return disabled
@ -74,7 +82,8 @@ export default function useFormItem<T extends AllowedSize = FormItemSize> (
return NFormItem.disabled.value
}
return false
})
}
)
onBeforeUnmount(() => {
if (NFormItem) {
NFormItem.restoreValidation()

52
src/checkbox/src/Checkbox.tsx
View File

@ -93,30 +93,10 @@ export default defineComponent({
if (mergedSize !== undefined) return mergedSize.value
}
return 'medium'
}
})
const { mergedSizeRef, mergedDisabledRef: mergedFormItemDisabledRef } =
formItem
const NCheckboxGroup = inject(checkboxGroupInjectionKey, null)
const uncontrolledCheckedRef = ref(props.defaultChecked)
const controlledCheckedRef = toRef(props, 'checked')
const mergedCheckedRef = useMergedState(
controlledCheckedRef,
uncontrolledCheckedRef
)
const renderedCheckedRef = useMemo(() => {
if (NCheckboxGroup) {
const groupValueSet = NCheckboxGroup.valueSetRef.value
if (groupValueSet && props.value !== undefined) {
return groupValueSet.has(props.value)
}
return false
} else {
return mergedCheckedRef.value
}
})
const mergedDisabledRef = useMemo(() => {
if (props.disabled) return true
},
mergedDisabled (NFormItem) {
const { disabled } = props
if (disabled !== undefined) return disabled
if (NCheckboxGroup) {
if (NCheckboxGroup.disabledRef.value) return true
const {
@ -141,10 +121,30 @@ export default defineComponent({
return true
}
}
if (formItem) {
return mergedFormItemDisabledRef.value
if (NFormItem) {
return NFormItem.disabled.value
}
return false
}
})
const { mergedDisabledRef, mergedSizeRef } = formItem
const NCheckboxGroup = inject(checkboxGroupInjectionKey, null)
const uncontrolledCheckedRef = ref(props.defaultChecked)
const controlledCheckedRef = toRef(props, 'checked')
const mergedCheckedRef = useMergedState(
controlledCheckedRef,
uncontrolledCheckedRef
)
const renderedCheckedRef = useMemo(() => {
if (NCheckboxGroup) {
const groupValueSet = NCheckboxGroup.valueSetRef.value
if (groupValueSet && props.value !== undefined) {
return groupValueSet.has(props.value)
}
return false
} else {
return mergedCheckedRef.value
}
})
const themeRef = useTheme(
'Checkbox',

24
src/radio/src/use-radio.ts
View File

@ -23,10 +23,7 @@ const radioProps = {
type: Boolean as PropType<boolean | undefined>,
default: undefined
},
defaultChecked: {
type: Boolean,
default: false
},
defaultChecked: Boolean,
disabled: {
type: Boolean as PropType<boolean | undefined>,
default: undefined
@ -96,10 +93,15 @@ function setup (props: ExtractPropTypes<typeof radioProps>): UseRadio {
return NFormItem.mergedSize.value
}
return 'medium'
},
mergedDisabled (NFormItem) {
if (props.disabled) return true
if (NRadioGroup?.disabledRef.value) return true
if (NFormItem?.disabled.value) return true
return false
}
})
const { mergedSizeRef, mergedDisabledRef: mergedFormItemDisabledRef } =
formItem
const { mergedSizeRef, mergedDisabledRef } = formItem
const inputRef = ref<HTMLElement | null>(null)
const labelRef = ref<HTMLElement | null>(null)
const NRadioGroup = inject(radioGroupInjectionKey, null)
@ -118,16 +120,6 @@ function setup (props: ExtractPropTypes<typeof radioProps>): UseRadio {
if (name !== undefined) return name
if (NRadioGroup) return NRadioGroup.nameRef.value
})
const mergedDisabledRef = useMemo(() => {
if (props.disabled) return true
if (NRadioGroup) {
return NRadioGroup.disabledRef.value
}
if (formItem) {
return mergedFormItemDisabledRef.value
}
return false
})
const focusRef = ref(false)
function doUpdateChecked (): void {
if (NRadioGroup) {