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

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

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { isBrowser, mergeObject, tryit } from 'ut2';
import tinycolor from 'tinycolor2';
import { useControllableValue, useLatest } from 'rc-hooks';
import classNames from 'classnames';
import { CheckCircle } from 'doly-icons';
import { Steps } from 'antd-mobile';
import StepForm from './StepForm';
import Submitter from './Submitter';
import StepsFormContext from './StepsFormContext';
import { prefixClass } from '../../../config';
import "./index.css";
import StepFormContext from './StepFormContext';
import { getTimestampString } from '../../../utils/utils';
var Step = Steps.Step;
var prefixCls = "".concat(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 = useControllableValue(props, {
      defaultValue: defaultCurrent,
      defaultValuePropName: 'defaultCurrent',
      valuePropName: 'current',
      trigger: 'onCurrentChange'
    }),
    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
    current = _useControllableValue2[0],
    setCurrent = _useControllableValue2[1];
  var latestCurrent = useLatest(current);
  var uid = useMemo(function () {
    return getTimestampString('stepsForm');
  }, []);
  var rootRef = useRef(null);
  var contentRef = useRef(null);
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    colorLight = _useState2[0],
    setColorLight = _useState2[1];
  var formArrayRef = useRef([]);
  var formDataRef = useRef({});
  var mergedCurrentItem = _objectSpread({
    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 mergeObject(pre, cur);
    }, {});
  };
  // 最后一步表单验证成功后提交全部数据
  var submit = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
      var values;
      return _regeneratorRuntime().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 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;
  };
  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
    };
  });
  useEffect(function () {
    if (changedStepScrollToTop && contentRef.current) {
      contentRef.current.scrollTo({
        top: 0
      });
    }
  }, [changedStepScrollToTop, current]);
  var stepsDom = /*#__PURE__*/React.createElement(Steps, _objectSpread(_objectSpread(_objectSpread({}, stepsProps), mergedCurrentItem.stepsProps), {}, {
    className: classNames("".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: _objectSpread(_objectSpread(_objectSpread({}, 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.createElement(Step, _objectSpread(_objectSpread(_objectSpread({
      key: uid + index,
      title: item.title,
      icon: index < current ? /*#__PURE__*/React.createElement(CheckCircle, null) : index + 1
    }, stepProps), item.stepProps), {}, {
      style: _objectSpread(_objectSpread(_objectSpread({}, 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.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.createElement("div", {
      key: name,
      className: classNames("".concat(prefixCls, "-content-item"), _defineProperty({}, "".concat(prefixCls, "-content-item-active"), current === index))
    }, /*#__PURE__*/React.createElement(StepFormContext.Provider, {
      value: {
        name: name,
        step: index,
        total: items.length - 1
      }
    }, item.children));
  }));
  var submitterDom = mergedCurrentItem.showFooter ? (/*#__PURE__*/React.createElement(Submitter, _objectSpread(_objectSpread(_objectSpread({}, submitterProps), mergedCurrentItem.submitterProps), {}, {
    total: items.length,
    current: current + 1,
    onPrev: handlePrev,
    onNext: handleNext,
    onSubmit: handleNext,
    style: _objectSpread(_objectSpread(_objectSpread({}, 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;
  useLayoutEffect(function () {
    if (isBrowser && rootRef.current) {
      var colorPrimary = getComputedStyle(rootRef.current).getPropertyValue('--color-primary');
      setColorLight(tinycolor(colorPrimary).lighten(27.5).toString());
    }
  }, []);
  return /*#__PURE__*/React.createElement(StepsFormContext.Provider, {
    value: {
      formArrayRef: formArrayRef,
      next: next,
      submit: submit,
      onFormFinish: onFormFinish,
      formProps: formProps
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames(prefixCls, className),
    style: _objectSpread({
      '--color-primary-light': colorLight
    }, style),
    ref: rootRef
  }, /*#__PURE__*/React.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.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;
export default BizStepsForm;