ui/src/modal/popconfirm.js

/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/03/21 16:14:10
 */

import {
  css,
  html,
  Component,
  bind,
  unbind,
  styleMap,
  offset,
  outsideClick,
  clearOutsideClick
} from 'wkit'

import '../base/button.js'

const DEFAULT_TIPS = '请确认你的操作!'

class PopConfirm extends Component {
  static props = {
    title: 'str!',
    confirmButtonType: 'str!primary'
  }

  static styles = [
    css`
      :host {
        display: inline-flex;
      }

      .container {
        position: relative;
      }

      .tooltip {
        display: none;
        position: fixed;
        z-index: 9;
        justify-content: center;
        align-items: center;
        max-width: 260px;
        min-width: 32px;
        padding: 8px 12px 12px;
        border-radius: 3px;
        font-size: var(--wc-popconfirm-font, 14px);
        background: var(--wc-popconfirm-background, #fff);
        color: var(--wc-popconfirm-color, var(--color-dark-1));
        box-shadow: 0 0 3px var(--wc-popconfirm-shadow, rgba(0, 0, 0, 0.3));
        word-break: break-all;
        -webkit-user-select: none;
        user-select: none;

        &::after {
          position: absolute;
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 2px;
          background: var(--wc-popconfirm-background, #fff);
          content: '';
          transform: rotate(45deg);
          box-shadow: -1px -1px 0 var(--wc-popconfirm-shadow, rgba(0, 0, 0, 0.1));
        }

        &[placement='left-top'] {
          &::after {
            right: 16px;
            bottom: -4px;
            box-shadow: 1px 1px 0
              var(--wc-popconfirm-shadow, rgba(0, 0, 0, 0.1));
          }
        }
        &[placement='left-bottom'] {
          &::after {
            right: 16px;
            top: -4px;
          }
        }
        &[placement='right-top'] {
          &::after {
            left: 16px;
            bottom: -4px;
            box-shadow: 1px 1px 0
              var(--wc-popconfirm-shadow, rgba(0, 0, 0, 0.1));
          }
        }
        &[placement='right-bottom'] {
          &::after {
            left: 16px;
            top: -4px;
          }
        }
      }
    `,

    css`
      .title {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 0;
        --wc-icon-size: 16px;

        wc-icon {
          flex-shrink: 0;
          color: var(--wc-popconfirm-icon-color, var(--color-red-1));
        }
      }

      :host([hide-icon]) {
        .title wc-icon {
          display: none;
        }
      }

      .actions {
        display: flex;
        justify-content: flex-end;
        gap: 4px;
        margin-top: 8px;

        wc-button {
          min-width: 40px;
          height: 20px;
          font-size: 12px;

          &:first-child {
            --wc-button-border-color: none;
          }
        }
      }
    `
  ]

  #poped = false

  #click(ev) {
    let { left, top } = offset(this)
    let placement = 'left'
    let styles = { display: 'block' }
    let st = document.documentElement.scrollTop

    if (this.#poped) {
      return
    }

    if (left < 260 || (left > 260 && window.innerWidth - left > 260)) {
      placement = 'right'
      styles.left = left + 'px'
    } else {
      let right = window.innerWidth - left + this.clientWidth
      styles.right = right + 'px'
    }

    if (top < 160) {
      top += 8 + this.clientHeight
      placement += '-bottom'
      styles.top = top + 'px'
    } else {
      let bottom = window.innerHeight - top + 8
      placement += '-top'
      styles.bottom = bottom + 'px'
      if (st > 0) {
        styles.transform = `translateY(-${st}px)`
      }
    }

    this.#poped = true

    //
    this.$refs.tips.setAttribute('placement', placement)
    this.$refs.tips.style.cssText = styleMap(styles)
    this.$refs.tips.$animate()
  }

  #close() {
    if (this.#poped) {
      this.#poped = false
      this.$refs.tips.$animate(true)
    }
  }

  #confirm() {
    this.$emit('confirm')
    this.#close()
  }

  mounted() {
    this._outFn = outsideClick(this, _ => this.#close())

    this._scrollFn = bind(document, 'scroll', ev => {
      if (this.#poped) {
        let st = document.documentElement.scrollTop
        this.$refs.tips.style.transform = `translateY(-${st}px)`
      }
    })
  }

  unmounted() {
    unbind(document, 'scroll', this._scrollFn)
    clearOutsideClick(this._outFn)
  }

  render() {
    return html`
      <main class="container">
        <div class="wrapper" @click=${this.#click}>
          <slot></slot>
        </div>
        <div class="tooltip" ref="tips" #animation=${{}}>
          <header class="title">
            <wc-icon name="info"></wc-icon>
            ${this.title || DEFAULT_TIPS}
          </header>
          <footer class="actions">
            <wc-button @click=${this.#close}>取消</wc-button>
            <wc-button
              solid
              type=${this.confirmButtonType || 'primary'}
              @click=${this.#confirm}
              >确定</wc-button
            >
          </footer>
          <i class="trigon"></i>
        </div>
      </main>
    `
  }
}

PopConfirm.reg('popconfirm')