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

feat(dropdown): add renderSelectedItem prop #10188

Merged
merged 7 commits into from
Dec 7, 2021
+90 −1
Merged

feat(dropdown): add renderSelectedItem prop #10188

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cc316a3
feat(dropdown): add renderSelectedItem prop
kevinsperrine Nov 29, 2021
3cd550f
Merge branch 'main' into ksp-dropdown-render-selected-item
kevinsperrine Dec 2, 2021
8010fe5
Merge branch 'main' into ksp-dropdown-render-selected-item
dakahn Dec 3, 2021
0c47069
chore(dropdown): more robust renderSelectedItem story
kevinsperrine Dec 3, 2021
36c298a
Merge branch 'main' into ksp-dropdown-render-selected-item
kevinsperrine Dec 6, 2021
ad3610d
Merge branch 'main' into ksp-dropdown-render-selected-item
kevinsperrine Dec 6, 2021
facc191
Merge branch 'main' into ksp-dropdown-render-selected-item
kodiakhq[bot] Dec 7, 2021
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
3 changes: 3 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2645,6 +2645,9 @@ Map {
"onChange": Object {
"type": "func",
},
"renderSelectedItem": Object {
"type": "func",
},
"selectedItem": Object {
"args": Array [
Array [
Expand Down
50 changes: 50 additions & 0 deletions packages/react/src/components/Dropdown/Dropdown-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ import {
import Dropdown from '../Dropdown';
import DropdownSkeleton from './Dropdown.Skeleton';
import mdx from './Dropdown.mdx';
import {
ChartBubble16,
ChartColumnFloating16,
ChartVennDiagram16,
} from '@carbon/icons-react';

const items = [
{
Expand Down Expand Up @@ -122,6 +127,51 @@ export const Default = () => (
/>
</div>
);
export const RenderSelectedItem = () => (
<div style={{ width: 400 }}>
<Dropdown
id="default"
titleText="Dropdown label"
helperText="This is some helper text"
label="Dropdown menu options"
items={[
{
id: 'option-0',
icon: ChartColumnFloating16,
text: 'Column Chart',
},
{
id: 'option-1',
icon: ChartBubble16,
text: 'Bubble Chart',
},
{
id: 'option-2',
icon: ChartVennDiagram16,
text: 'Venn Diagram',
},
]}
itemToString={(item) => (item ? item.text : '')}
itemToElement={(item) => (
<>
{React.createElement(item.icon)}
<span style={{ paddingLeft: '1rem', paddingBottom: '1rem' }}>
{item.text}
</span>
</>
)}
renderSelectedItem={(item) => (
<>
{React.createElement(item.icon)}
<span style={{ paddingLeft: '1rem', paddingBottom: '1rem' }}>
{item.text}
</span>
</>
)}
onChange={action('onChange')}
/>
</div>
);

export const Inline = () => (
<div style={{ width: 600 }}>
Expand Down
25 changes: 25 additions & 0 deletions packages/react/src/components/Dropdown/Dropdown-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,31 @@ describe('Dropdown', () => {
expect(wrapper).toMatchSnapshot();
});

it('should render selectedItem as an element', () => {
const wrapper = mount(
<Dropdown
{...mockProps}
selectedItem={{
id: `id-1`,
label: `Item 1`,
value: 1,
}}
renderSelectedItem={(selectedItem) => (
<div id="a-custom-element-for-selected-item">
{selectedItem.label}
</div>
)}
/>
);
// custom element should be rendered for the selected item
expect(wrapper.find('#a-custom-element-for-selected-item')).toHaveLength(1);
// the title should use the normal itemToString method
expect(wrapper.find('button').instance()).toHaveAttribute(
'title',
'Item 1'
);
});

describe('title', () => {
let wrapper;
let renderedLabel;
Expand Down
13 changes: 12 additions & 1 deletion packages/react/src/components/Dropdown/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const Dropdown = React.forwardRef(function Dropdown(
ariaLabel,
itemToString,
itemToElement,
renderSelectedItem,
type,
size,
onChange,
Expand Down Expand Up @@ -174,7 +175,11 @@ const Dropdown = React.forwardRef(function Dropdown(
{...toggleButtonProps}
ref={mergeRefs(toggleButtonProps.ref, ref)}>
<span className={`${prefix}--list-box__label`}>
{selectedItem ? itemToString(selectedItem) : label}
{selectedItem
? renderSelectedItem
? renderSelectedItem(selectedItem)
: itemToString(selectedItem)
: label}
</span>
<ListBox.MenuIcon isOpen={isOpen} translateWithId={translateWithId} />
</button>
Expand Down Expand Up @@ -329,6 +334,12 @@ Dropdown.propTypes = {
*/
onChange: PropTypes.func,

/**
* An optional callback to render the currently selected item as a react element instead of only
* as a string.
*/
renderSelectedItem: PropTypes.func,

/**
* In the case you want to control the dropdown selection entirely.
*/
Expand Down