@iimm/formily-mui
Version:
form field components based on @mui/material and @formily/react
228 lines • 13 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 = ["children", "onFinish", "createFormOptions", "ResultRender", "resultTitle", "resultSubTitle", "showResultReset", "resultActions", "resultResetText", "resultResetProps", "onResultReset", "resultContent", "stepContentProps", "direction", "orientation", "alternativeLabel", "labelPlacement", "depend", "formRef", "form", "showReset", "keepAlive"];
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; }
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; }
import { useEffect, useImperativeHandle, Children, cloneElement } from "react";
import { useCreation, useMemoizedFn, useSafeState } from "ahooks";
import { createForm } from "@formily/core";
import { toJS } from "@formily/reactive";
import { FormProvider, ObjectField } from "@formily/react";
import { Box, Step, StepContent, StepIcon, StepLabel, Stepper } from "@mui/material";
import { StepForm } from "./StepForm";
import { DefaultCompleteRender } from "./DefaultCompleteRender";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var StepsForm = function StepsForm(props) {
var children = props.children,
onFinish = props.onFinish,
createFormOptions = props.createFormOptions,
_props$ResultRender = props.ResultRender,
ResultRender = _props$ResultRender === void 0 ? DefaultCompleteRender : _props$ResultRender,
resultTitle = props.resultTitle,
resultSubTitle = props.resultSubTitle,
_props$showResultRese = props.showResultReset,
showResultReset = _props$showResultRese === void 0 ? true : _props$showResultRese,
resultActions = props.resultActions,
_props$resultResetTex = props.resultResetText,
resultResetText = _props$resultResetTex === void 0 ? "返回" : _props$resultResetTex,
resultResetProps = props.resultResetProps,
onResultReset = props.onResultReset,
resultContent = props.resultContent,
stepContentProps = props.stepContentProps,
_props$direction = props.direction,
direction = _props$direction === void 0 ? "horizontal" : _props$direction,
orientation = props.orientation,
alternativeLabel = props.alternativeLabel,
_props$labelPlacement = props.labelPlacement,
labelPlacement = _props$labelPlacement === void 0 ? "horizontal" : _props$labelPlacement,
depend = props.depend,
formRef = props.formRef,
formProp = props.form,
showResetParent = props.showReset,
keepAlive = props.keepAlive,
restProps = _objectWithoutProperties(props, _excluded);
var _useSafeState = useSafeState(function () {
return Children.count(children);
}),
_useSafeState2 = _slicedToArray(_useSafeState, 2),
stepsCount = _useSafeState2[0],
setStepCount = _useSafeState2[1];
var getCount = useMemoizedFn(function () {
var count = 0;
var stepNodes = [];
Children.map(children, function (child) {
if (child) {
stepNodes.push(child);
count += 1;
}
});
return [stepNodes, count];
});
var _getCount = getCount(),
_getCount2 = _slicedToArray(_getCount, 2),
stepNodes = _getCount2[0],
count = _getCount2[1];
useEffect(function () {
setStepCount(count);
}, [count]);
var _useSafeState3 = useSafeState(0),
_useSafeState4 = _slicedToArray(_useSafeState3, 2),
activeStep = _useSafeState4[0],
setActiveStep = _useSafeState4[1];
var form = useCreation(function () {
return formProp || createForm(createFormOptions || {
validateFirst: true
});
}, [depend, createFormOptions, formProp]);
useImperativeHandle(formRef, function () {
return form;
}, [form]);
var handleStepChange = useMemoizedFn(function (step) {
if (typeof step === "number") {
setActiveStep(step);
} else {
if (step === "next") {
setActiveStep(function (s) {
return s + 1;
});
} else if (step === "previous") {
setActiveStep(function (s) {
return s - 1 < 0 ? 0 : s - 1;
});
}
}
});
var handleReset = useMemoizedFn(function () {
form === null || form === void 0 || form.reset("*");
setActiveStep(0);
});
return /*#__PURE__*/_jsx(Box, {
children: /*#__PURE__*/_jsxs(FormProvider, {
form: form,
children: [/*#__PURE__*/_jsx(Stepper, _objectSpread(_objectSpread({
activeStep: activeStep,
orientation: direction !== null && direction !== void 0 ? direction : orientation,
alternativeLabel: alternativeLabel !== null && alternativeLabel !== void 0 ? alternativeLabel : labelPlacement === "vertical"
}, restProps), {}, {
children: stepNodes.map(function (child, index) {
if (!child) {
return null;
}
// @ts-ignore
var _ref = (child === null || child === void 0 ? void 0 : child.props) || {},
title = _ref.title,
subTitle = _ref.subTitle,
_ref$icon = _ref.icon,
icon = _ref$icon === void 0 ? StepIcon : _ref$icon,
onFinishProp = _ref.onFinish,
name = _ref.name,
showResetProp = _ref.showReset,
onReset = _ref.onReset;
var showReset = showResetProp !== null && showResetProp !== void 0 ? showResetProp : showResetParent;
var overwriteProps = {
handleStepChange: handleStepChange,
current: activeStep,
stepIndex: index,
stepsCount: stepsCount,
showReset: showReset
};
if (!onFinishProp && index + 1 === stepsCount && onFinish) {
overwriteProps.onFinish = onFinish;
}
if (showReset) {
overwriteProps.onReset = function () {
handleReset();
onReset === null || onReset === void 0 || onReset();
};
}
var key = name !== null && name !== void 0 ? name : index;
return /*#__PURE__*/_jsxs(Step, {
children: [/*#__PURE__*/_jsx(StepLabel, {
optional: subTitle,
StepIconComponent: icon,
children: title
}), (direction !== null && direction !== void 0 ? direction : orientation) === "vertical" && /*#__PURE__*/_jsx(StepContent, _objectSpread(_objectSpread({}, stepContentProps || {}), {}, {
children: /*#__PURE__*/_jsx(ObjectField, {
name: key,
children: function children(field) {
return /*#__PURE__*/_jsx(_Fragment, {
children: /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, overwriteProps), {}, {
field: field
}))
});
}
})
}))]
}, key);
})
})), (direction !== null && direction !== void 0 ? direction : orientation) !== "vertical" && stepNodes.map(function (child, index) {
if (!child || !keepAlive && index !== activeStep) {
return null;
}
// @ts-ignore
var _ref2 = (child === null || child === void 0 ? void 0 : child.props) || {},
onFinishProp = _ref2.onFinish,
name = _ref2.name,
showResetProp = _ref2.showReset,
onReset = _ref2.onReset;
var showReset = showResetProp !== null && showResetProp !== void 0 ? showResetProp : showResetParent;
var overwriteProps = {
handleStepChange: handleStepChange,
current: activeStep,
stepIndex: index,
stepsCount: stepsCount,
showReset: showReset
};
if (!onFinishProp && index + 1 === stepsCount && onFinish) {
overwriteProps.onFinish = onFinish;
}
if (showReset) {
overwriteProps.onReset = function () {
handleReset();
onReset === null || onReset === void 0 || onReset();
};
}
var key = name !== null && name !== void 0 ? name : index;
return /*#__PURE__*/_jsx(ObjectField, {
name: key,
children: function children(field) {
return /*#__PURE__*/_jsx(Box, {
sx: index !== activeStep ? {
display: "none"
} : {},
children: /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, overwriteProps), {}, {
field: field
}))
});
}
}, key);
}), activeStep === stepsCount && stepsCount !== 0 && /*#__PURE__*/_jsx(ResultRender, {
handleStepChange: handleStepChange,
form: form,
values: toJS(form === null || form === void 0 ? void 0 : form.values),
resultTitle: resultTitle,
resultSubTitle: resultSubTitle,
resultActions: resultActions,
showResultReset: showResultReset,
resultResetText: resultResetText,
resultResetProps: resultResetProps,
onResultReset: onResultReset,
resultContent: resultContent
})]
})
});
};
StepsForm.StepForm = StepForm;
export { StepsForm };