choerodon-ui/lib/card/index.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _enum = require("../_util/enum");

var _Grid = _interopRequireDefault(require("./Grid"));

var _Meta = _interopRequireDefault(require("./Meta"));

var _tabs = _interopRequireDefault(require("../tabs"));

var _throttleByAnimationFrame = require("../_util/throttleByAnimationFrame");

var _warning = _interopRequireDefault(require("../_util/warning"));

var _addEventListener = _interopRequireDefault(require("../_util/addEventListener"));

var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var Card =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(Card, _Component);

  var _super = _createSuper(Card);

  function Card() {
    var _this;

    (0, _classCallCheck2["default"])(this, Card);
    _this = _super.apply(this, arguments);
    _this.state = {
      widerPadding: false
    };

    _this.onTabChange = function (key) {
      var onTabChange = _this.props.onTabChange;

      if (onTabChange) {
        onTabChange(key);
      }
    };

    _this.saveRef = function (node) {
      _this.container = node;
    };

    return _this;
  }

  (0, _createClass2["default"])(Card, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.updateWiderPadding();
      this.resizeEvent = (0, _addEventListener["default"])(window, 'resize', this.updateWiderPadding);

      if ('noHovering' in this.props) {
        var noHovering = this.props.noHovering;
        (0, _warning["default"])(!noHovering, '`noHovering` of Card is deperated, you can remove it safely or use `hoverable` instead.');
        (0, _warning["default"])(!!noHovering, '`noHovering={false}` of Card is deperated, use `hoverable` instead.');
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.resizeEvent) {
        this.resizeEvent.remove();
      }

      this.updateWiderPadding.cancel();
    }
  }, {
    key: "updateWiderPadding",
    value: function updateWiderPadding() {
      var _this2 = this;

      if (!this.container) {
        return;
      } // 936 is a magic card width pixer number indicated by designer


      var WIDTH_BOUDARY_PX = 936;
      var widerPadding = this.state.widerPadding;

      if (this.container.offsetWidth >= WIDTH_BOUDARY_PX && !widerPadding) {
        this.setState({
          widerPadding: true
        }, function () {
          _this2.updateWiderPaddingCalled = true; // first render without css transition
        });
      }

      if (this.container.offsetWidth < WIDTH_BOUDARY_PX && widerPadding) {
        this.setState({
          widerPadding: false
        }, function () {
          _this2.updateWiderPaddingCalled = true; // first render without css transition
        });
      }
    }
  }, {
    key: "isContainGrid",
    value: function isContainGrid() {
      var children = this.props.children;
      return _react.Children.toArray(children).some(function (element) {
        return element && element.type && element.type === _Grid["default"];
      });
    }
  }, {
    key: "getAction",
    value: function getAction(actions) {
      if (!actions || !actions.length) {
        return null;
      }

      var actionList = actions.map(function (action, index) {
        return _react["default"].createElement("li", {
          style: {
            width: "".concat(100 / actions.length, "%")
          },
          key: "action-".concat(String(index))
        }, _react["default"].createElement("span", null, action));
      });
      return actionList;
    } // For 2.x compatible

  }, {
    key: "getCompatibleHoverable",
    value: function getCompatibleHoverable() {
      var _this$props = this.props,
          noHovering = _this$props.noHovering,
          hoverable = _this$props.hoverable;

      if ('noHovering' in this.props) {
        return !noHovering || hoverable;
      }

      return !!hoverable;
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props2 = this.props,
          customizePrefixCls = _this$props2.prefixCls,
          className = _this$props2.className,
          extra = _this$props2.extra,
          bodyStyle = _this$props2.bodyStyle,
          title = _this$props2.title,
          loading = _this$props2.loading,
          _this$props2$bordered = _this$props2.bordered,
          bordered = _this$props2$bordered === void 0 ? true : _this$props2$bordered,
          type = _this$props2.type,
          cover = _this$props2.cover,
          actions = _this$props2.actions,
          tabList = _this$props2.tabList,
          children = _this$props2.children,
          activeTabKey = _this$props2.activeTabKey,
          defaultActiveTabKey = _this$props2.defaultActiveTabKey,
          onHeadClick = _this$props2.onHeadClick,
          others = (0, _objectWithoutProperties2["default"])(_this$props2, ["prefixCls", "className", "extra", "bodyStyle", "title", "loading", "bordered", "type", "cover", "actions", "tabList", "children", "activeTabKey", "defaultActiveTabKey", "onHeadClick"]);
      var widerPadding = this.state.widerPadding;
      var getPrefixCls = this.context.getPrefixCls;
      var prefixCls = getPrefixCls('card', customizePrefixCls);
      var classString = (0, _classnames["default"])(prefixCls, className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-loading"), loading), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-bordered"), bordered), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-hoverable"), this.getCompatibleHoverable()), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-wider-padding"), widerPadding), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-padding-transition"), this.updateWiderPaddingCalled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-contain-grid"), this.isContainGrid()), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-contain-tabs"), tabList && tabList.length), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-type-").concat(type), !!type), _classNames));

      var loadingBlock = _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-loading-content")
      }, _react["default"].createElement("p", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '94%'
        }
      }), _react["default"].createElement("p", null, _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '28%'
        }
      }), _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '62%'
        }
      })), _react["default"].createElement("p", null, _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '22%'
        }
      }), _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '66%'
        }
      })), _react["default"].createElement("p", null, _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '56%'
        }
      }), _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '39%'
        }
      })), _react["default"].createElement("p", null, _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '21%'
        }
      }), _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '15%'
        }
      }), _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '40%'
        }
      })));

      var hasActiveTabKey = activeTabKey !== undefined;
      var extraProps = (0, _defineProperty2["default"])({}, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey);
      var head;
      var tabs = tabList && tabList.length ? _react["default"].createElement(_tabs["default"], (0, _extends2["default"])({}, extraProps, {
        className: "".concat(prefixCls, "-head-tabs"),
        size: _enum.Size.large,
        onChange: this.onTabChange
      }), tabList.map(function (item) {
        return _react["default"].createElement(_tabs["default"].TabPane, {
          tab: item.tab,
          key: item.key
        });
      })) : null;

      if (title || extra || tabs) {
        head = _react["default"].createElement("div", {
          className: "".concat(prefixCls, "-head"),
          onClick: onHeadClick
        }, _react["default"].createElement("div", {
          className: "".concat(prefixCls, "-head-wrapper")
        }, title && _react["default"].createElement("div", {
          className: "".concat(prefixCls, "-head-title")
        }, title), extra && _react["default"].createElement("div", {
          className: "".concat(prefixCls, "-extra")
        }, extra)), tabs);
      }

      var coverDom = cover ? _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-cover")
      }, cover) : null;

      var body = _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-body"),
        style: bodyStyle
      }, loading ? loadingBlock : children);

      var actionDom = actions && actions.length ? _react["default"].createElement("ul", {
        className: "".concat(prefixCls, "-actions")
      }, this.getAction(actions)) : null;
      var divProps = (0, _omit["default"])(others, ['onTabChange', 'noHovering', 'hoverable']);
      return _react["default"].createElement("div", (0, _extends2["default"])({}, divProps, {
        className: classString,
        ref: this.saveRef
      }), head, coverDom, body, actionDom);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return Card;
}(_react.Component);

exports["default"] = Card;
Card.displayName = 'Card';
Card.Grid = _Grid["default"];
Card.Meta = _Meta["default"];
(0, _tslib.__decorate)([(0, _throttleByAnimationFrame.throttleByAnimationFrameDecorator)()], Card.prototype, "updateWiderPadding", null);
//# sourceMappingURL=index.js.map