@datalayer/primer-rjsf
Version:
React JSON Schema Form (RJSF) for Primer
53 lines (52 loc) • 2.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
export default {
schema: {
title: "Location",
type: "object",
anyOf: [
{
title: "City",
properties: {
city: {
type: "string",
},
},
required: ["city"],
},
{
title: "Coordinates",
properties: {
lat: {
type: "number",
},
lon: {
type: "number",
},
},
required: ["lat", "lon"],
},
],
},
uiSchema: {
"ui:field": ({ schema, idSchema: { $id }, formData, onChange, ...other }) => {
const changeHandlerFactory = (fieldName) => (event) => {
onChange(formData
? { ...formData, [fieldName]: event.target.value }
: { [fieldName]: event.target.value });
};
return (_jsxs(_Fragment, { children: [_jsx("h4", { children: "Location" }), _jsxs("div", { style: { display: "flex" }, children: [_jsx("div", { style: {
display: "flex",
flexDirection: "column",
width: "50%",
margin: "1rem",
}, children: _jsxs("div", { className: "form-group field field-string", children: [_jsx("label", { className: "control-label", htmlFor: `${$id}-city`, children: "City" }), _jsx("input", { className: "form-control", id: `${$id}-city`, required: "", placeholder: "", type: "text", value: formData?.city || "", onChange: changeHandlerFactory("city") })] }) }), _jsxs("div", { style: {
display: "flex",
flexDirection: "column",
width: "50%",
margin: "1rem",
}, children: [_jsxs("div", { className: "form-group field field-string", children: [_jsx("label", { className: "control-label", htmlFor: `${$id}-lat`, children: "Latitude" }), _jsx("input", { className: "form-control", id: `${$id}-lat`, type: "number", value: formData?.lat || 0, onChange: changeHandlerFactory("lat") })] }), _jsxs("div", { className: "form-group field field-string", children: [_jsx("label", { className: "control-label", htmlFor: `${$id}-lon`, children: "Longitude" }), _jsx("input", { className: "form-control", id: `${$id}-lon`, type: "number", value: formData?.lon || 0, onChange: changeHandlerFactory("lon") })] })] })] })] }));
},
},
formData: {},
};