@kadconsulting/dry
Version:
KAD Reusable Component Library
54 lines • 2.03 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import Attachments from './Attachments';
import { AllowedFileTypes } from './AttachmentsTypes';
import { ThemeProvider } from '~components/ThemeProvider';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
export default {
title: 'Components/Attachments',
tags: ['autodocs'],
component: Attachments,
argTypes: {
onFilesSelected: { action: 'files selected' },
fileTypes: {
control: {
type: 'multi-select',
options: Object.values(AllowedFileTypes),
},
},
},
};
export const Default = {
render: (args, context) => {
return (_jsx(ThemeProvider, { themes: { light: lightTheme, dark: darkTheme }, children: _jsx(Attachments, { ...args }) }));
},
args: {
fileTypes: [AllowedFileTypes.PNG, AllowedFileTypes.JPG],
selectedFiles: [],
},
};
const DemoComponent = (args, context) => {
const [selectedFiles, setSelectedFiles] = useState([]);
const handleFilesSelected = (files) => {
setSelectedFiles(files);
};
const FileTypesMap = useMemo(() => {
return Object.values(AllowedFileTypes).map((type) => (_jsx("div", { children: _jsx(Attachments, { fileTypes: [type], onFilesSelected: handleFilesSelected, selectedFiles: selectedFiles }) }, type)));
}, [handleFilesSelected, selectedFiles]);
return (_jsx(ThemeProvider, { themes: { light: lightTheme, dark: darkTheme }, children: _jsx("div", { style: {
gap: '16px',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
}, children: FileTypesMap }) }));
};
export const Demo = {
render: (args, context) => DemoComponent(args, context),
parameters: {
controls: {
disable: true,
},
},
};
//# sourceMappingURL=Attachments.stories.js.map