Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Select): valueDisplay and collapsibleItems params expanded options #3185

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/select-input/useMultiple.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,13 @@ export default function useMultiple(props: TdSelectInputProps) {
props.onTagChange?.(val, context);
};

const getOptions = () => {
if (props.multiple && Array.isArray(props.value)) {
return props.value;
}
return [];
};

const renderSelectMultiple = (p: RenderSelectMultipleParams) => (
<TagInput
ref={tagInputRef}
Expand All @@ -57,6 +64,7 @@ export default function useMultiple(props: TdSelectInputProps) {
tag={props.tag}
valueDisplay={props.valueDisplay}
placeholder={tPlaceholder}
options={getOptions()}
value={tags}
inputValue={p.popupVisible && p.allowInput ? tInputValue : ''}
onChange={onTagInputChange}
Expand Down
4 changes: 2 additions & 2 deletions src/select/base/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ const Select = forwardRefWithStatics(
return valueDisplay;
}
if (multiple) {
return ({ onClose }) => parseContentTNode(valueDisplay, { value: selectedLabel, onClose });
return ({ onClose }) => parseContentTNode(valueDisplay, { value: props.options, onClose });
uyarn marked this conversation as resolved.
Show resolved Hide resolved
}
return parseContentTNode(valueDisplay, { value: selectedLabel, onClose: noop });
};
Expand Down Expand Up @@ -433,7 +433,7 @@ const Select = forwardRefWithStatics(
autofocus={props.autofocus}
allowInput={(filterable ?? local.filterable) || isFunction(filter)}
multiple={multiple}
value={selectedLabel}
value={props.options}
valueDisplay={renderValueDisplay()}
clearable={clearable}
disabled={disabled}
Expand Down
4 changes: 3 additions & 1 deletion src/tag-input/TagInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import { StyledProps } from '../common';
import { tagInputDefaultProps } from './defaultProps';
import useDefaultProps from '../hooks/useDefaultProps';

export interface TagInputProps extends TdTagInputProps, StyledProps {}
export interface TagInputProps extends TdTagInputProps, StyledProps {
options?: any[]; // 参数穿透options, 给SelectInput/SelectInput在 multiple 模式下使用
}

const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
const props = useDefaultProps<TagInputProps>(originalProps, tagInputDefaultProps);
Expand Down
6 changes: 4 additions & 2 deletions src/tag-input/useTagList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@

export type ChangeParams = [TagInputChangeContext];

interface TagInputProps extends TdTagInputProps, DragSortInnerProps {}
interface TagInputProps extends TdTagInputProps, DragSortInnerProps {
options?: any[]; // 参数穿透options, 给SelectInput/SelectInput在 multiple 模式下使用
}

// handle tag add and remove
export default function useTagList(props: TagInputProps) {
Expand Down Expand Up @@ -103,7 +105,7 @@
value: tagValue,
count: tagValue.length - minCollapsedNum,
collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
collapsedSelectedItems: tagValue.slice(minCollapsedNum, tagValue.length),
collapsedSelectedItems: props.options.slice(minCollapsedNum, tagValue.length),

Check failure on line 108 in src/tag-input/useTagList.tsx

View workflow job for this annotation

GitHub Actions / call-test-build / test

src/tag-input/__tests__/vitest-tag-input.test.jsx > TagInput Component > props.collapsedItems works fine

TypeError: Cannot read properties of undefined (reading 'slice') ❯ renderLabel src/tag-input/useTagList.tsx:108:47 ❯ src/tag-input/TagInput.tsx:153:14 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ updateForwardRef node_modules/react-dom/cjs/react-dom.development.js:19245:20 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21675:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20

Check failure on line 108 in src/tag-input/useTagList.tsx

View workflow job for this annotation

GitHub Actions / call-test-build / test

src/tag-input/__tests__/vitest-tag-input.test.jsx > TagInput Component > props.minCollapsedNum works fine. `{".t-tag":4}` should exist

TypeError: Cannot read properties of undefined (reading 'slice') ❯ renderLabel src/tag-input/useTagList.tsx:108:47 ❯ src/tag-input/TagInput.tsx:153:14 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ updateForwardRef node_modules/react-dom/cjs/react-dom.development.js:19245:20 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21675:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20
onClose,
};
const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;
Expand Down
Loading