diginet-core-ui 1.4.39 → 1.4.40

package/components/form-control/time-picker/swiper.js

@@ -1,540 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/prop-types */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { useEffect, useRef } from 'react';
-import { jsx, css } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { randomString } from "../../../utils";
-const easing = {
-  easingOutCubic: pos => {
-    return Math.pow(pos - 1, 3) + 1;
-  },
-  easingOutQuart: pos => {
-    return Math.pow(pos - 1, 3) - 1;
-  }
-};
-const addZero = i => {
-  if (i < 10) {
-    i = '0' + i;
-  }
-  return i;
-};
-
-//get hours of day
-
-const getHours = () => {
-  let hours = [],
-    i = 0;
-  for (i; i < 24; i++) {
-    hours.push({
-      value: i,
-      text: addZero(i)
-    });
-  }
-  return hours;
-};
-const gradient = 'rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)';
-const Swiper = props => {
-  //properties
-  const {
-    containerStyle,
-    count,
-    data,
-    defaultValue,
-    direction,
-    height,
-    mainSelectorStyle,
-    onChange,
-    parentNode,
-    sensitivity,
-    type,
-    value,
-    width,
-    ...other
-  } = props;
-
-  //id + class
-  const Id = randomString({
-    allowSymbol: false,
-    allowNumber: false
-  });
-  const IDs = {
-    container: 'DCUI-swiper-container' + Id,
-    highlight: 'DCUI-swiper-highlight' + Id,
-    highlightSelector: 'DCUI-swiper-highlight-selector' + Id,
-    highlightOption: 'DCUI-swiper-highlight-option' + Id,
-    mainSelector: 'DCUI-swiper-main-selector' + Id,
-    mainOption: 'DCUI-swiper-main-option' + Id
-  };
-
-  //reference
-  const containerRef = useRef(null);
-  const mainSelectorRef = useRef(null);
-  const highlightSelectorRef = useRef(null);
-
-  //variables
-  const thisCount = count - count % 4;
-  const itemAngle = 360 / thisCount;
-  const itemHeight = Math.ceil(height * 3 / thisCount);
-  const itemWidth = Math.ceil(width * 3 / thisCount);
-  const radius = (direction === 'vertical' ? itemHeight : itemWidth) / Math.tan(itemAngle * Math.PI / 180);
-  let thisMoving = false;
-  let thisScroll = 0;
-  let thisMoveT = 0;
-  let thisValue = defaultValue || data[0].value;
-  let thisSelected = data[0];
-  let thisA = sensitivity * 10;
-  let thisExceedA = 10;
-  const events = {
-    touchstart: null,
-    touchmove: null,
-    touchend: null
-  };
-  //style
-  const styles = {
-    container: css`
-            * {
-                box-sizing: border-box;
-            }
-            background-color: #fff;
-            border-radius: 0;
-            color: #111d5e;
-            height: 100%;
-            overflow: hidden;
-            position: relative;
-            text-align: center;
-            width: 100%;
-            ::before,
-            ::after {
-                border-radius: 0px;
-                content: '';
-                display: block;
-                height: 50%;
-                pointer-events: none;
-                position: absolute;
-                width: 100%;
-                /* z-index: 9003; */
-                z-index: 1;
-            }
-            ::before {
-                top: 0;
-                background-image: linear-gradient(to bottom, ${gradient});
-            }
-            ::after {
-                bottom: 0;
-                background-image: linear-gradient(to top, ${gradient});
-            }
-        `,
-    mainSelector: css`
-            -webkit-font-smoothing: subpixel-antialiased;
-            color: #111d53;
-            list-style: none;
-            margin: 0 auto;
-            position: absolute;
-            top: 50%;
-            transform-style: preserve-3d;
-            transform: translate3d(0, 0, ${-radius}px) rotateX(0deg);
-            width: 100%;
-            .${IDs.mainOption} {
-                -webkit-font-smoothing: subpixel-antialiased;
-                backface-visibility: hidden;
-                cursor: pointer;
-                position: absolute;
-                user-select: none;
-            }
-        `,
-    highlightContainer: css`
-            background-color: #fff;
-            border-bottom: 1px solid #7f828e;
-            border-top: 1px solid #7f828e;
-            color: #111d53;
-            font-size: 24px;
-            font-weight: 500;
-            height: ${itemHeight}px;
-            left: 50%;
-            line-height: ${itemHeight}px;
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            vertical-align: middle;
-            width: 70%;
-        `,
-    highlightSelector: css`
-            list-style: none;
-            margin: 0;
-            padding: 0;
-            position: absolute;
-            width: 100%;
-            .${IDs.highlightOption} {
-                cursor: pointer;
-                user-select: none;
-            }
-        `
-  };
-  const renderSwiper = data => {
-    if (!data.length) return;
-    if (type === 'infinite') {
-      let concatData = [].concat(data);
-      while (concatData.length < data) {
-        concatData = concatData.concat(data);
-      }
-      data = concatData;
-    }
-    let lengthData = data.length,
-      mainOptions = '',
-      highlightOptions = '';
-    for (let i in data) {
-      mainOptions += `<li
-				class="${IDs.mainOption}"
-				style="
-					height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
-					left: ${direction === 'vertical' ? '0' : itemWidth * -0.5 + 'px'};
-					line-height: ${itemHeight + 'px' || 'normal'};
-					top: ${direction === 'vertical' ? itemHeight * -0.5 + 'px' : '0'};
-					width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};
-					transform: ${(direction === 'vertical' ? 'rotateX(' : 'rotateY(') + -itemAngle * i}deg) translate3d(0, 0, ${radius}px);"
-				data-index="${i}">
-				${data[i].text || data[i].value}
-			</li>`;
-      highlightOptions += `<li
-				class="${IDs.highlightOption}"
-				style="
-					height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
-					width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};">
-				${data[i].text || data[i].value}
-			</li>`;
-    }
-    if (type === 'infinite') {
-      for (let i = 0; i < thisCount / 4; i++) {
-        mainOptions = `<li
-					class="${IDs.mainOption}"
-					style="
-						height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
-						left: ${direction === 'vertical' ? '0' : itemWidth * -0.5 + 'px'};
-						line-height: ${itemHeight + 'px' || 'normal'};
-						top: ${direction === 'vertical' ? itemHeight * -0.5 + 'px' : '0'};
-						width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};
-						transform: ${(direction === 'vertical' ? 'rotateX(' : 'rotateY(') + itemAngle * (i + 1)}deg) translate3d(0, 0, ${radius}px);"
-					data-index="${-i - 1}">
-					${data[lengthData - i - 1].text || data[lengthData - i - 1].value}
-				</li>` + mainOptions;
-        mainOptions += `<li
-					class="${IDs.mainOption}"
-					style="
-						height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
-						left: ${direction === 'vertical' ? '0' : itemWidth * -0.5 + 'px'};
-						line-height: ${itemHeight + 'px' || 'normal'};
-						top: ${direction === 'vertical' ? itemHeight * -0.5 + 'px' : '0'};
-						width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};
-						transform: ${(direction === 'vertical' ? 'rotateX(' : 'rotateY(') + -itemAngle * (i + lengthData)}deg) translate3d(0, 0, ${radius}px);"
-					data-index="${i + lengthData}">
-					${data[i].text || data[i].value}</li>`;
-      }
-      highlightOptions = `<li
-				class="${IDs.highlightOption}"
-				style="
-					height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
-					width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};">
-				${data[lengthData - 1].text || data[lengthData - 1].value}</li>` + highlightOptions;
-      highlightOptions += `<li 
-				class="${IDs.highlightOption}"
-				style="
-					height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
-					width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};">
-				${data[0].text || data[0].value}</li>`;
-      highlightSelectorRef.current.style.top = direction === 'vertical' ? -itemHeight - 2 + 'px' : 'auto';
-      highlightSelectorRef.current.style.left = direction === 'vertical' ? 'auto' : -itemWidth - 2 + 'px';
-    }
-    mainSelectorRef.current.innerHTML = mainOptions;
-    highlightSelectorRef.current.innerHTML = highlightOptions;
-  };
-  const normalizeScroll = scroll => {
-    let normalizedScroll = scroll;
-    while (normalizedScroll < 0) {
-      normalizedScroll += data.length;
-    }
-    normalizedScroll = normalizedScroll % data.length;
-    return normalizedScroll;
-  };
-  const moveTo = scroll => {
-    if (type === 'infinite') {
-      scroll = normalizeScroll(scroll);
-    }
-    if (!mainSelectorRef.current) return;
-    mainSelectorRef.current.style.transform = `translate3d(0, 0, ${-radius}px) rotateX(${itemAngle * scroll}deg)`;
-    highlightSelectorRef.current.style.transform = `translate3d(0, ${-scroll * (direction === 'vertical' ? itemHeight : itemWidth)}px, 0)`;
-    const arrayOptions = [...mainSelectorRef.current.childNodes];
-    arrayOptions.forEach(option => {
-      if (Math.abs(option.dataset.index - scroll) > thisCount / 4) {
-        option.style.visibility = 'hidden';
-      } else {
-        option.style.visibility = 'visible';
-      }
-    });
-    return scroll;
-  };
-  const stop = () => {
-    thisMoving = false;
-    cancelAnimationFrame(thisMoveT);
-  };
-  const animateToScroll = (initScroll, finalScroll, t, easingName = 'easingOutCubic') => {
-    if (initScroll === finalScroll || t === 0) {
-      moveTo(initScroll);
-      return;
-    }
-    let start = new Date().getTime() / 1200;
-    let pass = 0;
-    let totalScrollLen = finalScroll - initScroll;
-    return new Promise(resolve => {
-      thisMoving = true;
-      let tick = () => {
-        pass = new Date().getTime() / 1200 - start;
-        if (pass < t) {
-          thisScroll = moveTo(initScroll + easing[easingName](pass / t) * totalScrollLen);
-          thisMoveT = requestAnimationFrame(tick);
-        } else {
-          resolve();
-          stop();
-          thisScroll = moveTo(initScroll + totalScrollLen);
-        }
-      };
-      tick();
-    });
-  };
-  const selectByScroll = scroll => {
-    scroll = normalizeScroll(scroll) | 0;
-    if (scroll > data.length - 1) {
-      scroll = data.length - 1;
-      moveTo(scroll);
-    }
-    moveTo(scroll);
-    thisScroll = scroll;
-    thisSelected = data[scroll];
-    thisValue = thisSelected.value;
-    if (onChange) onChange(thisSelected);
-  };
-  const select = value => {
-    for (let i in data) {
-      if (data[i].value === value) {
-        window.cancelAnimationFrame(thisMoveT);
-        let initScroll = normalizeScroll(thisScroll);
-        let finalScroll = i;
-        let t = Math.sqrt(Math.abs(finalScroll - initScroll) / thisA);
-        animateToScroll(initScroll, finalScroll, t);
-        setTimeout(() => selectByScroll(i));
-        return;
-      }
-    }
-    throw new Error(`Can not select value: ${value}, ${value} match nothing in current data`);
-  };
-  const animateMoveByInitV = async initV => {
-    let initScroll;
-    let finalScroll;
-    let finalV;
-    let totalScrollLen;
-    let a;
-    let t;
-    if (type === 'infinite') {
-      initScroll = thisScroll;
-      a = initV > 0 ? -thisA : thisA;
-      t = Math.abs(initV / a);
-      totalScrollLen = initV * t + a * t * t / 2;
-      finalScroll = Math.round(thisScroll + totalScrollLen);
-      await animateToScroll(thisScroll, finalScroll, t);
-    } else {
-      if (thisScroll < 0 || thisScroll > data.length - 1) {
-        a = thisExceedA;
-        initScroll = thisScroll;
-        finalScroll = thisScroll < 0 ? 0 : data.length - 1;
-        totalScrollLen = initScroll - finalScroll;
-        t = Math.sqrt(Math.abs(totalScrollLen / a));
-        initV = a * t;
-        initV = thisScroll > 0 ? -initV : initV;
-        finalV = 0;
-        await animateToScroll(initScroll, finalScroll, t);
-      } else {
-        initScroll = thisScroll;
-        a = initV > 0 ? -thisA : thisA;
-        t = Math.abs(initV / a);
-        totalScrollLen = initV * a + a * t * t / 2;
-        finalScroll = Math.round(thisScroll + totalScrollLen);
-        finalScroll = finalScroll < 0 ? 0 : finalScroll > data.length - 1 ? data.length - 1 : finalScroll;
-        totalScrollLen = finalScroll - initScroll;
-        t = Math.sqrt(Math.abs(totalScrollLen / a));
-        await animateToScroll(thisScroll, finalScroll, t);
-      }
-    }
-    selectByScroll(thisScroll);
-  };
-  const touchstart = (e, touchData, parent) => {
-    parent.addEventListener('touchmove', events.touchmove, {
-      passive: true
-    });
-    parent.addEventListener('mousemove', events.touchmove);
-    let event = e.clientY || e.touches[0].clientY;
-    touchData.start = event;
-    touchData.array = [[event, new Date().getTime()]];
-    touchData.touchScroll = thisScroll;
-    stop();
-  };
-  const touchmove = (e, touchData, parent) => {
-    let event = e.clientY || e.touches[0].clientY;
-    touchData.array.push([event, new Date().getTime()]);
-    if (touchData.array.length > 5) {
-      touchData.array.unshift();
-    }
-    let scrollAdd = (touchData.start - event) / (direction === 'vertical' ? itemHeight : itemWidth);
-    let moveToScroll = scrollAdd + thisScroll;
-    if (type === 'infinite') {
-      moveToScroll = normalizeScroll(moveToScroll);
-    } else {
-      if (moveToScroll < 0) {
-        moveToScroll *= 0.3;
-      } else if (moveToScroll > data.length) {
-        moveToScroll = data.length + (moveToScroll - data.length) * 0.3;
-      }
-    }
-    touchData.touchScroll = moveTo(moveToScroll);
-  };
-  const touchend = (e, touchData, parent) => {
-    parent.removeEventListener('touchmove', events.touchmove, {
-      passive: true
-    });
-    parent.removeEventListener('mousemove', events.touchmove);
-    let v;
-    if (touchData.array.length === 1) {
-      v = 0;
-    } else {
-      let startT = touchData.array[touchData.array.length - 2][1];
-      let endT = touchData.array[touchData.array.length - 1][1];
-      let start = touchData.array[touchData.array.length - 2][0];
-      let end = touchData.array[touchData.array.length - 1][0];
-      v = (start - end) / (direction === 'vertical' ? itemHeight : itemWidth) * 1000 / (endT - startT);
-      let sign = v > 0 ? 1 : -1;
-      v = Math.abs(v) > 30 ? 30 * sign : v;
-    }
-    thisScroll = touchData.touchScroll;
-    animateMoveByInitV(v);
-  };
-  const init = parent => {
-    renderSwiper(data);
-    let touchData = {
-      start: 0,
-      array: []
-    };
-    events.touchstart = e => {
-      if (parent.contains(e.target) || e.target === parent) {
-        e.preventDefault();
-        if (data.length) {
-          touchstart(e, touchData, parent);
-        }
-      }
-    };
-    events.touchmove = e => {
-      if (parent.contains(e.target) || e.target === parent) {
-        e.preventDefault();
-        if (data.length) {
-          touchmove(e, touchData, parent);
-        }
-      }
-    };
-    events.touchend = e => {
-      if (parent.contains(e.target) || e.target === parent) {
-        e.preventDefault();
-        if (data.length) {
-          touchend(e, touchData, parent);
-        }
-      }
-    };
-    parent.addEventListener('touchstart', events.touchstart, {
-      passive: true
-    });
-    parent.addEventListener('touchend', events.touchend, {
-      passive: true
-    });
-    parent.addEventListener('mousedown', events.touchstart);
-    parent.addEventListener('mouseup', events.touchend);
-    if (data.length) {
-      thisValue = defaultValue ? defaultValue : data[0].value;
-      select(thisValue);
-    }
-  };
-  const destroy = parent => {
-    stop();
-    for (let eventName in events) {
-      parent.removeEventListener(eventName, events[eventName]);
-    }
-    parent.removeEventListener('mousedown', events.touchstart);
-    parent.removeEventListener('mousemove', events.touchmove);
-    parent.removeEventListener('mouseup', events.touchend);
-    parent.innerHTML = '';
-  };
-  // useEffect(() => {
-  // 	const parent = (parentNode && parentNode.current) || (containerRef.current && containerRef.current.parentNode);
-  // 	init(parent);
-  // });
-
-  useEffect(() => {
-    const parent = parentNode && parentNode.current || containerRef.current && containerRef.current.parentNode;
-    init(parent);
-    return () => {
-      destroy(parent);
-    };
-  }, []);
-  useEffect(() => {
-    if (value) {
-      select(value);
-    }
-  }, [value]);
-  return jsx("div", {
-    ...other,
-    className: IDs.container,
-    css: styles.container,
-    ref: containerRef,
-    style: {
-      ...containerStyle
-    }
-  }, jsx("ul", {
-    className: IDs.mainSelector,
-    css: styles.mainSelector,
-    ref: mainSelectorRef,
-    style: {
-      ...mainSelectorStyle
-    }
-  }), jsx("div", {
-    className: IDs.highlight,
-    css: styles.highlightContainer
-  }, jsx("ul", {
-    className: IDs.highlightSelector,
-    css: styles.highlightSelector,
-    ref: highlightSelectorRef
-  })));
-};
-Swiper.defaultProps = {
-  containerStyle: {},
-  count: 18,
-  data: getHours(),
-  defaultValue: 0,
-  direction: 'vertical',
-  height: 300,
-  mainSelectorStyle: {},
-  sensitivity: 0.8,
-  type: 'infinite',
-  width: 200
-};
-Swiper.propTypes = {
-  containerStyle: PropTypes.object,
-  count: PropTypes.number,
-  data: PropTypes.array,
-  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  height: PropTypes.number,
-  mainSelectorStyle: PropTypes.object,
-  sensitivity: PropTypes.number,
-  type: PropTypes.oneOf(['infinite', 'normal']),
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: PropTypes.number
-};
-export default Swiper;