@alifd/meet-react/lib/slider/open.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = _default;
var _babelRuntimeJsxStyleTransform = require("@alifd/babel-runtime-jsx-style-transform");
var _tslib = require("tslib");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _view = _interopRequireDefault(require("../view"));
var _icon = _interopRequireDefault(require("../icon"));
var _modal = _interopRequireDefault(require("../modal"));
var _item3 = _interopRequireDefault(require("./item"));
var _slider = _interopRequireDefault(require("./slider"));
var _utils = require("../utils");
var _hooks = require("../utils/hooks");
var _render = require("../utils/render");
var _util = require("./util");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var SliderWrapper = /*#__PURE__*/function (_Component) {
  _inheritsLoose(SliderWrapper, _Component);
  function SliderWrapper(props) {
    var _this = _Component.call(this, props) || this;
    _this.handleClick = function (index) {
      if (_this.props.onClick) {
        _this.props.onClick(index);
      }
    };
    _this.handleClose = function () {
      var onClose = _this.props.onClose;
      _this.setState({
        visible: false
      });
      if (onClose) {
        onClose();
      }
    };
    _this.handleChange = function (index) {
      var _this$props = _this.props,
        onChange = _this$props.onChange,
        _this$props$autoContr = _this$props.autoControl,
        autoControl = _this$props$autoContr === void 0 ? true : _this$props$autoContr;
      var nodes = (0, _util.getContexts)(_this.itemRefs, _this.state.sliderIdPrefix);
      if (autoControl) {
        (0, _util.pauseAll)(nodes);
        if (nodes && nodes[index] && nodes[index].play) {
          nodes[index].play();
        }
      }
      _this.setState({
        curIndex: index
      });
      if (onChange) {
        onChange(index, nodes, _this.itemRefs);
      }
    };
    _this.handleItemClick = function (isImage) {
      if (isImage) {
        _this.handleClose();
      }
    };
    _this.state = {
      visible: true,
      curIndex: props.activeIndex,
      sliderIdPrefix: (0, _hooks.guid)('slider-')
    };
    _this.itemRefs = [];
    return _this;
  }
  var _proto = SliderWrapper.prototype;
  _proto.componentWillMount = function componentWillMount() {
    var items = this.props.items;
    for (var i = 0; i < items.length; i++) {
      this.itemRefs[i] = /*#__PURE__*/(0, _react.createRef)();
    }
  };
  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;
    var onReady = this.props.onReady;
    if (onReady) {
      (0, _utils.nextTick)(function () {
        var nodes = (0, _util.getContexts)(_this2.itemRefs, _this2.state.sliderIdPrefix);
        onReady(nodes, _this2.itemRefs);
      });
    }
  };
  _proto.render = function render() {
    var _this3 = this;
    var _a = this.props,
      items = _a.items,
      activeIndex = _a.activeIndex,
      _a$prefix = _a.prefix,
      prefix = _a$prefix === void 0 ? 'mt-' : _a$prefix,
      autoPlay = _a.autoPlay,
      others = (0, _tslib.__rest)(_a, ["items", "activeIndex", "prefix", "autoPlay"]);
    var sliderHeight = (0, _utils.px2rpx)(_utils.windowHeight);
    var _this$state = this.state,
      visible = _this$state.visible,
      curIndex = _this$state.curIndex;
    var clsPrefix = prefix + "slider";
    return /*#__PURE__*/(0, _react.createElement)(_modal.default, {
      className: clsPrefix + "-modal",
      containerClassName: clsPrefix + "-modal-container",
      visible: visible,
      onClose: this.handleClose
    }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: clsPrefix + "-control"
    }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: clsPrefix + "-close-wrapper",
      onClick: this.handleClose
    }, /*#__PURE__*/(0, _react.createElement)(_icon.default, {
      name: "close",
      className: clsPrefix + "-close"
    })), /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
      className: clsPrefix + "-pagination"
    }, curIndex + 1, "/", items.length)), /*#__PURE__*/(0, _react.createElement)(_slider.default, _extends({}, others, {
      activeIndex: activeIndex,
      showDots: false,
      width: 750,
      height: sliderHeight,
      onChange: this.handleChange
    }), items.map(function (item, index) {
      var _classNames;
      var _item = item;
      if ((0, _utils.isString)(item)) {
        _item = {
          src: item,
          type: 'image'
        };
      }
      var _item2 = _item,
        src = _item2.src,
        type = _item2.type,
        itemHeight = _item2.height,
        rest = (0, _tslib.__rest)(_item, ["src", "type", "height"]);
      var isImage = type === 'image';
      var imgStyle = {};
      if (isImage) {
        imgStyle = {
          backgroundImage: "url(" + _item.src + ")",
          height: itemHeight || sliderHeight || '100%'
        };
      }
      return /*#__PURE__*/(0, _react.createElement)(_item3.default, {
        key: index + "-" + item
      }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
        className: (0, _classnames.default)(prefix + "slider-open-item", (_classNames = {}, _classNames[prefix + "slider-open-item--image"] = isImage, _classNames)),
        style: (0, _babelRuntimeJsxStyleTransform.rpx2vw4style)(Object.assign({}, imgStyle)),
        onClick: function onClick() {
          _this3.handleItemClick(isImage);
        }
      }, type === 'video' ? /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Video, _extends({
        ref: function ref(r) {
          _this3.itemRefs[index] = r;
        },
        id: _this3.state.sliderIdPrefix + "-" + index
      }, rest, {
        src: _item.src,
        style: (0, _babelRuntimeJsxStyleTransform.rpx2vw4style)({
          width: '750rpx'
        }),
        autoPlay: autoPlay,
        showCenterPlayBtn: true,
        "enable-progress-gesture": false
      })) : null));
    })));
  };
  return SliderWrapper;
}(_react.Component);
SliderWrapper.defaultProps = {
  items: [],
  activeIndex: 0,
  onClick: function onClick() {},
  onClose: function onClose() {},
  onChange: function onChange() {}
};
function _default(options) {
  if (_utils.isStrictWechatMiniProgram) {
    var items = options.items,
      activeIndex = options.activeIndex,
      onSuccess = options.onSuccess,
      onFail = options.onFail,
      onComplete = options.onComplete,
      others = (0, _tslib.__rest)(options, ["items", "activeIndex", "onSuccess", "onFail", "onComplete"]);
    return wx.previewMedia({
      sources: items.map(function (item) {
        return Object.assign(Object.assign({}, item), {
          url: item.src
        });
      }),
      current: activeIndex,
      success: onSuccess,
      fail: onFail,
      complete: onComplete,
      others: others
    });
  } else if (_utils.isStrictMiniApp) {
    var _items = options.items,
      _activeIndex = options.activeIndex,
      _onSuccess = options.onSuccess,
      _onFail = options.onFail,
      _onComplete = options.onComplete,
      _others = (0, _tslib.__rest)(options, ["items", "activeIndex", "onSuccess", "onFail", "onComplete"]);
    return my.previewImage(Object.assign({
      urls: _items.filter(function (item) {
        return item.type === 'image';
      }).map(function (item) {
        return item.src;
      }),
      current: _activeIndex,
      success: _onSuccess,
      fail: _onFail,
      complete: _onComplete
    }, _others));
  } else {
    var unMount = (0, _render.renderToRoot)( /*#__PURE__*/(0, _react.createElement)(SliderWrapper, options));
    return {
      close: function close() {
        return unMount();
      }
    };
  }
}