vobile-form-render-mobile
Version:
通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成
658 lines (655 loc) • 24.3 kB
JavaScript
"use strict";
function _typeof2(o) { "@babel/helpers - typeof"; return _typeof2 = "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; }, _typeof2(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/es/col/style");
var _col = _interopRequireDefault(require("antd/es/col"));
require("antd/es/config-provider/style");
var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _ahooks = require("ahooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _lodashEs = require("lodash-es");
var _formCore = _interopRequireDefault(require("../../form-core"));
var _utils = require("../../utils");
var _withProvider = _interopRequireDefault(require("../../withProvider"));
var _ActionView = _interopRequireDefault(require("./ActionView"));
var _widgets = require("../../widgets");
require("./index.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof2(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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);
}
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 : 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 _regeneratorRuntime() {
"use strict";
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
_regeneratorRuntime = function _regeneratorRuntime() {
return e;
};
var t,
e = {},
r = Object.prototype,
n = r.hasOwnProperty,
o = Object.defineProperty || function (t, e, r) {
t[e] = r.value;
},
i = "function" == typeof Symbol ? Symbol : {},
a = i.iterator || "@@iterator",
c = i.asyncIterator || "@@asyncIterator",
u = i.toStringTag || "@@toStringTag";
function define(t, e, r) {
return Object.defineProperty(t, e, {
value: r,
enumerable: !0,
configurable: !0,
writable: !0
}), t[e];
}
try {
define({}, "");
} catch (t) {
define = function define(t, e, r) {
return t[e] = r;
};
}
function wrap(t, e, r, n) {
var i = e && e.prototype instanceof Generator ? e : Generator,
a = Object.create(i.prototype),
c = new Context(n || []);
return o(a, "_invoke", {
value: makeInvokeMethod(t, r, c)
}), a;
}
function tryCatch(t, e, r) {
try {
return {
type: "normal",
arg: t.call(e, r)
};
} catch (t) {
return {
type: "throw",
arg: t
};
}
}
e.wrap = wrap;
var h = "suspendedStart",
l = "suspendedYield",
f = "executing",
s = "completed",
y = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
var p = {};
define(p, a, function () {
return this;
});
var d = Object.getPrototypeOf,
v = d && d(d(values([])));
v && v !== r && n.call(v, a) && (p = v);
var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
function defineIteratorMethods(t) {
["next", "throw", "return"].forEach(function (e) {
define(t, e, function (t) {
return this._invoke(e, t);
});
});
}
function AsyncIterator(t, e) {
function invoke(r, o, i, a) {
var c = tryCatch(t[r], t, o);
if ("throw" !== c.type) {
var u = c.arg,
h = u.value;
return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
invoke("next", t, i, a);
}, function (t) {
invoke("throw", t, i, a);
}) : e.resolve(h).then(function (t) {
u.value = t, i(u);
}, function (t) {
return invoke("throw", t, i, a);
});
}
a(c.arg);
}
var r;
o(this, "_invoke", {
value: function value(t, n) {
function callInvokeWithMethodAndArg() {
return new e(function (e, r) {
invoke(t, n, e, r);
});
}
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
}
});
}
function makeInvokeMethod(e, r, n) {
var o = h;
return function (i, a) {
if (o === f) throw Error("Generator is already running");
if (o === s) {
if ("throw" === i) throw a;
return {
value: t,
done: !0
};
}
for (n.method = i, n.arg = a;;) {
var c = n.delegate;
if (c) {
var u = maybeInvokeDelegate(c, n);
if (u) {
if (u === y) continue;
return u;
}
}
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
if (o === h) throw o = s, n.arg;
n.dispatchException(n.arg);
} else "return" === n.method && n.abrupt("return", n.arg);
o = f;
var p = tryCatch(e, r, n);
if ("normal" === p.type) {
if (o = n.done ? s : l, p.arg === y) continue;
return {
value: p.arg,
done: n.done
};
}
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
}
};
}
function maybeInvokeDelegate(e, r) {
var n = r.method,
o = e.iterator[n];
if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
var i = tryCatch(o, e.iterator, r.arg);
if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
var a = i.arg;
return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
}
function pushTryEntry(t) {
var e = {
tryLoc: t[0]
};
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
}
function resetTryEntry(t) {
var e = t.completion || {};
e.type = "normal", delete e.arg, t.completion = e;
}
function Context(t) {
this.tryEntries = [{
tryLoc: "root"
}], t.forEach(pushTryEntry, this), this.reset(!0);
}
function values(e) {
if (e || "" === e) {
var r = e[a];
if (r) return r.call(e);
if ("function" == typeof e.next) return e;
if (!isNaN(e.length)) {
var o = -1,
i = function next() {
for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
return next.value = t, next.done = !0, next;
};
return i.next = i;
}
}
throw new TypeError(_typeof(e) + " is not iterable");
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
value: GeneratorFunctionPrototype,
configurable: !0
}), o(GeneratorFunctionPrototype, "constructor", {
value: GeneratorFunction,
configurable: !0
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
var e = "function" == typeof t && t.constructor;
return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
}, e.mark = function (t) {
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
}, e.awrap = function (t) {
return {
__await: t
};
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
return this;
}), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
void 0 === i && (i = Promise);
var a = new AsyncIterator(wrap(t, r, n, o), i);
return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
return t.done ? t.value : a.next();
});
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
return this;
}), define(g, "toString", function () {
return "[object Generator]";
}), e.keys = function (t) {
var e = Object(t),
r = [];
for (var n in e) r.push(n);
return r.reverse(), function next() {
for (; r.length;) {
var t = r.pop();
if (t in e) return next.value = t, next.done = !1, next;
}
return next.done = !0, next;
};
}, e.values = values, Context.prototype = {
constructor: Context,
reset: function reset(e) {
if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
},
stop: function stop() {
this.done = !0;
var t = this.tryEntries[0].completion;
if ("throw" === t.type) throw t.arg;
return this.rval;
},
dispatchException: function dispatchException(e) {
if (this.done) throw e;
var r = this;
function handle(n, o) {
return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
}
for (var o = this.tryEntries.length - 1; o >= 0; --o) {
var i = this.tryEntries[o],
a = i.completion;
if ("root" === i.tryLoc) return handle("end");
if (i.tryLoc <= this.prev) {
var c = n.call(i, "catchLoc"),
u = n.call(i, "finallyLoc");
if (c && u) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
} else if (c) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
} else {
if (!u) throw Error("try statement without catch or finally");
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
}
}
}
},
abrupt: function abrupt(t, e) {
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
var o = this.tryEntries[r];
if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
var i = o;
break;
}
}
i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
var a = i ? i.completion : {};
return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
},
complete: function complete(t, e) {
if ("throw" === t.type) throw t.arg;
return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
},
finish: function finish(t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
}
},
catch: function _catch(t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.tryLoc === t) {
var n = r.completion;
if ("throw" === n.type) {
var o = n.arg;
resetTryEntry(r);
}
return o;
}
}
throw Error("illegal catch attempt");
},
delegateYield: function delegateYield(e, r, n) {
return this.delegate = {
iterator: values(e),
resultName: r,
nextLoc: n
}, "next" === this.method && (this.arg = t), y;
}
}, e;
}
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;
}
var getIsColumn = function getIsColumn(isColumn, obj, column) {
var count = 0;
Object.keys(obj || {}).forEach(function (key) {
var item = obj[key];
if (item.visible === undefined) {
count += 1;
}
});
return isColumn && count % column !== 0;
};
var SearchForm = function SearchForm(props) {
if (props.hidden) {
return null;
}
var configCtx = (0, _react.useContext)(_configProvider.default.ConfigContext);
var t = (0, _utils.translation)(configCtx);
var className = props.className,
style = props.style,
mode = props.mode,
_props$layoutAuto = props.layoutAuto,
layoutAuto = _props$layoutAuto === void 0 ? false : _props$layoutAuto,
form = props.form,
hidden = props.hidden,
loading = props.loading,
_props$column = props.column,
_column = _props$column === void 0 ? 4 : _props$column,
collapsed = props.collapsed,
_props$defaultCollaps = props.defaultCollapsed,
defaultCollapsed = _props$defaultCollaps === void 0 ? true : _props$defaultCollaps,
schema = props.schema,
retainBtn = props.retainBtn,
closeReturnSearch = props.closeReturnSearch,
resetAfter = props.resetAfter,
searchBtnStyle = props.searchBtnStyle,
searchBtnClassName = props.searchBtnClassName,
_props$searchText = props.searchText,
searchText = _props$searchText === void 0 ? t('search') : _props$searchText,
_props$resetText = props.resetText,
resetText = _props$resetText === void 0 ? t('reset') : _props$resetText,
_props$searchWithErro = props.searchWithError,
searchWithError = _props$searchWithErro === void 0 ? true : _props$searchWithErro,
_props$searchOnMount = props.searchOnMount,
searchOnMount = _props$searchOnMount === void 0 ? true : _props$searchOnMount,
onMount = props.onMount,
onSearch = props.onSearch,
onReset = props.onReset,
searchBtnRender = props.searchBtnRender,
restProps = (0, _tslib.__rest)(props, ["className", "style", "mode", "layoutAuto", "form", "hidden", "loading", "column", "collapsed", "defaultCollapsed", "schema", "retainBtn", "closeReturnSearch", "resetAfter", "searchBtnStyle", "searchBtnClassName", "searchText", "resetText", "searchWithError", "searchOnMount", "onMount", "onSearch", "onReset", "searchBtnRender"]);
var fieldNum = Object.keys((schema === null || schema === void 0 ? void 0 : schema.properties) || {}).length;
var isColumn = (restProps.displayType || schema.displayType) === 'column';
var operateShow = mode !== 'simple' || mode === 'simple' && retainBtn;
var containerRef = (0, _react.useRef)();
var _useSetState = (0, _ahooks.useSetState)({
hasCollapse: false,
isExpand: !defaultCollapsed,
column: schema.column || _column // 一行几列
}),
_useSetState2 = _slicedToArray(_useSetState, 2),
state = _useSetState2[0],
setState = _useSetState2[1];
var hasCollapse = state.hasCollapse,
isExpand = state.isExpand,
column = state.column;
var actionProps = {
style: searchBtnStyle,
className: searchBtnClassName,
searchText: searchText,
resetText: resetText,
loading: loading,
form: form,
hasCollapse: hasCollapse,
isExpand: isExpand,
onReset: onReset,
searchBtnRender: searchBtnRender
};
(0, _ahooks.useMount)(function () {
initMount();
});
(0, _ahooks.useMount)(function () {
if (!collapsed) {
return;
}
if (!isColumn && fieldNum > column * 2 - 1 || isColumn && fieldNum > column - 1) {
setState({
hasCollapse: true
});
}
handleContainerResize();
});
(0, _ahooks.useUpdateEffect)(function () {
if (!collapsed) {
return;
}
if (!isColumn && fieldNum > column * 2 - 1 || isColumn && fieldNum > column - 1) {
setState({
hasCollapse: true
});
} else {
setState({
hasCollapse: true
});
}
}, [column]);
var initMount = function initMount() {
return (0, _tslib.__awaiter)(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (searchOnMount) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
if (!(typeof onMount === 'function')) {
_context.next = 5;
break;
}
_context.next = 5;
return onMount();
case 5:
form.submit();
case 6:
case "end":
return _context.stop();
}
}, _callee);
}));
};
var properties = (0, _react.useMemo)(function () {
if (!collapsed) {
return schema === null || schema === void 0 ? void 0 : schema.properties;
}
var result = {};
Object.keys((schema === null || schema === void 0 ? void 0 : schema.properties) || {}).forEach(function (key, index) {
var item = Object.assign({}, schema.properties[key] || {});
if (!isExpand && isColumn && index >= column - 1 || !isExpand && !isColumn && index >= column * 2 - 1 // 只显示两行
) {
item.visible = false;
}
result[key] = item;
});
return result;
}, [JSON.stringify(schema), column, isColumn, isExpand, collapsed]);
var handleContainerResize = function handleContainerResize() {
if (!layoutAuto) {
return;
}
var resizeObserver = new ResizeObserver((0, _lodashEs.debounce)(function () {
var _ref = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || {},
clientWidth = _ref.clientWidth;
for (var i = _column; i > 0; i--) {
var item = clientWidth / i;
if (item >= ((layoutAuto === null || layoutAuto === void 0 ? void 0 : layoutAuto.fieldMinWidth) || 340)) {
setState({
column: i
});
break;
}
if (i === 1) {
setState({
column: 1
});
}
}
}, 300, {
leading: true
}));
resizeObserver.observe(containerRef.current);
(function () {
resizeObserver.disconnect();
});
};
var handleFinish = function handleFinish(values) {
onSearch === null || onSearch === void 0 ? void 0 : onSearch(values);
};
var handleFinishFailed = function handleFinishFailed(_ref2) {
var values = _ref2.values;
if (!searchWithError) {
return;
}
onSearch === null || onSearch === void 0 ? void 0 : onSearch(values);
};
var handleKeyDown = function handleKeyDown(ev) {
if (ev.keyCode !== 13) {
return;
}
form.submit();
};
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)('fr-search', _defineProperty(_defineProperty({}, className, !!className), 'fr-column-search', isColumn)),
style: style,
ref: containerRef,
onKeyDown: !closeReturnSearch && handleKeyDown
}, /*#__PURE__*/_react.default.createElement(_formCore.default, Object.assign({
displayType: 'row'
}, restProps, {
schema: Object.assign(Object.assign({}, schema), {
properties: properties,
column: column
}),
onFinish: handleFinish,
onFinishFailed: handleFinishFailed,
form: form,
operateExtra: operateShow && ( /*#__PURE__*/_react.default.createElement(_col.default, {
className: (0, _classnames.default)('search-action-col', {
'search-action-column': getIsColumn(isColumn, properties, column)
}),
style: {
minWidth: 1 / column * 100 + '%'
}
}, /*#__PURE__*/_react.default.createElement(_ActionView.default, Object.assign({}, actionProps, {
retainBtn: retainBtn,
mode: mode,
setExpand: function setExpand(value) {
return setState({
isExpand: value
});
}
}))))
})));
};
var _default = exports.default = (0, _withProvider.default)(SearchForm, {
Input: _widgets.Input,
InputNumber: _widgets.InputNumber,
TextArea: _widgets.TextArea,
Select: _widgets.Select,
MultiSelect: _widgets.MultiSelect,
Switch: _widgets.Switch,
Radio: _widgets.Radio,
Checkbox: _widgets.Checkbox,
Checkboxes: _widgets.Checkboxes,
DatePicker: _widgets.DatePicker,
DateRange: _widgets.DateRange,
TimePicker: _widgets.TimePicker,
TimeRange: _widgets.TimeRange,
TreeSelect: _widgets.TreeSelect,
ImageInput: _widgets.ImageInput,
UrlInput: _widgets.UrlInput,
Slider: _widgets.Slider,
Html: _widgets.Html,
PercentSlider: _widgets.PercentSlider
});