@aliretail/react-materials-components/es/PowerEditor/components/preview/index.js

B 端物料组件库

import _Overlay from "@alifd/next/es/overlay";
import _Button from "@alifd/next/es/button";
import _Message from "@alifd/next/es/message";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState } from 'react';
import { getRemoteFileContent } from "../../utils/api";
import { CLASS_PREFIX, COMPONENT_NAME } from "../../utils/static";
var READONLY_CLASS_PREFIX = CLASS_PREFIX + "-readOnly";

var Preview = function Preview(props) {
  var _useState = useState(false),
      visible = _useState[0],
      setVisible = _useState[1]; // 从富文本地址中获取的内容


  var _useState2 = useState(''),
      showedContent = _useState2[0],
      setShowedContent = _useState2[1];

  var _useState3 = useState(null),
      btn = _useState3[0],
      setBtn = _useState3[1];

  var content = props.content,
      path = props.path;

  var showContent = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var tempContent;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              tempContent = content;

              if (!path) {
                _context.next = 5;
                break;
              }

              _context.next = 4;
              return getRemoteFileContent(path);

            case 4:
              tempContent = _context.sent;

            case 5:
              setShowedContent(tempContent);

              if (tempContent) {
                setVisible(true);
              } else {
                _Message.show({
                  type: 'notice',
                  title: '提示',
                  shape: 'toast',
                  content: '暂无内容'
                });
              }

            case 7:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function showContent() {
      return _ref.apply(this, arguments);
    };
  }();

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
    text: true,
    type: "primary",
    className: READONLY_CLASS_PREFIX + "-button " + READONLY_CLASS_PREFIX + "-button-primary",
    onClick: showContent,
    ref: function ref(_ref2) {
      setBtn(_ref2);
    }
  }, /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 1024 1024",
    version: "1.1",
    xmlns: "http://www.w3.org/2000/svg",
    "p-id": "1535",
    className: "icon"
  }, /*#__PURE__*/React.createElement("path", {
    // eslint-disable-next-line
    d: "M469.333333 298.666667a42.666667 42.666667 0 0 1 42.666667 42.666666v85.333334h85.333333a42.666667 42.666667 0 0 1 42.368 37.674666L640 469.333333a42.666667 42.666667 0 0 1-42.666667 42.666667h-85.333333v85.333333a42.666667 42.666667 0 0 1-37.674667 42.368L469.333333 640a42.666667 42.666667 0 0 1-42.666666-42.666667v-85.333333H341.333333a42.666667 42.666667 0 0 1-42.368-37.674667L298.666667 469.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h85.333334V341.333333a42.666667 42.666667 0 0 1 37.674666-42.368L469.333333 298.666667z m0-128a298.666667 298.666667 0 1 0 207.573334 513.408l3.285333-3.84a40.448 40.448 0 0 1 3.797333-3.370667A298.666667 298.666667 0 0 0 469.333333 170.666667z m0-85.333334a384 384 0 0 1 384 384 382.122667 382.122667 0 0 1-83.968 239.658667l156.8 156.842667a42.624 42.624 0 1 1-60.330666 60.330666l-156.842667-156.8A382.122667 382.122667 0 0 1 469.333333 853.333333c-212.096 0-384-171.904-384-384s171.904-384 384-384z",
    "p-id": "1536",
    fill: "#5584FF"
  })), /*#__PURE__*/React.createElement("span", {
    className: "text"
  }, "\u67E5\u770B\u8BE6\u60C5")), /*#__PURE__*/React.createElement(_Overlay, {
    visible: visible,
    safeNode: function safeNode() {
      return btn;
    },
    align: "cc cc",
    hasMask: true,
    disableScroll: true,
    onRequestClose: function onRequestClose() {
      setVisible(false);
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: READONLY_CLASS_PREFIX + "-dialog-content",
    "data-name": COMPONENT_NAME + "Dialog"
  }, /*#__PURE__*/React.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: showedContent
    }
  }))));
};

export default Preview;