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

基于 react 的组件库

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var ReactDOM = require('react-dom');
var classNames = _interopDefault(require('classnames'));
var icons = require('@ant-design/icons');

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, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

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 _objectSpread2(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;
}

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
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

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);
  });
};

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 = _objectSpread2({}, 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 ReactDOM.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(icons.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(icons.ZoomInOutlined, {
        onClick: function onClick() {
          return _this2.handleActions('zoomIn');
        }
      }), React.createElement(icons.ZoomOutOutlined, {
        onClick: function onClick() {
          return _this2.handleActions('zoomOut');
        }
      }), isContain ? React.createElement(icons.ExpandOutlined, {
        onClick: function onClick() {
          _this2.toggleMode(isContain);
        }
      }) : React.createElement(icons.CompressOutlined, {
        onClick: function onClick() {
          _this2.toggleMode(isContain);
        }
      }), React.createElement(icons.RotateLeftOutlined, {
        onClick: function onClick() {
          return _this2.handleActions('turnLeft');
        }
      }), React.createElement(icons.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);

exports.ConfigProvider = ConfigProvider;
exports.Image = Img;