Skip to content

Commit

Permalink
#535 - Picker - Added possibility to hide clear button, docs improvem…
Browse files Browse the repository at this point in the history 
…ents (#545)

* added possibility to hide clear button, docs improvements

* missed change
  • Loading branch information
@marcinsawicki
marcinsawicki authored May 17, 2023
1 parent 2662198 commit 87e57ca
Show file tree
Hide file tree
Showing 3 changed files with 217 additions and 83 deletions.
242 changes: 160 additions & 82 deletions packages/react-components/src/components/Picker/Picker.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { IPickerListItem } from './PickerList';

import './Picker.stories.css';
import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
import noop from '../../utils/noop';

export default {
title: 'Components/Picker',
Expand All @@ -15,6 +16,12 @@ export default {
componentSubtitle: `TBD`,
},
argTypes: {
options: {
control: false,
},
selected: {
control: false,
},
onSelect: { action: 'changed' },
},
} as ComponentMeta<typeof Picker>;
Expand Down Expand Up @@ -48,33 +55,48 @@ Default.args = {
options: defaultPickerOptions,
};

export const States = (args: IPickerProps): React.ReactElement => (
export const States = (): React.ReactElement => (
<div style={{ ...commonWidth, marginBottom: 100 }}>
<StoryDescriptor title="Basic">
<PickerComponent {...args} />
<PickerComponent options={defaultPickerOptions} onSelect={noop} />
</StoryDescriptor>
<StoryDescriptor title="Multi select + Basic">
<PickerComponent {...args} type="multi" />
<PickerComponent
options={defaultPickerOptions}
onSelect={noop}
type="multi"
/>
</StoryDescriptor>
<StoryDescriptor title="Disabled">
<PickerComponent {...args} disabled />
<PickerComponent
options={defaultPickerOptions}
onSelect={noop}
disabled
/>
</StoryDescriptor>
<StoryDescriptor title="Error">
<PickerComponent {...args} error />
<PickerComponent options={defaultPickerOptions} onSelect={noop} error />
</StoryDescriptor>
<StoryDescriptor title="Error + Disabled">
<PickerComponent {...args} disabled error />
<PickerComponent
options={defaultPickerOptions}
onSelect={noop}
disabled
error
/>
</StoryDescriptor>
<StoryDescriptor title="Disabled + Selected option">
<PickerComponent
{...args}
options={defaultPickerOptions}
onSelect={noop}
disabled
selected={[{ key: 'two', name: 'Option two' }]}
/>
</StoryDescriptor>
<StoryDescriptor title="Multi select + Disabled + Selected option">
<PickerComponent
{...args}
options={defaultPickerOptions}
onSelect={noop}
type="multi"
disabled
selected={[
Expand All @@ -85,93 +107,149 @@ export const States = (args: IPickerProps): React.ReactElement => (
</StoryDescriptor>
</div>
);
States.args = {
options: defaultPickerOptions,
label: 'Example label',
};

export const PickerWithGroupedOptions = (
args: IPickerProps
): React.ReactElement => (
export const PickerWithGroupedOptions = (): React.ReactElement => (
<div style={{ ...commonWidth, marginBottom: 320 }}>
<PickerComponent {...args} />
<PickerComponent options={defaultExtendedOptions} onSelect={noop} />
</div>
);
PickerWithGroupedOptions.args = {
options: defaultExtendedOptions,
};

const CustomPickerOption: React.FC = ({ children }) => (
<div className="custom-picker-option">{children}</div>
);

export const PickerWithOptionsAsCustomElements = (
args: IPickerProps
): React.ReactElement => (
export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
<div style={{ ...commonWidth, marginBottom: 320 }}>
<StoryDescriptor title="Single select">
<PickerComponent {...args} />
<PickerComponent
options={[
{
key: 'one',
name: 'Example custom element one',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element one</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">
Example custom element one
</div>
</CustomPickerOption>
),
},
},
{
key: 'two',
name: 'Example custom element two',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element two</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">
Example custom element two
</div>
</CustomPickerOption>
),
},
},
]}
onSelect={noop}
/>
</StoryDescriptor>
<StoryDescriptor title="Multi select">
<PickerComponent {...args} type="multi" />
<PickerComponent
options={[
{
key: 'one',
name: 'Example custom element one',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element one</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">
Example custom element one
</div>
</CustomPickerOption>
),
},
},
{
key: 'two',
name: 'Example custom element two',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element two</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">
Example custom element two
</div>
</CustomPickerOption>
),
},
},
]}
type="multi"
onSelect={noop}
/>
</StoryDescriptor>
</div>
);
PickerWithOptionsAsCustomElements.args = {
options: [
{
key: 'one',
name: 'Example custom element one',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element one</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">Example custom element one</div>
</CustomPickerOption>
),
},
},
{
key: 'two',
name: 'Example custom element two',
customElement: {
listItemBody: (
<CustomPickerOption>
<img
className="image"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div>
<div className="title">Example custom element two</div>
<div className="description">Example custom element</div>
</div>
</CustomPickerOption>
),
selectedItemBody: (
<CustomPickerOption>
<img
className="image selected"
src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
/>
<div className="title selected">Example custom element two</div>
</CustomPickerOption>
),
},
},
],
};
51 changes: 51 additions & 0 deletions packages/react-components/src/components/Picker/Picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,69 @@ const baseClass = 'picker';
export type PickerType = 'single' | 'multi';

export interface IPickerProps {
/**
* Specify the custom id
*/
id?: string;
/**
* The CSS class for picker container
*/
className?: string;
/**
* Specify whether the picker should be disabled
*/
disabled?: boolean;
/**
* Specify whether the picker should be in error state
*/
error?: boolean;
/**
* Array of picker options
*/
options: IPickerListItem[];
/**
* Array of picker selected options
*/
selected?: IPickerListItem[] | null;
/**
* Specify the picker size
*/
size?: Size;
/**
* Set the dismiss icon size in tags when `multi` type is enabled
*/
tagIconSize?: IconSize;
/**
* Specify the placeholder for search input
*/
placeholder?: string;
/**
* Specify whether the option select is required
*/
isRequired?: boolean;
/**
* Text if no search result were found
*/
noSearchResultText?: string;
/**
* Text for `select all` option which will be visible if defined in multi select mode
*/
selectAllOptionText?: string;
/**
* Set `multi` to specify whether the picker should allow to multi selection
*/
type?: PickerType;
/**
* Set to disable search input
*/
searchDisabled?: boolean;
/**
* Set to hide clear selection button
*/
hideClearButton?: boolean;
/**
* Callback called after item selection
*/
onSelect: (selectedItems: IPickerListItem[] | null) => void;
}

Expand All @@ -47,6 +96,7 @@ export const Picker: React.FC<IPickerProps> = ({
selectAllOptionText,
type = 'single',
searchDisabled = false,
hideClearButton,
onSelect,
...props
}) => {
Expand Down Expand Up @@ -192,6 +242,7 @@ export const Picker: React.FC<IPickerProps> = ({
isRequired={isRequired}
isMultiSelect={type === 'multi'}
size={size}
hideClearButton={hideClearButton}
onTrigger={handleTrigger}
onClear={handleClear}
>
Expand Down
Loading

0 comments on commit 87e57ca

Please sign in to comment.