Skip to content

Commit

Permalink
fix(tree-select): keys should support deep keys (#3313)
Browse files Browse the repository at this point in the history 
* fix(TimePicker): fixed only support hh:mm format

* fix(TimePicker): disabled position only is  start

* fix(Upload): fixed vue error on uploadPastedFiles is false

* fix(Treeselect): suport deep keys like entiry.label

* chore: change lodash import
  • Loading branch information
@myronliu347
myronliu347 authored Sep 15, 2024
1 parent e728c09 commit 8eb5448
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 29 deletions.
6 changes: 3 additions & 3 deletions src/select-input/useMultiple.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {
SetupContext, computed, ref, toRefs,
} from '@vue/composition-api';
import isObject from 'lodash/isObject';
import Vue from 'vue';
import lodashGet from 'lodash/get';
import { TdSelectInputProps, SelectInputKeys } from './type';
import { SelectInputCommonProperties } from './interface';
import TagInput, { TagInputValue, TagInputProps } from '../tag-input';
Expand Down Expand Up @@ -37,9 +37,9 @@ export default function useMultiple(props: TdSelectInputProps, context: SetupCon
const iKeys = computed<SelectInputKeys>(() => ({ ...DEFAULT_KEYS, ...props.keys }));
const tags = computed<TagInputValue>(() => {
if (!(props.value instanceof Array)) {
return isObject(props.value) ? [props.value[iKeys.value.label]] : [props.value];
return isObject(props.value) ? [lodashGet(props.value, iKeys.value.label)] : [props.value];
}
return props.value.map((item) => (isObject(item) ? item[iKeys.value.label] : item));
return props.value.map((item) => (isObject(item) ? lodashGet(item, iKeys.value.label) : item));
});

const tPlaceholder = computed<string>(() => (!tags.value || !tags.value.length ? props.placeholder : ''));
Expand Down
3 changes: 2 additions & 1 deletion src/select-input/useSingle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {

import isObject from 'lodash/isObject';
import pick from 'lodash/pick';
import lodashGet from 'lodash/get';
import { SelectInputCommonProperties } from './interface';
import { TdSelectInputProps } from './type';
import Input, { InputProps, StrInputProps } from '../input';
Expand Down Expand Up @@ -32,7 +33,7 @@ const DEFAULT_KEYS = {

function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) {
const iKeys = keys || DEFAULT_KEYS;
return isObject(value) ? value[iKeys.label] : value;
return isObject(value) ? lodashGet(value, iKeys.label) : value;
}

export default function useSingle(props: TdSelectInputProps, context: SetupContext) {
Expand Down
3 changes: 2 additions & 1 deletion src/tree-select/tree-select.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { defineComponent, computed } from '@vue/composition-api';
import isArray from 'lodash/isArray';
import isFunction from 'lodash/isFunction';
import lodashGet from 'lodash/get';
import Tree from '../tree';
import props from './props';
import SelectInput from '../select-input';
Expand Down Expand Up @@ -180,7 +181,7 @@ export default defineComponent({
? {
value: this.nodeInfo as TreeOptionData<string | number>[],
onClose: (index: number) => {
const value = this.nodeInfo.map((node: TreeOptionData) => node.value);
const value = this.nodeInfo.map((node: TreeOptionData) => lodashGet(node, this.tKeys.value));
this.tagChange(value, {
trigger: 'tag-remove',
index,
Expand Down
43 changes: 21 additions & 22 deletions src/tree-select/useTreeSelect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import {
SetupContext, ref, computed, toRefs, watch,
} from '@vue/composition-api';
import isFunction from 'lodash/isFunction';
import lodashGet from 'lodash/get';
import lodashSet from 'lodash/set';
import { RemoveOptions, TdTreeSelectProps, TreeSelectValue } from './type';
import { TreeProps, TreeInstanceFunctions, TreeNodeValue } from '../tree';
import { usePrefixClass, useConfig } from '../hooks/useConfig';
Expand Down Expand Up @@ -57,7 +59,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
const tKeys = computed<TreeKeysType>(() => ({ ...DEFAULT_KEYS, ...props.treeProps?.keys, ...props.keys }));

const inputPlaceholder = computed(() => {
let label = nodeInfo.value?.[tKeys.value.label];
let label = nodeInfo.value ? lodashGet(nodeInfo.value, tKeys.value.label) : undefined;
if (typeof label === 'number') label = String(label);
return (innerVisible.value && label) || props.placeholder || global.value.placeholder;
});
Expand Down Expand Up @@ -89,17 +91,17 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
// single tree-select use nodeInfo to compute singleActivated
const singleActivated = computed(() => {
if (props.multiple || !nodeInfo.value) return [];
if (nodeInfo.value instanceof Array) return [nodeInfo.value[0]?.[tKeys.value.value]];
return [nodeInfo.value[tKeys.value.value]];
if (nodeInfo.value instanceof Array) return [nodeInfo.value[0] ? lodashGet(nodeInfo.value[0], tKeys.value.value) : undefined];
return [lodashGet(nodeInfo.value, tKeys.value.value)];
});

// multiple tree-select: use nodeInfo to compute multipleChecked, because nodeInfo also decided by treeSelectValue
const multipleChecked = computed((): Array<TreeNodeValue> => {
if (!props.multiple || !nodeInfo.value) return [];
if (nodeInfo.value instanceof Array) {
return nodeInfo.value.map((item: TreeOptionData) => item[tKeys.value.value]);
return nodeInfo.value.map((item: TreeOptionData) => lodashGet(item, tKeys.value.value));
}
return [nodeInfo.value[tKeys.value.value]];
return [lodashGet(nodeInfo.value, tKeys.value.value)];
});

// multiple tree select node info list
Expand All @@ -109,15 +111,13 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
if (treeRef.value) {
return list.map((item) => {
const finalValue = typeof item === 'object' ? item.value : item;
return (
treeRef.value.getItem(finalValue)?.data || {
[tKeys.value.label]: finalValue,
[tKeys.value.value]: finalValue,
}
);
const obj = {};
lodashSet(obj, tKeys.value.label, finalValue);
lodashSet(obj, tKeys.value.value, finalValue);
return treeRef.value.getItem(finalValue)?.data || obj;
});
}
const onlyValues = list.map((item) => (typeof item === 'object' ? item[tKeys.value.value] : item));
const onlyValues = list.map((item) => (typeof item === 'object' ? lodashGet(item, tKeys.value.value) : item));
return getNodeDataByValue(onlyValues, props.data, tKeys.value);
}

Expand All @@ -130,12 +130,10 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
const oneValue = Array.isArray(value) ? value[0] : value;
const finalValue = typeof oneValue === 'object' ? oneValue.value : oneValue;
if (treeRef.value) {
return (
treeRef.value.getItem(finalValue)?.data || {
[tKeys.value.label]: finalValue,
[tKeys.value.value]: finalValue,
}
);
const obj = {};
lodashSet(obj, tKeys.value.label, finalValue);
lodashSet(obj, tKeys.value.value, finalValue);
return treeRef.value.getItem(finalValue)?.data || obj;
}
return getNodeDataByValue([finalValue], props.data, tKeys.value)[0];
}
Expand Down Expand Up @@ -174,7 +172,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
// only for single tree select
const treeNodeActive: TreeProps['onActive'] = (value, ctx) => {
if (props.multiple) return;
if (treeSelectValue.value === ctx.node.data[tKeys.value.value]) {
if (treeSelectValue.value === lodashGet(ctx.node.data, tKeys.value.value)) {
return;
}
const onlyLeafNode = Boolean(
Expand All @@ -183,6 +181,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
&& Array.isArray(ctx.node?.data?.children)
&& ctx.node?.data?.children?.length,
);

let current: TreeSelectValue = value;
const nodeValue = Array.isArray(value) ? value[0] : value;
current = isObjectValue.value ? treeRef.value.getItem(nodeValue) : nodeValue;
Expand All @@ -196,9 +195,9 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
innerInputValue.value && setInnerInputValue('', { trigger: 'change', e: ctx.e });
};

// label could be used as TNode, then use text to filter
// label could be used as TdNode, then use text to filter
const defaultFilterFunction: TreeProps['filter'] = (node) => {
const label = node.data[tKeys.value.label];
const label = lodashGet(node.data, tKeys.value.label);
const searchLabel = isFunction(label) ? node.data.text : label || node.data.text;
return searchLabel?.indexOf(innerInputValue.value) >= 0;
};
Expand Down Expand Up @@ -238,7 +237,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
if (!fitTrigger) return;
// handle remove event
const current = treeSelectValue.value[index];
const currentDeleteValue = typeof current === 'object' ? current[tKeys.value.value] : current;
const currentDeleteValue = typeof current === 'object' ? lodashGet(current, tKeys.value.value) : current;
const currentNode = treeRef.value?.getItem(currentDeleteValue);
const data = currentNode ? currentNode.data : getNodeDataByValue([currentDeleteValue], props.data, tKeys.value)[0];
if (fitTrigger) {
Expand Down
9 changes: 7 additions & 2 deletions src/tree-select/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import lodashGet from 'lodash/get';
import lodashSet from 'lodash/set';
import { TreeOptionData, TreeKeysType } from '../common';

export function getNodeDataByValue(
Expand All @@ -13,7 +15,7 @@ export function getNodeDataByValue(
) => {
for (let i = 0, len = data.length; i < len; i++) {
const item = data[i];
const index = values.findIndex((val) => item[keys.value] === val);
const index = values.findIndex((val) => lodashGet(item, keys.value) === val);
if (index !== -1) {
// results.push(item);
results.set(values[index], item);
Expand All @@ -34,7 +36,10 @@ export function getNodeDataByValue(
if (values.length && results.size < values.length) {
values.forEach((value) => {
if (!results.get(value)) {
results.set(value, { [keys.label]: value, [keys.value]: value });
const obj = {};
lodashSet(obj, keys.label, value);
lodashSet(obj, keys.value, value);
results.set(value, obj);
}
});
}
Expand Down

0 comments on commit 8eb5448

Please sign in to comment.