tav-ui/lib/packages/components/verify/src/verify2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
var useTimeout = require('../../../hooks/core/useTimeout2.js');
var useEventListener = require('../../../hooks/event/useEventListener2.js');
var tsxHelper = require('../../../utils/helper/tsxHelper2.js');
var types = require('./types2.js');

var Verify = vue.defineComponent({
  name: "TaVerify",
  props: types.verifyProps,
  emits: ["success", "update:value", "change", "start", "move", "end"],
  setup(props, {
    emit,
    slots,
    expose
  }) {
    const state = vue.reactive({
      isMoving: false,
      isPassing: false,
      moveDistance: 0,
      toLeft: false,
      startTime: 0,
      endTime: 0
    });
    const wrapElRef = vue.ref(null);
    const barElRef = vue.ref(null);
    const contentElRef = vue.ref(null);
    const actionElRef = vue.ref(null);
    useEventListener.useEventListener({
      el: document,
      name: "mouseup",
      listener: () => {
        if (state.isMoving) {
          resume();
        }
      }
    });
    const getActionStyleRef = vue.computed(() => {
      const {
        height,
        actionStyle
      } = props;
      const h = `${parseInt(height)}px`;
      return {
        left: 0,
        width: h,
        height: h,
        ...actionStyle
      };
    });
    const getWrapStyleRef = vue.computed(() => {
      const {
        height,
        width,
        circle,
        wrapStyle
      } = props;
      const h = parseInt(height);
      const w = `${parseInt(width)}px`;
      return {
        width: w,
        height: `${h}px`,
        lineHeight: `${h}px`,
        borderRadius: circle ? `${h / 2}px` : 0,
        ...wrapStyle
      };
    });
    const getBarStyleRef = vue.computed(() => {
      const {
        height,
        circle,
        barStyle
      } = props;
      const h = parseInt(height);
      return {
        height: `${h}px`,
        borderRadius: circle ? `${h / 2}px 0 0 ${h / 2}px` : 0,
        ...barStyle
      };
    });
    const getContentStyleRef = vue.computed(() => {
      const {
        height,
        width,
        contentStyle
      } = props;
      const h = `${parseInt(height)}px`;
      const w = `${parseInt(width)}px`;
      return {
        height: h,
        width: w,
        ...contentStyle
      };
    });
    vue.watch(() => state.isPassing, (isPassing) => {
      if (isPassing) {
        const {
          startTime,
          endTime
        } = state;
        const time = (endTime - startTime) / 1e3;
        emit("success", {
          isPassing,
          time: time.toFixed(1)
        });
        emit("update:value", isPassing);
        emit("change", isPassing);
      }
    });
    vue.watchEffect(() => {
      state.isPassing = !!props.value;
    });
    function getEventPageX(e) {
      return e.pageX || e.touches[0].pageX;
    }
    function handleDragStart(e) {
      if (state.isPassing) {
        return;
      }
      const actionEl = vue.unref(actionElRef);
      if (!actionEl)
        return;
      emit("start", e);
      state.moveDistance = getEventPageX(e) - parseInt(actionEl.style.left.replace("px", ""), 10);
      state.startTime = new Date().getTime();
      state.isMoving = true;
    }
    function getOffset(el) {
      const actionWidth = parseInt(el.style.width);
      const {
        width
      } = props;
      const widthNum = parseInt(width);
      const offset = widthNum - actionWidth - 6;
      return {
        offset,
        widthNum,
        actionWidth
      };
    }
    function handleDragMoving(e) {
      const {
        isMoving,
        moveDistance
      } = state;
      if (isMoving) {
        const actionEl = vue.unref(actionElRef);
        const barEl = vue.unref(barElRef);
        if (!actionEl || !barEl)
          return;
        const {
          offset,
          widthNum,
          actionWidth
        } = getOffset(actionEl);
        const moveX = getEventPageX(e) - moveDistance;
        emit("move", {
          event: e,
          moveDistance,
          moveX
        });
        if (moveX > 0 && moveX <= offset) {
          actionEl.style.left = `${moveX}px`;
          barEl.style.width = `${moveX + actionWidth / 2}px`;
        } else if (moveX > offset) {
          actionEl.style.left = `${widthNum - actionWidth}px`;
          barEl.style.width = `${widthNum - actionWidth / 2}px`;
          if (!props.isSlot) {
            checkPass();
          }
        }
      }
    }
    function handleDragOver(e) {
      const {
        isMoving,
        isPassing,
        moveDistance
      } = state;
      if (isMoving && !isPassing) {
        emit("end", e);
        const actionEl = vue.unref(actionElRef);
        const barEl = vue.unref(barElRef);
        if (!actionEl || !barEl)
          return;
        const moveX = getEventPageX(e) - moveDistance;
        const {
          offset,
          widthNum,
          actionWidth
        } = getOffset(actionEl);
        if (moveX < offset) {
          if (!props.isSlot) {
            resume();
          } else {
            setTimeout(() => {
              if (!props.value) {
                resume();
              } else {
                const contentEl = vue.unref(contentElRef);
                if (contentEl) {
                  contentEl.style.width = `${parseInt(barEl.style.width)}px`;
                }
              }
            }, 0);
          }
        } else {
          actionEl.style.left = `${widthNum - actionWidth}px`;
          barEl.style.width = `${widthNum - actionWidth / 2}px`;
          checkPass();
        }
        state.isMoving = false;
      }
    }
    function checkPass() {
      if (props.isSlot) {
        resume();
        return;
      }
      state.endTime = new Date().getTime();
      state.isPassing = true;
      state.isMoving = false;
    }
    function resume() {
      state.isMoving = false;
      state.isPassing = false;
      state.moveDistance = 0;
      state.toLeft = false;
      state.startTime = 0;
      state.endTime = 0;
      const actionEl = vue.unref(actionElRef);
      const barEl = vue.unref(barElRef);
      const contentEl = vue.unref(contentElRef);
      if (!actionEl || !barEl || !contentEl)
        return;
      state.toLeft = true;
      useTimeout.useTimeoutFn(() => {
        state.toLeft = false;
        actionEl.style.left = "0";
        barEl.style.width = "0";
      }, 300);
      contentEl.style.width = vue.unref(getContentStyleRef).width;
    }
    expose({
      resume
    });
    return () => {
      const renderBar = () => {
        const cls = [`darg-verify-bar`];
        if (state.toLeft) {
          cls.push("to-left");
        }
        return vue.createVNode("div", {
          "class": cls,
          "ref": barElRef,
          "style": vue.unref(getBarStyleRef)
        }, null);
      };
      const renderContent = () => {
        const cls = [`darg-verify-content`];
        const {
          isPassing
        } = state;
        const {
          text,
          successText
        } = props;
        isPassing && cls.push("success");
        return vue.createVNode("div", {
          "class": cls,
          "ref": contentElRef,
          "style": vue.unref(getContentStyleRef)
        }, [tsxHelper.getSlot(slots, "text", isPassing) || (isPassing ? successText : text)]);
      };
      const renderAction = () => {
        const cls = [`darg-verify-action`];
        const {
          toLeft,
          isPassing
        } = state;
        if (toLeft) {
          cls.push("to-left");
        }
        return vue.createVNode("div", {
          "class": cls,
          "onMousedown": handleDragStart,
          "onTouchstart": handleDragStart,
          "style": vue.unref(getActionStyleRef),
          "ref": actionElRef
        }, [tsxHelper.getSlot(slots, "actionIcon", isPassing) || (isPassing ? vue.createVNode(iconsVue.CheckOutlined, {
          "class": `darg-verify-action__icon`
        }, null) : vue.createVNode(iconsVue.DoubleRightOutlined, {
          "class": `darg-verify-action__icon`
        }, null))]);
      };
      return vue.createVNode("div", {
        "class": "ta-darg-verify",
        "ref": wrapElRef,
        "style": vue.unref(getWrapStyleRef),
        "onMousemove": handleDragMoving,
        "onTouchmove": handleDragMoving,
        "onMouseleave": handleDragOver,
        "onMouseup": handleDragOver,
        "onTouchend": handleDragOver
      }, [renderBar(), renderContent(), renderAction()]);
    };
  }
});

exports["default"] = Verify;
//# sourceMappingURL=verify2.js.map