mobile-more/lib/components/BizForm/StepsForm/StepsForm.js

基于 antd-mobile v5 扩展移动端 UI 组件

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _ut = require("ut2");
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
var _rcHooks = require("rc-hooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _dolyIcons = require("doly-icons");
var _antdMobile = require("antd-mobile");
var _StepForm = _interopRequireDefault(require("./StepForm"));
var _Submitter = _interopRequireDefault(require("./Submitter"));
var _StepsFormContext = _interopRequireDefault(require("./StepsFormContext"));
var _config = require("../../../config");
require("./index.css");
var _StepFormContext = _interopRequireDefault(require("./StepFormContext"));
var _utils = require("../../../utils/utils");
var Step = _antdMobile.Steps.Step;
var prefixCls = "".concat(_config.prefixClass, "-steps-form");
var BizStepsForm = function BizStepsForm(props) {
  var _mergedCurrentItem$st, _mergedCurrentItem$st2, _mergedCurrentItem$su;
  var _props$defaultCurrent = props.defaultCurrent,
    defaultCurrent = _props$defaultCurrent === void 0 ? 0 : _props$defaultCurrent,
    _props$changedStepScr = props.changedStepScrollToTop,
    changedStepScrollToTop = _props$changedStepScr === void 0 ? true : _props$changedStepScr,
    _props$items = props.items,
    items = _props$items === void 0 ? [] : _props$items,
    _props$showFooter = props.showFooter,
    showFooter = _props$showFooter === void 0 ? true : _props$showFooter,
    stepsRender = props.stepsRender,
    formContentRender = props.formContentRender,
    submitterRender = props.submitterRender,
    actionRef = props.actionRef,
    stepsProps = props.stepsProps,
    stepProps = props.stepProps,
    submitterProps = props.submitterProps,
    formProps = props.formProps,
    onPrev = props.onPrev,
    onNext = props.onNext,
    onFinish = props.onFinish,
    className = props.className,
    style = props.style,
    styles = props.styles;
  var _useControllableValue = (0, _rcHooks.useControllableValue)(props, {
      defaultValue: defaultCurrent,
      defaultValuePropName: 'defaultCurrent',
      valuePropName: 'current',
      trigger: 'onCurrentChange'
    }),
    _useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
    current = _useControllableValue2[0],
    setCurrent = _useControllableValue2[1];
  var latestCurrent = (0, _rcHooks.useLatest)(current);
  var uid = (0, _react.useMemo)(function () {
    return (0, _utils.getTimestampString)('stepsForm');
  }, []);
  var rootRef = (0, _react.useRef)(null);
  var contentRef = (0, _react.useRef)(null);
  var _useState = (0, _react.useState)(),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    colorLight = _useState2[0],
    setColorLight = _useState2[1];
  var formArrayRef = (0, _react.useRef)([]);
  var formDataRef = (0, _react.useRef)({});
  var mergedCurrentItem = (0, _objectSpread2.default)({
    showFooter: showFooter,
    stepsRender: stepsRender,
    formContentRender: formContentRender,
    submitterRender: submitterRender
  }, items[current]);
  var handlePrev = function handlePrev() {
    var newCurrent = latestCurrent.current > 0 ? latestCurrent.current - 1 : 0;
    setCurrent(newCurrent);
    onPrev === null || onPrev === void 0 ? void 0 : onPrev();
  };
  var handleNext = function handleNext() {
    formArrayRef.current[latestCurrent.current].submit();
  };
  // 表单提交验证成功后修改步骤
  var next = function next() {
    var newCurrent = latestCurrent.current < items.length - 1 ? latestCurrent.current + 1 : latestCurrent.current;
    setCurrent(newCurrent);
    onNext === null || onNext === void 0 ? void 0 : onNext();
  };
  var getFormValues = function getFormValues() {
    return Object.values(formDataRef.current).reduce(function (pre, cur) {
      return (0, _ut.mergeObject)(pre, cur);
    }, {});
  };
  // 最后一步表单验证成功后提交全部数据
  var submit = /*#__PURE__*/function () {
    var _ref = (0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
      var values;
      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            if (!(typeof onFinish === 'function')) {
              _context.next = 4;
              break;
            }
            values = getFormValues();
            _context.next = 4;
            return (0, _ut.tryit)(onFinish)(values);
          case 4:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function submit() {
      return _ref.apply(this, arguments);
    };
  }();
  var onFormFinish = function onFormFinish(name, values) {
    formDataRef.current[name] = values;
  };
  (0, _react.useImperativeHandle)(actionRef, function () {
    return {
      get forms() {
        return formArrayRef.current;
      },
      prev: function prev() {
        handlePrev();
      },
      next: function next() {
        handleNext();
      },
      reset: function reset() {
        setCurrent(defaultCurrent);
        formDataRef.current = {};
        formArrayRef.current.forEach(function (item) {
          item.resetFields();
        });
      },
      getFormValues: getFormValues
    };
  });
  (0, _react.useEffect)(function () {
    if (changedStepScrollToTop && contentRef.current) {
      contentRef.current.scrollTo({
        top: 0
      });
    }
  }, [changedStepScrollToTop, current]);
  var stepsDom = /*#__PURE__*/_react.default.createElement(_antdMobile.Steps, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, stepsProps), mergedCurrentItem.stepsProps), {}, {
    className: (0, _classnames.default)("".concat(prefixCls, "-steps"), stepsProps === null || stepsProps === void 0 ? void 0 : stepsProps.className, (_mergedCurrentItem$st = mergedCurrentItem.stepsProps) === null || _mergedCurrentItem$st === void 0 ? void 0 : _mergedCurrentItem$st.className),
    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles === null || styles === void 0 ? void 0 : styles.steps), stepsProps === null || stepsProps === void 0 ? void 0 : stepsProps.style), (_mergedCurrentItem$st2 = mergedCurrentItem.stepsProps) === null || _mergedCurrentItem$st2 === void 0 ? void 0 : _mergedCurrentItem$st2.style),
    current: current
  }), items.map(function (item, index) {
    var _item$stepProps;
    return /*#__PURE__*/_react.default.createElement(Step, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
      key: uid + index,
      title: item.title,
      icon: index < current ? /*#__PURE__*/_react.default.createElement(_dolyIcons.CheckCircle, null) : index + 1
    }, stepProps), item.stepProps), {}, {
      style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles === null || styles === void 0 ? void 0 : styles.step), stepProps === null || stepProps === void 0 ? void 0 : stepProps.style), (_item$stepProps = item.stepProps) === null || _item$stepProps === void 0 ? void 0 : _item$stepProps.style)
    }));
  }));
  var formContentDom = /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-content-main"),
    style: styles === null || styles === void 0 ? void 0 : styles.contentMain
  }, items.map(function (item, index) {
    var name = uid + index;
    return /*#__PURE__*/_react.default.createElement("div", {
      key: name,
      className: (0, _classnames.default)("".concat(prefixCls, "-content-item"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-content-item-active"), current === index))
    }, /*#__PURE__*/_react.default.createElement(_StepFormContext.default.Provider, {
      value: {
        name: name,
        step: index,
        total: items.length - 1
      }
    }, item.children));
  }));
  var submitterDom = mergedCurrentItem.showFooter ? (/*#__PURE__*/_react.default.createElement(_Submitter.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, submitterProps), mergedCurrentItem.submitterProps), {}, {
    total: items.length,
    current: current + 1,
    onPrev: handlePrev,
    onNext: handleNext,
    onSubmit: handleNext,
    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles === null || styles === void 0 ? void 0 : styles.submitter), submitterProps === null || submitterProps === void 0 ? void 0 : submitterProps.style), (_mergedCurrentItem$su = mergedCurrentItem.submitterProps) === null || _mergedCurrentItem$su === void 0 ? void 0 : _mergedCurrentItem$su.style)
  }))) : null;
  (0, _react.useLayoutEffect)(function () {
    if (_ut.isBrowser && rootRef.current) {
      var colorPrimary = getComputedStyle(rootRef.current).getPropertyValue('--color-primary');
      setColorLight((0, _tinycolor.default)(colorPrimary).lighten(27.5).toString());
    }
  }, []);
  return /*#__PURE__*/_react.default.createElement(_StepsFormContext.default.Provider, {
    value: {
      formArrayRef: formArrayRef,
      next: next,
      submit: submit,
      onFormFinish: onFormFinish,
      formProps: formProps
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(prefixCls, className),
    style: (0, _objectSpread2.default)({
      '--color-primary-light': colorLight
    }, style),
    ref: rootRef
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-content"),
    style: styles === null || styles === void 0 ? void 0 : styles.content,
    ref: contentRef
  }, mergedCurrentItem.stepsRender ? mergedCurrentItem.stepsRender(stepsDom) : stepsDom, mergedCurrentItem.formContentRender ? mergedCurrentItem.formContentRender(formContentDom) : formContentDom), mergedCurrentItem.showFooter && (/*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-footer"),
    style: styles === null || styles === void 0 ? void 0 : styles.footer
  }, mergedCurrentItem.submitterRender ? mergedCurrentItem.submitterRender(submitterDom) : submitterDom))));
};
BizStepsForm.StepForm = _StepForm.default;
var _default = exports.default = BizStepsForm;