ant-design-vue/components/vc-tree-select/hooks/useSelectValues.ts

68 lines
2.0 KiB
TypeScript

import type { RawValueType, FlattenDataNode, Key, LabelValueType } from '../interface';
import type { SkipType } from './useKeyValueMapping';
import { getRawValueLabeled } from '../utils/valueUtil';
import type { CheckedStrategy } from '../utils/strategyUtil';
import { formatStrategyKeys } from '../utils/strategyUtil';
import type { DefaultValueType } from '../../vc-select/interface/generator';
import type { DataEntity } from '../../vc-tree/interface';
import type { Ref } from 'vue';
import { shallowRef, watchEffect } from 'vue';
interface Config {
treeConduction: Ref<boolean>;
/** Current `value` of TreeSelect */
value: Ref<DefaultValueType>;
showCheckedStrategy: Ref<CheckedStrategy>;
conductKeyEntities: Ref<Record<Key, DataEntity>>;
getEntityByKey: (key: Key, skipType?: SkipType, ignoreDisabledCheck?: boolean) => FlattenDataNode;
getEntityByValue: (
value: RawValueType,
skipType?: SkipType,
ignoreDisabledCheck?: boolean,
) => FlattenDataNode;
getLabelProp: (entity: FlattenDataNode) => any;
}
/** Return */
export default function useSelectValues(
rawValues: Ref<RawValueType[]>,
{
value,
getEntityByValue,
getEntityByKey,
treeConduction,
showCheckedStrategy,
conductKeyEntities,
getLabelProp,
}: Config,
): Ref<LabelValueType[]> {
const rawValueLabeled = shallowRef([]);
watchEffect(() => {
let mergedRawValues = rawValues.value;
if (treeConduction.value) {
const rawKeys = formatStrategyKeys(
rawValues.value.map(val => {
const entity = getEntityByValue(val);
return entity ? entity.key : val;
}),
showCheckedStrategy.value,
conductKeyEntities.value,
);
mergedRawValues = rawKeys.map(key => {
const entity = getEntityByKey(key);
return entity ? entity.data.value : key;
});
}
rawValueLabeled.value = getRawValueLabeled(
mergedRawValues,
value.value,
getEntityByValue,
getLabelProp,
);
});
return rawValueLabeled;
}