wix-style-react/src/Dropzone/docs/Dropzone.demo.js

wix-style-react

import React from 'react';
import Dropzone from '..';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';
import Box from '../../Box';
import AddItem from '../../AddItem';
import EmptyState from '../../EmptyState';
import FileUpload from '../../FileUpload';
import TextButton from '../../TextButton';
import * as Icons from 'wix-ui-icons-common';
import CustomModalLayout from '../../CustomModalLayout';

export default () => (
  <StorybookComponents.Stack width="70%">
    <CustomModalLayout
      primaryButtonText="Done"
      secondaryButtonText="Cancel"
      onCloseButtonClick={() => {}}
      title="Upload Media"
      showHeaderDivider
    >
      <Dropzone onDrop={() => {}}>
        <Dropzone.Overlay>
          <Box
            direction="vertical"
            height="100%"
            boxSizing="border-box"
            border="dashed 1px"
            borderRadius="6px"
            borderColor="B20"
          >
            <AddItem theme="filled" size="large">
              Drop Your Images Here
            </AddItem>
          </Box>
        </Dropzone.Overlay>
        <Dropzone.Content>
          <Box
            direction="vertical"
            border="dashed 1px"
            boxSizing="border-box"
            borderRadius="6px"
            padding="42px"
            borderColor="B20"
          >
            <EmptyState
              title="Drag Your Images Here"
              subtitle="Or upload images from your computer"
              image="generic_add_item_illustration.svg"
            >
              <FileUpload>
                {({ openFileUploadDialog }) => (
                  <TextButton
                    onClick={openFileUploadDialog}
                    prefixIcon={<Icons.Upload />}
                  >
                    Upload Images
                  </TextButton>
                )}
              </FileUpload>
            </EmptyState>
          </Box>
        </Dropzone.Content>
      </Dropzone>
    </CustomModalLayout>
  </StorybookComponents.Stack>
);