@kdcloudjs/kdesign 1.0.2

package/es/image/style/index.less

@@ -0,0 +1,222 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@image-prefix-cls: ~'@{kd-prefix}-image';
+@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
+
+.@{image-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: @radius-size;
+
+  &:not(.error):hover {
+    .@{image-prefix-cls}-action {
+      opacity: 1;
+      transform: translateY(0);
+      transition-timing-function: ease-in;
+    }
+  }
+
+  &.error {
+    .@{image-prefix-cls}-img {
+      cursor: auto;
+    }
+  }
+
+  &-img {
+    display: block;
+    width: 100%;
+    height: auto;
+    cursor: pointer;
+  }
+
+  &-action {
+    position: absolute;
+    bottom: 0;
+    height: 28px;
+    width: 100%;
+    text-align: center;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: all 0.2s ease-out;
+    background-color: rgba(0, 0, 0, 0.5);
+
+    > * {
+      color: @white;
+      cursor: pointer;
+      display: inline-block;
+      font-size: @xlarge-font-size;
+
+      &:not(:first-child) {
+        margin-left: 20px;
+      }
+    }
+  }
+}
+
+.@{image-preview-prefix-cls} {
+  z-index: @zIndex-masker;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transform: scale(0.15);
+  visibility: hidden;
+  transition: all calc(@transition-duration - 0.1s) @ease-in;
+  -webkit-overflow-scrolling: touch;
+
+  &.show {
+    opacity: 1;
+    transform: scale(1);
+    visibility: visible;
+    transition: all calc(@transition-duration - 0.1s) @ease-out;
+  }
+
+  &-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &-close {
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    width: 18px;
+    height: 18px;
+    font-size: 22px;
+    color: @secondary-text-color;
+    cursor: pointer;
+    background-color: @white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+
+    &:hover,
+    &:active {
+      color: @theme-color;
+    }
+  }
+
+  &-wrap {
+    position: absolute;
+    top: 68px;
+    right: 0;
+    bottom: 30px;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+  }
+
+  &-img {
+    max-width: 100%;
+    max-height: 100%;
+    cursor: grab;
+  }
+
+  &-action {
+    position: absolute;
+    left: 50%;
+    bottom: 40px;
+    width: 270px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    transform: translateX(-50%);
+
+    i {
+      color: @white;
+      font-size: 26px;
+      cursor: pointer;
+
+      &:hover,
+      &:active {
+        opacity: 0.65;
+      }
+
+      &:not(:first-child) {
+        margin-left: 20px;
+      }
+
+      &.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-previous,
+  &-next {
+    position: absolute;
+    top: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: @white;
+    background-color: rgba(0, 0, 0, 0.6);
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+
+  &-previous {
+    left: 60px;
+  }
+
+  &-next {
+    right: 60px;
+  }
+
+  &-topbar {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 40px;
+    color: @white;
+    line-height: 40px;
+    background-color: rgba(0, 0, 0, 0.9);
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
+
+    &-info {
+      position: absolute;
+      left: 40px;
+
+      &-size {
+        padding-left: 12px;
+        opacity: 0.65;
+      }
+    }
+
+    &-action {
+      position: absolute;
+      right: 40px;
+
+      > * {
+        display: inline-block;
+        margin-left: 20px;
+        cursor: pointer;
+
+        i {
+          margin-right: 2px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}

package/es/image-cropper/cropper.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export declare type CropperInstance = {
+    getImage: () => Promise<File | null | undefined>;
+    reset: () => void;
+    rotate: () => void;
+    zoom: (num: number) => void;
+    replace: (src: string) => void;
+};
+export declare const DragModeTypes: ["crop", "move", "none"];
+export declare type DragModeType = typeof DragModeTypes[number];
+export declare type ViewModeType = 0 | 1 | 2 | 3;
+export interface CropperProps {
+    className?: string;
+    imgSrc?: string;
+    ref?: React.RefObject<CropperInstance | null>;
+    dragMode?: DragModeType;
+    viewMode?: ViewModeType;
+    aspectRatio?: number;
+    modal?: boolean;
+    zoomOnWheel?: boolean;
+    cropBoxMovable?: boolean;
+    onCropSuccess?: () => void;
+}
+declare const Cropper: React.ForwardRefExoticComponent<Pick<CropperProps, "className" | "modal" | "imgSrc" | "dragMode" | "viewMode" | "aspectRatio" | "zoomOnWheel" | "cropBoxMovable" | "onCropSuccess"> & React.RefAttributes<CropperInstance | null>>;
+export default Cropper;

package/es/image-cropper/cropper.js

@@ -0,0 +1,122 @@
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useMemo } from 'react';
+import CropperJS from 'cropperjs';
+import { tuple } from '../_utils/type'; // crop 形成新的裁剪框
+// move 图片可移动
+// none 都不能移动
+
+export var DragModeTypes = tuple('crop', 'move', 'none');
+var Cropper = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var containerRef = useRef(null);
+  var imgRef = useRef(null);
+  var cropperRef = useRef(null);
+  useImperativeHandle(forwardedRef, function () {
+    return {
+      getImage: getImage,
+      reset: reset,
+      rotate: rotate,
+      zoom: zoom,
+      replace: replace,
+      cropper: cropperRef
+    };
+  });
+  var className = props.className,
+      _props$imgSrc = props.imgSrc,
+      imgSrc = _props$imgSrc === void 0 ? '' : _props$imgSrc,
+      dragMode = props.dragMode,
+      viewMode = props.viewMode,
+      aspectRatio = props.aspectRatio,
+      _props$modal = props.modal,
+      modal = _props$modal === void 0 ? true : _props$modal,
+      _props$zoomOnWheel = props.zoomOnWheel,
+      zoomOnWheel = _props$zoomOnWheel === void 0 ? true : _props$zoomOnWheel,
+      _props$cropBoxMovable = props.cropBoxMovable,
+      cropBoxMovable = _props$cropBoxMovable === void 0 ? true : _props$cropBoxMovable;
+  var options = useMemo(function () {
+    return {
+      aspectRatio: aspectRatio,
+      viewMode: viewMode,
+      responsive: false,
+      restore: false,
+      zoomOnWheel: zoomOnWheel,
+      dragMode: dragMode,
+      cropBoxMovable: cropBoxMovable,
+      modal: modal,
+      autoCropArea: 0.5
+    };
+  }, [aspectRatio, viewMode, zoomOnWheel, dragMode, modal, cropBoxMovable]);
+  useEffect(function () {
+    if (!imgRef.current) return;
+    if (!imgSrc) return;
+
+    if (cropperRef.current) {
+      cropperRef.current.destroy();
+    }
+
+    imgRef.current.onload = function () {
+      var img = imgRef.current;
+      cropperRef.current = new CropperJS(img, options);
+    };
+
+    return function () {
+      if (cropperRef.current) {
+        cropperRef.current.destroy();
+      }
+    };
+  }, [imgSrc, options]);
+  useEffect(function () {
+    return function () {
+      if (cropperRef.current) {
+        cropperRef.current.destroy();
+      }
+    };
+  }, []);
+
+  var getImage = function getImage() {
+    return new _Promise(function (resolve) {
+      if (!cropperRef.current) return resolve(null);
+      cropperRef.current.getCroppedCanvas().toBlob(function (blob) {
+        var _context;
+
+        if (!blob) return resolve(null);
+        resolve(new File([blob], "".concat(_sliceInstanceProperty(_context = Math.random().toString(36)).call(_context, -8), ".png"), {
+          type: blob.type
+        }));
+      });
+    });
+  };
+
+  var reset = function reset() {
+    if (!cropperRef.current) return;
+    cropperRef.current.reset();
+  };
+
+  var rotate = function rotate() {
+    if (!cropperRef.current) return;
+    cropperRef.current.rotate(-90);
+  };
+
+  var zoom = function zoom(num) {
+    if (!cropperRef.current) return;
+    cropperRef.current.zoom(num);
+  };
+
+  var replace = function replace(src) {
+    if (!cropperRef.current) return;
+    cropperRef.current.replace(src);
+  };
+
+  var imgStyle = {
+    display: 'none'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("img", {
+    ref: imgRef,
+    style: imgStyle,
+    src: imgSrc
+  }));
+});
+export default Cropper;

package/es/image-cropper/image-cropper.d.ts

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+import { DragModeType, ViewModeType } from './cropper';
+interface customComponentsProps {
+    (dom: any, key: number | string): ReactNode;
+}
+declare type CSSSelector = string;
+export interface ImageCropperProps {
+    containerWidth?: number;
+    containerHeight?: number;
+    image?: string;
+    title?: string;
+    visible?: boolean;
+    dragMode?: DragModeType;
+    viewMode?: ViewModeType;
+    aspectRatio?: number;
+    modal?: boolean;
+    zoomOnWheel?: boolean;
+    imageMaxSize?: number;
+    okText?: string;
+    okBtn?: ReactNode;
+    getContainer?: HTMLElement | (() => HTMLElement | CSSSelector | null | false) | null | false;
+    mask?: boolean;
+    children?: ReactNode;
+    customComponents?: customComponentsProps;
+    showDeaultToolbar?: boolean;
+    cropBoxMovable?: boolean;
+    onClose?: () => void;
+    onCropSuccess?: (file: File) => void;
+    onCropFailed?: () => void;
+}
+declare const ImageCropper: React.ForwardRefExoticComponent<ImageCropperProps & React.RefAttributes<unknown>>;
+export default ImageCropper;

package/es/image-cropper/image-cropper.js

@@ -0,0 +1,189 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = _Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React, { useRef, forwardRef, useState, useEffect } from 'react';
+import Modal from '../modal';
+import { getCompProps } from '../_utils';
+import ConfigContext from '../config-provider/ConfigContext';
+import Cropper from './cropper';
+import OperationBar from './operation-bar';
+import classNames from 'classnames';
+
+var InternalImageCropper = function InternalImageCropper(props, forwardedRef) {
+  var _useState = useState(props.image || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      cropperSrc = _useState2[0],
+      setCropperSrc = _useState2[1];
+
+  var innerRef = useRef(null);
+  var cropperRef = forwardedRef || innerRef;
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps;
+
+  var _a = getCompProps('ImageCropper', userDefaultProps, props),
+      customPrefixcls = _a.prefixCls,
+      containerWidth = _a.containerWidth,
+      containerHeight = _a.containerHeight,
+      title = _a.title,
+      visible = _a.visible,
+      onClose = _a.onClose,
+      onCropSuccess = _a.onCropSuccess,
+      onCropFailed = _a.onCropFailed,
+      dragMode = _a.dragMode,
+      viewMode = _a.viewMode,
+      aspectRatio = _a.aspectRatio,
+      modal = _a.modal,
+      okText = _a.okText,
+      okBtn = _a.okBtn,
+      _a$image = _a.image,
+      image = _a$image === void 0 ? '' : _a$image,
+      zoomOnWheel = _a.zoomOnWheel,
+      imageMaxSize = _a.imageMaxSize,
+      cropBoxMovable = _a.cropBoxMovable,
+      customComponents = _a.customComponents,
+      showDeaultToolbar = _a.showDeaultToolbar,
+      restProps = __rest(_a, ["prefixCls", "containerWidth", "containerHeight", "title", "visible", "onClose", "onCropSuccess", "onCropFailed", "dragMode", "viewMode", "aspectRatio", "modal", "okText", "okBtn", "image", "zoomOnWheel", "imageMaxSize", "cropBoxMovable", "customComponents", "showDeaultToolbar"]);
+
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'image-cropper', customPrefixcls);
+
+  var handleOkClick = function handleOkClick() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var imgFile;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return cropperRef.current.getImage();
+
+            case 2:
+              imgFile = _context.sent;
+              imgFile ? onCropSuccess === null || onCropSuccess === void 0 ? void 0 : onCropSuccess(imgFile) : onCropFailed === null || onCropFailed === void 0 ? void 0 : onCropFailed(imgFile);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  };
+
+  var handleRotate = function handleRotate() {
+    var _a;
+
+    (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.rotate();
+  };
+
+  var handleRevert = function handleRevert() {
+    var _a;
+
+    (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+  };
+
+  var handleZoom = function handleZoom(num) {
+    var _a;
+
+    (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.zoom(num);
+  };
+
+  var handleReplace = function handleReplace(src) {
+    setCropperSrc(src);
+  };
+
+  useEffect(function () {
+    setCropperSrc(image);
+  }, [image]);
+  var CropperNode = /*#__PURE__*/React.createElement(Cropper, {
+    className: "".concat(prefixCls, "-container"),
+    dragMode: dragMode,
+    viewMode: viewMode,
+    aspectRatio: aspectRatio,
+    modal: modal,
+    zoomOnWheel: zoomOnWheel,
+    cropBoxMovable: cropBoxMovable,
+    imgSrc: cropperSrc,
+    ref: cropperRef
+  });
+  var OperationBarNode = /*#__PURE__*/React.createElement(OperationBar, {
+    className: "".concat(prefixCls, "-bar-container"),
+    btnClassName: "".concat(prefixCls, "-btn-container"),
+    imageMaxSize: imageMaxSize,
+    onClick: handleOkClick,
+    onRotate: handleRotate,
+    onRevert: handleRevert,
+    onZoom: handleZoom,
+    onReplace: handleReplace,
+    okText: okText,
+    okBtn: okBtn,
+    customComponents: customComponents,
+    getCropper: cropperRef,
+    showDeaultToolbar: showDeaultToolbar
+  });
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    className: classNames("".concat(prefixCls, "-modal-container")),
+    bodyClassName: classNames("".concat(prefixCls, "-modal-body-container")),
+    width: containerWidth,
+    height: containerHeight,
+    body: CropperNode,
+    footer: OperationBarNode,
+    visible: visible,
+    title: title,
+    onCancel: onClose
+  }, restProps));
+};
+
+var ImageCropper = /*#__PURE__*/forwardRef(InternalImageCropper);
+ImageCropper.displayName = 'ImageCropper';
+export default ImageCropper;

package/es/image-cropper/index.d.ts

@@ -0,0 +1,2 @@
+import ImageCropper from './image-cropper';
+export default ImageCropper;

package/es/image-cropper/index.js

@@ -0,0 +1,2 @@
+import ImageCropper from './image-cropper';
+export default ImageCropper;

package/es/image-cropper/operation-bar.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+export interface OperationBarProps {
+    className?: string;
+    btnClassName?: string;
+    customComponents?: Array<React.FC>;
+    imageMaxSize?: number;
+    okText?: string;
+    okBtn?: ReactNode;
+    getCropper?: any;
+    showDeaultToolbar?: boolean;
+    onClick?: () => void;
+    onRevert?: () => void;
+    onRotate?: () => void;
+    onZoom?: (num: number) => void;
+    onReplace?: (src: string) => void;
+}
+declare const OperationBar: React.FC<OperationBarProps>;
+export default OperationBar;