@bit.rhplus/ui.upload-files-sheet 0.0.2

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export default UploadFilesSheet;
+declare const UploadFilesSheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+// eslint-disable-next-line import/no-unresolved
+import * as F7 from 'framework7-react';
+import { ErrorIcon, LoadingIcon, SuccessIcon } from '@rhplus/wieldy.animate-icons';
+import prettyBytes from 'pretty-bytes';
+import useUploadFiles from './uploadFiles';
+const UploadFilesSheet = React.forwardRef((props, ref) => {
+    const { autoClose = true, closeTimeout = 4000 } = props;
+    const { uploadFiles } = useUploadFiles(props.api);
+    const [opened, setOpened] = React.useState(false);
+    const [progressFiles, setProgressFiles] = React.useState({});
+    const { files: uploadedFiles = [] } = progressFiles || {};
+    const onInternalClose = () => {
+        setOpened(false);
+    };
+    const onProgress = (progress) => setProgressFiles(progress);
+    const handleFilesSelected = (selectedFiles) => {
+        setOpened(true);
+        uploadFiles(selectedFiles, onProgress);
+    };
+    React.useImperativeHandle(ref, () => ({
+        handleFilesSelected,
+    }));
+    React.useEffect(() => {
+        if (uploadedFiles.length > 0 &&
+            uploadedFiles.every(file => file.state === 'success') &&
+            opened &&
+            autoClose) {
+            setTimeout(() => {
+                setOpened(false);
+            }, closeTimeout || 0);
+        }
+    }, [uploadedFiles, opened]);
+    return (_jsxs(F7.Sheet, { className: "demo-sheet-swipe-to-step", style: { height: 'auto' }, swipeToClose: true, swipeToStep: true, push: true, backdrop: true, opened: opened, onSheetClose: onInternalClose, children: [_jsx("div", { className: "swipe-handler" }), _jsxs("div", { className: "sheet-modal-swipe-step", children: [_jsx(F7.BlockTitle, { children: "Odes\u00EDl\u00E1m ..." }), _jsx(F7.Block, { children: _jsx(F7.List, { dividersIos: true, outlineIos: true, strongIos: true, children: uploadedFiles.map(({ name, size, state }) => (_jsx(F7.ListItem, { header: "Soubor", title: name, after: prettyBytes(size), children: _jsx("div", { className: "item-title-row2", children: _jsxs("div", { className: "item-title2", children: [state === 'success' && (_jsx(SuccessIcon, { loop: false, animate: true, height: 30, state: state })), state === 'loading' && (_jsx(LoadingIcon, { loop: true, animate: true, height: 30, state: state })), state === 'error' && (_jsx(ErrorIcon, { loop: false, animate: true, height: 30, state: state }))] }) }) }, name))) }) }), _jsx(F7.Block, {})] })] }));
+});
+export default UploadFilesSheet;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}

package/dist/preview-1727868917903.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/uploadFiles.d.ts

@@ -0,0 +1,4 @@
+export default useUploadFiles;
+declare function useUploadFiles(api: any): {
+    uploadFiles: (event: any, onProgress: any) => Promise<void>;
+};

package/dist/uploadFiles.js

@@ -0,0 +1,66 @@
+import useData from '@rhplus/wieldy.data';
+const StateEnum = {
+    Waiting: 'waiting',
+    Loading: 'loading',
+    Success: 'success',
+    Error: 'error',
+};
+const useUploadFiles = (api) => {
+    const { fetchData } = useData();
+    const uploadFiles = async (event, onProgress) => {
+        if (!event.target.files || event.target.files.length === 0)
+            return;
+        const files = Array.from(event.target.files);
+        const total = files.length;
+        let progress = {
+            current: 0,
+            total,
+            files: files.map(({ name, size, type }) => ({
+                name,
+                size,
+                type,
+                state: StateEnum.Waiting,
+            })),
+        };
+        onProgress(progress);
+        const uploadFile = async (file, index) => {
+            progress = {
+                ...progress,
+                files: progress.files.map((f, i) => {
+                    if (i === index)
+                        return { ...f, state: StateEnum.Loading };
+                    return f;
+                }),
+            };
+            onProgress(progress);
+            try {
+                const formData = new FormData();
+                formData.append('Files', file);
+                await fetchData(api, formData);
+                progress = {
+                    ...progress,
+                    files: progress.files.map((f, i) => {
+                        if (i === index)
+                            return { ...f, state: StateEnum.Success };
+                        return f;
+                    }),
+                };
+            }
+            catch (error) {
+                progress = {
+                    ...progress,
+                    files: progress.files.map((f, i) => {
+                        if (i === index)
+                            return { ...f, state: StateEnum.Error };
+                        return f;
+                    }),
+                };
+            }
+            onProgress(progress);
+        };
+        await Promise.all(files.map((file, index) => uploadFile(file, index)));
+    };
+    return { uploadFiles };
+};
+export default useUploadFiles;
+//# sourceMappingURL=uploadFiles.js.map

package/dist/uploadFiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploadFiles.js","sourceRoot":"","sources":["../uploadFiles.js"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAE1C,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,EAAE;IAC7B,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC;IAEhC,MAAM,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;QAC9C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAEnE,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAE3B,IAAI,QAAQ,GAAG;YACb,OAAO,EAAE,CAAC;YACV,KAAK;YACL,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC1C,IAAI;gBACJ,IAAI;gBACJ,IAAI;gBACJ,KAAK,EAAE,SAAS,CAAC,OAAO;aACzB,CAAC,CAAC;SACJ,CAAC;QAEF,UAAU,CAAC,QAAQ,CAAC,CAAC;QAErB,MAAM,UAAU,GAAG,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YACvC,QAAQ,GAAG;gBACT,GAAG,QAAQ;gBACX,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;oBACjC,IAAI,CAAC,KAAK,KAAK;wBAAE,OAAO,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC;oBAC3D,OAAO,CAAC,CAAC;gBACX,CAAC,CAAC;aACH,CAAC;YACF,UAAU,CAAC,QAAQ,CAAC,CAAC;YAErB,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;gBAChC,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAC/B,MAAM,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;gBAE/B,QAAQ,GAAG;oBACT,GAAG,QAAQ;oBACX,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACjC,IAAI,CAAC,KAAK,KAAK;4BAAE,OAAO,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC;wBAC3D,OAAO,CAAC,CAAC;oBACX,CAAC,CAAC;iBACH,CAAC;YACJ,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,QAAQ,GAAG;oBACT,GAAG,QAAQ;oBACX,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACjC,IAAI,CAAC,KAAK,KAAK;4BAAE,OAAO,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;wBACzD,OAAO,CAAC,CAAC;oBACX,CAAC,CAAC;iBACH,CAAC;YACJ,CAAC;YAED,UAAU,CAAC,QAAQ,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACzB,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/index.jsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+// eslint-disable-next-line import/no-unresolved
+import * as F7 from 'framework7-react';
+import { ErrorIcon, LoadingIcon, SuccessIcon } from '@rhplus/wieldy.animate-icons';
+import prettyBytes from 'pretty-bytes';
+import useUploadFiles from './uploadFiles';
+
+const UploadFilesSheet = React.forwardRef((props, ref) => {
+  const { autoClose = true, closeTimeout = 4000 } = props;
+  const { uploadFiles } = useUploadFiles(props.api);
+  const [opened, setOpened] = React.useState(false);
+  const [progressFiles, setProgressFiles] = React.useState({});
+
+  const { files: uploadedFiles = [] } = progressFiles || {};
+
+  const onInternalClose = () => {
+    setOpened(false);
+  };
+
+  const onProgress = (progress) => setProgressFiles(progress);
+
+  const handleFilesSelected = (selectedFiles) => {
+    setOpened(true);
+    uploadFiles(selectedFiles, onProgress);
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    handleFilesSelected,
+  }));
+
+  React.useEffect(() => {
+    if (
+      uploadedFiles.length > 0 &&
+      uploadedFiles.every(file => file.state === 'success') &&
+      opened &&
+      autoClose
+    ) {
+      setTimeout(() => {
+        setOpened(false);
+      }, closeTimeout || 0);
+    }
+  }, [uploadedFiles, opened]);
+
+  return (
+    <F7.Sheet
+      className="demo-sheet-swipe-to-step"
+      style={{ height: 'auto' }}
+      swipeToClose
+      swipeToStep
+      push
+      backdrop
+      opened={opened}
+      onSheetClose={onInternalClose}
+    >
+      <div className="swipe-handler" />
+      <div className="sheet-modal-swipe-step">
+        <F7.BlockTitle>Odesílám ...</F7.BlockTitle>
+        <F7.Block>
+          <F7.List dividersIos outlineIos strongIos>
+            {uploadedFiles.map(({ name, size, state }) => (
+              <F7.ListItem
+                key={name}
+                header="Soubor"
+                title={name}
+                after={prettyBytes(size)}
+              >
+                <div className="item-title-row2">
+                  <div className="item-title2">
+                    {state === 'success' && (
+                      <SuccessIcon loop={false} animate height={30} state={state} />
+                    )}
+                    {state === 'loading' && (
+                      <LoadingIcon loop animate height={30} state={state} />
+                    )}
+                    {state === 'error' && (
+                      <ErrorIcon loop={false} animate height={30} state={state} />
+                    )}
+                  </div>
+                </div>
+              </F7.ListItem>
+            ))}
+          </F7.List>
+        </F7.Block>
+        <F7.Block />
+      </div>
+    </F7.Sheet>
+  );
+});
+
+
+export default UploadFilesSheet;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@bit.rhplus/ui.upload-files-sheet",
+  "version": "0.0.2",
+  "homepage": "https://bit.cloud/remote-scope/ui/upload-files-sheet",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "remote-scope",
+    "name": "ui/upload-files-sheet",
+    "version": "0.0.2"
+  },
+  "dependencies": {
+    "pretty-bytes": "^6.1.1",
+    "@rhplus/wieldy.animate-icons": "0.0.14",
+    "@rhplus/wieldy.data": "0.0.5"
+  },
+  "devDependencies": {
+    "@teambit/react.react-env": "1.0.98"
+  },
+  "peerDependencies": {
+    "framework7-react": "^8.3.3",
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "license": "SEE LICENSE IN UNLICENSED",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "publishConfig": {
+    "scope": "@bit.rhplus",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/types/asset.d.ts

@@ -0,0 +1,43 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/uploadFiles.js

@@ -0,0 +1,73 @@
+import useData from '@rhplus/wieldy.data';
+
+const StateEnum = {
+  Waiting: 'waiting',
+  Loading: 'loading',
+  Success: 'success',
+  Error: 'error',
+};
+
+const useUploadFiles = (api) => {
+  const { fetchData } = useData();
+
+  const uploadFiles = async (event, onProgress) => {
+    if (!event.target.files || event.target.files.length === 0) return;
+
+    const files = Array.from(event.target.files);
+    const total = files.length;
+
+    let progress = {
+      current: 0,
+      total,
+      files: files.map(({ name, size, type }) => ({
+        name,
+        size,
+        type,
+        state: StateEnum.Waiting,
+      })),
+    };
+
+    onProgress(progress);
+
+    const uploadFile = async (file, index) => {
+      progress = {
+        ...progress,
+        files: progress.files.map((f, i) => {
+          if (i === index) return { ...f, state: StateEnum.Loading };
+          return f;
+        }),
+      };
+      onProgress(progress);
+
+      try {
+        const formData = new FormData();
+        formData.append('Files', file);
+        await fetchData(api, formData);
+
+        progress = {
+          ...progress,
+          files: progress.files.map((f, i) => {
+            if (i === index) return { ...f, state: StateEnum.Success };
+            return f;
+          }),
+        };
+      } catch (error) {
+        progress = {
+          ...progress,
+          files: progress.files.map((f, i) => {
+            if (i === index) return { ...f, state: StateEnum.Error };
+            return f;
+          }),
+        };
+      }
+
+      onProgress(progress);
+    };
+
+    await Promise.all(files.map((file, index) => uploadFile(file, index)));
+  };
+
+  return { uploadFiles };
+};
+
+export default useUploadFiles;