diginet-core-ui 1.3.78 → 1.3.79

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

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

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -51,7 +50,6 @@ 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`
@@ -137,19 +135,18 @@ 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]);
@@ -158,7 +155,8 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: formCheck,
     ref: ref,
     ...props
-  }, jsx("input", { ...inputProps,
+  }, jsx("input", {
+    ...inputProps,
     ref: inputRef,
     hidden: true,
     name: name,
@@ -205,47 +203,34 @@ 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).
    */
   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,7 +14,8 @@ const HelperText = /*#__PURE__*/memo(({
   };
   return /*#__PURE__*/React.createElement(Typography, {
     type: 'p3',
-    style: { ...helperText,
+    style: {
+      ...helperText,
       ...style
     },
     ...props
@@ -26,7 +27,6 @@ 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,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -7,7 +6,6 @@ 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,
@@ -54,7 +52,6 @@ const FormLabel = ({
     ...helperTextProps
   }));
 };
-
 FormLabel.defaultProps = {
   label: '',
   value: '',
@@ -69,37 +66,26 @@ 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,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -20,7 +19,6 @@ const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const inputRef = useRef(null);
   const TextInput = viewType !== 'outlined' ? css`
         display: flex;
@@ -71,41 +69,34 @@ 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
@@ -117,10 +108,8 @@ 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,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -27,7 +26,6 @@ Label.defaultProps = {
 Label.propTypes = {
   /** label for input */
   label: PropTypes.string,
-
   /** style inline of label in Label component */
   labelProps: PropTypes.object
 };

package/components/grid/Col.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
@@ -28,18 +27,17 @@ const useStyles = makeStyles({
     }
   }
 });
-
 const Col = props => {
   const classes = useStyles();
   const {
     className
   } = props;
-  return jsx(Grid, { ...props,
+  return jsx(Grid, {
+    ...props,
     className: classNames(`DGN-UI-Col ${classes.customCol}`, className),
     item: true
   });
 };
-
 Col.defaultProps = {
   className: '',
   columns: 12,
@@ -55,37 +53,26 @@ Col.defaultProps = {
 Col.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** The number of columns. */
   columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
-
   /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
   direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
-
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
   md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
-
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
   xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
   xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
-
   /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
   zeroMinWidth: PropTypes.bool
 };