diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,6 +1,9 @@
 /* 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';
@@ -14,27 +17,32 @@ const easing = {
     return Math.pow(pos - 1, 3) - 1;
   }
 };
+
 const addZero = i => {
   if (i < 10) {
     i = '0' + i;
   }
+
   return i;
-};
+}; //get hours of day
 
-//get hours of day
 
 const getHours = () => {
   let hours = [],
-    i = 0;
+      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 {
@@ -52,9 +60,8 @@ const Swiper = props => {
     value,
     width,
     ...other
-  } = props;
+  } = props; //id + class
 
-  //id + class
   const Id = randomString({
     allowSymbol: false,
     allowNumber: false
@@ -66,14 +73,12 @@ const Swiper = props => {
     highlightOption: 'DCUI-swiper-highlight-option' + Id,
     mainSelector: 'DCUI-swiper-main-selector' + Id,
     mainOption: 'DCUI-swiper-main-option' + Id
-  };
+  }; //reference
 
-  //reference
   const containerRef = useRef(null);
   const mainSelectorRef = useRef(null);
-  const highlightSelectorRef = useRef(null);
+  const highlightSelectorRef = useRef(null); //variables
 
-  //variables
   const thisCount = count - count % 4;
   const itemAngle = 360 / thisCount;
   const itemHeight = Math.ceil(height * 3 / thisCount);
@@ -90,8 +95,8 @@ const Swiper = props => {
     touchstart: null,
     touchmove: null,
     touchend: null
-  };
-  //style
+  }; //style
+
   const styles = {
     container: css`
             * {
@@ -173,18 +178,24 @@ const Swiper = props => {
             }
         `
   };
+
   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 = '';
+        mainOptions = '',
+        highlightOptions = '';
+
     for (let i in data) {
       mainOptions += `<li
 				class="${IDs.mainOption}"
@@ -206,6 +217,7 @@ const Swiper = props => {
 				${data[i].text || data[i].value}
 			</li>`;
     }
+
     if (type === 'infinite') {
       for (let i = 0; i < thisCount / 4; i++) {
         mainOptions = `<li
@@ -232,6 +244,7 @@ const Swiper = props => {
 					data-index="${i + lengthData}">
 					${data[i].text || data[i].value}</li>`;
       }
+
       highlightOptions = `<li
 				class="${IDs.highlightOption}"
 				style="
@@ -247,21 +260,27 @@ const Swiper = props => {
       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)`;
@@ -275,22 +294,27 @@ const Swiper = props => {
     });
     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);
@@ -300,21 +324,26 @@ const Swiper = props => {
           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) {
@@ -327,8 +356,10 @@ const Swiper = props => {
         return;
       }
     }
+
     throw new Error(`Can not select value: ${value}, ${value} match nothing in current data`);
   };
+
   const animateMoveByInitV = async initV => {
     let initScroll;
     let finalScroll;
@@ -336,6 +367,7 @@ const Swiper = props => {
     let totalScrollLen;
     let a;
     let t;
+
     if (type === 'infinite') {
       initScroll = thisScroll;
       a = initV > 0 ? -thisA : thisA;
@@ -366,8 +398,10 @@ const Swiper = props => {
         await animateToScroll(thisScroll, finalScroll, t);
       }
     }
+
     selectByScroll(thisScroll);
   };
+
   const touchstart = (e, touchData, parent) => {
     parent.addEventListener('touchmove', events.touchmove, {
       passive: true
@@ -379,14 +413,18 @@ const Swiper = props => {
     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 {
@@ -396,14 +434,17 @@ const Swiper = props => {
         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 {
@@ -415,39 +456,48 @@ const Swiper = props => {
       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
     });
@@ -456,26 +506,30 @@ const Swiper = props => {
     });
     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(() => {
+  }; // 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);
@@ -488,20 +542,17 @@ const Swiper = props => {
       select(value);
     }
   }, [value]);
-  return jsx("div", {
-    ...other,
+  return jsx("div", { ...other,
     className: IDs.container,
     css: styles.container,
     ref: containerRef,
-    style: {
-      ...containerStyle
+    style: { ...containerStyle
     }
   }, jsx("ul", {
     className: IDs.mainSelector,
     css: styles.mainSelector,
     ref: mainSelectorRef,
-    style: {
-      ...mainSelectorStyle
+    style: { ...mainSelectorStyle
     }
   }), jsx("div", {
     className: IDs.highlight,
@@ -512,6 +563,7 @@ const Swiper = props => {
     ref: highlightSelectorRef
   })));
 };
+
 Swiper.defaultProps = {
   containerStyle: {},
   count: 18,

package/components/form-control/toggle/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -50,6 +51,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!inputRef) {
     inputRef = useRef(null);
   }
+
   const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
   const padding = spacing(0.5);
   const formCheck = css`
@@ -135,18 +137,19 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowNumber: false,
     allowSymbol: false
   });
+
   const handleChange = () => {
     if (disabled || readOnly) return;
     setCheckedState(checked !== undefined ? Boolean(checked) : !checkedState);
     const e = {
       value: !checkedState,
-      target: {
-        ...inputRef.current,
+      target: { ...inputRef.current,
         checked: !checkedState
       }
     };
     if (onChange) onChange(e);
   };
+
   useEffect(() => {
     if (checked !== undefined) setCheckedState(Boolean(checked));
   }, [checked]);
@@ -155,8 +158,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: formCheck,
     ref: ref,
     ...props
-  }, jsx("input", {
-    ...inputProps,
+  }, jsx("input", { ...inputProps,
     ref: inputRef,
     hidden: true,
     name: name,
@@ -203,34 +205,47 @@ Toggle.defaultProps = {
 Toggle.propTypes = {
   /** * If `true`, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** prevent all event if true */
   readOnly: PropTypes.bool,
+
   /** If `true`, the component is defaultChecked. */
   defaultChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
+
   /** If `true`, the component is checked. */
   checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
+
   /** Id is randomized randomly to avoid duplication. */
   id: PropTypes.string,
+
   /** Name attribute of the `input` element. */
   name: PropTypes.string,
+
   /** The name of the Radio is displayed on the interface */
   label: PropTypes.string,
+
   /** height is a number, height of Toggle default 20 */
   height: PropTypes.number,
+
   /** width is a number, width of Toggle default 40 */
   width: PropTypes.number,
+
   /** props for input */
   inputProps: PropTypes.object,
+
   /** The line-clamp property truncates text at a specific number of Label. */
   lineClamp: PropTypes.number,
+
   /** Shows tooltip containing Label on hover */
   hoverTooltip: PropTypes.bool,
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
+
   /** If `true`, the label will indicate that the checkbox is required. */
   required: PropTypes.bool
 };

package/components/form-view/helper-text.js

@@ -14,8 +14,7 @@ const HelperText = /*#__PURE__*/memo(({
   };
   return /*#__PURE__*/React.createElement(Typography, {
     type: 'p3',
-    style: {
-      ...helperText,
+    style: { ...helperText,
       ...style
     },
     ...props
@@ -27,6 +26,7 @@ HelperText.defaultProps = {
 HelperText.propTypes = {
   /** helper text for input */
   text: PropTypes.string,
+
   /** style inline of helper text in HelperText component */
   style: PropTypes.object
 };

package/components/form-view/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -6,6 +7,7 @@ import Input from "../form-view/input";
 import Label from "../form-view/label";
 import HelperText from "../form-view/helper-text";
 import { dark4 } from "../../styles/colors";
+
 const FormLabel = ({
   label,
   inputProps,
@@ -52,6 +54,7 @@ const FormLabel = ({
     ...helperTextProps
   }));
 };
+
 FormLabel.defaultProps = {
   label: '',
   value: '',
@@ -66,26 +69,37 @@ FormLabel.defaultProps = {
 FormLabel.propTypes = {
   /** utc for Form label */
   utc: PropTypes.bool,
+
   /** thousandSeparator for Form label */
   thousandSeparator: PropTypes.bool,
+
   /** thousandChar for Form label */
   thousandChar: PropTypes.string,
+
   /** label for Form label */
   label: PropTypes.string,
+
   /** the displayed value for each change */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+
   /** text for Form label */
   text: PropTypes.string,
+
   /** viewType for Form label */
   viewType: PropTypes.string,
+
   /** dataType for Form label */
   dataType: PropTypes.string,
+
   /** props of span in InputView comp** dataType for Form label */
   format: PropTypes.string,
+
   /** props of span in format component */
   inputProps: PropTypes.object,
+
   /** style inline of span in InputView component */
   inputStyleProps: PropTypes.object,
+
   /** props for helper text */
   helperTextProps: PropTypes.object
 };

package/components/form-view/input.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -19,6 +20,7 @@ const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
+
   const inputRef = useRef(null);
   const TextInput = viewType !== 'outlined' ? css`
         display: flex;
@@ -69,34 +71,41 @@ const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             pointer-events: none;
         }
     `;
+
   const numberWithFormat = (x, thousandChar) => {
     let a = '';
+
     switch (thousandChar) {
       case ',':
         a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
         break;
+
       case '.':
         a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
         break;
+
       default:
         a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     }
+
     return a;
   };
+
   const dateWithFormat = date => {
     value = formatDate(date, format, utc);
     return value;
   };
+
   useEffect(() => {
     if (dataType === 'integer' && format !== null) {
       inputRef.current.innerHTML = numberWithFormat(value, thousandChar);
     }
+
     if (dataType === 'date' && format !== null) {
       inputRef.current.innerHTML = dateWithFormat(value);
     }
   }, [value]);
-  return useMemo(() => jsx("span", {
-    ...inputProps,
+  return useMemo(() => jsx("span", { ...inputProps,
     style: inputStyleProps,
     css: TextInput,
     ref: inputRef
@@ -108,8 +117,10 @@ InputView.defaultProps = {
 InputView.propTypes = {
   /** the displayed value for each change */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+
   /** props of span in InputView component */
   inputProps: PropTypes.object,
+
   /** style inline of span in InputView component */
   inputStyleProps: PropTypes.object
 };

package/components/form-view/label.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -26,6 +27,7 @@ Label.defaultProps = {
 Label.propTypes = {
   /** label for input */
   label: PropTypes.string,
+
   /** style inline of label in Label component */
   labelProps: PropTypes.object
 };