dtd/es/drawer/index.js

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

import _extends from"babel-runtime/helpers/extends";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";var __rest=this&&this.__rest||function(e,r){var t={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&r.indexOf(s)<0&&(t[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(s=Object.getOwnPropertySymbols(e);o<s.length;o++)r.indexOf(s[o])<0&&(t[s[o]]=e[s[o]])}return t};import*as React from"react";import*as PropTypes from"prop-types";import RcDrawer from"rc-drawer";import createReactContext from"create-react-context";import warning from"warning";import classNames from"classnames";import Icon from"../icon";var DrawerContext=createReactContext(null),Drawer=function(e){function r(){_classCallCheck(this,r);var e=_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments));return e.state={push:!1},e.close=function(r){void 0===e.props.visible||e.props.onClose&&e.props.onClose(r)},e.onMaskClick=function(r){e.props.maskClosable&&e.close(r)},e.push=function(){e.setState({push:!0})},e.pull=function(){e.setState({push:!1})},e.onDestoryTransitionEnd=function(){e.getDestoryOnClose()&&(e.props.visible||(e.destoryClose=!0,e.forceUpdate()))},e.getDestoryOnClose=function(){return e.props.destroyOnClose&&!e.props.visible},e.getPushTransform=function(e){return"left"===e||"right"===e?"translateX("+("left"===e?180:-180)+"px)":"top"===e||"bottom"===e?"translateY("+("top"===e?180:-180)+"px)":void 0},e.renderBody=function(){if(e.destoryClose&&!e.props.visible)return null;e.destoryClose=!1;var r=e.props.placement,t="left"===r||"right"===r?{overflow:"auto",height:"100%"}:{};e.getDestoryOnClose()&&(t.opacity=0,t.transition="opacity .3s");var s=e.props,o=s.prefixCls,a=s.title,n=s.closable,l=void 0;a&&(l=React.createElement("div",{className:o+"-header"},React.createElement("div",{className:o+"-title"},a)));var p=void 0;return n&&(p=React.createElement("button",{onClick:e.close,"aria-label":"Close",className:o+"-close"},React.createElement("span",{className:o+"-close-x"},React.createElement(Icon,{type:"close"})))),React.createElement("div",{className:o+"-wrapper-body",style:t,onTransitionEnd:e.onDestoryTransitionEnd},l,p,React.createElement("div",{className:o+"-body",style:e.props.style},e.props.children))},e.getRcDrawerStyle=function(){var r=e.props,t=r.zIndex,s=r.placement,o=r.maskStyle;return e.state.push?_extends({},o,{zIndex:t,transform:e.getPushTransform(s)}):_extends({},o,{zIndex:t})},e.renderProvider=function(r){var t=e.props,s=(t.zIndex,t.style,t.placement),o=t.className,a=t.wrapClassName,n=t.width,l=t.height,p=(t.closable,t.visible,t.maskClosable,__rest(t,["zIndex","style","placement","className","wrapClassName","width","height","closable","visible","maskClosable"]));warning(void 0===a,"wrapClassName is deprecated, please use className instead."),e.parentDrawer=r;var i={};return"left"===s||"right"===s?i.width=n:i.height=l,React.createElement(DrawerContext.Provider,{value:e},React.createElement(RcDrawer,_extends({handler:!1},p,i,{open:e.props.visible,onMaskClick:e.onMaskClick,showMask:e.props.mask,placement:s,style:e.getRcDrawerStyle(),className:classNames(a,o),title:""}),e.renderBody()))},e}return _inherits(r,e),_createClass(r,[{key:"componentDidUpdate",value:function(e){e.visible!==this.props.visible&&this.parentDrawer&&(this.props.visible?this.parentDrawer.push():this.parentDrawer.pull())}},{key:"render",value:function(){return React.createElement(DrawerContext.Consumer,null,this.renderProvider)}}]),r}(React.Component);export default Drawer;Drawer.propTypes={closable:PropTypes.bool,destroyOnClose:PropTypes.bool,getContainer:PropTypes.oneOfType([PropTypes.string,PropTypes.object,PropTypes.func,PropTypes.bool]),maskClosable:PropTypes.bool,mask:PropTypes.bool,maskStyle:PropTypes.object,style:PropTypes.object,title:PropTypes.node,visible:PropTypes.bool,width:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),zIndex:PropTypes.number,prefixCls:PropTypes.string,placement:PropTypes.string,onClose:PropTypes.func,className:PropTypes.string},Drawer.defaultProps={prefixCls:"dt-drawer",width:256,height:256,closable:!0,placement:"right",maskClosable:!0,level:null};