From 5d7a997ba79b27f9301096c87ff7ae85c4bc6ec7 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Thu, 12 May 2022 12:27:03 +0300 Subject: [PATCH] style: improve dropInput classes prop --- .../Inputs/DatePicker/DatePicker.stories.tsx | 2 +- src/Components/Inputs/FilesInput/DropInput.jsx | 10 ++++++++-- .../Inputs/FilesInput/FileInput.stories.tsx | 4 ++-- .../Inputs/FilesInput/FilesDropInput.tsx | 14 +++++++++----- .../Inputs/TagsInput/TagsInput.stories.tsx | 2 +- .../InsertImageModal/InsertImageModal.stories.tsx | 2 +- .../Inputs/TextEditor/TextEditor.stories.tsx | 2 +- 7 files changed, 23 insertions(+), 13 deletions(-) diff --git a/src/Components/Inputs/DatePicker/DatePicker.stories.tsx b/src/Components/Inputs/DatePicker/DatePicker.stories.tsx index 7286af2..e4b9f98 100644 --- a/src/Components/Inputs/DatePicker/DatePicker.stories.tsx +++ b/src/Components/Inputs/DatePicker/DatePicker.stories.tsx @@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; import DatePicker from './DatePicker'; export default { - title: 'Shared/DatePicker', + title: 'Shared/Inputs/Date Picker', component: DatePicker, } as ComponentMeta; diff --git a/src/Components/Inputs/FilesInput/DropInput.jsx b/src/Components/Inputs/FilesInput/DropInput.jsx index 64ac918..6a2b73c 100644 --- a/src/Components/Inputs/FilesInput/DropInput.jsx +++ b/src/Components/Inputs/FilesInput/DropInput.jsx @@ -11,7 +11,11 @@ export default function DropInput({ height, multiple = false, allowedType = "*", - classes = {}, + classes = { + base: "", + idle: "", + dragging: "", + }, }) { const [isDragging, toggleDrag] = useToggle(false); const fileInputRef = React.useRef(null); @@ -40,7 +44,9 @@ export default function DropInput({ onFrameDragLeave={() => toggleDrag(false)} onFrameDrop={() => toggleDrag(false)} className={`h-full cursor-pointer`} - targetClassName={`h-full ${classes.wrapper}`} + targetClassName={`h-full ${classes.base} ${ + status === "empty" && classes.idle + }`} draggingOverFrameClassName={`${classes.dragging}`} > {status === "dragging" && draggingContent} diff --git a/src/Components/Inputs/FilesInput/FileInput.stories.tsx b/src/Components/Inputs/FilesInput/FileInput.stories.tsx index e56b62c..5b02efa 100644 --- a/src/Components/Inputs/FilesInput/FileInput.stories.tsx +++ b/src/Components/Inputs/FilesInput/FileInput.stories.tsx @@ -6,7 +6,7 @@ import FilesInput from './FilesInput'; import FileDropInput from './FilesDropInput'; export default { - title: 'Shared/Files Input', + title: 'Shared/Inputs/Files Input', component: FilesInput, } as ComponentMeta; @@ -27,5 +27,5 @@ CustomizedButton.args = { const DropTemplate: ComponentStory = (args) =>
export const DropZoneInput = DropTemplate.bind({}); DropZoneInput.args = { - onChange: () => { }, + onChange: console.log, } \ No newline at end of file diff --git a/src/Components/Inputs/FilesInput/FilesDropInput.tsx b/src/Components/Inputs/FilesInput/FilesDropInput.tsx index 1972c67..6d96622 100644 --- a/src/Components/Inputs/FilesInput/FilesDropInput.tsx +++ b/src/Components/Inputs/FilesInput/FilesDropInput.tsx @@ -14,8 +14,10 @@ type Props = { uploadText?: string; allowedType?: 'images'; classes?: Partial<{ - wrapper: string, - dragging: string + base: string, + idle: string, + dragging: string, + hasFiles: string }> } @@ -44,8 +46,9 @@ export default function FilesInput({ }: Props) { - const wrapperClasses = classes?.wrapper ?? 'bg-primary-50 p-32 border border-primary-500 rounded-8 text-center flex flex-col justify-center items-center' - const draggingClasses = classes?.dragging ?? '!bg-primary-500 !text-white' + const baseClasses = classes?.base ?? 'p-32 rounded-8 text-center flex flex-col justify-center items-center' + const idleClasses = classes?.idle ?? 'bg-primary-50 hover:bg-primary-25 border border-dashed border-primary-500 text-gray-800' + const draggingClasses = classes?.dragging ?? 'bg-primary-500 text-white' return ( diff --git a/src/Components/Inputs/TagsInput/TagsInput.stories.tsx b/src/Components/Inputs/TagsInput/TagsInput.stories.tsx index b335f3c..8caa038 100644 --- a/src/Components/Inputs/TagsInput/TagsInput.stories.tsx +++ b/src/Components/Inputs/TagsInput/TagsInput.stories.tsx @@ -4,7 +4,7 @@ import { WrapForm } from 'src/utils/storybook/decorators'; import TagsInput from './TagsInput'; export default { - title: 'Shared/TagsInput', + title: 'Shared/Inputs/Tags Input', component: TagsInput, argTypes: { backgroundColor: { control: 'color' }, diff --git a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx b/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx index bae58db..ed4f283 100644 --- a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx +++ b/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx @@ -5,7 +5,7 @@ import InsertImageModal from './InsertImageModal'; import { ModalsDecorator } from 'src/utils/storybook/decorators'; export default { - title: 'Shared/TextEditor/Insert Image Modal', + title: 'Shared/Inputs/Text Editor/Insert Image Modal', component: InsertImageModal, decorators: [ModalsDecorator] diff --git a/src/Components/Inputs/TextEditor/TextEditor.stories.tsx b/src/Components/Inputs/TextEditor/TextEditor.stories.tsx index 241afbc..df88e68 100644 --- a/src/Components/Inputs/TextEditor/TextEditor.stories.tsx +++ b/src/Components/Inputs/TextEditor/TextEditor.stories.tsx @@ -5,7 +5,7 @@ import { WithModals } from 'src/utils/storybook/decorators'; import TextEditor from './TextEditor'; export default { - title: 'Shared/TextEditor', + title: 'Shared/Inputs/Text Editor', decorators: [WithModals], component: TextEditor,