UNPKG

sccoreui

Version:

ui-sccore

35 lines (34 loc) • 12.6 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); const tslib_1 = require("tslib"); const jsx_runtime_1 = require("react/jsx-runtime"); const fileupload_1 = require("primereact/fileupload"); const react_1 = require("react"); const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component")); const progressbar_1 = require("primereact/progressbar"); const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar")); const checkbox_1 = require("primereact/checkbox"); require("./file-upload.scss"); const button_1 = require("primereact/button"); // import { Checkbox } from "primereact/checkbox"; const FileUploadComponent = () => { const fileupload = (0, react_1.useRef)(null); const fileupload2 = (0, react_1.useRef)(null); const onUpload = () => { }; const emptyTemplate = () => { return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center flex-column ", onClick: () => { fileupload.current.getInput().click(); } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-upload-icon-gray-300" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1 font-normal text-base" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-primary-400 text-base" }, { children: "Click to upload" })), "or drag and drop"] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal lign-height-1" }, { children: "SVG, PNG, JPG or GIF (max. 800x400px)" }))] }))); }; const emptyTemplate2 = () => { return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center flex-column ", onClick: () => { fileupload2.current.getInput().click(); } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-upload-icon-gray-300" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1 font-normal text-base" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold p-disabled text-primary-400 text-base" }, { children: "Click to upload" })), "or drag and drop"] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal lign-height-1" }, { children: "SVG, PNG, JPG or GIF (max. 800x400px)" }))] }))); }; const emptyTemplatea = () => { return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 100, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [100, "%"] }))] }))] }))] }))); }; return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "File Upload" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { ref: fileupload, name: "demo[]", url: "/api/upload", accept: "image/*", emptyTemplate: emptyTemplate, itemTemplate: emptyTemplatea, className: "fileuploadd border-round-xl border-1 border-transparent hover:border-primary-600", maxFileSize: 1000000, onUpload: onUpload }), (0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { disabled: true, ref: fileupload2, name: "demo[]", url: "/api/upload", accept: "image/*", emptyTemplate: emptyTemplate2, itemTemplate: emptyTemplate2, className: "fileuploadd border-round-xl border-1 border-transparent", maxFileSize: 1000000, onUpload: onUpload })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start justify-content-between w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex flex-column justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "shadow-none", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "trash-01-gray-500" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 59, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [59, "%"] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 100, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [100, "%"] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-red-25 border-1 border-red-300 align-items-start p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-red-100" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start justify-content-between w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex flex-column justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-medium" }, { children: "Upload failed, please try again" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Try again" }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "p-button-danger shadow-none", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "trash-01-red-700" }) })] })) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex border-1 border-gray-300 align-items-start p-4 border-round-xl gap-2", style: { background: "linear-gradient(to right, var(--gray-50) 59%, white 41%)" } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { height: 30, value: 59, strokeColor: "var(--primary-500)", strokeWidth: 13, textDisabled: true })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-red-25 border-1 border-red-300 align-items-start p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-red-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-medium" }, { children: "Upload failed, please try again" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "trash-01-red-700" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "200 KB \u2013 100% uploaded" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Try again" }))] }))] }))] }))] }))] })); }; exports.default = FileUploadComponent;