diginet-core-ui 1.3.88 → 1.3.89

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';
@@ -12,17 +11,17 @@ const {
   colors: {
     system: {
       rest: clRest,
-      active: clActive
+      active: clActive,
+      disabled: systemDisabled,
+      active: systemActive
     },
     text: {
       main: clTextMain
     },
     fill: {
-      focus: clFillFocus
+      focus: clFillFocus,
+      hover: fillHover
     },
-    primary: clPrimary,
-    hover: clHover,
-    disabled: clDisabled,
     white: clWhite,
     semantic: {
       danger: clDanger
@@ -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`
@@ -76,9 +74,10 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 background: ${clWhite};
                 outline: 1px solid ${clRest};
                 &.disabled {
-                    outline: 1px solid ${clDisabled} !important;
+                    outline: 1px solid ${systemDisabled} !important;
                 }
-                &.disabled, &.read-only{
+                &.disabled,
+                &.read-only {
                     ${cursorNoDrop};
                 }
                 &::after {
@@ -91,7 +90,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     left: 2px;
                     border-radius: 100%;
                     transition: 0.3s ease-in-out;
-                    margin: 0px auto;pop
+                    margin: 0px auto;
                 }
                 &:not(.disabled):not(.read-only) {
                     &:active,
@@ -103,22 +102,22 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const checkbox = css`
                 left: 0;
                 &:checked + label > span.css-${slider.name} {
-                    background: ${clPrimary};
-                    outline-color: ${clPrimary};
+                    background: ${systemActive};
+                    outline-color: ${systemActive};
                     &::after {
                         background: ${clWhite};
                         left: ${width - height}px;
                     }
                     &.disabled {
-                        background: ${clDisabled} !important;
+                        background: ${systemDisabled} !important;
                     }
                 }
                 &:not(:checked) + label > span.css-${slider.name} {
                     &:not(.disabled):not(.read-only) {
                         &:hover {
-                            box-shadow: 0 0 0 2px ${clHover};
-                            outline-color: ${clPrimary};
-                            background-color: ${clHover};
+                            box-shadow: 0 0 0 2px ${fillHover};
+                            outline-color: ${systemActive};
+                            background-color: ${fillHover};
                         }
                         &:hover:after {
                             background-color: ${clActive};
@@ -129,7 +128,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         }
                     }
                     &.disabled:after {
-                        background: ${clDisabled} !important;
+                        background: ${systemDisabled} !important;
                     }
                 }
             `;
@@ -137,19 +136,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 +156,8 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: formCheck,
     ref: ref,
     ...props
-  }, jsx("input", { ...inputProps,
+  }, jsx("input", {
+    ...inputProps,
     ref: inputRef,
     hidden: true,
     name: name,
@@ -177,7 +176,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }), label !== undefined && jsx(Typography, {
     type: 'p1',
     style: {
-      color: disabled ? clDisabled : clTextMain,
+      color: disabled ? systemDisabled : clTextMain,
       marginBottom: 0,
       marginLeft: spacing(2.5)
     },
@@ -186,7 +185,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     mapping: 'label'
   }, jsx(Fragment, null, label, required && jsx("span", {
     style: {
-      color: disabled ? clDisabled : clDanger
+      color: disabled ? systemDisabled : clDanger
     }
   }, "*"))))), [disabled, onChange, checkedState, readOnly]);
 }));
@@ -205,47 +204,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).
+  /** * 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
 };