@kdcloudjs/kdesign 1.0.2

package/lib/image/image.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../_utils");
+
+var _configProvider = require("../config-provider");
+
+var _preview = _interopRequireDefault(require("./preview"));
+
+var _previewGroup = _interopRequireDefault(require("./preview-group"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ImageInternal = function ImageInternal(props, ref) {
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps; // 属性需要合并一遍用户定义的默认属性
+
+
+  var allProps = (0, _utils.getCompProps)('Image', userDefaultProps, props);
+  var innerRef = React.useRef();
+  var previewRef = ref || innerRef;
+  var id = allProps.id,
+      alt = allProps.alt,
+      name = allProps.name,
+      size = allProps.size,
+      width = allProps.width,
+      height = allProps.height,
+      preview = allProps.preview,
+      fallback = allProps.fallback,
+      operations = allProps.operations,
+      _allProps$placeholder = allProps.placeholder,
+      placeholder = _allProps$placeholder === void 0 ? '' : _allProps$placeholder,
+      customPrefixcls = allProps.prefixCls; // className前缀
+
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'image', customPrefixcls);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      exit = _React$useState2[0],
+      setExit = _React$useState2[1];
+
+  React.useEffect(function () {
+    if (exit) setVisible(true);
+  }, [exit]);
+
+  var _React$useState3 = React.useState(placeholder),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      src = _React$useState4[0],
+      setSrc = _React$useState4[1];
+
+  var _React$useState5 = React.useState(true),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      error = _React$useState6[0],
+      setError = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      visible = _React$useState8[0],
+      setVisible = _React$useState8[1];
+
+  var _React$useState9 = React.useState(''),
+      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+      transformOrigin = _React$useState10[0],
+      setTransformOrigin = _React$useState10[1];
+
+  React.useEffect(function () {
+    placeholder && setSrc(placeholder);
+    var img = new window.Image();
+    img.src = props.src;
+
+    img.onload = function () {
+      setError(false);
+      setSrc(props.src);
+    };
+
+    img.onerror = function () {
+      setError(true);
+      setSrc(fallback || props.src);
+    };
+  }, [props.src, fallback, placeholder]);
+  var imgProps = {
+    id: id,
+    src: src,
+    alt: alt,
+    style: {
+      height: height
+    },
+    className: "".concat(prefixCls, "-img")
+  };
+
+  if (!error) {
+    imgProps.onClick = function (e) {
+      preview && (exit ? setVisible(true) : setExit(true));
+      props.onClick && props.onClick(e);
+    };
+  }
+
+  var calcTransformOrigin = function calcTransformOrigin(element) {
+    var _context;
+
+    var transformOriginX = element.getBoundingClientRect().x + element.getBoundingClientRect().width / 2;
+    var transformOriginY = element.getBoundingClientRect().y + element.getBoundingClientRect().height / 2;
+    setTransformOrigin((0, _concat.default)(_context = "".concat(transformOriginX, "px ")).call(_context, transformOriginY, "px"));
+  };
+
+  React.useEffect(function () {
+    previewRef.current && calcTransformOrigin(previewRef.current);
+  });
+
+  var onClose = function onClose() {
+    return setVisible(false);
+  };
+
+  var previewProps = {
+    alt: alt,
+    name: name,
+    size: size,
+    visible: visible,
+    src: props.src,
+    type: props.previewType,
+    style: (0, _extends2.default)((0, _extends2.default)({}, props.previewStyle), {
+      transformOrigin: transformOrigin
+    }),
+    className: props.previewClassName,
+    operations: props.previewOperations,
+    onClose: onClose
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(prefixCls, props.className, {
+      error: error
+    }),
+    style: (0, _extends2.default)({
+      width: width,
+      height: height
+    }, props.style)
+  }, /*#__PURE__*/React.createElement("img", (0, _extends2.default)({}, imgProps, {
+    ref: previewRef
+  })), (operations === null || operations === void 0 ? void 0 : operations.length) > 0 && !error && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-action")
+  }, operations), preview && exit && /*#__PURE__*/React.createElement(_preview.default, (0, _extends2.default)({}, previewProps)));
+};
+
+var Image = /*#__PURE__*/React.forwardRef(ImageInternal);
+var ImageOuter = Image;
+ImageOuter.Preview = _preview.default;
+ImageOuter.PreviewGroup = _previewGroup.default;
+ImageOuter.displayName = 'Image';
+var _default = ImageOuter;
+exports.default = _default;

package/lib/image/index.d.ts

@@ -0,0 +1,3 @@
+import Image from './image';
+export * from './image';
+export default Image;

package/lib/image/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _image = _interopRequireWildcard(require("./image"));
+
+_Object$keys(_image).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _image[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _image[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _image.default;
+exports.default = _default;

package/lib/image/preview-group.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PreviewType } from './preview';
+export interface PreviewGroupProps {
+    children?: Array<React.ReactElement> | React.ReactElement;
+    className?: string;
+    previewType?: PreviewType;
+    style?: React.CSSProperties;
+    operations?: Array<React.ReactNode>;
+}
+declare const PreviewGroup: React.FC<PreviewGroupProps>;
+export default PreviewGroup;

package/lib/image/preview-group.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _preview = _interopRequireDefault(require("./preview"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var PreviewGroup = function PreviewGroup(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      style = _ref.style,
+      previewType = _ref.previewType,
+      operations = _ref.operations;
+  var images = React.useMemo(function () {
+    var _context;
+
+    return React.Children.count(children) > 1 ? (0, _map.default)(_context = (0, _filter.default)(children).call(children, function (image) {
+      return image.props.src;
+    })).call(_context, function (image) {
+      return image.props;
+    }) : [children ? children.props : {}];
+  }, [children]); // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  var refs = (0, _map.default)(images).call(images, function () {
+    return React.useRef();
+  });
+
+  var _React$useState = React.useState(images[0]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      image = _React$useState2[0],
+      setImage = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      current = _React$useState4[0],
+      setCurrent = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      exit = _React$useState6[0],
+      setExit = _React$useState6[1];
+
+  React.useEffect(function () {
+    exit && setVisible(true);
+  }, [exit]);
+  React.useEffect(function () {
+    setImage(images[current]);
+  }, [current, images]);
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      visible = _React$useState8[0],
+      setVisible = _React$useState8[1];
+
+  var _React$useState9 = React.useState(''),
+      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+      transformOrigin = _React$useState10[0],
+      setTransformOrigin = _React$useState10[1];
+
+  var calcTransformOrigin = function calcTransformOrigin(element) {
+    var _context2;
+
+    var transformOriginX = element && element.getBoundingClientRect().x + element.getBoundingClientRect().width / 2;
+    var transformOriginY = element && element.getBoundingClientRect().y + element.getBoundingClientRect().height / 2;
+    setTransformOrigin((0, _concat.default)(_context2 = "".concat(transformOriginX, "px ")).call(_context2, transformOriginY, "px"));
+  };
+
+  var onPreview = function onPreview(index) {
+    setCurrent(index);
+    calcTransformOrigin(refs[index].current);
+    exit ? setVisible(true) : setExit(true);
+  };
+
+  var onClose = function onClose() {
+    return setVisible(false);
+  };
+
+  var onNext = function onNext() {
+    return current < images.length - 1 && setCurrent(current + 1);
+  };
+
+  var onPrevious = function onPrevious() {
+    return current > 0 && setCurrent(current - 1);
+  };
+
+  var alt = image.alt,
+      src = image.src,
+      previewStyle = image.previewStyle,
+      previewClassName = image.previewClassName,
+      previewOperations = image.previewOperations;
+  var previewProps = {
+    alt: alt,
+    src: src,
+    visible: visible,
+    current: current,
+    type: previewType,
+    length: images.length,
+    style: (0, _extends2.default)((0, _extends2.default)({}, previewStyle || style), {
+      transformOrigin: transformOrigin
+    }),
+    className: previewClassName || className,
+    operations: previewOperations || operations,
+    onNext: onNext,
+    onClose: onClose,
+    onPrevious: onPrevious
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, images.length > 1 ? (0, _map.default)(children).call(children, function (image, index) {
+    return /*#__PURE__*/React.cloneElement(image, {
+      key: image.key || index,
+      preview: false,
+      ref: refs[index],
+      onClick: onPreview.bind(null, index)
+    });
+  }) : children, exit && /*#__PURE__*/React.createElement(_preview.default, (0, _extends2.default)({}, previewProps)));
+};
+
+var _default = PreviewGroup;
+exports.default = _default;

package/lib/image/preview.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export declare type PreviewType = 'default' | 'upload';
+export interface PreviewProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: string;
+    visible: boolean;
+    type?: PreviewType;
+    className?: string;
+    style?: React.CSSProperties;
+    operations?: Array<React.ReactNode>;
+    onNext?: (e: React.MouseEvent<HTMLElement>) => void;
+    onPrevious?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (e: React.SyntheticEvent<Element>) => void;
+    icons?: {
+        rotate?: React.ReactNode;
+        download?: React.ReactNode;
+        zoomIn?: React.ReactNode;
+        zoomOut?: React.ReactNode;
+        close?: React.ReactNode;
+        left?: React.ReactNode;
+        right?: React.ReactNode;
+    };
+}
+declare const Preview: React.FC<PreviewProps>;
+export default Preview;

package/lib/image/preview.js

@@ -0,0 +1,210 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../_utils");
+
+var _configProvider = require("../config-provider");
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+var _reactDraggable = _interopRequireDefault(require("react-draggable"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Preview = function Preview(props) {
+  var _context;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps; // 属性需要合并一遍用户定义的默认属性
+
+
+  var allProps = (0, _utils.getCompProps)('Image', userDefaultProps, props);
+  var src = allProps.src,
+      alt = allProps.alt,
+      name = allProps.name,
+      size = allProps.size,
+      visible = allProps.visible,
+      onClose = allProps.onClose,
+      current = allProps.current,
+      length = allProps.length,
+      operations = allProps.operations,
+      customPrefixcls = allProps.prefixCls; // className前缀
+
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'image', customPrefixcls);
+
+  var _React$useState = React.useState(visible),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      show = _React$useState2[0],
+      setShow = _React$useState2[1];
+
+  React.useEffect(function () {
+    setShow(visible);
+    visible && setPreviewSrc(src);
+  }, [visible, src]);
+
+  var _React$useState3 = React.useState(src),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      previewSrc = _React$useState4[0],
+      setPreviewSrc = _React$useState4[1];
+
+  var _React$useState5 = React.useState(1),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      scale = _React$useState6[0],
+      setScale = _React$useState6[1];
+
+  React.useEffect(function () {
+    if (show) {
+      document.body.style.overflow = 'hidden';
+      var throMouseWheel = (0, _throttle.default)(function (e) {
+        if (e.wheelDelta > 0) {
+          setScale(scale + 0.1);
+        } else if (e.wheelDelta < 0) {
+          if (scale > 1) setScale(scale - 0.1);
+        }
+      }, 200);
+      document.addEventListener('mousewheel', throMouseWheel);
+      return function () {
+        document.removeEventListener('mousewheel', throMouseWheel);
+      };
+    } else {
+      document.body.style.overflow = '';
+      setScale(1);
+    }
+  }, [show, scale]);
+
+  var handleZoomOut = function handleZoomOut() {
+    var newScale = scale - 1;
+    setScale(Math.max(newScale, 1));
+  };
+
+  var handleZoomIn = function handleZoomIn() {
+    setScale(scale + 1);
+  };
+
+  var previewImgProps = {
+    alt: alt,
+    src: previewSrc,
+    draggable: 'false',
+    className: "".concat(prefixCls, "-preview-img"),
+    style: {
+      transform: (0, _concat.default)(_context = "scale3d(".concat(scale, ", ")).call(_context, scale, ", 1)")
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  };
+  var peviewContainer = /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-preview"), props.className, {
+      show: show
+    }),
+    style: (0, _extends2.default)({}, props.style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-preview-mask"),
+    onClick: onClose
+  }), /*#__PURE__*/React.createElement(_reactDraggable.default, {
+    defaultClassName: "".concat(prefixCls, "-preview-wrap"),
+    position: {
+      x: 0,
+      y: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement("img", (0, _extends2.default)({}, previewImgProps)))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-preview-action")
+  }, props.type !== 'upload' && length && /*#__PURE__*/React.createElement(_icon.default, {
+    type: "arrow-left",
+    className: (0, _classnames.default)({
+      disabled: current <= 0
+    }),
+    onClick: props.onPrevious
+  }), /*#__PURE__*/React.createElement(_icon.default, {
+    type: "shrink",
+    className: (0, _classnames.default)({
+      disabled: scale <= 1
+    }),
+    onClick: handleZoomOut
+  }), /*#__PURE__*/React.createElement(_icon.default, {
+    type: "zoom",
+    onClick: handleZoomIn
+  }), props.type !== 'upload' && operations, props.type !== 'upload' && length && /*#__PURE__*/React.createElement(_icon.default, {
+    type: "arrow-right",
+    className: (0, _classnames.default)({
+      disabled: current >= length - 1
+    }),
+    onClick: props.onNext
+  })), props.type === 'upload' && length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-preview-previous")
+  }, /*#__PURE__*/React.createElement(_icon.default, {
+    type: "arrow-left",
+    style: {
+      fontSize: 20
+    },
+    className: (0, _classnames.default)({
+      disabled: current <= 0
+    }),
+    onClick: props.onPrevious
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-preview-next")
+  }, /*#__PURE__*/React.createElement(_icon.default, {
+    type: "arrow-right",
+    style: {
+      fontSize: 20
+    },
+    className: (0, _classnames.default)({
+      disabled: current >= length - 1
+    }),
+    onClick: props.onNext
+  }))), props.type !== 'upload' && /*#__PURE__*/React.createElement(_icon.default, {
+    className: "".concat(prefixCls, "-preview-close"),
+    type: "close-solid",
+    onClick: onClose
+  }), props.type === 'upload' && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-preview-topbar")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-preview-topbar-info")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-preview-topbar-info-name")
+  }, name), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-preview-topbar-info-size")
+  }, size)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-preview-topbar-action")
+  }, operations, /*#__PURE__*/React.createElement("span", {
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(_icon.default, {
+    type: "close"
+  }), "\u5173\u95ED"))));
+  return /*#__PURE__*/_reactDom.default.createPortal(peviewContainer, document.body);
+};
+
+var _default = Preview;
+exports.default = _default;

package/lib/image/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/index.css");
+
+require("./index.css");