@uxf/cms 2.1.0 → 2.2.0

package/README.md

@@ -67,6 +67,15 @@ import { CopyToClipboardButton } from "@uxf/cms/ui/CopyToClipboardButton";
 <CopyToClipboardButton textToCopy="Text ke zkopírování"/>
 ```
 
+### FileInput
+nativní fileInput bez uploadu (přijímá a vrací object typu File)
+
+```tsx
+import { FileInput } from "@uxf/cms/ui/FileInput";
+
+<FileInput id="file-input-id" name="fileInput" label="..." placeholder="..." value={value} onChange={setValue} />
+```
+
 ### Label
 ```tsx
 import { Label } from "@uxf/cms/ui/Label";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/cms",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "UXF Cms",
   "author": "UXFans <dev@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/cms#readme",

package/ui/FileInput/FileInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { FileInputProps } from "./types";
+export declare const FileInput: React.FC<FileInputProps>;

package/ui/FileInput/FileInput.js

@@ -0,0 +1,89 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = void 0;
+var Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var react_1 = __importDefault(require("react"));
+var FileInput = function (props) {
+    var id = props.id, name = props.name, label = props.label, placeholder = props.placeholder, value = props.value, onChange = props.onChange;
+    var handleChange = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var files;
+        var _a;
+        return __generator(this, function (_b) {
+            e.persist();
+            files = (_a = e.target.files) !== null && _a !== void 0 ? _a : [];
+            if (files.length > 1) {
+                // eslint-disable-next-line no-alert
+                alert("Vyberte pouze 1 soubor.");
+            }
+            if (files.length === 1) {
+                onChange(files[0]);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    // TODO @vejvis - stylování (barvičky z theme?)
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Box_1.default, { position: "relative", display: "flex", flexDirection: "row", pl: 1.5, pr: 1, sx: {
+                borderRadius: "4px",
+                border: "1px solid #c4c4c4",
+                mb: 1,
+                height: "40px",
+                alignItems: "center",
+                "&:hover": {
+                    borderColor: "#212121",
+                },
+            } },
+            react_1.default.createElement("input", { type: "file", id: id, name: name, style: { display: "none" }, onChange: handleChange }),
+            react_1.default.createElement(Box_1.default, { position: "absolute", top: -10, left: 8, px: 0.5, sx: { backgroundColor: "white" } },
+                react_1.default.createElement(Typography_1.default, { fontSize: "small", color: "rgba(0,0,0,0.6)" }, label)),
+            react_1.default.createElement(Typography_1.default, { flex: 1, color: function (theme) { return (value ? undefined : theme.palette.text.disabled); }, textOverflow: "ellipsis", minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", sx: { lineBreak: "anywhere" }, pr: 1 }, value ? value.name : placeholder),
+            value ? (react_1.default.createElement(Tooltip_1.default, { title: "Smazat" },
+                react_1.default.createElement(IconButton_1.default, { onClick: function () { return onChange(null); } },
+                    react_1.default.createElement(Clear_1.default, null)))) : (react_1.default.createElement(Button_1.default, { component: "label", size: "small", variant: "contained", htmlFor: id }, "Vybrat soubor")))));
+};
+exports.FileInput = FileInput;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmlsZUlucHV0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3VpL0ZpbGVJbnB1dC9GaWxlSW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLG9FQUFrRDtBQUNsRCwwREFBb0M7QUFDcEMsZ0VBQTBDO0FBQzFDLHdFQUFrRDtBQUNsRCxrRUFBNEM7QUFDNUMsd0VBQWtEO0FBQ2xELGdEQUEwQjtBQUduQixJQUFNLFNBQVMsR0FBNkIsVUFBQyxLQUFLO0lBQzdDLElBQUEsRUFBRSxHQUFnRCxLQUFLLEdBQXJELEVBQUUsSUFBSSxHQUEwQyxLQUFLLEtBQS9DLEVBQUUsS0FBSyxHQUFtQyxLQUFLLE1BQXhDLEVBQUUsV0FBVyxHQUFzQixLQUFLLFlBQTNCLEVBQUUsS0FBSyxHQUFlLEtBQUssTUFBcEIsRUFBRSxRQUFRLEdBQUssS0FBSyxTQUFWLENBQVc7SUFFaEUsSUFBTSxZQUFZLEdBQUcsVUFBTyxDQUFzQzs7OztZQUM5RCxDQUFDLENBQUMsT0FBTyxFQUFFLENBQUM7WUFFTixLQUFLLEdBQUcsTUFBQSxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssbUNBQUksRUFBRSxDQUFDO1lBRW5DLElBQUksS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7Z0JBQ2xCLG9DQUFvQztnQkFDcEMsS0FBSyxDQUFDLHlCQUF5QixDQUFDLENBQUM7YUFDcEM7WUFFRCxJQUFJLEtBQUssQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO2dCQUNwQixRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDdEI7OztTQUNKLENBQUM7SUFFRiwrQ0FBK0M7SUFFL0MsT0FBTyxDQUNIO1FBQ0ksOEJBQUMsYUFBRyxJQUNBLFFBQVEsRUFBQyxVQUFVLEVBQ25CLE9BQU8sRUFBQyxNQUFNLEVBQ2QsYUFBYSxFQUFDLEtBQUssRUFDbkIsRUFBRSxFQUFFLEdBQUcsRUFDUCxFQUFFLEVBQUUsQ0FBQyxFQUNMLEVBQUUsRUFBRTtnQkFDQSxZQUFZLEVBQUUsS0FBSztnQkFDbkIsTUFBTSxFQUFFLG1CQUFtQjtnQkFDM0IsRUFBRSxFQUFFLENBQUM7Z0JBQ0wsTUFBTSxFQUFFLE1BQU07Z0JBQ2QsVUFBVSxFQUFFLFFBQVE7Z0JBQ3BCLFNBQVMsRUFBRTtvQkFDUCxXQUFXLEVBQUUsU0FBUztpQkFDekI7YUFDSjtZQUVELHlDQUFPLElBQUksRUFBQyxNQUFNLEVBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsRUFBRSxRQUFRLEVBQUUsWUFBWSxHQUFJO1lBQzdGLDhCQUFDLGFBQUcsSUFBQyxRQUFRLEVBQUMsVUFBVSxFQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsRUFBRSxJQUFJLEVBQUUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsZUFBZSxFQUFFLE9BQU8sRUFBRTtnQkFDakYsOEJBQUMsb0JBQVUsSUFBQyxRQUFRLEVBQUMsT0FBTyxFQUFDLEtBQUssRUFBQyxpQkFBaUIsSUFDL0MsS0FBSyxDQUNHLENBQ1g7WUFDTiw4QkFBQyxvQkFBVSxJQUNQLElBQUksRUFBRSxDQUFDLEVBQ1AsS0FBSyxFQUFFLFVBQUMsS0FBSyxJQUFLLE9BQUEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEVBQWpELENBQWlELEVBQ25FLFlBQVksRUFBQyxVQUFVLEVBQ3ZCLFFBQVEsRUFBRSxDQUFDLEVBQ1gsVUFBVSxFQUFDLFFBQVEsRUFDbkIsUUFBUSxFQUFDLFFBQVEsRUFDakIsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxFQUM3QixFQUFFLEVBQUUsQ0FBQyxJQUVKLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUN4QjtZQUNaLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FDTCw4QkFBQyxpQkFBTyxJQUFDLEtBQUssRUFBQyxRQUFRO2dCQUNuQiw4QkFBQyxvQkFBVSxJQUFDLE9BQU8sRUFBRSxjQUFNLE9BQUEsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFkLENBQWM7b0JBQ3JDLDhCQUFDLGVBQVMsT0FBRyxDQUNKLENBQ1AsQ0FDYixDQUFDLENBQUMsQ0FBQyxDQUNBLDhCQUFDLGdCQUFNLElBQUMsU0FBUyxFQUFDLE9BQU8sRUFBQyxJQUFJLEVBQUMsT0FBTyxFQUFDLE9BQU8sRUFBQyxXQUFXLEVBQUMsT0FBTyxFQUFFLEVBQUUsb0JBRTdELENBQ1osQ0FDQyxDQUNQLENBQ04sQ0FBQztBQUNOLENBQUMsQ0FBQztBQXZFVyxRQUFBLFNBQVMsYUF1RXBCIn0=

package/ui/FileInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FileInput";
+export * from "./types";

package/ui/FileInput/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FileInput"), exports);
+__exportStar(require("./types"), exports);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdWkvRmlsZUlucHV0L2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7OztBQUFBLDhDQUE0QjtBQUM1QiwwQ0FBd0IifQ==

package/ui/FileInput/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface FileInputProps {
+    id: string;
+    name: string;
+    placeholder?: string;
+    label: ReactNode;
+    onChange: (file: File | null) => void;
+    value: File | null | undefined;
+}

package/ui/FileInput/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdWkvRmlsZUlucHV0L3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==