dtd/es/card/index.js

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

import _extends from"babel-runtime/helpers/extends";import _defineProperty from"babel-runtime/helpers/defineProperty";import _classCallCheck from"babel-runtime/helpers/classCallCheck";import _createClass from"babel-runtime/helpers/createClass";import _possibleConstructorReturn from"babel-runtime/helpers/possibleConstructorReturn";import _inherits from"babel-runtime/helpers/inherits";import _typeof from"babel-runtime/helpers/typeof";var __decorate=this&&this.__decorate||function(e,t,a,r){var n,i=arguments.length,o=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,a):r;if("object"===("undefined"==typeof Reflect?"undefined":_typeof(Reflect))&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,a,r);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(o=(i<3?n(o):i>3?n(t,a,o):n(t,a))||o);return i>3&&o&&Object.defineProperty(t,a,o),o},__rest=this&&this.__rest||function(e,t){var a={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(a[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(e);n<r.length;n++)t.indexOf(r[n])<0&&(a[r[n]]=e[r[n]])}return a};import*as React from"react";import classNames from"classnames";import addEventListener from"rc-util/es/Dom/addEventListener";import omit from"omit.js";import Grid from"./Grid";import Meta from"./Meta";import Tabs from"../tabs";import{throttleByAnimationFrameDecorator}from"../_util/throttleByAnimationFrame";import warning from"../_util/warning";var Card=function(e){function t(){_classCallCheck(this,t);var e=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments));return e.state={widerPadding:!1},e.onTabChange=function(t){e.props.onTabChange&&e.props.onTabChange(t)},e.saveRef=function(t){e.container=t},e}return _inherits(t,e),_createClass(t,[{key:"componentDidMount",value:function(){this.updateWiderPadding(),this.resizeEvent=addEventListener(window,"resize",this.updateWiderPadding),"noHovering"in this.props&&(warning(!this.props.noHovering,"`noHovering` of Card is deperated, you can remove it safely or use `hoverable` instead."),warning(!!this.props.noHovering,"`noHovering={false}` of Card is deperated, use `hoverable` instead."))}},{key:"componentWillUnmount",value:function(){this.resizeEvent&&this.resizeEvent.remove(),this.updateWiderPadding.cancel()}},{key:"updateWiderPadding",value:function(){var e=this;if(this.container){this.container.offsetWidth>=936&&!this.state.widerPadding&&this.setState({widerPadding:!0},function(){e.updateWiderPaddingCalled=!0}),this.container.offsetWidth<936&&this.state.widerPadding&&this.setState({widerPadding:!1},function(){e.updateWiderPaddingCalled=!0})}}},{key:"isContainGrid",value:function(){var e=void 0;return React.Children.forEach(this.props.children,function(t){t&&t.type&&t.type===Grid&&(e=!0)}),e}},{key:"getAction",value:function(e){return e&&e.length?e.map(function(t,a){return React.createElement("li",{style:{width:100/e.length+"%"},key:"action-"+a},React.createElement("span",null,t))}):null}},{key:"getCompatibleHoverable",value:function(){var e=this.props,t=e.noHovering,a=e.hoverable;return"noHovering"in this.props?!t||a:!!a}},{key:"render",value:function(){var e,t=this.props,a=t.prefixCls,r=void 0===a?"dt-card":a,n=t.className,i=t.extra,o=t.bodyStyle,l=(t.noHovering,t.hoverable,t.title),s=t.loading,c=t.bordered,d=void 0===c||c,p=t.type,m=t.cover,h=t.actions,f=t.tabList,u=t.children,b=__rest(t,["prefixCls","className","extra","bodyStyle","noHovering","hoverable","title","loading","bordered","type","cover","actions","tabList","children"]),g=classNames(r,n,(_defineProperty(e={},r+"-loading",s),_defineProperty(e,r+"-bordered",d),_defineProperty(e,r+"-hoverable",this.getCompatibleHoverable()),_defineProperty(e,r+"-wider-padding",this.state.widerPadding),_defineProperty(e,r+"-padding-transition",this.updateWiderPaddingCalled),_defineProperty(e,r+"-contain-grid",this.isContainGrid()),_defineProperty(e,r+"-contain-tabs",f&&f.length),_defineProperty(e,r+"-type-"+p,!!p),e)),y=React.createElement("div",{className:r+"-loading-content"},React.createElement("p",{className:r+"-loading-block",style:{width:"94%"}}),React.createElement("p",null,React.createElement("span",{className:r+"-loading-block",style:{width:"28%"}}),React.createElement("span",{className:r+"-loading-block",style:{width:"62%"}})),React.createElement("p",null,React.createElement("span",{className:r+"-loading-block",style:{width:"22%"}}),React.createElement("span",{className:r+"-loading-block",style:{width:"66%"}})),React.createElement("p",null,React.createElement("span",{className:r+"-loading-block",style:{width:"56%"}}),React.createElement("span",{className:r+"-loading-block",style:{width:"39%"}})),React.createElement("p",null,React.createElement("span",{className:r+"-loading-block",style:{width:"21%"}}),React.createElement("span",{className:r+"-loading-block",style:{width:"15%"}}),React.createElement("span",{className:r+"-loading-block",style:{width:"40%"}}))),v=void 0,R=f&&f.length?React.createElement(Tabs,{className:r+"-head-tabs",onChange:this.onTabChange},f.map(function(e){return React.createElement(Tabs.TabPane,{tab:e.tab,key:e.key})})):null;(l||i||R)&&(v=React.createElement("div",{className:r+"-head"},React.createElement("div",{className:r+"-head-wrapper"},l&&React.createElement("div",{className:r+"-head-title"},l),i&&React.createElement("div",{className:r+"-extra"},i)),R));var _=m?React.createElement("div",{className:r+"-cover"},m):null,C=React.createElement("div",{className:r+"-body",style:o},s?y:u),E=h&&h.length?React.createElement("ul",{className:r+"-actions"},this.getAction(h)):null,P=omit(b,["onTabChange"]);return React.createElement("div",_extends({},P,{className:g,ref:this.saveRef}),v,_,C,E)}}]),t}(React.Component);export default Card;Card.Grid=Grid,Card.Meta=Meta,__decorate([throttleByAnimationFrameDecorator()],Card.prototype,"updateWiderPadding",null);