feat(dropzone): add block prop (#813)

Co-authored-by: Кононенко Артем Игоревич <AIKononenko@alfabank.ru>
core-ds · Aug 27, 2021 · 39bf4c3 · 39bf4c3
1 parent 68468dd
commit 39bf4c3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/dropzone/src/Component.tsx b/packages/dropzone/src/Component.tsx
@@ -26,6 +26,11 @@ export type DropzoneProps = {
      */
     overlayVisible?: boolean;
 
+    /**
+     * Растягивать ли компонент на всю ширину
+     */
+    block?: boolean;
+
     /**
      * Обработчик события 'drop'
      */
@@ -62,6 +67,7 @@ export const Dropzone: FC<DropzoneProps> = ({
     onDragLeave,
     onDragOver,
     onDrop,
+    block = false,
     dataTestId,
 }) => {
     const [dragOver, setDragOver] = useState(false);
@@ -138,6 +144,7 @@ export const Dropzone: FC<DropzoneProps> = ({
             className={cn(styles.component, className, {
                 [styles.dragOver]: dragOver || overlayVisible,
                 [styles.error]: error,
+                [styles.block]: block,
             })}
             onDragEnter={handleDragEnter}
             onDragLeave={handleDragLeave}

diff --git a/packages/dropzone/src/docs/Component.stories.mdx b/packages/dropzone/src/docs/Component.stories.mdx
@@ -28,12 +28,14 @@ import Description from './description.mdx';
         return (
             <Dropzone
                 error={boolean('error', false)}
+                block={boolean('block', false)}
                 overlayVisible={boolean('overlayVisible', false)}
                 onDrop={handleDrop}
             >
                 <div
                     style={{
-                        width: 400,
+                        minWidth: 400,
+                        width: '100%',
                         height: 200,
                         display: 'flex',
                         alignItems: 'center',

diff --git a/packages/dropzone/src/index.module.css b/packages/dropzone/src/index.module.css
@@ -24,6 +24,10 @@
     }
 }
 
+.block {
+    width: 100%;
+}
+
 .overlay {
     position: absolute;
     top: 0;