choerodon-ui/lib/card/index.js

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

"use strict";

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

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

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

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

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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

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

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

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

var _noop = _interopRequireDefault(require("lodash/noop"));

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

var _excluded = ["prefixCls", "className", "extra", "bodyStyle", "title", "loading", "bordered", "type", "cover", "actions", "tabList", "children", "activeTabKey", "defaultActiveTabKey", "onHeadClick", "tabsProps", "selected", "cornerPlacement", "onSelectChange"];

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

  var _super = (0, _createSuper2["default"])(Card);

  function Card() {
    var _this;

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

    _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.updateWiderSize();
      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 pixel number indicated by designer


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

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

      if (this.container.offsetWidth < WIDTH_BOUNDARY_PX && widerPadding) {
        this.setState({
          widerPadding: false
        }, function () {
          _this2.updateWiderPaddingCalled = true; // first render without css transition
        });
      }
    }
  }, {
    key: "updateWiderSize",
    value: function updateWiderSize() {
      if (this.container) {
        if (this.container.offsetHeight <= 50) {
          this.setState({
            size: 'xs'
          });
        }
      }
    }
  }, {
    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 /*#__PURE__*/_react["default"].createElement("li", {
          style: {
            width: "".concat(100 / actions.length, "%")
          },
          key: "action-".concat(String(index))
        }, /*#__PURE__*/_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,
          tabsProps = _this$props2.tabsProps,
          selected = _this$props2.selected,
          cornerPlacement = _this$props2.cornerPlacement,
          _this$props2$onSelect = _this$props2.onSelectChange,
          onSelectChange = _this$props2$onSelect === void 0 ? _noop["default"] : _this$props2$onSelect,
          others = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
      var _this$state = this.state,
          widerPadding = _this$state.widerPadding,
          size = _this$state.size;
      var getPrefixCls = this.context.getPrefixCls;
      var prefixCls = getPrefixCls('card', customizePrefixCls);
      var selectedPrefixCls = "".concat(prefixCls, "-selected");
      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), (0, _defineProperty2["default"])(_classNames, "".concat(selectedPrefixCls, " ").concat(selectedPrefixCls, "-").concat(cornerPlacement, " ").concat(selectedPrefixCls, "-").concat(size), selected), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-only-title"), !children), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-only-body"), !title), _classNames));

      var loadingBlock = /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-loading-content")
      }, /*#__PURE__*/_react["default"].createElement("p", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '94%'
        }
      }), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '28%'
        }
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '62%'
        }
      })), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '22%'
        }
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '66%'
        }
      })), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '56%'
        }
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '39%'
        }
      })), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '21%'
        }
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '15%'
        }
      }), /*#__PURE__*/_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 ? /*#__PURE__*/_react["default"].createElement(_tabs["default"], (0, _extends2["default"])({}, tabsProps, extraProps, {
        className: "".concat(prefixCls, "-head-tabs"),
        size: _enum.Size.large,
        onChange: this.onTabChange
      }), tabList.map(function (item) {
        return /*#__PURE__*/_react["default"].createElement(_tabs["default"].TabPane, {
          tab: item.tab,
          disabled: item.disabled,
          key: item.key
        });
      })) : null;

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

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

      var body = /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-body"),
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bodyStyle), {}, {
          cursor: typeof onSelectChange === 'function' ? 'pointer' : 'none'
        }),
        onClick: function onClick() {
          return onSelectChange(!selected);
        }
      }, loading ? loadingBlock : children);

      var actionDom = actions && actions.length ? /*#__PURE__*/_react["default"].createElement("ul", {
        className: "".concat(prefixCls, "-actions")
      }, this.getAction(actions)) : null;
      var divProps = (0, _omit["default"])(others, ['onTabChange', 'noHovering', 'hoverable']);
      return /*#__PURE__*/_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"];
Card.defaultProps = {
  cornerPlacement: 'bottomRight'
};
(0, _tslib.__decorate)([(0, _throttleByAnimationFrame.throttleByAnimationFrameDecorator)()], Card.prototype, "updateWiderPadding", null);
//# sourceMappingURL=index.js.map