@wener/console
Version:
Base console UI toolkit
280 lines (279 loc) • 11.6 kB
JavaScript
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length)
len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++)
arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr))
return arr;
}
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
}
else {
obj[key] = value;
}
return obj;
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null)
return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i)
break;
}
}
catch (err) {
_d = true;
_e = err;
}
finally {
try {
if (!_n && _i["return"] != null)
_i["return"]();
}
finally {
if (_d)
throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _object_spread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
}
else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o)
return;
if (typeof o === "string")
return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor)
n = o.constructor.name;
if (n === "Map" || n === "Set")
return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
return _array_like_to_array(o, minLen);
}
import React from "react";
import { useFieldArray } from "react-hook-form";
import { PiArrowDownLight, PiArrowUpLight, PiMinusLight, PiPlus, PiPlusLight } from "react-icons/pi";
import { JsonSchema } from "@wener/common/jsonschema";
import { match, P } from "ts-pattern";
import { cn } from "../utils/cn.js";
export function renderSettingFormFromSchema(param) {
var schema = param.schema, _param_level = param.level, level = _param_level === void 0 ? 0 : _param_level, _param_path = param.path, path = _param_path === void 0 ? [] : _param_path, forms = param.forms;
var register = forms.register, control = forms.control;
return match(schema).returnType().with({
type: "string"
}, function (schema) {
var type = "text";
if (schema.sensitive) {
type = "password";
}
return /*#__PURE__*/ React.createElement("input", _object_spread({
type: type,
className: "input input-sm input-bordered flex-1"
}, register(path.join("."))));
}).with({
anyOf: P.array()
}, function (param) {
var anyOf = param.anyOf;
return /*#__PURE__*/ React.createElement("select", _object_spread_props(_object_spread({}, register(path.join("."))), {
className: "select select-bordered select-sm"
}), /*#__PURE__*/ React.createElement("option", {
value: ""
}, "\u8BF7\u9009\u62E9"), anyOf.map(function (item, index) {
return /*#__PURE__*/ React.createElement("option", {
key: index,
value: item.const
}, item.title);
}));
}).with({
type: "array"
}, function (schema) {
var title = schema.title;
var itemSchema = schema.items;
var isPrimitive = JsonSchema.isPrimitiveType(itemSchema);
var _useFieldArray = useFieldArray({
name: path.join("."),
control: control
}), append = _useFieldArray.append, remove = _useFieldArray.remove, swap = _useFieldArray.swap, fields = _useFieldArray.fields;
return /*#__PURE__*/ React.createElement("section", {
className: cn("flex flex-col gap-2 p-2", isPrimitive && "hover:border-info hover:bg-base-200 border border-transparent")
}, /*#__PURE__*/ React.createElement("header", {
className: "flex items-center gap-2"
}, Boolean(title) && /*#__PURE__*/ React.createElement("h3", {
className: "text-lg font-medium"
}, String(title)), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-square btn-ghost btn-secondary btn-sm",
onClick: function () {
append(JsonSchema.create(itemSchema));
}
}, /*#__PURE__*/ React.createElement(PiPlus, null))), fields.map(function (field, index) {
var isLast = index === fields.length - 1;
var isFirst = index === 0;
var controller = /*#__PURE__*/ React.createElement("div", {
className: "flex items-center gap-2"
}, !isPrimitive && /*#__PURE__*/ React.createElement("h5", {
className: "px-2 font-medium opacity-75"
}, "#", index + 1), /*#__PURE__*/ React.createElement("button", {
type: "button",
className: "btn btn-square btn-secondary btn-sm",
onClick: function () {
swap(index, index - 1);
},
disabled: isFirst
}, /*#__PURE__*/ React.createElement(PiArrowUpLight, null)), /*#__PURE__*/ React.createElement("button", {
type: "button",
className: "btn btn-square btn-secondary btn-sm",
disabled: isLast,
onClick: function () {
swap(index, index + 1);
}
}, /*#__PURE__*/ React.createElement(PiArrowDownLight, null)), /*#__PURE__*/ React.createElement("button", {
type: "button",
className: "btn btn-square btn-secondary btn-sm",
onClick: function () {
append(JsonSchema.create(itemSchema));
}
}, /*#__PURE__*/ React.createElement(PiPlusLight, null)), /*#__PURE__*/ React.createElement("button", {
type: "button",
className: "btn btn-square btn-secondary btn-sm",
onClick: function () {
remove(index);
}
}, /*#__PURE__*/ React.createElement(PiMinusLight, null)));
return /*#__PURE__*/ React.createElement("div", {
key: field.id,
className: cn("flex gap-2", isPrimitive && "items-center", !isPrimitive && "flex-col")
}, !isPrimitive && controller, renderSettingFormFromSchema({
schema: itemSchema,
level: level + 1,
path: path.concat(index.toString()),
forms: forms
}), isPrimitive && controller);
}));
}).with({
type: "object"
}, function (schema) {
var title = schema.title;
return /*#__PURE__*/ React.createElement("section", {
className: "flex flex-1 flex-col gap-1"
}, Boolean(title) && /*#__PURE__*/ React.createElement("header", null, /*#__PURE__*/ React.createElement("h3", {
className: "text-lg font-medium"
}, String(title))), Object.entries(schema.properties).map(function (param) {
var _param = _sliced_to_array(param, 2), key = _param[0], prop = _param[1];
if ([
"array",
"object"
].includes(String(prop.type))) {
return /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-2 p-2 pb-4"
}, renderSettingFormFromSchema({
schema: prop,
level: level + 1,
path: path.concat(key),
forms: forms
}));
}
var content = null;
if (prop.type === "boolean") {
content = /*#__PURE__*/ React.createElement("div", {
className: "form-control"
}, /*#__PURE__*/ React.createElement("label", {
className: "label cursor-pointer"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text"
}, prop.title), /*#__PURE__*/ React.createElement("div", {
className: "flex-1"
}), /*#__PURE__*/ React.createElement("input", _object_spread({
type: "checkbox",
className: "checkbox-bordered checkbox checkbox-sm"
}, register(path.concat(key).join("."))))));
}
else {
content = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
className: "label"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text font-medium"
}, prop.title)), renderSettingFormFromSchema({
schema: prop,
level: level + 1,
path: path.concat(key),
forms: forms
}));
}
return /*#__PURE__*/ React.createElement("div", {
key: key,
className: cn("form-control", [
"p-2",
"hover:bg-base-200",
"focus-within:border-info border border-transparent"
])
}, content);
}));
}).otherwise(function (schema) {
return /*#__PURE__*/ React.createElement("div", {
className: "text-error"
}, "\u4E0D\u652F\u6301\u7684 Schema: ", JSON.stringify(schema));
});
}