diginet-core-ui 1.3.24

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

@@ -0,0 +1,590 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { useEffect, useMemo, 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", _extends({}, 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;