choerodon-ui/es/card/index.js

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["prefixCls", "className", "extra", "bodyStyle", "title", "loading", "bordered", "type", "cover", "actions", "tabList", "children", "activeTabKey", "defaultActiveTabKey", "onHeadClick", "tabsProps"];
import { __decorate } from "tslib";
import React, { Children, Component } from 'react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import { Size } from '../_util/enum';
import Grid from './Grid';
import Meta from './Meta';
import Tabs from '../tabs';
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
import warning from '../_util/warning';
import addEventListener from '../_util/addEventListener';
import ConfigContext from '../config-provider/ConfigContext';

var Card = /*#__PURE__*/function (_Component) {
  _inherits(Card, _Component);

  var _super = _createSuper(Card);

  function Card() {
    var _this;

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

  _createClass(Card, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.updateWiderPadding();
      this.resizeEvent = addEventListener(window, 'resize', this.updateWiderPadding);

      if ('noHovering' in this.props) {
        var noHovering = this.props.noHovering;
        warning(!noHovering, '`noHovering` of Card is deperated, you can remove it safely or use `hoverable` instead.');
        warning(!!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: "isContainGrid",
    value: function isContainGrid() {
      var children = this.props.children;
      return Children.toArray(children).some(function (element) {
        return element && element.type && element.type === Grid;
      });
    }
  }, {
    key: "getAction",
    value: function getAction(actions) {
      if (!actions || !actions.length) {
        return null;
      }

      var actionList = actions.map(function (action, index) {
        return /*#__PURE__*/React.createElement("li", {
          style: {
            width: "".concat(100 / actions.length, "%")
          },
          key: "action-".concat(String(index))
        }, /*#__PURE__*/React.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,
          others = _objectWithoutProperties(_this$props2, _excluded);

      var widerPadding = this.state.widerPadding;
      var getPrefixCls = this.context.getPrefixCls;
      var prefixCls = getPrefixCls('card', customizePrefixCls);
      var classString = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames, "".concat(prefixCls, "-bordered"), bordered), _defineProperty(_classNames, "".concat(prefixCls, "-hoverable"), this.getCompatibleHoverable()), _defineProperty(_classNames, "".concat(prefixCls, "-wider-padding"), widerPadding), _defineProperty(_classNames, "".concat(prefixCls, "-padding-transition"), this.updateWiderPaddingCalled), _defineProperty(_classNames, "".concat(prefixCls, "-contain-grid"), this.isContainGrid()), _defineProperty(_classNames, "".concat(prefixCls, "-contain-tabs"), tabList && tabList.length), _defineProperty(_classNames, "".concat(prefixCls, "-type-").concat(type), !!type), _classNames));
      var loadingBlock = /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-loading-content")
      }, /*#__PURE__*/React.createElement("p", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '94%'
        }
      }), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '28%'
        }
      }), /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '62%'
        }
      })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '22%'
        }
      }), /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '66%'
        }
      })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '56%'
        }
      }), /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '39%'
        }
      })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '21%'
        }
      }), /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '15%'
        }
      }), /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-loading-block"),
        style: {
          width: '40%'
        }
      })));
      var hasActiveTabKey = activeTabKey !== undefined;

      var extraProps = _defineProperty({}, hasActiveTabKey ? 'activeKey' : 'defaultActiveKey', hasActiveTabKey ? activeTabKey : defaultActiveTabKey);

      var head;
      var tabs = tabList && tabList.length ? /*#__PURE__*/React.createElement(Tabs, _extends({}, tabsProps, extraProps, {
        className: "".concat(prefixCls, "-head-tabs"),
        size: Size.large,
        onChange: this.onTabChange
      }), tabList.map(function (item) {
        return /*#__PURE__*/React.createElement(Tabs.TabPane, {
          tab: item.tab,
          disabled: item.disabled,
          key: item.key
        });
      })) : null;

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

      var coverDom = cover ? /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-cover")
      }, cover) : null;
      var body = /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-body"),
        style: bodyStyle
      }, loading ? loadingBlock : children);
      var actionDom = actions && actions.length ? /*#__PURE__*/React.createElement("ul", {
        className: "".concat(prefixCls, "-actions")
      }, this.getAction(actions)) : null;
      var divProps = omit(others, ['onTabChange', 'noHovering', 'hoverable']);
      return /*#__PURE__*/React.createElement("div", _extends({}, divProps, {
        className: classString,
        ref: this.saveRef
      }), head, coverDom, body, actionDom);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return Card;
}(Component);

export { Card as default };
Card.displayName = 'Card';
Card.Grid = Grid;
Card.Meta = Meta;

__decorate([throttleByAnimationFrameDecorator()], Card.prototype, "updateWiderPadding", null);
//# sourceMappingURL=index.js.map