feat(html): add dropzone component and use it in tests

telerik · May 19, 2023 · c34b650 · c34b650
1 parent f2f8a57
commit c34b650
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 29 deletions.
diff --git a/packages/html/src/dropzone/dropzone.spec.tsx b/packages/html/src/dropzone/dropzone.spec.tsx
@@ -0,0 +1,53 @@
+import { Icon } from '../icon';
+import { classNames, stateClassNames, States } from '../utils';
+
+export const DROPZONE_CLASSNAME = `k-external-dropzone`;
+
+const states = [
+    States.hover,
+];
+
+export type KendoDropzoneProps = {
+    icon?: string;
+    note?: string | boolean;
+};
+
+export type KendoDropzoneState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {
+    icon: "upload",
+    note: "Only JPEG, PNG and SVG files are allowed."
+};
+
+export const Dropzone = (
+    props: KendoDropzoneProps &
+        KendoDropzoneState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        hover,
+        icon = defaultProps.icon,
+        note = defaultProps.note,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                DROPZONE_CLASSNAME,
+                stateClassNames(DROPZONE_CLASSNAME, {
+                }), {
+                    "k-external-dropzone-hover": hover
+                }
+            )}
+        >
+            <div className="k-dropzone-inner">
+                {icon && <Icon icon={icon} className="k-dropzone-icon" size={"xxxlarge"} />}
+                <span className="k-dropzone-hint">Drag and drop files here to upload</span>
+                {note && <span className="k-dropzone-note"> {note} </span>}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/html/src/dropzone/index.ts b/packages/html/src/dropzone/index.ts
@@ -0,0 +1 @@
+export * from './dropzone.spec';
diff --git a/packages/html/src/dropzone/tests/dropzone.tsx b/packages/html/src/dropzone/tests/dropzone.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Icon } from '../../icon';
+import { Dropzone } from '../../dropzone';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -11,37 +11,19 @@ root.render(
 
             <section>
                 <p>External dropzone</p>
-                <div className="k-external-dropzone">
-                    <div className="k-dropzone-inner">
-                        <Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
-                        <span className="k-dropzone-hint">Drag and drop files here to upload</span>
-                        <span className="k-dropzone-note"> Only JPEG, PNG and SVG files are allowed.</span>
-                    </div>
-                </div>
+                <Dropzone />
             </section>
 
             <section>
                 {/* Hover dragging files */}
                 <p>External dropzone - hover dragging files</p>
-                <div className="k-external-dropzone k-external-dropzone-hover">
-                    <div className="k-dropzone-inner">
-                        <Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
-                        <span className="k-dropzone-hint">Drag and drop files here to upload</span>
-                        <span className="k-dropzone-note"> Only JPEG, PNG and SVG files are allowed.</span>
-                    </div>
-                </div>
+                <Dropzone hover />
             </section>
 
             <section>
                 {/* Hight set */}
                 <p>External dropzone</p>
-                <div className="k-external-dropzone" style={{ height: "400px" }}>
-                    <div className="k-dropzone-inner">
-                        <Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
-                        <span className="k-dropzone-hint">Drag and drop files here to upload</span>
-                        <span className="k-dropzone-note"> Only JPEG, PNG and SVG files are allowed.</span>
-                    </div>
-                </div>
+                <Dropzone style={{ height: "400px" }} />
             </section>
 
         </div>

diff --git a/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx b/packages/html/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx
@@ -1,9 +1,9 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
-import { Icon } from '../../icon';
 import { Upload } from '../../upload';
 import { Toolbar } from '../../toolbar';
 import { Pager } from '../../pager';
+import { Dropzone } from '../../dropzone';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -34,12 +34,7 @@ root.render(
                 <div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
                     <div className="k-pdf-viewer-pages">
                         <div className="k-page k-blank-page">
-                            <div className="k-external-dropzone">
-                                <div className="k-dropzone-inner">
-                                    <Icon icon="upload" className="k-dropzone-icon" size="xxxlarge" />
-                                    <span className="k-dropzone-hint">Drag and drop files here to upload</span>
-                                </div>
-                            </div>
+                            <Dropzone note={false}/>
                             <Upload async empty status="upload"></Upload>
                         </div>
                     </div>