eddev 0.1.47 → 0.1.48-b1

package/fields/ImageWell.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    previewSize: string;
+    value: number;
+    onChange: (value: number | null) => void;
+};
+export declare function ImageWell(props: Props): JSX.Element;
+export {};

package/fields/ImageWell.js

@@ -0,0 +1,64 @@
+"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",
+});

package/fields/installFieldTypes.js

@@ -28,14 +28,17 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var fields_1 = __importDefault(require("@manifest/fields"));
 var ReactDOM = __importStar(require("react-dom"));
 var react_1 = require("react");
+console.log("Field types available");
 function installFieldTypes() {
     // @ts-ignore
     var acf = window.acf;
+    console.log("Installing field types", fields_1.default);
     var _loop_1 = function (name_1) {
         var type = fields_1.default[name_1];
         var Component = type.render;
         var init = function (_a) {
             var $el = _a.$el, cid = _a.cid, data = _a.data;
+            console.log("Initializing field", $el, data);
             var input = $el.find("input[type='hidden']");
             var container = document.createElement("div");
             $el.append(container);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.1.47",
+  "version": "0.1.48-b1",
   "main": "./index.js",
   "license": "MIT",
   "bin": {