Skip to content

Commit

Permalink
DropZone component (#4359)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dbanksdesign
dbanksdesign authored Aug 29, 2023
1 parent 5b6c9bf commit ec495a6
Show file tree
Hide file tree
Showing 41 changed files with 1,657 additions and 80 deletions.
29 changes: 29 additions & 0 deletions .changeset/itchy-crabs-return.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
"@aws-amplify/ui-react-storage": minor
"@aws-amplify/ui-react": minor
"@aws-amplify/ui": minor
---

feat(react): DropZone component

```jsx
export default function DefaultDropZoneExample() {
const [files, setFiles] = React.useState([]);
return (
<>
<DropZone
onDropComplete={({ files }) => {
setFiles(files);
}}
>
Drag images here
</DropZone>
{files.map((file) => (
<Text key={file.name}>{file.name}</Text>
))}
</>
);
}
```

The DropZone part of the StorageManager connected component has been updated to use the new DropZone component too!
136 changes: 136 additions & 0 deletions docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2630,6 +2630,142 @@ exports[`CSS Variables Table 1`] = `
\\"variable\\": \\"--amplify-components-divider-small-border-width\\",
\\"value\\": \\"var(--amplify-border-widths-small)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-accepted-background-color\\",
\\"value\\": \\"var(--amplify-colors-background-success)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-accepted-border-color\\",
\\"value\\": \\"var(--amplify-colors-border-success)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-accepted-border-radius\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-radius)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-accepted-border-style\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-style)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-accepted-border-width\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-width)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-accepted-color\\",
\\"value\\": \\"var(--amplify-colors-font-success)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-active-background-color\\",
\\"value\\": \\"var(--amplify-colors-brand-primary-10)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-active-border-color\\",
\\"value\\": \\"var(--amplify-colors-border-pressed)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-active-border-radius\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-radius)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-active-border-style\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-style)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-active-border-width\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-width)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-active-color\\",
\\"value\\": \\"var(--amplify-colors-font-primary)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-background-color\\",
\\"value\\": \\"var(--amplify-colors-background-primary)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-border-color\\",
\\"value\\": \\"var(--amplify-colors-border-primary)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-border-radius\\",
\\"value\\": \\"var(--amplify-radii-small)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-border-style\\",
\\"value\\": \\"dashed\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-border-width\\",
\\"value\\": \\"var(--amplify-border-widths-small)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-color\\",
\\"value\\": \\"var(--amplify-colors-font-primary)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-disabled-background-color\\",
\\"value\\": \\"var(--amplify-colors-background-disabled)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-disabled-border-color\\",
\\"value\\": \\"var(--amplify-colors-border-disabled)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-disabled-border-radius\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-radius)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-disabled-border-style\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-style)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-disabled-border-width\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-width)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-disabled-color\\",
\\"value\\": \\"var(--amplify-colors-font-disabled)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-gap\\",
\\"value\\": \\"var(--amplify-space-small)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-padding-block\\",
\\"value\\": \\"var(--amplify-space-xl)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-padding-inline\\",
\\"value\\": \\"var(--amplify-space-large)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-rejected-background-color\\",
\\"value\\": \\"var(--amplify-colors-background-error)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-rejected-border-color\\",
\\"value\\": \\"var(--amplify-colors-border-pressed)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-rejected-border-radius\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-radius)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-rejected-border-style\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-style)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-rejected-border-width\\",
\\"value\\": \\"var(--amplify-components-dropzone-border-width)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-rejected-color\\",
\\"value\\": \\"var(--amplify-colors-font-error)\\"
},
{
\\"variable\\": \\"--amplify-components-dropzone-text-align\\",
\\"value\\": \\"center\\"
},
{
\\"variable\\": \\"--amplify-components-expander-background-color\\",
\\"value\\": \\"var(--amplify-colors-background-primary)\\"
Expand Down
159 changes: 159 additions & 0 deletions docs/__tests__/__snapshots__/props-table.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2786,6 +2786,165 @@ exports[`Props Table 1`] = `
}
]
},
\\"DropZone\\": {
\\"DropZone\\": [
{
\\"Main\\": {
\\"children\\": {
\\"name\\": \\"children\\",
\\"type\\": \\"React.ReactNode\\",
\\"description\\": \\"Children to be rendered inside the component\\",
\\"category\\": \\"BaseComponentProps\\",
\\"isOptional\\": true
},
\\"id\\": {
\\"name\\": \\"id\\",
\\"type\\": \\"string | undefined\\",
\\"description\\": \\"Unique identifier\\",
\\"category\\": \\"BaseComponentProps\\",
\\"isOptional\\": true
},
\\"className\\": {
\\"name\\": \\"className\\",
\\"type\\": \\"string | undefined\\",
\\"description\\": \\"Additional CSS class name for component\\",
\\"category\\": \\"BaseComponentProps\\",
\\"isOptional\\": true
},
\\"testId\\": {
\\"name\\": \\"testId\\",
\\"type\\": \\"string | undefined\\",
\\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\",
\\"category\\": \\"BaseComponentProps\\",
\\"isOptional\\": true
},
\\"inert\\": {
\\"name\\": \\"inert\\",
\\"type\\": \\"boolean | undefined\\",
\\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\",
\\"category\\": \\"BaseComponentProps\\",
\\"isOptional\\": true
},
\\"isDisabled\\": {
\\"name\\": \\"isDisabled\\",
\\"type\\": \\"boolean | undefined\\",
\\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\",
\\"category\\": \\"BaseViewProps\\",
\\"isOptional\\": true
},
\\"style\\": {
\\"name\\": \\"style\\",
\\"type\\": \\"React.CSSProperties | undefined\\",
\\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\",
\\"category\\": \\"BaseViewProps\\",
\\"isOptional\\": true
}
}
},
{
\\"Layout\\": {
\\"flex\\": {
\\"name\\": \\"flex\\",
\\"type\\": \\"ResponsiveStyle<Property.Flex<0 | (string & {})>> | undefined\\",
\\"description\\": \\"Shorthand for flex grow / shrink / basis\\",
\\"category\\": \\"FlexItemStyleProps\\",
\\"isOptional\\": true
},
\\"order\\": {
\\"name\\": \\"order\\",
\\"type\\": \\"ResponsiveStyle<Property.Order> | undefined\\",
\\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\",
\\"category\\": \\"FlexItemStyleProps\\",
\\"isOptional\\": true
},
\\"grow\\": {
\\"name\\": \\"grow\\",
\\"type\\": \\"ResponsiveStyle<Property.FlexGrow> | undefined\\",
\\"description\\": \\"Ability for flex item to grow\\",
\\"category\\": \\"FlexItemStyleProps\\",
\\"isOptional\\": true
},
\\"shrink\\": {
\\"name\\": \\"shrink\\",
\\"type\\": \\"ResponsiveStyle<Property.FlexShrink> | undefined\\",
\\"description\\": \\"Ability for flex item to shrink\\",
\\"category\\": \\"FlexItemStyleProps\\",
\\"isOptional\\": true
},
\\"basis\\": {
\\"name\\": \\"basis\\",
\\"type\\": \\"ResponsiveStyle<Property.FlexBasis<0 | (string & {})>> | undefined\\",
\\"description\\": \\"Default size of element before remaining space is distributed\\",
\\"category\\": \\"FlexItemStyleProps\\",
\\"isOptional\\": true
},
\\"row\\": {
\\"name\\": \\"row\\",
\\"type\\": \\"ResponsiveStyle<Property.GridRow> | undefined\\",
\\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
},
\\"column\\": {
\\"name\\": \\"column\\",
\\"type\\": \\"ResponsiveStyle<Property.GridColumn> | undefined\\",
\\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
},
\\"area\\": {
\\"name\\": \\"area\\",
\\"type\\": \\"ResponsiveStyle<Property.GridArea> | undefined\\",
\\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
},
\\"columnEnd\\": {
\\"name\\": \\"columnEnd\\",
\\"type\\": \\"ResponsiveStyle<Property.GridColumnEnd> | undefined\\",
\\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
},
\\"columnSpan\\": {
\\"name\\": \\"columnSpan\\",
\\"type\\": \\"ResponsiveStyle<GridSpanType> | undefined\\",
\\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
},
\\"columnStart\\": {
\\"name\\": \\"columnStart\\",
\\"type\\": \\"ResponsiveStyle<Property.GridColumnStart> | undefined\\",
\\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
},
\\"rowEnd\\": {
\\"name\\": \\"rowEnd\\",
\\"type\\": \\"ResponsiveStyle<Property.GridRowEnd> | undefined\\",
\\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
},
\\"rowSpan\\": {
\\"name\\": \\"rowSpan\\",
\\"type\\": \\"ResponsiveStyle<GridSpanType> | undefined\\",
\\"description\\": \\"\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
},
\\"rowStart\\": {
\\"name\\": \\"rowStart\\",
\\"type\\": \\"ResponsiveStyle<Property.GridRowStart> | undefined\\",
\\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\",
\\"category\\": \\"GridItemStyleProps\\",
\\"isOptional\\": true
}
}
}
]
},
\\"Expander\\": {
\\"Expander\\": [
{
Expand Down
1 change: 1 addition & 0 deletions docs/__tests__/__snapshots__/sitemap.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ exports[`Sitemap Snapshot 1`] = `
/react/components/checkboxfield,
/react/components/collection,
/react/components/divider,
/react/components/dropzone,
/react/components/expander,
/react/components/flex,
/react/components/grid,
Expand Down
4 changes: 4 additions & 0 deletions docs/scripts/types/catalog.d.ts
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions docs/src/data/links.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
MdCheckCircle,
MdHighlight,
MdChevronRight,
MdPanToolAlt,
MdLabel,
} from 'react-icons/md';

Expand Down Expand Up @@ -390,6 +391,13 @@ export const inputComponents: ComponentNavItem[] = [
platforms: ['react'],
icon: MdTouchApp,
},
{
href: '/components/dropzone',
label: 'DropZone',
body: `The Dropzone component captures files from user with drag and drop`,
platforms: ['react'],
icon: MdPanToolAlt,
},
].sort(sortByLabel);

export const layoutComponents: ComponentNavItem[] = [
Expand Down
Loading

0 comments on commit ec495a6

Please sign in to comment.