linkmore-design/es/crop-img/wrapper/Container.js

🌈 🚀lm组件库。🚀

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useRef } from 'react';
import Modal from "../../modal";
import Body from "../body";
import Operate from "../body/Operate";
// import { dataURLtoBlob, blobToFile } from '../utils'

var LmBoxContainer = function LmBoxContainer(_ref) {
  var instance = _ref.instance;
  var visible = instance.visible,
    onClose = instance.onClose,
    state = instance.state,
    dispatch = instance.dispatch,
    getCropImageAsync = instance.getCropImageAsync,
    file = instance.file;
  var boxContainerRef = useRef(null);

  // 关闭时初始化
  var handleClose = function handleClose(blobFile) {
    dispatch({
      type: 'changeResult',
      result: {
        visible: false
      }
    });
    onClose === null || onClose === void 0 ? void 0 : onClose(blobFile, file);
  };
  var handleOk = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var croppedImage;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return getCropImageAsync();
          case 2:
            croppedImage = _context.sent;
            dispatch({
              type: 'changeResult',
              result: {
                croppedImage: croppedImage
              }
            });
            handleClose(croppedImage);
          case 5:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function handleOk() {
      return _ref2.apply(this, arguments);
    };
  }();
  var config = {
    title: '编辑图片',
    open: visible !== null && visible !== void 0 ? visible : state.visible,
    onCancel: function onCancel() {
      return handleClose(false);
    },
    onOk: handleOk
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, config, /*#__PURE__*/React.createElement("div", {
    ref: boxContainerRef,
    className: "lm_cutimg_container"
  }, /*#__PURE__*/React.createElement(Body, {
    instance: instance
  }), /*#__PURE__*/React.createElement(Operate, {
    instance: instance
  }))));
};
export default /*#__PURE__*/React.memo(LmBoxContainer);