eddev 0.1.51 → 0.2.0-beta.11

package/fields/ImageWell.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageWell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@stitches/react");
-var react_2 = require("react");
-function ImageWell(props) {
-    var _a = (0, react_2.useState)(null), selectedImage = _a[0], setSelectedImage = _a[1];
-    var _b = (0, react_2.useState)(false), imageIsLoading = _b[0], setImageIsLoading = _b[1];
-    (0, react_2.useEffect)(function () {
-        if (props.value) {
-            var cancelled = false;
-            setImageIsLoading(true);
-            fetch("/wp-json/ed/v1/media/" + Number(props.value))
-                .then(function (response) { return response.json(); })
-                .then(function (image) {
-                setImageIsLoading(false);
-                setSelectedImage(image);
-            });
-        }
-    }, [props.value]);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [imageIsLoading ? ((0, jsx_runtime_1.jsx)(Loading, { children: (0, jsx_runtime_1.jsx)(Spinner, {}, void 0) }, void 0)) : selectedImage ? ((0, jsx_runtime_1.jsx)(ImageContainer, { children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage.sizes[props.previewSize] || selectedImage.sizes["thumbnail"] }, void 0) }, void 0)) : null, (0, jsx_runtime_1.jsx)(Toolbar, { children: selectedImage || imageIsLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button, { children: "Remove" }, void 0), (0, jsx_runtime_1.jsx)(Button, { children: "Edit" }, void 0), (0, jsx_runtime_1.jsx)(Button, { children: "View" }, void 0)] }, void 0)) : null }, void 0)] }, void 0));
-}
-exports.ImageWell = ImageWell;
-var Wrapper = (0, react_1.styled)("div", {
-    position: "relative",
-    display: "block",
-    width: "100%",
-    border: "1px solid #aaaaaa",
-});
-var ImageContainer = (0, react_1.styled)("div", {
-    padding: "4px",
-    img: {
-        maxWidth: "100%",
-    },
-});
-var spin = (0, react_1.keyframes)({
-    from: {
-        transform: "rotate(0deg)",
-    },
-    to: {
-        transform: "rotate(360deg)",
-    },
-});
-var Spinner = (0, react_1.styled)("div", {
-    display: "block",
-    width: "32px",
-    height: "32px",
-    border: "4px solid transparent",
-    borderTop: "currentColor",
-    animation: "".concat(spin, " 1s linear infinite"),
-});
-var Loading = (0, react_1.styled)("div", {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: "8px",
-});
-var Toolbar = (0, react_1.styled)("div", {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    padding: "4px",
-});