mp-colorui/dist/h5/components/drawer/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）

import Nerv from "nervjs";
import { View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
export default class ClDrawer extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      showModal: this.state.showModal
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.show !== this.state.showModal) {
      this.setState({
        showModal: nextProps.show
      });
    }
  }
  hideModal() {
    this.props.closeWithShadow && this.setState({
      showModal: false
    });
    this.props.onCancel && this.props.onCancel();
  }
  render() {
    const leftComponent = <View className={`cu-modal drawer-modal justify-start ${this.state.showModal ? 'show' : ''}`} onClick={e => {
      this.hideModal();
      e.stopPropagation();
    }}>
        <View className="cu-dialog basis-lg" onClick={e => {
        e.stopPropagation();
      }} style={{ height: '100vh' }}>
          {this.props.children}
        </View>
      </View>;
    const rightComponent = <View className={`cu-modal drawer-modal justify-end ${this.state.showModal ? 'show' : ''}`} onClick={e => {
      this.hideModal();
      e.stopPropagation();
    }}>
        <View className="cu-dialog basis-lg" onClick={e => {
        e.stopPropagation();
      }} style={{ height: '100vh' }}>
          {this.props.children}
        </View>
      </View>;
    const bottomComponent = <View className={`cu-modal bottom-modal ${this.state.showModal ? 'show' : ''}`} onClick={e => {
      this.hideModal();
      e.stopPropagation();
    }}>
        <View className="cu-dialog" style={{ maxHeight: '70vh' }} onClick={e => {
        e.stopPropagation();
      }}>
          {this.props.children}
        </View>
      </View>;
    return this.props.direction === 'left' ? leftComponent : this.props.direction === 'right' ? rightComponent : bottomComponent;
  }
}
ClDrawer.options = {
  addGlobalClass: true
};
ClDrawer.defaultProps = {
  closeWithShadow: true
};
// export default function ClDrawer(props: IProps) {
//   const hideModal = () => {
//     // props.closeWithShadow
//     props.onCancel && props.onCancel();
//   };
//   const leftComponent = (
//     <View
//       className={`cu-modal drawer-modal justify-start ${
//         props.show ? 'show' : ''
//       }`}
//       onClick={e => {
//         hideModal();
//         e.stopPropagation();
//       }}
//     >
//       <View
//         className='cu-dialog basis-lg'
//         onClick={e => {
//           e.stopPropagation();
//         }}
//         style={{ height: '100vh' }}
//       >
//         {this.props.children}
//       </View>
//     </View>
//   );
//   const rightComponent = (
//     <View
//       className={`cu-modal drawer-modal justify-end ${
//         props.show ? 'show' : ''
//       }`}
//       onClick={e => {
//         hideModal();
//         e.stopPropagation();
//       }}
//     >
//       <View
//         className='cu-dialog basis-lg'
//         onClick={e => {
//           e.stopPropagation();
//         }}
//         style={{ height: '100vh' }}
//       >
//         {this.props.children}
//       </View>
//     </View>
//   );
//   const bottomComponent = (
//     <View
//       className={`cu-modal bottom-modal ${props.show ? 'show' : ''}`}
//       onClick={e => {
//         hideModal();
//         e.stopPropagation();
//       }}
//     >
//       <View
//         className='cu-dialog'
//         style={{ maxHeight: '70vh' }}
//         onClick={e => {
//           e.stopPropagation();
//         }}
//       >
//         {this.props.children}
//       </View>
//     </View>
//   );
//   return props.direction === 'left'
//     ? leftComponent
//     : props.direction === 'right'
//     ? rightComponent
//     : bottomComponent;
// }
// ClDrawer.options = {
//   addGlobalClass: true
// };