fan-standard-comp 3.2.1 → 3.2.3

package/es/FormComp/VarTemplate/index.js

@@ -5,19 +5,19 @@ import "antd/es/input/style";
 import _Input from "antd/es/input";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 /**
  * Created by S.C. on 2019/11/16.
  */
@@ -25,31 +25,18 @@ import React, { Component } from 'react';
 var TextArea = _Input.TextArea;
 var isIE = !!document.all;
 var VarTemplate = /*#__PURE__*/function (_Component) {
-  _inherits(VarTemplate, _Component);
-  var _super = _createSuper(VarTemplate);
-  _createClass(VarTemplate, null, [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps) {
-      // console.log('执行getDerivedStateFromProps', nextProps)
-      // Should be a controlled component.
-      if ('value' in nextProps) {
-        return _objectSpread({}, nextProps.value || {});
-      }
-      return null;
-    }
-  }]);
   function VarTemplate(props) {
     var _this;
     _classCallCheck(this, VarTemplate);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
+    _this = _callSuper(this, VarTemplate, [props]);
+    _this.handleBlur = function (e) {
       _this.getCurrentCursor();
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
+    };
+    _this.handleFocus = function (e) {
       // console.log('获取焦点')
       // this.$emit('focus', event)
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleInputChange", function (e) {
+    };
+    _this.handleInputChange = function (e) {
       var onChange = _this.props.onChange;
       _this.getCurrentCursor();
       _this.setState({
@@ -59,8 +46,8 @@ var VarTemplate = /*#__PURE__*/function (_Component) {
         wordCount: e.target.value.length
       });
       if (onChange) onChange(e.target.value);
-    });
-    _defineProperty(_assertThisInitialized(_this), "setTagWords", function (key) {
+    };
+    _this.setTagWords = function (key) {
       var onChange = _this.props.onChange;
       var _this$state = _this.state,
         currentContent = _this$state.currentContent,
@@ -78,8 +65,15 @@ var VarTemplate = /*#__PURE__*/function (_Component) {
       setTimeout(function () {
         _this.moveToCursor(); // 重新定位光标
       });
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertContent", function (str, insertStr, start, end) {
+    };
+    /**
+     * 指定位置插入标签占位符字符串，当光标有选中一段字符时，会将直接将其替换
+     * @param {str}       需要做插入的字符串
+     * @param {insertStr} 需要插入的字符串
+     * @param {start}     指定开始位置
+     * @param {end}       指定结束位置
+     * */
+    _this.insertContent = function (str, insertStr, start, end) {
       if (start !== end) {
         var _prevStr = str.substring(0, start);
         var _nextStr = str.substring(end, str.length);
@@ -88,8 +82,13 @@ var VarTemplate = /*#__PURE__*/function (_Component) {
       var prevStr = str.substring(0, start);
       var nextStr = str.substring(start, str.length);
       return prevStr + insertStr + nextStr;
-    });
-    _defineProperty(_assertThisInitialized(_this), "getCurrentCursor", function () {
+    };
+    /**
+     * 获取当前（上一次）光标的位置
+     * @参考 http://blog.csdn.net/chadcao/article/details/6575927
+     * @TODO IE、火狐浏览器下未验证
+     */
+    _this.getCurrentCursor = function () {
       var start = 0;
       var end = 0;
       var oTextarea = _this.content.querySelector('textarea'); // 获取textarea标签
@@ -133,8 +132,13 @@ var VarTemplate = /*#__PURE__*/function (_Component) {
         startNum: start,
         endNum: end
       });
-    });
-    _defineProperty(_assertThisInitialized(_this), "moveToCursor", function () {
+    };
+    /**
+     * 跳转到上一次光标的位置
+     * @参考 http://blog.csdn.net/chadcao/article/details/6575927
+     * @TODO IE、火狐浏览器下未验证
+     */
+    _this.moveToCursor = function () {
       var _this$state2 = _this.state,
         startNum = _this$state2.startNum,
         endNum = _this$state2.endNum;
@@ -173,7 +177,7 @@ var VarTemplate = /*#__PURE__*/function (_Component) {
         oTextarea.selectionStart = startNum;
         oTextarea.selectionEnd = endNum;
       }
-    });
+    };
     var _value = props.value || '';
     _this.state = {
       currentContent: _value,
@@ -183,31 +187,11 @@ var VarTemplate = /*#__PURE__*/function (_Component) {
       // 光标结束位置(当选中文本时)
       wordCount: _value.length // 输入框内的字符数总和（包含占位符所需要的长度）
     };
-
     _this.content = /*#__PURE__*/React.createRef();
     return _this;
   }
-
-  /**
-   * 指定位置插入标签占位符字符串，当光标有选中一段字符时，会将直接将其替换
-   * @param {str}       需要做插入的字符串
-   * @param {insertStr} 需要插入的字符串
-   * @param {start}     指定开始位置
-   * @param {end}       指定结束位置
-   * */
-
-  /**
-   * 获取当前（上一次）光标的位置
-   * @参考 http://blog.csdn.net/chadcao/article/details/6575927
-   * @TODO IE、火狐浏览器下未验证
-   */
-
-  /**
-   * 跳转到上一次光标的位置
-   * @参考 http://blog.csdn.net/chadcao/article/details/6575927
-   * @TODO IE、火狐浏览器下未验证
-   */
-  _createClass(VarTemplate, [{
+  _inherits(VarTemplate, _Component);
+  return _createClass(VarTemplate, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -249,7 +233,16 @@ var VarTemplate = /*#__PURE__*/function (_Component) {
         disabled: disabled
       })));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps) {
+      // console.log('执行getDerivedStateFromProps', nextProps)
+      // Should be a controlled component.
+      if ('value' in nextProps) {
+        return _objectSpread({}, nextProps.value || {});
+      }
+      return null;
+    }
   }]);
-  return VarTemplate;
 }(Component);
 export default VarTemplate;

package/es/ImageGallery/ImagePreview.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './PreviewStyles/ImagePreview.less';
+interface ImagePreviewTypes {
+    open?: boolean;
+    current?: number;
+    hasThumbnail?: boolean;
+    galleryItems?: any[];
+    children?: any;
+    mode?: string;
+    [k: string]: any;
+}
+declare const ImagePreview: (props: ImagePreviewTypes) => React.JSX.Element;
+export default ImagePreview;

package/es/ImageGallery/ImagePreview.js

@@ -0,0 +1,168 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useMemo, useEffect, useState, useCallback, useRef } from 'react';
+import classNames from 'classnames';
+import './PreviewStyles/ImagePreview.less';
+// @ts-ignore
+import ReactHtmlParser from "react-html-parser"; // react16上使用,react18上不能使用否则会报警
+// import HtmlReactParse from 'html-react-parser'; // react18上使用
+import Thumbnail from './Thumbnail';
+import SliderContent from "./SliderContent";
+import { useUniqueId } from './hook/uniqueId';
+var delay = 40;
+var ImagePreview = function ImagePreview(props) {
+  var open = props.open,
+    children = props.children,
+    onClose = props.onClose,
+    current = props.current,
+    hasThumbnail = props.hasThumbnail,
+    mode = props.mode,
+    galleryItems = props.galleryItems;
+  var prefixCls = 'spec-image-preview';
+  var coreId = useUniqueId(prefixCls);
+  var $outer = useRef();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showDelay = _useState2[0],
+    setShowDelay = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    thumbCurrent = _useState4[0],
+    setThumbCurrent = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    thumbSlidePrev = _useState6[0],
+    setThumbSlidePrev = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    thumbSlideNext = _useState8[0],
+    setThumbSlideNext = _useState8[1];
+  var galleryCount = useMemo(function () {
+    if (galleryItems) {
+      return galleryItems.length;
+    }
+    return React.Children.count(children);
+  }, [children, galleryItems]);
+  var onClickClose = function onClickClose() {
+    if (mode !== 'inline') {
+      setShowDelay(false);
+      setTimeout(function () {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      }, 300);
+    }
+  };
+  // 切换上下图片
+  var handleTurning = useCallback(function (key, index) {
+    setThumbSlidePrev(thumbCurrent);
+    var newCurrent = 0;
+    if (key === 'prev') {
+      newCurrent = thumbCurrent === 0 ? galleryCount - 1 : thumbCurrent - 1;
+    }
+    if (key === 'next') {
+      newCurrent = thumbCurrent === galleryCount - 1 ? 0 : thumbCurrent + 1;
+    }
+    if (key === 'number') {
+      newCurrent = index;
+    }
+    setThumbCurrent(newCurrent);
+    setTimeout(function () {
+      setThumbSlideNext(newCurrent);
+    }, 50);
+  }, [galleryCount, thumbCurrent]);
+  // const enableThumbDrag =()=> {
+  //   let thumbDragUtils: ThumbDragUtils = {
+  //     cords: {
+  //       startX: 0,
+  //       endX: 0,
+  //     },
+  //     isMoved: false,
+  //     newTranslateX: 0,
+  //     startTime: new Date(),
+  //     endTime: new Date(),
+  //     touchMoveTime: 0,
+  //   };
+  //   if (thumbOuter.current) {
+  //     thumbOuter.current.classList.add('spec-image-preview-grab')
+  //   }
+  // }
+  useEffect(function () {
+    if (mode === 'inline') {
+      setShowDelay(true);
+    } else {
+      if (open) {
+        setTimeout(function () {
+          setShowDelay(true);
+        }, delay);
+      }
+    }
+    return function () {};
+  }, [open, mode]);
+  useEffect(function () {
+    if (mode === 'inline') {
+      setThumbCurrent(current || 0);
+    } else {
+      if (open) {
+        setThumbCurrent(current || 0);
+      }
+    }
+  }, [open, current, mode]);
+  // const componentClassName = 'spec-image-preview';
+  // const [wrapSSR, hashId] = useStyle(componentClassName);
+  return /*#__PURE__*/React.createElement("div", {
+    id: coreId,
+    className: classNames('spec-image-preview-container', mode === 'inline' ? 'spec-image-preview-inline' : '', mode === 'inline' || open ? 'spec-image-preview-show' : '', showDelay ? 'spec-image-preview-show-in' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('spec-image-preview-backdrop', mode === 'inline' || showDelay ? 'in' : '')
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames('spec-image-preview-outer spec-image-preview-use-css3  spec-image-preview-css3 spec-image-preview-fade spec-image-preview-grab spec-image-preview-animate-thumb', showDelay ? 'spec-image-preview-components-open' : '', showDelay ? 'spec-image-preview-zoom-from-image' : ''),
+    ref: $outer
+  }, /*#__PURE__*/React.createElement(SliderContent, {
+    hasThumbnail: hasThumbnail && galleryCount > 1,
+    thumbCurrent: thumbCurrent,
+    onTurning: handleTurning,
+    thumbSlidePrev: thumbSlidePrev,
+    thumbSlideNext: thumbSlideNext,
+    coreId: coreId,
+    galleryCount: galleryCount,
+    outerRef: $outer,
+    onUpdateTurning: function onUpdateTurning(index) {
+      return handleTurning('number', index);
+    },
+    onClose: onClickClose
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: 'spec-image-preview-toolbar'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'spec-image-preview-counter'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: 'spec-image-preview-counter-current'
+  }, thumbCurrent + 1), " /", /*#__PURE__*/React.createElement("span", {
+    className: 'spec-image-preview-counter-all'
+  }, galleryCount)), mode === 'inline' ? null : /*#__PURE__*/React.createElement("a", {
+    className: 'spec-image-preview-close spec-image-preview-icon',
+    onClick: onClickClose
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames('spec-image-preview-components')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'spec-image-preview-sub-html'
+  }, React.Children.map(children, function (item, index) {
+    if (thumbCurrent === index) {
+      // react16用法
+      return item.props['data-sub-html'] ? ReactHtmlParser(item.props['data-sub-html']) : null;
+      // react18用法
+      // return item.props['data-sub-html'] ? HtmlReactParse(item.props['data-sub-html']) : null
+    }
+    return null;
+  })), hasThumbnail && galleryCount > 1 && /*#__PURE__*/React.createElement(Thumbnail, {
+    galleryCount: galleryCount,
+    thumbCurrent: thumbCurrent,
+    coreId: coreId,
+    onClickThumbItem: function onClickThumbItem(key, index) {
+      return handleTurning(key, index);
+    }
+  }, children))));
+};
+export default ImagePreview;