@zhangmmm/ming-ui/dist/index.esm.js

基于 react 的组件库

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import React from 'react';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import { createPortal } from 'react-dom';
import classNames from 'classnames';
import { CloseCircleOutlined, ZoomInOutlined, ZoomOutOutlined, ExpandOutlined, CompressOutlined, RotateLeftOutlined, RotateRightOutlined } from '@ant-design/icons';

var ConfigContext = React.createContext({
  getPrefixCls: function getPrefixCls(suffixCls, customizePrefixCls) {
    if (customizePrefixCls) return customizePrefixCls;
    return "ming-".concat(suffixCls);
  }
});
var ConfigConsumer = ConfigContext.Consumer;

var SizeContext = React.createContext(undefined);
var SizeContextProvider = function SizeContextProvider(_ref) {
  var children = _ref.children,
      size = _ref.size;
  return React.createElement(SizeContext.Consumer, null, function (originSize) {
    return React.createElement(SizeContext.Provider, {
      value: size || originSize
    }, children);
  });
};

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var ConfigProvider = /*#__PURE__*/function (_React$Component) {
  _inherits(ConfigProvider, _React$Component);

  function ConfigProvider() {
    var _this;

    _classCallCheck(this, ConfigProvider);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ConfigProvider).apply(this, arguments));

    _this.getPrefixCls = function (suffixCls, customizePrefixCls) {
      var _this$props$prefixCls = _this.props.prefixCls,
          prefixCls = _this$props$prefixCls === void 0 ? 'ming' : _this$props$prefixCls;
      if (customizePrefixCls) return customizePrefixCls;
      return suffixCls ? "".concat(prefixCls, "-").concat(suffixCls) : prefixCls;
    };

    _this.renderProvider = function (context) {
      var _this$props = _this.props,
          componentSize = _this$props.componentSize,
          children = _this$props.children;

      var config = _objectSpread({}, context, {
        getPrefixCls: _this.getPrefixCls
      });

      return React.createElement(SizeContextProvider, {
        size: componentSize
      }, React.createElement(ConfigContext.Provider, {
        value: config
      }, children));
    };

    return _this;
  }

  _createClass(ConfigProvider, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      return React.createElement(ConfigConsumer, null, function (context) {
        return _this2.renderProvider(context);
      });
    }
  }]);

  return ConfigProvider;
}(React.Component);

var Mode = {
  CONTAIN: {
    name: 'contain',
    icon: 'el-icon-full-screen'
  },
  ORIGINAL: {
    name: 'original',
    icon: 'el-icon-c-scale-to-original'
  }
};

var Preview = /*#__PURE__*/function (_React$Component) {
  _inherits(Preview, _React$Component);

  function Preview(props) {
    var _this;

    _classCallCheck(this, Preview);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Preview).call(this, props));

    _this.toggleMode = function (isContain) {
      _this.reset();

      _this.setState({
        mode: isContain ? Mode.ORIGINAL : Mode.CONTAIN
      });
    };

    _this.reset = function () {
      _this.setState({
        mode: Mode.CONTAIN,
        transform: {
          scale: 1,
          deg: 0
        }
      });
    };

    _this.handleActions = function (type) {
      var _this$state$transform = _this.state.transform,
          scale = _this$state$transform.scale,
          deg = _this$state$transform.deg;
      var ZOOM_RARE = 0.2;
      var ROTATE_DEG = 90;

      switch (type) {
        case 'zoomIn':
          scale = parseFloat((scale + ZOOM_RARE).toFixed(3));
          break;

        case 'zoomOut':
          if (scale > 0.2) scale = parseFloat((scale - ZOOM_RARE).toFixed(3));
          break;

        case 'turnLeft':
          deg -= ROTATE_DEG;
          break;

        case 'turnRight':
          deg += ROTATE_DEG;
          break;
      }

      _this.setState({
        transform: {
          scale: scale,
          deg: deg
        }
      });
    };

    _this.handleClose = function () {
      _this.props.changePreviewState(false);

      _this.reset();
    };

    _this.state = {
      mode: Mode.CONTAIN,
      transform: {
        scale: 1,
        deg: 0
      }
    };
    return _this;
  }

  _createClass(Preview, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var getPrefixCls = this.context.getPrefixCls;
      var _this$props = this.props,
          src = _this$props.src,
          show = _this$props.show,
          zIndex = _this$props.zIndex;
      var _this$state = this.state,
          mode = _this$state.mode,
          transform = _this$state.transform;
      var body = document.getElementsByTagName('body')[0];
      var isContain = mode === Mode.CONTAIN;
      var imgCls = getPrefixCls('image-preview-img');
      return createPortal(React.createElement("div", {
        className: getPrefixCls('image-preview'),
        style: {
          display: show ? 'block' : 'none',
          zIndex: zIndex
        }
      }, React.createElement("div", {
        className: getPrefixCls('image-preview-mask')
      }), React.createElement(CloseCircleOutlined, {
        className: getPrefixCls('image-preview-close'),
        onClick: this.handleClose
      }), React.createElement("div", {
        className: getPrefixCls('image-preview-viewer')
      }, React.createElement("img", {
        src: src,
        className: classNames(imgCls, _defineProperty({}, "".concat(imgCls, "-").concat(mode.name), mode.name)),
        style: {
          transform: "scale(".concat(transform.scale, ") rotate(").concat(transform.deg, "deg)")
        },
        alt: ""
      })), React.createElement("div", {
        className: getPrefixCls('image-preview-actions')
      }, React.createElement(ZoomInOutlined, {
        onClick: function onClick() {
          return _this2.handleActions('zoomIn');
        }
      }), React.createElement(ZoomOutOutlined, {
        onClick: function onClick() {
          return _this2.handleActions('zoomOut');
        }
      }), isContain ? React.createElement(ExpandOutlined, {
        onClick: function onClick() {
          _this2.toggleMode(isContain);
        }
      }) : React.createElement(CompressOutlined, {
        onClick: function onClick() {
          _this2.toggleMode(isContain);
        }
      }), React.createElement(RotateLeftOutlined, {
        onClick: function onClick() {
          return _this2.handleActions('turnLeft');
        }
      }), React.createElement(RotateRightOutlined, {
        onClick: function onClick() {
          return _this2.handleActions('turnRight');
        }
      }))), body);
    }
  }]);

  return Preview;
}(React.Component);

Preview.contextType = ConfigContext;

var Img = /*#__PURE__*/function (_React$Component) {
  _inherits(Img, _React$Component);

  function Img(props) {
    var _this;

    _classCallCheck(this, Img);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Img).call(this, props));

    _this.handleLoad = function (e, img) {
      _this.setState({
        loading: false,
        imageWidth: img.width,
        imageHeight: img.height
      });
    };

    _this.handleError = function () {
      _this.setState({
        isError: true,
        loading: false
      });
    }; // check validity of image url before showing


    _this.loadImage = function () {
      var img = new Image();

      img.onload = function (e) {
        return _this.handleLoad(e, img);
      };

      img.onerror = function () {
        return _this.handleError();
      };

      img.src = _this.props.src;
    };

    _this.changePreviewState = function (state) {
      // lock screen when previewing
      document.documentElement.style.overflow = state ? 'hidden' : 'auto';

      _this.setState({
        isPreview: state
      });
    };

    _this.handlePreview = function () {
      return _this.changePreviewState(true);
    };

    _this.renderImage = function (_ref) {
      var getPrefixCls = _ref.getPrefixCls;

      var _this$props = _this.props,
          src = _this$props.src,
          alt = _this$props.alt,
          _this$props$fit = _this$props.fit,
          fit = _this$props$fit === void 0 ? 'fill' : _this$props$fit,
          _this$props$preview = _this$props.preview,
          preview = _this$props$preview === void 0 ? false : _this$props$preview,
          _this$props$zIndex = _this$props.zIndex,
          zIndex = _this$props$zIndex === void 0 ? 2000 : _this$props$zIndex,
          _this$props$placehold = _this$props.placeholder,
          placeholder = _this$props$placehold === void 0 ? '加载中...' : _this$props$placehold,
          _this$props$error = _this$props.error,
          error = _this$props$error === void 0 ? '加载失败' : _this$props$error,
          rest = _objectWithoutProperties(_this$props, ["src", "alt", "fit", "preview", "zIndex", "placeholder", "error"]);

      var _this$state = _this.state,
          loading = _this$state.loading,
          isError = _this$state.isError,
          isPreview = _this$state.isPreview;
      var canPreview = preview === true;
      var imageStyle = {
        objectFit: fit,
        cursor: canPreview ? 'pointer' : 'default'
      };
      return React.createElement("div", Object.assign({
        className: getPrefixCls('image')
      }, rest), loading && React.createElement("div", {
        className: getPrefixCls('image-placeholder')
      }, placeholder), isError && React.createElement("div", {
        className: getPrefixCls('image-error')
      }, error), !loading && !isError && React.createElement("img", {
        src: src,
        className: getPrefixCls('image-inner'),
        style: imageStyle,
        alt: alt,
        onClick: _this.handlePreview
      }), canPreview && React.createElement(Preview, {
        src: src,
        show: isPreview,
        zIndex: zIndex,
        changePreviewState: _this.changePreviewState
      }));
    };

    _this.state = {
      isError: false,
      loading: true,
      imageWidth: 0,
      imageHeight: 0,
      isPreview: false
    };
    return _this;
  }

  _createClass(Img, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.loadImage();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      // remove document style before unmounting
      document.documentElement.style.overflow = '';
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(ConfigConsumer, null, this.renderImage);
    }
  }]);

  return Img;
}(React.Component);

export { ConfigProvider, Img as Image };