@quiet-front-end/json-schema-editor-antd
Version:
Json Schema Editor
502 lines • 19.5 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["key", "name"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, InputNumber, Modal, Row, Select, Switch, theme } from 'antd';
import _ from 'lodash';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useI18n } from "../i18n";
import MonacoEditor from "../MonacoEditor";
import { SchemaTypes, StringFormat } from "../utils";
export default (function (props) {
var schema = props.schema,
_props$open = props.open,
open = _props$open === void 0 ? false : _props$open,
_onOk = props.onOk,
onCancel = props.onCancel;
var _useI18n = useI18n(),
t = _useI18n.t;
var _theme$useToken = theme.useToken(),
token = _theme$useToken.token;
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
advancedForm = _Form$useForm2[0];
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
formSchema = _useState2[0],
setFormSchema = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
advancedModal = _useState4[0],
setAdvancedModal = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isObject = _useState6[0],
setIsObject = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
isArray = _useState8[0],
setIsArray = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
isNumber = _useState10[0],
setIsNumber = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
isBoolean = _useState12[0],
setIsBoolean = _useState12[1];
var _useState13 = useState(false),
_useState14 = _slicedToArray(_useState13, 2),
isInteger = _useState14[0],
setIsInteger = _useState14[1];
var _useState15 = useState(false),
_useState16 = _slicedToArray(_useState15, 2),
isString = _useState16[0],
setIsString = _useState16[1];
var editorRef = useRef(null);
useEffect(function () {
setFormSchema(schema);
}, [schema]);
useEffect(function () {
setAdvancedModal(open);
}, [open]);
var handleDebounce = useCallback(_.debounce(function (callback) {
if (typeof callback === 'function') {
callback();
} else {
console.log('Provided argument is not a function');
}
}, 300, {
maxWait: 1000
}), []);
useEffect(function () {
return function () {
handleDebounce.cancel();
};
}, [handleDebounce]);
useEffect(function () {
if (!advancedModal || !formSchema) {
return;
}
advancedForm.setFieldsValue(formSchema);
setIsObject(formSchema.type === 'object');
setIsArray(formSchema.type === 'array');
setIsNumber(formSchema.type === 'number');
setIsBoolean(formSchema.type === 'boolean');
setIsInteger(formSchema.type === 'integer');
setIsString(formSchema.type === 'string');
}, [advancedModal, formSchema]);
function handleEditorDidMount(editor) {
editorRef.current = editor;
editorRef.current.setValue(JSON.stringify(schema, null, 2));
}
function onClose() {
if (onCancel) {
onCancel();
}
setAdvancedModal(false);
}
return /*#__PURE__*/React.createElement(Modal, {
title: t('AdvancedSettings'),
width: 900,
open: advancedModal,
onOk: function onOk() {
advancedForm.validateFields().then(function (values) {
return _onOk && _onOk(_objectSpread(_objectSpread({}, formSchema), values));
}).catch(function (errorInfo) {
console.log('Failed:', errorInfo);
}).finally(function () {
return onClose();
});
},
onCancel: onClose
}, /*#__PURE__*/React.createElement(Form, {
form: advancedForm,
onValuesChange: function onValuesChange(_, allValues) {
if (editorRef.current) {
editorRef.current.setValue(JSON.stringify(_objectSpread(_objectSpread({}, formSchema), allValues), null, 2));
}
}
}, !isObject && SchemaTypes.indexOf(formSchema === null || formSchema === void 0 ? void 0 : formSchema.type) !== -1 && /*#__PURE__*/React.createElement("div", {
style: {
borderLeft: "3px solid ".concat(token.colorPrimary),
fontSize: 16,
fontWeight: 399,
paddingLeft: 8,
marginBottom: 13
}
}, t('BasicSettings')), (isString || isNumber || isInteger || isBoolean) && /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('DefaultValue'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'default'
}, isString && /*#__PURE__*/React.createElement(Input, {
style: {
width: '100%'
},
placeholder: t('DefaultValuePlaceholder')
}), (isNumber || isInteger) && /*#__PURE__*/React.createElement(InputNumber, {
style: {
width: '100%'
},
placeholder: t('DefaultValuePlaceholder')
}), isBoolean && /*#__PURE__*/React.createElement(Select, {
style: {
width: '100%'
},
placeholder: t('SelectDefaultValuePlaceholder'),
options: [{
value: true,
label: 'true'
}, {
value: false,
label: 'false'
}]
})))), isString && /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('MinimumLength'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'minLength'
}, /*#__PURE__*/React.createElement(InputNumber, {
min: 0,
style: {
width: '100%'
},
parser: function parser(value) {
return value ? parseInt(value.replace(/\D/g, ''), 10) : '';
},
formatter: function formatter(value) {
return value ? "".concat(Math.floor(Math.max(value, 0))) : '';
},
placeholder: t('MinimumLengthPlaceholder')
}))), /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('MaximumLength'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'maxLength'
}, /*#__PURE__*/React.createElement(InputNumber, {
min: 0,
style: {
width: '100%'
},
parser: function parser(value) {
return value ? parseInt(value.replace(/\D/g, ''), 10) : '';
},
formatter: function formatter(value) {
return value ? "".concat(Math.floor(Math.max(value, 0))) : '';
},
placeholder: t('MaximumLengthPlaceholder')
})))), (isNumber || isInteger) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('Minimum'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'minimum'
}, /*#__PURE__*/React.createElement(InputNumber, {
style: {
width: '100%'
},
placeholder: t('MinimumPlaceholder')
}))), /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('Maximum'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'maximum'
}, /*#__PURE__*/React.createElement(InputNumber, {
style: {
width: '100%'
},
placeholder: t('MaximumPlaceholder')
})))), /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('ExclusiveMinimum'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'exclusiveMinimum'
}, /*#__PURE__*/React.createElement(InputNumber, {
style: {
width: '100%'
},
placeholder: t('ExclusiveMinimumPlaceholder')
}))), /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('ExclusiveMaximum'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'exclusiveMaximum'
}, /*#__PURE__*/React.createElement(InputNumber, {
style: {
width: '100%'
},
placeholder: t('ExclusiveMaximumPlaceholder')
}))))), isString && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('RegularMatch'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 20
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'pattern'
}, /*#__PURE__*/React.createElement(Input, {
placeholder: t('RegularMatchPlaceholder')
})))), /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('Format'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'format'
}, /*#__PURE__*/React.createElement(Select, {
allowClear: true,
options: StringFormat,
placeholder: t('FormatPlaceholder'),
style: {
width: '100%'
}
}))))), isArray && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('UniqueItems'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 20
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'uniqueItems',
valuePropName: "checked"
}, /*#__PURE__*/React.createElement(Switch, null)))), /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('MinItems'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'minItems'
}, /*#__PURE__*/React.createElement(InputNumber, {
style: {
width: '100%'
},
parser: function parser(value) {
return value ? parseInt(value.replace(/\D/g, ''), 10) : '';
},
formatter: function formatter(value) {
return value ? "".concat(Math.floor(Math.max(value, 0))) : '';
},
placeholder: t('MinItemsPlaceholder')
}))), /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('MaxItems'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true,
name: 'maxItems'
}, /*#__PURE__*/React.createElement(InputNumber, {
style: {
width: '100%'
},
parser: function parser(value) {
return value ? parseInt(value.replace(/\D/g, ''), 10) : '';
},
formatter: function formatter(value) {
return value ? "".concat(Math.floor(Math.max(value, 0))) : '';
},
placeholder: t('MaxItemsPlaceholder')
}))))), (isString || isNumber || isInteger) && /*#__PURE__*/React.createElement(Row, {
justify: 'start',
align: 'middle',
style: {
marginBottom: 13
}
}, /*#__PURE__*/React.createElement(Col, {
span: 4,
style: {
textAlign: 'right'
}
}, t('Enums'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
span: 20
}, /*#__PURE__*/React.createElement(Form.List, {
name: "enums"
}, function (fields, _ref) {
var add = _ref.add,
remove = _ref.remove;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
gutter: 6
}, fields.map(function (_ref2) {
var key = _ref2.key,
name = _ref2.name,
restField = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React.createElement(Col, {
span: 12,
key: key
}, /*#__PURE__*/React.createElement(Row, {
gutter: 2,
justify: 'start',
align: 'middle',
style: {
marginBottom: 6
}
}, /*#__PURE__*/React.createElement(Col, {
flex: 'auto'
}, /*#__PURE__*/React.createElement(Form.Item, _extends({}, restField, {
noStyle: true,
name: [name],
rules: [{
required: true
}]
}), isString && /*#__PURE__*/React.createElement(Input, {
placeholder: t('EnumsPlaceholder')
}), (isNumber || isInteger) && /*#__PURE__*/React.createElement(InputNumber, {
style: {
width: '100%'
},
placeholder: t('EnumsPlaceholder')
}))), /*#__PURE__*/React.createElement(Col, {
flex: '24px'
}, /*#__PURE__*/React.createElement(Button, {
icon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
size: 'small',
type: 'text',
danger: true,
onClick: function onClick() {
return remove(name);
}
}))));
})), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
span: 6
}, /*#__PURE__*/React.createElement(Form.Item, {
noStyle: true
}, /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return add();
},
block: true,
icon: /*#__PURE__*/React.createElement(PlusOutlined, null)
}, t('AddEnums'))))));
}))), /*#__PURE__*/React.createElement("div", {
style: {
borderLeft: "3px solid ".concat(token.colorPrimary),
fontSize: 16,
fontWeight: 399,
paddingLeft: 8,
marginBottom: 13
}
}, "Json Schema"), /*#__PURE__*/React.createElement(MonacoEditor, {
height: 300,
language: "json",
value: JSON.stringify(formSchema, null, 2),
handleEditorDidMount: handleEditorDidMount,
onChange: function onChange(value) {
handleDebounce(function () {
if (value) {
try {
var editorSchema = JSON.parse(value);
setFormSchema(editorSchema);
} catch (e) {}
}
});
}
})));
});