matcha-keystone-utils
Version:
Useful features for Keystone 6: validators, fields, componentBlocks...
54 lines (53 loc) • 2.54 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Field = exports.Cell = exports.controller = void 0;
const react_1 = __importDefault(require("react"));
const components_1 = require("@keystone-6/core/admin-ui/components");
const fields_1 = require("@keystone-ui/fields");
// inspired by: https://github.com/keystonejs/keystone/blob/main/examples/custom-field/1-text-field/views.tsx
const controller = (config) => ({
path: config.path,
label: config.label,
description: config.description,
graphqlSelection: config.path,
defaultValue: null,
deserialize: (data) => {
const value = data[config.path];
return typeof value === "string" ? value : null;
},
serialize: value => ({ [config.path]: value }),
});
exports.controller = controller;
const Cell = ({ item, field }) => {
const value = item[field.path];
return (value && (react_1.default.createElement(components_1.CellContainer, null,
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
} },
react_1.default.createElement("img", { style: { maxWidth: 150, maxHeight: 150 }, alt: "", src: value })))));
};
exports.Cell = Cell;
const Field = ({ field, value, onChange, autoFocus, }) => {
const disabled = onChange === undefined;
return (react_1.default.createElement(fields_1.FieldContainer, { as: "fieldset" },
react_1.default.createElement(fields_1.FieldLabel, null, field.label),
react_1.default.createElement(fields_1.FieldDescription, { id: `${field.path}-description` }, field.description),
react_1.default.createElement("div", null,
react_1.default.createElement(fields_1.TextInput, { type: "text", onChange: event => {
onChange?.(event.target.value);
}, disabled: disabled, value: value || "", autoFocus: autoFocus })),
value && (react_1.default.createElement("div", { style: {
paddingTop: 20,
paddingBottom: 20,
display: "flex",
justifyContent: "center",
alignItems: "center",
} },
react_1.default.createElement("img", { src: value, style: { maxHeight: "33vh" }, alt: "Image not found." })))));
};
exports.Field = Field;