@meethive/components 0.0.3 → 0.0.4

package/lib/Scrollbar/Thumb.js

@@ -1,150 +1,101 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, computed, inject, onBeforeUnmount, ref, toRef } from 'vue'
-import { useEventListener } from '@vueuse/core'
-import { isClient } from '@meethive/utils'
-import { scrollbarContextKey } from './constants'
-import { BAR_MAP, renderThumbStyle } from './util'
-import { thumbProps } from './thumbProps'
-import useScrollbarStyle from './style'
-
-export default defineComponent({
-  name: 'ScrollbarThumb',
-  props: thumbProps,
-  setup(props) {
-    const scrollbar = inject(scrollbarContextKey) 
-    if (!scrollbar) throw new Error('can not inject scrollbar context')
-
-    const instance = ref()
-    const thumb = ref()
-    const thumbState = ref({})
-    const visible = ref(false)
-
-    const prefixCls = computed(() => 'j-scrollbar')
-    const [wrapSSR, hashId] = useScrollbarStyle(prefixCls)
-
-    let cursorDown = false
-    let cursorLeave = false
-    let originalOnSelectStart = isClient
-      ? document.onselectstart
-      : null
-
-    const bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])
-
-    const thumbStyle = computed(() =>
-      renderThumbStyle({
-        size: props.size ,
-        move: props.move ,
-        bar: bar.value
-      })
-    )
-
-    const offsetRatio = computed(
-      () =>
-        _optionalChain([(instance.value ), 'optionalAccess', _ => _[bar.value.offset]]) ** 2 /
-        scrollbar.wrapElement[bar.value.scrollSize] /
-        props.ratio /
-        _optionalChain([(thumb.value ), 'optionalAccess', _2 => _2[bar.value.offset]])
-    )
-
-    const clickThumbHandler = (e) => {
-      // prevent click event of middle and right button
-      e.stopPropagation()
-      if (e.ctrlKey || [1, 2].includes(e.button)) return
-
-      _optionalChain([window, 'access', _3 => _3.getSelection, 'call', _4 => _4(), 'optionalAccess', _5 => _5.removeAllRanges, 'call', _6 => _6()])
-      startDrag(e)
-
-      const el = e.currentTarget 
-      if (!el) return
-
-      thumbState.value[bar.value.axis] =
-        (el )[bar.value.offset] -
-        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])
-    }
-
-    const clickTrackHandler = (e) => {
-      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return
-
-      const offset = Math.abs(
-        (e.target ).getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
-      )
-      const thumbHalf = (thumb.value )[bar.value.offset] / 2
-      const thumbPositionPercentage =
-        ((offset - thumbHalf) * 100 * offsetRatio.value) /
-        (instance.value )[bar.value.offset]
-
-      scrollbar.wrapElement[bar.value.scroll] =
-        (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) / 100
-    }
-
-    const startDrag = (e) => {
-      e.stopImmediatePropagation()
-      cursorDown = true
-      document.addEventListener('mousemove', mouseMoveDocumentHandler)
-      document.addEventListener('mouseup', mouseUpDocumentHandler)
-      originalOnSelectStart = document.onselectstart
-      document.onselectstart = () => false
-    }
-
-    const mouseMoveDocumentHandler = (e) => {
-      if (!instance.value || !thumb.value) return
-      if (cursorDown === false) return
-
-      const prevPage = thumbState.value[bar.value.axis]
-      if (!prevPage) return
-
-      const offset =
-        (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1
-      const thumbClickPosition = (thumb.value )[bar.value.offset] - prevPage
-      const thumbPositionPercentage =
-        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /
-        (instance.value )[bar.value.offset]
-
-      scrollbar.wrapElement[bar.value.scroll] =
-        (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) / 100
-    }
-
-    const mouseUpDocumentHandler = () => {
-      cursorDown = false
-      thumbState.value[bar.value.axis] = 0
-      document.removeEventListener('mousemove', mouseMoveDocumentHandler)
-      document.removeEventListener('mouseup', mouseUpDocumentHandler)
-      restoreOnselectstart()
-      if (cursorLeave) visible.value = false
-    }
-
-    const mouseMoveScrollbarHandler = () => {
-      cursorLeave = false
-      visible.value = !!props.size
-    }
-
-    const mouseLeaveScrollbarHandler = () => {
-      cursorLeave = true
-      visible.value = cursorDown
-    }
-
-    onBeforeUnmount(() => {
-      restoreOnselectstart()
-      document.removeEventListener('mouseup', mouseUpDocumentHandler)
-    })
-
-    const restoreOnselectstart = () => {
-      if (document.onselectstart !== originalOnSelectStart)
-        document.onselectstart = originalOnSelectStart
-    }
-
-    useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mousemove', mouseMoveScrollbarHandler)
-    useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mouseleave', mouseLeaveScrollbarHandler)
-
-    return {
-      props,
-      instance,
-      thumb,
-      visible,
-      hashId,
-      thumbStyle,
-      clickThumbHandler,
-      clickTrackHandler
-    }
-  }
-})
+import { defineComponent, computed, inject, onBeforeUnmount, ref, toRef } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { isClient } from '@meethive/utils';
+import { scrollbarContextKey } from './constants';
+import { BAR_MAP, renderThumbStyle } from './util';
+import { thumbProps } from './thumbProps';
+import useScrollbarStyle from './style';
+export default defineComponent({
+  name: 'ScrollbarThumb',
+  props: thumbProps,
+  setup(props) {
+    const scrollbar = inject(scrollbarContextKey);
+    if (!scrollbar) throw new Error('can not inject scrollbar context');
+    const instance = ref();
+    const thumb = ref();
+    const thumbState = ref({});
+    const visible = ref(false);
+    const prefixCls = computed(() => 'j-scrollbar');
+    const [wrapSSR, hashId] = useScrollbarStyle(prefixCls);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let originalOnSelectStart = isClient ? document.onselectstart : null;
+    const bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']);
+    const thumbStyle = computed(() => renderThumbStyle({
+      size: props.size,
+      move: props.move,
+      bar: bar.value
+    }));
+    const offsetRatio = computed(() => instance.value?.[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value?.[bar.value.offset]);
+    const clickThumbHandler = e => {
+      // prevent click event of middle and right button
+      e.stopPropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button)) return;
+      window.getSelection()?.removeAllRanges();
+      startDrag(e);
+      const el = e.currentTarget;
+      if (!el) return;
+      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = e => {
+      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return;
+      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const startDrag = e => {
+      e.stopImmediatePropagation();
+      cursorDown = true;
+      document.addEventListener('mousemove', mouseMoveDocumentHandler);
+      document.addEventListener('mouseup', mouseUpDocumentHandler);
+      originalOnSelectStart = document.onselectstart;
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = e => {
+      if (!instance.value || !thumb.value) return;
+      if (cursorDown === false) return;
+      const prevPage = thumbState.value[bar.value.axis];
+      if (!prevPage) return;
+      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false;
+      thumbState.value[bar.value.axis] = 0;
+      document.removeEventListener('mousemove', mouseMoveDocumentHandler);
+      document.removeEventListener('mouseup', mouseUpDocumentHandler);
+      restoreOnselectstart();
+      if (cursorLeave) visible.value = false;
+    };
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave = false;
+      visible.value = !!props.size;
+    };
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave = true;
+      visible.value = cursorDown;
+    };
+    onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener('mouseup', mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart) document.onselectstart = originalOnSelectStart;
+    };
+    useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mousemove', mouseMoveScrollbarHandler);
+    useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mouseleave', mouseLeaveScrollbarHandler);
+    return {
+      props,
+      instance,
+      thumb,
+      visible,
+      hashId,
+      thumbStyle,
+      clickThumbHandler,
+      clickTrackHandler
+    };
+  }
+});