@lingxiteam/lcdp-ueditor-react 1.0.3-alpha.13 → 1.0.3-alpha.14

package/es/ToolBottomBar/FormatModal/index.less

@@ -0,0 +1,300 @@
+@prefixCls: pcfactory;
+@suffixCls: ueditor-format;
+.@{suffixCls}-settings-popover {
+  max-width: 720px;
+
+  input[type="color"] {
+    -webkit-appearance: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+      border-radius: 2px;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: 2px;
+    }
+  }
+
+  .@{prefixCls}-form-item {
+    margin-bottom: 0;
+  }
+
+  .@{prefixCls}-form-item-control-input {
+    min-height: 28px;
+  }
+
+  .@{suffixCls}-popover-content {
+    width: 680px;
+    padding: 0;
+  }
+
+  .@{prefixCls}-popover-inner-content {
+    padding: 16px 20px;
+    border-radius: 8px;
+  }
+
+  .@{prefixCls}-popover-title {
+    font-weight: 600;
+    text-align: center;
+    font-size: 16px;
+    color: #1a202c;
+    padding: 16px 20px 12px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 0;
+  }
+}
+
+.@{suffixCls}-section {
+  overflow-y: auto;
+  padding: 0;
+  max-height: 400px;
+}
+
+.@{suffixCls}-style-row {
+  margin-bottom: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  border-radius: 6px;
+  background-color: #fafbfc;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: #f1f5f9;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  }
+
+  &:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .@{suffixCls}-row-label {
+    font-weight: 600;
+    font-size: 14px;
+    width: 80px;
+    color: #374151;
+    flex-shrink: 0;
+    margin-right: 12px;
+    margin-bottom: 0;
+  }
+
+  .@{prefixCls}-row {
+    flex: 1;
+    align-items: center;
+    margin: 0;
+    .@{prefixCls}-select-selector {
+      width: 100%;
+    }
+  }
+
+  .@{prefixCls}-col {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .@{prefixCls}-select {
+    width: 100%;
+
+    .@{prefixCls}-select-selector {
+      border-radius: 4px;
+      border-color: #d1d5db;
+      transition: all 0.2s ease;
+      height: 28px;
+
+      .@{prefixCls}-select-selection-item {
+        line-height: 26px;
+      }
+
+      &:hover {
+        border-color: #6366f1;
+      }
+    }
+
+    &.@{prefixCls}-select-focused .@{prefixCls}-select-selector {
+      border-color: #6366f1 !important;
+      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
+    }
+  }
+
+  .@{prefixCls}-input-number {
+    width: 100%;
+    border-radius: 4px;
+    border-color: #d1d5db;
+    height: 28px;
+
+    .@{prefixCls}-input-number-input {
+      height: 26px;
+    }
+
+    &:hover {
+      border-color: #6366f1;
+    }
+
+    &:focus,
+    &.@{prefixCls}-input-number-focused {
+      border-color: #6366f1 !important;
+      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
+    }
+  }
+
+  input[type="color"] {
+    width: 100%;
+    height: 28px;
+    border-radius: 4px;
+    border: 1px solid #d1d5db;
+    cursor: pointer;
+
+    &:hover {
+      border-color: #6366f1;
+    }
+  }
+}
+
+.@{suffixCls}-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #e2e8f0;
+
+  .@{prefixCls}-btn {
+    height: 32px;
+    padding: 0 16px;
+    border-radius: 4px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+
+    &.@{prefixCls}-btn-default {
+      border-color: #d1d5db;
+      color: #6b7280;
+
+      &:hover {
+        border-color: #9ca3af;
+        color: #374151;
+      }
+    }
+
+    &.@{prefixCls}-btn-primary {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+      border: none;
+      box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
+
+      &:hover {
+        background: linear-gradient(135deg, #5b61f0 0%, #7c3aed 100%);
+        box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
+        transform: translateY(-1px);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .@{suffixCls}-settings-popover {
+    max-width: 95vw;
+
+    .@{suffixCls}-popover-content {
+      width: calc(95vw - 40px);
+    }
+  }
+
+  .@{suffixCls}-style-row {
+    flex-direction: column;
+    align-items: stretch;
+
+    .@{suffixCls}-row-label {
+      width: 100%;
+      margin-right: 0;
+      margin-bottom: 8px;
+    }
+
+    .@{prefixCls}-row {
+      width: 100%;
+    }
+
+    .@{prefixCls}-col {
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.@{suffixCls}-style-section {
+  margin-bottom: 15px;
+}
+
+.@{suffixCls}-section-title {
+  font-weight: 500;
+  margin-bottom: 10px;
+  font-size: 15px;
+}
+
+.@{suffixCls}-preview {
+  border: 1px solid @border-color;
+  padding: 15px;
+  margin: 15px 0;
+  background-color: #fff;
+  border-radius: 4px;
+
+  h1 {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  p {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 8px 0;
+  }
+}
+
+.@{suffixCls}-system-info {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  color: white !important;
+  border-radius: 8px !important;
+  padding: 12px 16px !important;
+  margin-bottom: 16px !important;
+  text-align: center !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
+}
+
+.@{suffixCls}-section::-webkit-scrollbar {
+  width: 6px;
+}
+
+.@{suffixCls}-section::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.@{suffixCls}-section::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+
+  &:hover {
+    background: #94a3b8;
+  }
+}
+
+.@{suffixCls}-section.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}

package/es/ToolBottomBar/ProgressModal/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+export interface ProgressModalRef {
+    updateProgress: (progress: number, title?: string) => void;
+    updateVisible: (open: boolean) => void;
+}
+export interface ProgressModalProps {
+}
+declare const ProgressModal: React.ForwardRefExoticComponent<ProgressModalProps & React.RefAttributes<ProgressModalRef>>;
+export default ProgressModal;

package/es/ToolBottomBar/ProgressModal/index.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { Modal, Progress } from 'antd';
+import "./index.less";
+var suffixCls = 'ueditor-progress-modal';
+var ProgressModal = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    progress = _useState4[0],
+    setProgress = _useState4[1];
+  var _useState5 = useState('准备中...'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    title = _useState6[0],
+    setTitle = _useState6[1];
+  useImperativeHandle(ref, function () {
+    return {
+      updateProgress: function updateProgress(newProgress, title) {
+        if (!visible) {
+          setVisible(true);
+        }
+        setProgress(newProgress);
+        if (title) {
+          setTitle(title);
+        }
+      },
+      updateVisible: function updateVisible(open) {
+        setVisible(open);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(Modal, {
+    title: null,
+    visible: visible,
+    footer: null,
+    closable: false,
+    maskClosable: false,
+    wrapClassName: suffixCls
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(suffixCls, "-title")
+  }, "\u6B63\u5728\u751F\u6210PDF\u6587\u4EF6..."), /*#__PURE__*/React.createElement(Progress, {
+    percent: progress,
+    status: "active",
+    showInfo: false
+  }), title && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(suffixCls, "-sub-title")
+  }, title, " ", progress, "%"));
+});
+ProgressModal.displayName = 'ProgressModal';
+export default ProgressModal;

package/es/ToolBottomBar/ProgressModal/index.less

@@ -0,0 +1,16 @@
+@suffixCls: ~'ueditor-progress-modal';
+
+.@{suffixCls} {
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 12px;
+    color: #333;
+  }
+  &-sub-title {
+    font-size: 14px;
+    color: #666;
+    text-align: center;
+    margin-top: 8px;
+  }
+}

package/es/ToolBottomBar/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormatSettings } from '../tools/generateStylesFromSettings';
+import './index.less';
+import { ILcdpUeditorProps } from '../type';
+declare const ToolBottomBar: (props: {
+    ueditorInst: any;
+    prefixCls?: string | undefined;
+    containerRef?: React.RefObject<HTMLDivElement> | undefined;
+    defaultFormatSetting?: FormatSettings | undefined;
+    onFormatChange?: ((val: FormatSettings) => void) | undefined;
+    isReady?: boolean | undefined;
+    bottomTypes?: ILcdpUeditorProps['bottomTypes'];
+}) => JSX.Element;
+export default ToolBottomBar;

package/es/ToolBottomBar/index.js

@@ -0,0 +1,290 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useRef } from 'react';
+import debounce from 'lodash/debounce';
+import Icon, { SettingOutlined, CheckOutlined, FullscreenOutlined, FullscreenExitOutlined, DownOutlined } from '@ant-design/icons';
+import { Dropdown, Menu, ConfigProvider } from 'antd';
+import exportFile from "../icon/ExportPDF";
+import textFileIcon from "../icon/TextFileIcon";
+import textIcon from "../icon/TextIcon";
+import textCopy from "../icon/TextCopy";
+import { domloadPdf } from "../tools/exportPDF";
+import FormatModal from "./FormatModal";
+import { generateStylesFromSettings } from "../tools/generateStylesFromSettings";
+import "./index.less";
+import ProgressModal from "./ProgressModal";
+var MENU_OPTIONS = {
+  a3: 'A3',
+  a4: 'A4',
+  a5: 'A5',
+  a0: '铺满'
+};
+var STYLE_ID = 'ueditor-custom-styles';
+var ToolBottomBar = function ToolBottomBar(props) {
+  var ueditorInst = props.ueditorInst,
+    prefixCls = props.prefixCls,
+    containerRef = props.containerRef,
+    defaultFormatSetting = props.defaultFormatSetting,
+    onFormatChange = props.onFormatChange,
+    isReady = props.isReady,
+    bottomTypes = props.bottomTypes;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    chineseTextCount = _useState2[0],
+    setChineseTextCount = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    totalTextCount = _useState4[0],
+    setTotalTextCount = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    innerFullScreen = _useState6[0],
+    setInnerFullScreen = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isCopying = _useState8[0],
+    setIsCopying = _useState8[1];
+  var _useState9 = useState(undefined),
+    _useState10 = _slicedToArray(_useState9, 2),
+    pageWidth = _useState10[0],
+    setPageWidth = _useState10[1];
+  var timer = useRef(undefined);
+  var progressModalRef = useRef(null);
+  var debounceContentChange = debounce(function () {
+    try {
+      var _plainTxt$match;
+      var plainTxt = ueditorInst.getContentTxt() || '';
+      var _chineseTextCount = ((_plainTxt$match = plainTxt.match(/[\u4e00-\u9fa5]/g)) === null || _plainTxt$match === void 0 ? void 0 : _plainTxt$match.length) || 0;
+      var _totalTextCount = plainTxt.length;
+      setChineseTextCount(_chineseTextCount);
+      setTotalTextCount(_totalTextCount);
+    } catch (e) {
+      //
+    }
+  }, 300);
+  useEffect(function () {
+    if (isReady) {
+      ueditorInst.addListener('beforefullscreenchange', function (_, v) {
+        setInnerFullScreen(v);
+      });
+      ueditorInst.addListener('contentChange', function () {
+        debounceContentChange();
+      });
+      // 初始化调用一次
+      setTimeout(function () {
+        debounceContentChange();
+      }, 1000);
+    }
+  }, [ueditorInst, isReady]);
+  useEffect(function () {
+    return function () {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    };
+  }, []);
+  var getStatusBarItem = function getStatusBarItem(params) {
+    var icon = params.icon,
+      content = params.content,
+      onClick = params.onClick,
+      extraNode = params.extraNode,
+      _params$className = params.className,
+      className = _params$className === void 0 ? '' : _params$className;
+    return /*#__PURE__*/React.createElement("span", {
+      className: "ueditor-rich-status-bar-item ".concat(className),
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ueditor-rich-status-bar-icon"
+    }, icon), /*#__PURE__*/React.createElement("span", {
+      className: "ueditor-rich-status-bar-content"
+    }, content), extraNode && /*#__PURE__*/React.createElement("span", {
+      className: "ueditor-rich-status-bar-extra"
+    }, extraNode));
+  };
+  var copyAll = function copyAll() {
+    var txt = ueditorInst.getPlainTxt();
+    var copy = function copy(t) {
+      // 复制使用传统方式
+      var input = document.createElement('textarea');
+      input.value = t;
+      document.body.appendChild(input);
+      input.select();
+      document.execCommand('copy');
+      document.body.removeChild(input);
+      setIsCopying(true);
+    };
+    if (txt) {
+      try {
+        navigator.clipboard.writeText(txt).then(function () {
+          setIsCopying(true);
+          // 复制成功
+        }).catch(function () {
+          // 复制失败,使用传统方式
+          copy(txt);
+        });
+      } catch (e) {
+        // 浏览器不支持 clipboard API,使用传统方式
+        copy(txt);
+      }
+      timer.current = setTimeout(function () {
+        setIsCopying(false);
+      }, 1000);
+    }
+  };
+
+  /**
+   * 应用格式设置
+   * @param settings 格式设置
+   */
+  var handleApply = function handleApply(settings) {
+    var _containerRef$current, _contentDocument;
+    // 生成样式
+    var cssStyles = generateStylesFromSettings(settings);
+
+    // 触发编辑器视图更新
+    var frame = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('#edui1_iframeholder > iframe');
+    if (frame !== null && frame !== void 0 && (_contentDocument = frame.contentDocument) !== null && _contentDocument !== void 0 && _contentDocument.documentElement) {
+      var _contentDocument2;
+      // 查找或创建样式元素
+      var styleEl = frame === null || frame === void 0 || (_contentDocument2 = frame.contentDocument) === null || _contentDocument2 === void 0 ? void 0 : _contentDocument2.getElementById(STYLE_ID);
+      if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = STYLE_ID;
+        frame.contentDocument.head.appendChild(styleEl);
+      }
+      // 设置样式内容
+      styleEl.textContent = cssStyles;
+    }
+    onFormatChange === null || onFormatChange === void 0 || onFormatChange(settings);
+  };
+  useEffect(function () {
+    if (defaultFormatSetting) {
+      handleApply(defaultFormatSetting);
+    }
+  }, [defaultFormatSetting]);
+  var onProgress = function onProgress(progress, title) {
+    var _progressModalRef$cur;
+    (_progressModalRef$cur = progressModalRef.current) === null || _progressModalRef$cur === void 0 || _progressModalRef$cur.updateProgress(progress, title);
+  };
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    prefixCls: prefixCls
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ueditor-rich-status-bar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ueditor-rich-status-bar-box"
+  }, (bottomTypes === null || bottomTypes === void 0 ? void 0 : bottomTypes.includes('charCount')) && getStatusBarItem({
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      component: textIcon,
+      className: "ueditor-rich-status-bar-icon-svg"
+    }),
+    content: "".concat(totalTextCount, " \u5B57\u7B26"),
+    className: 'ueditor-rich-status-bar-text'
+  }), (bottomTypes === null || bottomTypes === void 0 ? void 0 : bottomTypes.includes('chineseCount')) && getStatusBarItem({
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      component: textFileIcon,
+      className: "ueditor-rich-status-bar-icon-svg"
+    }),
+    content: "".concat(chineseTextCount, " \u4E2D\u6587"),
+    className: 'ueditor-rich-status-bar-text'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "ueditor-rich-status-bar-box"
+  }, (bottomTypes === null || bottomTypes === void 0 ? void 0 : bottomTypes.includes('pageWidth')) && /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ['click'],
+    overlay: /*#__PURE__*/React.createElement(Menu, {
+      onClick: function onClick(_ref) {
+        var key = _ref.key;
+        // 设置编辑器宽度
+        var newClass = "ueditor-rich-status-content-".concat(key);
+        var oldClass = "ueditor-rich-status-content-".concat(pageWidth);
+        if (containerRef !== null && containerRef !== void 0 && containerRef.current) {
+          var frame = containerRef.current.querySelector('#edui1_iframeholder');
+          var frameContainer = containerRef.current.querySelector('#edui1');
+          if (frame) {
+            frame.classList.remove(oldClass);
+            frame.classList.add(newClass);
+          }
+          if (frameContainer) {
+            if (key === 'a0') {
+              frameContainer.classList.remove('ueditor-rich-status-not-full');
+            } else {
+              frameContainer.classList.add('ueditor-rich-status-not-full');
+            }
+          }
+        }
+        setPageWidth(key);
+      }
+    }, Object.keys(MENU_OPTIONS).map(function (k) {
+      return /*#__PURE__*/React.createElement(Menu.Item, {
+        key: k
+      }, /*#__PURE__*/React.createElement("span", null, "\u9875\u9762\u5BBD\u5EA6 ", MENU_OPTIONS[k]));
+    }))
+  }, getStatusBarItem({
+    content: "\u9875\u9762\u5BBD\u5EA6".concat(pageWidth ? " ".concat(MENU_OPTIONS[pageWidth]) : ''),
+    extraNode: /*#__PURE__*/React.createElement(DownOutlined, null)
+  })), (bottomTypes === null || bottomTypes === void 0 ? void 0 : bottomTypes.includes('formatSetting')) && /*#__PURE__*/React.createElement(FormatModal, {
+    onApply: handleApply,
+    initialSettings: defaultFormatSetting
+  }, getStatusBarItem({
+    icon: /*#__PURE__*/React.createElement(SettingOutlined, null),
+    content: '格式设置'
+  })), (bottomTypes === null || bottomTypes === void 0 ? void 0 : bottomTypes.includes('copy')) && getStatusBarItem({
+    icon: isCopying ? /*#__PURE__*/React.createElement(CheckOutlined, null) : /*#__PURE__*/React.createElement(Icon, {
+      component: textCopy,
+      className: "ueditor-rich-status-bar-icon-svg"
+    }),
+    content: '复制全文',
+    onClick: copyAll,
+    className: isCopying ? 'isActive' : undefined
+  }), (bottomTypes === null || bottomTypes === void 0 ? void 0 : bottomTypes.includes('fullScreen')) && getStatusBarItem({
+    icon: innerFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null),
+    content: innerFullScreen ? '退出全屏' : '全屏预览',
+    onClick: function onClick() {
+      ueditorInst.ui.setFullScreen(!innerFullScreen);
+    }
+  }), (bottomTypes === null || bottomTypes === void 0 ? void 0 : bottomTypes.includes('exportPdf')) && getStatusBarItem({
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      component: exportFile,
+      className: "ueditor-rich-status-bar-icon-svg"
+    }),
+    content: '导出文档',
+    onClick: function () {
+      var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _contentDocument3, frame, _contentDocument4;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) {
+                _context.next = 7;
+                break;
+              }
+              frame = containerRef.current.querySelector('#edui1_iframeholder > iframe');
+              if (!(frame !== null && frame !== void 0 && (_contentDocument3 = frame.contentDocument) !== null && _contentDocument3 !== void 0 && _contentDocument3.body)) {
+                _context.next = 6;
+                break;
+              }
+              _context.next = 5;
+              return domloadPdf(frame === null || frame === void 0 || (_contentDocument4 = frame.contentDocument) === null || _contentDocument4 === void 0 ? void 0 : _contentDocument4.body, pageWidth || 'a0', '未命名', onProgress);
+            case 5:
+              onProgress(100, '导出完成');
+            case 6:
+              setTimeout(function () {
+                var _progressModalRef$cur2;
+                (_progressModalRef$cur2 = progressModalRef.current) === null || _progressModalRef$cur2 === void 0 || _progressModalRef$cur2.updateVisible(false);
+              }, 500);
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function onClick() {
+        return _onClick.apply(this, arguments);
+      }
+      return onClick;
+    }()
+  }), /*#__PURE__*/React.createElement(ProgressModal, {
+    ref: progressModalRef
+  }))));
+};
+export default ToolBottomBar;