lucid-ui
Version:
A UI component library from Xandr.
183 lines • 6.87 kB
JavaScript
import React, { useState } from 'react';
import IconSelect from './IconSelect';
import ClockIcon from '../Icon/ClockIcon/ClockIcon';
import StopwatchIcon from '../Icon/StopwatchIcon/StopwatchIcon';
import SwitchLabeled from '../SwitchLabeled/SwitchLabeled';
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
export default {
title: 'Controls/IconSelect',
component: IconSelect,
parameters: {
docs: {
description: {
component: IconSelect.peek.description,
},
},
},
args: IconSelect.defaultProps,
};
export const BasicIconSelect = (args) => {
const [selectedIcon, setSelectedIcon] = useState('item2');
const handleSelect = (id) => {
// when selected, set `selectedIcon`
setSelectedIcon(id);
};
return (React.createElement(IconSelect, { ...args, onSelect: handleSelect, items: [
{
id: 'item1',
icon: React.createElement(ClockIcon, null),
isSelected: selectedIcon === 'item1',
label: 'Foo Bar',
},
{
id: 'item2',
icon: React.createElement(StopwatchIcon, null),
isSelected: selectedIcon === 'item2',
label: 'Bax Tar',
},
] }));
};
/** Single: Select One Icon */
export const Single = (args) => {
const [selectedIcon, setSelectedIcon] = useState('item2');
const handleSelect = (id) => {
// when selected, set `selectedIcon`
setSelectedIcon(id);
};
return (React.createElement(IconSelect, { ...args, onSelect: handleSelect, kind: 'single', items: [
{
id: 'item1',
icon: React.createElement(ClockIcon, null),
isSelected: selectedIcon === 'item1',
label: 'Foo Bar',
},
{
id: 'item2',
icon: React.createElement(StopwatchIcon, null),
isSelected: selectedIcon === 'item2',
label: 'Bax Tar',
},
] }));
};
/** Select Multiple Icons */
export const SelectMultipleIcons = (args) => {
const [selectedIcons, setSelectedIcons] = useState(['item2']);
const isSelected = (id) => {
return selectedIcons.includes(id);
};
const handleSelect = (selectedId) => {
if (isSelected(selectedId)) {
// if selected, then remove from list
setSelectedIcons(selectedIcons.filter((id) => id !== selectedId));
}
else {
// add it to the list
setSelectedIcons([...selectedIcons, selectedId]);
}
};
return (React.createElement(IconSelect, { ...args, onSelect: handleSelect, kind: 'multiple', items: [
{
id: 'item1',
icon: React.createElement(ClockIcon, null),
isSelected: isSelected('item1'),
label: 'Foo Bar',
},
{
id: 'item2',
icon: React.createElement(StopwatchIcon, null),
isSelected: isSelected('item2'),
label: 'Bax Tar',
},
] }));
};
/** Partially Select Icons */
export const PartiallySelectIcons = (args) => {
const [selectedIcons, setSelectedIcons] = useState([
{ id: 'item2', isPartial: true },
]);
const isSelected = (id) => {
//return false;
return selectedIcons.some(({ id: selectedId }) => id === selectedId);
};
const isPartiallySelected = (id) => {
//return false;
return selectedIcons.some(({ id: selectedId, isPartial }) => id === selectedId && isPartial);
};
const handleSelect = (selectedId) => {
//const icons = selectedIcons;
if (isPartiallySelected(selectedId)) {
// if partially selected, remove from the list
setSelectedIcons(selectedIcons.filter(({ id }) => id !== selectedId));
}
else if (isSelected(selectedId)) {
// if already selected, ensure isPartial is true
setSelectedIcons(selectedIcons.map(({ id, isPartial }) => ({
id,
isPartial: isPartial || id === selectedId,
})));
}
else {
// add selected icon to list
setSelectedIcons([
...selectedIcons,
{ id: selectedId, isPartial: false },
]);
}
};
return (React.createElement("section", null,
React.createElement(IconSelect, { ...args, onSelect: handleSelect, items: [
{
id: 'item1',
icon: React.createElement(ClockIcon, null),
isSelected: isSelected('item1'),
isPartial: isPartiallySelected('item1'),
label: 'Foo Bar',
},
{
id: 'item2',
icon: React.createElement(StopwatchIcon, null),
isSelected: isSelected('item2'),
isPartial: isPartiallySelected('item2'),
label: 'Bax Tar',
},
] })));
};
/** Disabled Icon Select */
export const DisabledIconSelect = (args) => {
const [selectedIcons, setSelectedIcons] = useState(['item2']);
const [isDisabled, setIsDisabled] = useState(true);
const isSelected = (id) => {
return selectedIcons.includes(id);
};
const handleSelect = (selectedId) => {
if (isSelected(selectedId)) {
// if selected, then remove from the list
setSelectedIcons(selectedIcons.filter((id) => id !== selectedId));
}
else {
// add it to the list
setSelectedIcons([...selectedIcons, selectedId]);
}
};
const handleToggleDisabled = () => {
setIsDisabled(!isDisabled);
};
return (React.createElement("section", null,
React.createElement(SwitchLabeled, { Label: `IconSelect ${isDisabled ? 'Disabled' : 'Enabled'}`, isSelected: !isDisabled, onSelect: handleToggleDisabled }),
React.createElement(IconSelect, { ...args, isDisabled: isDisabled, onSelect: handleSelect, items: [
{
id: 'item1',
icon: React.createElement(ClockIcon, null),
isSelected: isSelected('item1'),
label: 'Always Disabled',
isDisabled: true,
},
{
id: 'item2',
icon: React.createElement(StopwatchIcon, null),
isSelected: isSelected('item2'),
label: 'Bax Tar',
},
] })));
};
//# sourceMappingURL=IconSelect.stories.js.map