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.

Sign up for GitHub

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

Jump to bottom

fix(Select): fix select multiple group style #2138

Merged
merged 2 commits into from
Apr 12, 2023
Merged

fix(Select): fix select multiple group style #2138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e2a7c8
fix(Select): multiple group style
uyarn Apr 12, 2023
70e6063
chore: update snapshot
uyarn Apr 12, 2023
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
60 changes: 42 additions & 18 deletions src/select/_example/group.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import React, { useState } from 'react';
import { Select } from 'tdesign-react';
import { Select, Space } from 'tdesign-react';

const { Option, OptionGroup } = Select;

const OptionGroupSelect = () => {
const [value, setValue] = useState('');
const [value2, setValue2] = useState([1]);

const onChange = (value) => {
setValue(value);
};

const onChange2 = (value) => {
setValue2(value);
};
const options1 = [
{ label: '选项一', value: 1 },
{ label: '选项二', value: 2 },
Expand All @@ -27,23 +32,42 @@ const OptionGroupSelect = () => {
];

return (
<Select value={value} onChange={onChange} style={{ width: '40%' }}>
<OptionGroup label="分组一" divider={true}>
{options1.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
<OptionGroup label="分组二" divider={true}>
{options2.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
<OptionGroup label="分组三" divider={true}>
{options3.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
</Select>
<Space breakLine style={{ width: '100%' }}>
<Select value={value} onChange={onChange} style={{ width: '40%' }}>
<OptionGroup label="分组一" divider={true}>
{options1.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
<OptionGroup label="分组二" divider={true}>
{options2.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
<OptionGroup label="分组三" divider={true}>
{options3.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
</Select>
<Select value={value2} onChange={onChange2} style={{ width: '40%' }} multiple>
<OptionGroup label="分组一" divider={true}>
{options1.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
<OptionGroup label="分组二" divider={true}>
{options2.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
<OptionGroup label="分组三" divider={true}>
{options3.map((item, index) => (
<Option label={item.label} value={item.value} key={index} />
))}
</OptionGroup>
</Select>
</Space>
);
};

Expand Down
6 changes: 4 additions & 2 deletions src/select/base/OptionGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,17 @@ export interface SelectGOptionGroupProps extends TdOptionGroupProps {
) => void;
divider?: boolean;
children?: React.ReactNode;
multiple?: boolean;
}

const OptionGroup = (props: SelectGOptionGroupProps) => {
const { children, label, selectedValue, onSelect, divider } = props;
const { children, label, selectedValue, onSelect, divider, multiple } = props;

const { classPrefix } = useConfig();

const childrenWithProps = Children.map(children, (child) => {
if (isValidElement(child)) {
const addedProps = { selectedValue, onSelect };
const addedProps = { selectedValue, onSelect, multiple };
return cloneElement(child, { ...addedProps });
}
return child;
Expand All @@ -38,6 +39,7 @@ const OptionGroup = (props: SelectGOptionGroupProps) => {
<ul className={`${classPrefix}-select__list`}>{childrenWithProps}</ul>
</li>
);
return;
};

OptionGroup.defaultProps = optionGroupDefaultProps;
Expand Down
21 changes: 19 additions & 2 deletions src/select/base/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
import React, { useEffect, Ref, useMemo, KeyboardEvent, useRef, useCallback } from 'react';
import React, {
useEffect,
Ref,
useMemo,
KeyboardEvent,
useRef,
useCallback,
Children,
cloneElement,
isValidElement,
} from 'react';
import classNames from 'classnames';
import isFunction from 'lodash/isFunction';
import get from 'lodash/get';
Expand Down Expand Up @@ -264,6 +274,13 @@ const Select = forwardRefWithStatics(
};
const getPopupInstance = useCallback(() => (selectInputRef as any).current?.getPopupContentElement(), []);

const childrenWithProps = Children.map(children, (child) => {
if (isValidElement(child)) {
const addedProps = { multiple };
return cloneElement(child, { ...addedProps });
}
return child;
});
// 渲染主体内容
const renderContent = () => {
const popupContentProps = {
Expand All @@ -288,7 +305,7 @@ const Select = forwardRefWithStatics(
getPopupInstance,
scroll,
};
return <PopupContent {...popupContentProps}>{children}</PopupContent>;
return <PopupContent {...popupContentProps}>{childrenWithProps}</PopupContent>;
};

const renderValueDisplay = () => {
Expand Down
Loading