ui/src/drawer/index.js

/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/03/27 10:39:29
 */

import {
  css,
  html,
  bind,
  unbind,
  Component,
  outsideClick,
  clearOutsideClick,
  nextTick,
  classMap,
  styleMap
} from '@bd/core'

const DIRECTION = {
  left: 'l2r-in',
  right: 'r2l-in',
  top: 't2b-in',
  bottom: 'b2t-in'
}

class Drawer extends Component {
  static props = {
    title: { type: String, default: '', attribute: false },
    from: 'right',
    visible: false
  }

  static styles = [
    css`
      :host {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        transition: opacity 0.3s linear;
        opacity: 0;
      }
      .drawer {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 50%;
        height: 100%;
        font-size: 14px;
        background: #fff;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);

        &.l2r-in {
          animation: l2r-in 0.3s ease-in-out forwards;
        }
        &.r2l-in {
          animation: r2l-in 0.3s ease-in-out forwards;
        }
        &.t2b-in {
          animation: t2b-in 0.3s ease-in-out forwards;
        }
        &.b2t-in {
          animation: b2t-in 0.3s ease-in-out forwards;
        }
      }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        font-size: 16px;
        color: var(--color-dark-2);
        user-select: none;

        wc-icon {
          --size: 16px;
          margin-right: 8px;
          color: var(--color-grey-3);
          cursor: pointer;
        }
      }

      .wrapper {
        flex: 1;
        padding: 16px;
      }

      :host([visible]) {
        display: block;
        opacity: 1;
      }
    `,
    css`
      :host([from='left']),
      :host([from='right']) {
        .drawer {
          width: 50%;
          height: 100%;
        }
      }
      :host([from='top']),
      :host([from='bottom']) {
        .drawer {
          width: 100%;
          height: 50%;
        }
      }
      :host([from='left']) .drawer {
        left: 0;
        top: 0;
        transform: translateX(-100%);
      }
      :host([from='top']) .drawer {
        left: 0;
        top: 0;
        transform: translateY(-100%);
      }
      :host([from='right']) .drawer {
        right: 0;
        top: 0;
        transform: translateX(100%);
      }
      :host([from='bottom']) .drawer {
        left: 0;
        bottom: 0;
        transform: translateY(100%);
      }
    `,
    css`
      @keyframes r2l-in {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(0);
        }
      }
      @keyframes l2r-in {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(0);
        }
      }
      @keyframes b2t-in {
        from {
          transform: translateY(100%);
        }
        to {
          transform: translateY(0);
        }
      }
      @keyframes t2b-in {
        from {
          transform: translateY(-100%);
        }
        to {
          transform: translateY(0);
        }
      }
    `
  ]

  closeDrawer() {
    this.$emit('close')
  }

  mounted() {
    console.log('mounted title: ', this.title)
  }

  render() {
    let classes = classMap({
      drawer: true,
      [DIRECTION[this.from]]: this.visible
    })

    return html`
      <div class=${classes}>
        <header class="header">
          <span class="title"><slot name="title">${this.title}</slot></span>
          <wc-icon name="close" @click=${this.closeDrawer}></wc-icon>
        </header>
        <main class="wrapper">
          <slot></slot>
        </main>
      </div>
    `
  }
}

Drawer.reg('drawer')