File Editor
Directories:
.. (Back)
input
ripple
Files:
button-group.stories.js
button.stories.js
categories.stories.js
codemirror.stories.js
color.stories.js
range.stories.js
select-advanced.stories.js
select-menu.stories.js
tags.stories.js
toggle.stories.js
Create New File
Create
Edit File: categories.stories.js
// External dependencies. import React, { useState } from 'react'; // Internal dependencies. import CommonCategories from '@common-ui/controls/categories/categories'; export default { title: 'Controls/Categories', component: CommonCategories, argTypes: { onCategoriesChange: { action: 'changed' } }, }; const Template = args => { const [selectedCategories, setSelectedCategories] = useState(args.selectedCategories); const onCategoriesChange = (value, updateType) => { args.onCategoriesChange(value, updateType); if (updateType === 'add') { setSelectedCategories([...selectedCategories, value]); } else { setSelectedCategories(selectedCategories.filter(category => category !== value)); } }; return <CommonCategories {...args} selectedCategories={selectedCategories} onCategoriesChange={onCategoriesChange} />; }; export const Default = args => <Template {...args} />; Default.args = { selectedCategories: [], allCategories: {1: 'Category 1', 2: 'Category 2', 3: 'Category 3'}, disabled: false, markedCategories: [], categoryMark: '', }; export const WithSelectedCategories = args => <Template {...args} />; WithSelectedCategories.args = { ...Default.args, selectedCategories: [1, 3], }; export const WithMarkedCategories = args => <Template {...args} />; WithMarkedCategories.args = { ...Default.args, markedCategories: ['Category 1'], categoryMark: '*', }; export const Disabled = args => <Template {...args} />; Disabled.args = { ...Default.args, disabled: true, };
Save Changes
Rename File
Rename