vuecssuiant-designantdreactantantd-vueenterprisefrontendui-designvue-antdvue-antd-uivue3vuecomponent
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
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]; |
|
};
|
|
|