Skip to content

Commit

Permalink
fix(Select): fix object type select all and callback params (#3287)
Browse files Browse the repository at this point in the history 
* fix(Select): fix object type selectall and callback params

* chore: comment

* chore: comment
  • Loading branch information
@uyarn
uyarn authored Dec 19, 2024
1 parent 4282c4b commit 0cb41bc
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 17 deletions.
5 changes: 3 additions & 2 deletions src/select/base/PopupContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ interface SelectPopupProps
value: SelectValue,
context?: {
label?: string | number;
value?: SelectValue;
restData?: Record<string, any>;
e: React.MouseEvent<HTMLLIElement>;
trigger: SelectValueChangeTrigger;
Expand Down Expand Up @@ -109,12 +110,12 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
if (multiple) {
// calc multiple select values
const values = getSelectValueArr(value, selectedValue, selected, valueType, keys, objVal);
onChange(values, { label, e: event, trigger: 'check' });
onChange(values, { label, value: selectedValue, e: event, trigger: 'check' });
} else {
// calc single select value
const selectVal = valueType === 'object' ? objVal : selectedValue;

onChange(selectVal, { label, e: event, trigger: 'check' });
onChange(selectVal, { label, value: selectVal, e: event, trigger: 'check' });
setShowPopup(!showPopup);
}
};
Expand Down
51 changes: 39 additions & 12 deletions src/select/base/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import Option from './Option';
import OptionGroup from './OptionGroup';
import PopupContent from './PopupContent';
import Tag from '../../tag';
import { TdSelectProps, TdOptionProps, SelectOption, SelectValueChangeTrigger } from '../type';
import { TdSelectProps, TdOptionProps, SelectOption, SelectValueChangeTrigger, SelectValue } from '../type';
import { StyledProps } from '../../common';
import { selectDefaultProps } from '../defaultProps';
import { PopupVisibleChangeContext } from '../../popup';
Expand Down Expand Up @@ -157,7 +157,7 @@ const Select = forwardRefWithStatics(
const values = getSelectValueArr(value, value[closest], true, valueType, keys);

// 处理onChange回调中的selectedOptions参数
const currentSelectedOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
const { currentSelectedOptions } = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
onChange(values, { e, trigger, selectedOptions: currentSelectedOptions });
return;
}
Expand All @@ -172,7 +172,7 @@ const Select = forwardRefWithStatics(
e?.stopPropagation?.();
const values = getSelectValueArr(value, value[index], true, valueType, keys);
// 处理onChange回调中的selectedOptions参数
const currentSelectedOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
const { currentSelectedOptions } = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);

onChange(values, { e, trigger, selectedOptions: currentSelectedOptions });
if (isFunction(onRemove)) {
Expand All @@ -194,19 +194,22 @@ const Select = forwardRefWithStatics(

const values = currentOptions
.filter((option) => !option.checkAll && !option.disabled)
.map((option) => option[keys?.value || 'value']);
.map((option) => (valueType === 'object' ? option : option[keys?.value || 'value']));

const selectableOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
const { currentSelectedOptions } = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);

const checkAllValue =
!checkAll && selectableOptions.length !== (props.value as Array<SelectOption>)?.length ? selectableOptions : [];
!checkAll && currentSelectedOptions.length !== (props.value as Array<SelectOption>)?.length
? currentSelectedOptions
: [];

onChange?.(checkAllValue, { e, trigger: checkAll ? 'check' : 'uncheck', selectedOptions: checkAllValue });
};

// 选中 Popup 某项
const handleChange = (
value: string | number | Array<string | number | Record<string, string | number>>,
context: { e: React.MouseEvent<HTMLLIElement>; trigger: SelectValueChangeTrigger },
context: { e: React.MouseEvent<HTMLLIElement>; trigger: SelectValueChangeTrigger; value?: SelectValue },
) => {
if (multiple) {
!reserveKeyword && inputValue && onInputChange('', { e: context.e, trigger: 'change' });
Expand All @@ -217,9 +220,22 @@ const Select = forwardRefWithStatics(
}
}
// 处理onChange回调中的selectedOptions参数
const currentSelectedOptions = getSelectedOptions(value, multiple, valueType, keys, tmpPropOptions);

onChange?.(value, { ...context, selectedOptions: currentSelectedOptions });
const selectedValue = multiple ? context.value : value;
const { currentSelectedOptions, currentOption } = getSelectedOptions(
value,
multiple,
valueType,
keys,
tmpPropOptions,
selectedValue,
);

onChange?.(value, {
e: context.e,
trigger: context.trigger,
selectedOptions: currentSelectedOptions,
option: currentOption,
});
};

// 处理filter逻辑
Expand Down Expand Up @@ -352,8 +368,19 @@ const Select = forwardRefWithStatics(
e.stopPropagation();
const values = getSelectValueArr(value, value[key], true, valueType, keys);

const selectedOptions = getSelectedOptions(values, multiple, valueType, keys, tmpPropOptions);
onChange(values, { e, selectedOptions, trigger: 'uncheck' });
const { currentSelectedOptions } = getSelectedOptions(
values,
multiple,
valueType,
keys,
tmpPropOptions,
value,
);
onChange(values, {
e,
selectedOptions: currentSelectedOptions,
trigger: 'uncheck',
});
tagProps?.onClose?.({ e });

onRemove?.({
Expand Down
17 changes: 14 additions & 3 deletions src/select/util/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import get from 'lodash/get';
import OptionGroup from '../base/OptionGroup';
import Option from '../base/Option';

import { SelectValue, TdOptionProps, SelectKeysType, TdSelectProps } from '../type';
import { SelectValue, TdOptionProps, SelectKeysType, TdSelectProps, SelectOption } from '../type';

type SelectLabeledValue = Required<Omit<TdOptionProps, 'disabled'>>;

Expand Down Expand Up @@ -192,17 +192,28 @@ export const getSelectedOptions = (
valueType: TdSelectProps['valueType'],
keys: SelectKeysType,
tmpPropOptions: Array<unknown>,
selectedValue?: SelectValue,
) => {
const isObjectType = valueType === 'object';
// 当前所有选中的选项
let currentSelectedOptions = [];
// 当前选中的选项
let currentOption: SelectOption;
if (multiple) {
currentSelectedOptions = isObjectType
? (value as Array<string | number>)
? (value as Array<SelectValue>)
: tmpPropOptions?.filter?.((v) => (value as Array<string | number>).includes?.(v[keys?.value || 'value']));
currentOption = isObjectType
? (value as Array<SelectValue>).find((v) => v[keys?.value || 'value'] === selectedValue)
: currentSelectedOptions.find((option) => option[keys?.value || 'value'] === selectedValue);
} else {
currentSelectedOptions = isObjectType
? [value]
: tmpPropOptions?.filter?.((v) => value === v[keys?.value || 'value']) || [];
currentOption = isObjectType
? value
: currentSelectedOptions.find((option) => option[keys?.value || 'value'] === selectedValue);
}
return currentSelectedOptions;

return { currentSelectedOptions, currentOption };
};

0 comments on commit 0cb41bc

Please sign in to comment.