-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(redmine 1246935): add Dropzone component
- Loading branch information
1 parent
51e19e0
commit b9b00a7
Showing
8 changed files
with
167 additions
and
106 deletions.
There are no files selected for viewing
16 changes: 16 additions & 0 deletions
16
packages/react-front-kit/src/Components/Dropzone/Dropzone.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { Dropzone as Cmp } from './Dropzone'; | ||
|
|
||
| const meta = { | ||
| component: Cmp, | ||
| tags: ['autodocs'], | ||
| title: '3-custom/Components/Dropzone', | ||
| } satisfies Meta<typeof Cmp>; | ||
|
|
||
| export default meta; | ||
| type IStory = StoryObj<typeof meta>; | ||
|
|
||
| export const Dropzone: IStory = { | ||
| args: {}, | ||
| }; |
13 changes: 13 additions & 0 deletions
13
packages/react-front-kit/src/Components/Dropzone/Dropzone.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { renderWithProviders } from '@smile/react-front-kit-shared/src/test-utils'; | ||
|
|
||
| import { Dropzone } from './Dropzone'; | ||
|
|
||
| describe('Dropzone', () => { | ||
| it('matches snapshot', () => { | ||
| const { container } = renderWithProviders( | ||
| // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, no-console | ||
| <Dropzone onDrop={(file) => console.log(`accept ${file}`)} />, | ||
| ); | ||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
| }); |
69 changes: 69 additions & 0 deletions
69
packages/react-front-kit/src/Components/Dropzone/Dropzone.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| 'use client'; | ||
|
|
||
| import type { DropzoneProps as IMantineDropzoneProps } from '@mantine/dropzone'; | ||
| import type { ReactElement } from 'react'; | ||
|
|
||
| import { ActionIcon } from '@mantine/core'; | ||
| import { Dropzone as MantineDropzone } from '@mantine/dropzone'; | ||
| import { createStyles } from '@mantine/styles'; | ||
| import { Eye, Plus } from '@phosphor-icons/react'; | ||
|
|
||
| export type IDropzoneProps = Omit<IMantineDropzoneProps, 'children'>; | ||
|
|
||
| const useStyles = createStyles(() => ({ | ||
| buttonPlus: { | ||
| alignItems: 'center', | ||
| cursor: 'pointer', | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| margin: 'auto', | ||
| }, | ||
| dropzoneBrowse: { | ||
| alignItems: 'center', | ||
| display: 'flex', | ||
| fontWeight: 600, | ||
| justifyContent: 'center', | ||
| marginTop: '0px', | ||
| }, | ||
| dropzoneInner: { | ||
| margin: 'auto', | ||
| p: { | ||
| margin: '10px', | ||
| }, | ||
| textAlign: 'center', | ||
| }, | ||
| dropzoneRoot: { | ||
| display: 'flex', | ||
| minHeight: '100%', | ||
| minWidth: '100%', | ||
| }, | ||
| eye: { marginRight: '8px' }, | ||
| })); | ||
|
|
||
| export function Dropzone(props: IDropzoneProps): ReactElement { | ||
| const { ...MantineDropzoneProps } = props; | ||
| const { classes } = useStyles(); | ||
| return ( | ||
| <MantineDropzone | ||
| {...MantineDropzoneProps} | ||
| classNames={{ | ||
| inner: classes.dropzoneInner, | ||
| root: classes.dropzoneRoot, | ||
| }} | ||
| > | ||
| <ActionIcon | ||
| className={classes.buttonPlus} | ||
| radius="xl" | ||
| size="xl" | ||
| variant="filled" | ||
| > | ||
| <Plus size={20} weight="bold" /> | ||
| </ActionIcon> | ||
| <p>Drag and drop your documents here</p> | ||
| <p className={classes.dropzoneBrowse}> | ||
| <Eye className={classes.eye} size={16} weight="bold" /> | ||
| Browse your device | ||
| </p> | ||
| </MantineDropzone> | ||
| ); | ||
| } |
59 changes: 59 additions & 0 deletions
59
packages/react-front-kit/src/Components/Dropzone/__snapshots__/Dropzone.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Dropzone matches snapshot 1`] = ` | ||
| <div> | ||
| <div | ||
| class="mantine-Dropzone-root mantine-juj4dw" | ||
| data-idle="true" | ||
| role="presentation" | ||
| tabindex="0" | ||
| > | ||
| <input | ||
| multiple="" | ||
| style="display: none;" | ||
| tabindex="-1" | ||
| type="file" | ||
| /> | ||
| <div | ||
| class="mantine-Dropzone-inner mantine-uknr1z" | ||
| > | ||
| <button | ||
| class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-w4fu6v" | ||
| type="button" | ||
| > | ||
| <svg | ||
| fill="currentColor" | ||
| height="20" | ||
| viewBox="0 0 256 256" | ||
| width="20" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| <p> | ||
| Drag and drop your documents here | ||
| </p> | ||
| <p | ||
| class="mantine-5jf51o" | ||
| > | ||
| <svg | ||
| class="mantine-v0dvph" | ||
| fill="currentColor" | ||
| height="16" | ||
| viewBox="0 0 256 256" | ||
| width="16" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M251,123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63,57.67,164,44,128,44S59.37,57.67,33.51,83.52C14.16,102.87,5.4,122.32,5,123.13a12.08,12.08,0,0,0,0,9.75c.37.82,9.13,20.26,28.49,39.61C59.37,198.34,92,212,128,212s68.63-13.66,94.48-39.51c19.36-19.35,28.12-38.79,28.49-39.61A12.08,12.08,0,0,0,251,123.13Zm-46.06,33C183.47,177.27,157.59,188,128,188s-55.47-10.73-76.91-31.88A130.36,130.36,0,0,1,29.52,128,130.45,130.45,0,0,1,51.09,99.89C72.54,78.73,98.41,68,128,68s55.46,10.73,76.91,31.89A130.36,130.36,0,0,1,226.48,128,130.45,130.45,0,0,1,204.91,156.12ZM128,84a44,44,0,1,0,44,44A44.05,44.05,0,0,0,128,84Zm0,64a20,20,0,1,1,20-20A20,20,0,0,1,128,148Z" | ||
| /> | ||
| </svg> | ||
| Browse your device | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters