🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

43 lines
1.2 KiB

import type { Ref } from 'vue';
import { watch, toRaw, computed, shallowRef } from 'vue';
import type { LabeledValueType, RawValueType } from '../TreeSelect';
/**
* This function will try to call requestIdleCallback if available to save performance.
* No need `getLabel` here since already fetch on `rawLabeledValue`.
*/
export default (values: Ref<LabeledValueType[]>): [Ref<LabeledValueType[]>] => {
const cacheRef = shallowRef({
valueLabels: new Map<RawValueType, any>(),
});
const mergedValues = shallowRef();
watch(
values,
() => {
mergedValues.value = toRaw(values.value);
},
{ immediate: true },
);
const newFilledValues = computed(() => {
const { valueLabels } = cacheRef.value;
const valueLabelsCache = new Map<RawValueType, any>();
const filledValues = mergedValues.value.map(item => {
const { value } = item;
const mergedLabel = item.label ?? valueLabels.get(value);
// Save in cache
valueLabelsCache.set(value, mergedLabel);
return {
...item,
label: mergedLabel,
};
});
cacheRef.value.valueLabels = valueLabelsCache;
return filledValues;
});
return [newFilledValues];
};