diginet-core-ui 1.3.36 → 1.3.38

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

@@ -7,11 +7,30 @@ import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import theme from '../../../theme/settings';
 import generateRandom from '../../../utils/randomString';
 import Typography from '../../typography';
+import { alignCenter, cursorNotAllowed, cursorPointer, displayBlock, flexRow, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
+const {
+  colors: {
+    system: {
+      rest: clRest,
+      active: clActive
+    },
+    text: {
+      main: clTextMain
+    },
+    fill: {
+      focus: clFillFocus
+    },
+    primary: clPrimary,
+    hover: clHover,
+    disabled: clDisabled,
+    white: clWhite
+  },
+  spacing
+} = theme;
 const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
   name,
-  size,
   height,
   width,
   label,
@@ -20,6 +39,8 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onChange,
   inputRef,
   inputProps,
+  lineClamp,
+  hoverTooltip,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -27,115 +48,88 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
-
-  if (size === 'small') {
-    height = 10;
-    width = 20;
-  } else {
-    width = 38;
-    height = 19;
-  }
-
   const formCheck = css`
-                position: relative;
-                cursor: pointer;
-                user-select: none;
-                padding-left: 3px;
+                ${positionRelative};
+                ${cursorPointer};
+                ${userSelectNone};
+                min-height: ${height}px;
                 &.disabled {
-                    pointer-events: none;
+                    ${pointerEventsNone};
                 }
             `;
   const toggle = css`
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                position: relative;
-                box-sizing: border-box;
+                ${flexRow};
+                ${alignCenter};
+                ${cursorPointer};
+                ${positionRelative};
                 margin: 0;
             `;
   const slider = css`
-                position: relative;
-                cursor: pointer;
-                display: block;
+                ${positionRelative};
+                ${cursorPointer};
+                ${displayBlock};
                 height: ${height}px;
                 width: ${width}px;
+                min-width: ${width}px;
                 border-radius: ${height}px;
-                background: white;
-                border: 1px solid ${theme.colors.border};
-                margin: 0px auto;
+                background: ${clWhite};
+                outline: 1px solid ${clRest};
                 &::after {
+                    ${positionAbsolute};
+                    background: ${clRest};
+                    width: ${height - spacing(1)}px;
+                    height: ${height - spacing(1)}px;
                     content: '';
-                    box-sizing: border-box;
-                    position: absolute;
+                    top: 2px;
+                    left: 2px;
                     border-radius: 100%;
-                    left: 3%;
-                    z-index: 2;
-                    background: ${theme.colors.border};
                     transition: 0.3s ease-in-out;
-                    top: 49%;
-                    transform: translateY(-49%);
                     margin: 0px auto;
-                    width: ${width / 12 * 5}px;
-                    height: ${width / 12 * 5}px;
                 }
                 &:hover {
-                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
-                    background-color: ${theme.colors.focus};
-                    border: 1px solid ${theme.colors.primary};
+                    box-shadow: 0 0 0 2px ${clHover};
+                    background-color: ${clHover};
+                    outline-color: ${clPrimary};
+                }
+                &:hover:after {
+                    background-color: ${clActive};
+                }
+                &:active,
+                &:focus {
+                    box-shadow: 0 0 0 2px ${clFillFocus};
+                    background-color: ${clFillFocus};
                 }
             `;
   const checkbox = css`
-                box-sizing: border-box;
                 left: 0;
-                top: 50%;
-                z-index: 2;
                 &:checked + label > span.css-${slider.name} {
-                    border: none;
-                    background: ${theme.colors.primary};
-                    border: 1px solid transparent;
-                    transition: 0.3s ease-in-out;
-                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
+                    background: ${clPrimary};
+                    outline-color: ${clPrimary};
                     &::after {
-                        transform: translate(${height}px, -50%);
-                        background: white;
-                    }
-                }
-                &:hover:checked + label > span.css-${slider.name} {
-                    border: none;
-                    background: ${theme.colors.primary};
-                    border: 1px solid transparent;
-                    &::after {
-                        background: ${theme.colors.hover};
+                        background: ${clWhite};
+                        left: ${width - height}px;
                     }
                 }
                 &:disabled:checked + label > span.css-${slider.name} {
-                    user-select: none;
-                    pointer-events: none;
-                    cursor: not-allowed;
-                    border: none;
-                    background: ${theme.colors.disabled};
-                    border: 1px solid transparent;
-                    box-shadow: initial;
-                    &::after {
-                        background: ${theme.colors.dark12};
-                    }
+                    ${userSelectNone};
+                    ${pointerEventsNone};
+                    ${cursorNotAllowed};
+                    background: ${clDisabled};
+                    outline-color: ${clDisabled};
                 }
                 &:hover:not(:checked) + label > span.css-${slider.name} {
-                    background: ${theme.colors.hover};
-                    border: 1px solid ${theme.colors.primary};
+                    background: ${clHover};
+                    outline: 1px solid ${clPrimary};
                     transition: 0.3s ease-in-out;
                     ::after {
-                        background: ${theme.colors.primary};
+                        background: ${clPrimary};
                     }
                 }
                 &:disabled:not(:checked) + label > span.css-${slider.name} {
-                    background: ${theme.colors.dark12};
-                    cursor: not-allowed;
-                    user-select: none;
-                    border: 1px solid ${theme.colors.disabled};
-                    pointer-events: none;
+                    ${pointerEventsNone};
+                    outline-color: ${clDisabled};
                     ::after {
-                        background: ${theme.colors.disabled};
+                        background: ${clDisabled};
                     }
                 }
             `;
@@ -180,6 +174,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, jsx("input", { ...inputProps,
     ref: inputRef,
     hidden: true,
+    name: name,
     type: "checkbox",
     css: checkbox,
     checked: checkedState,
@@ -190,10 +185,14 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, jsx("span", {
     css: slider
   }), label !== undefined && jsx(Typography, {
+    type: 'p1',
     style: {
-      marginLeft: '8px',
-      marginBottom: 0
+      color: disabled ? clDisabled : clTextMain,
+      marginBottom: 0,
+      marginLeft: spacing(2.5)
     },
+    hoverTooltip: hoverTooltip,
+    lineClamp: lineClamp || null,
     mapping: 'label'
   }, label))), [disabled, onChange, checkedState]);
 }));
@@ -203,7 +202,9 @@ Toggle.defaultProps = {
   label: '',
   value: '',
   id: '',
-  size: ''
+  width: 40,
+  height: 20,
+  lineClamp: null
 };
 Toggle.propTypes = {
   /** * If `true`, the component is disabled. */
@@ -215,33 +216,34 @@ Toggle.propTypes = {
   /** If `true`, the component is checked. */
   checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
 
-  /** the size options default and small */
-  size: PropTypes.string,
-
   /** Id is randomized randomly to avoid duplication. */
   id: PropTypes.string,
 
-  /**
-   * Name attribute of the `input` element.
-   */
+  /** 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 19 */
+  /** height is a number, height of Toggle default 20 */
   height: PropTypes.number,
 
-  /** width is a number, width of Toggle default 38 */
+  /** width is a number, width of Toggle default 40 */
   width: PropTypes.number,
 
   /** props for input */
   inputProps: PropTypes.object,
 
-  /** * 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).
+  /** 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
 };

package/components/index.js

@@ -52,7 +52,7 @@ export { default as Label } from './form-control/label';
 export { default as HelperText } from './form-control/helper-text';
 export { default as TextInput } from './form-control/text-input';
 export { default as MoneyInput } from './form-control/money-input';
-export { default as NumberInput } from './form-control/number-input';
+export { default as NumberInput } from './form-control/number-input/index2';
 export { default as Toggle } from './form-control/toggle'; // List
 
 export { default as List } from './list/list';

package/components/modal/header.js

@@ -1,102 +1,100 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useContext, useRef, forwardRef } from 'react';
+import { memo, useMemo, useContext, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
-import { brand22 } from '../../styles/colors';
 import { ButtonIcon, Typography } from '../';
+import { alignCenter, borderBox, flexRow, justifyBetween, positionRelative } from '../../styles/general';
+import { color as colors } from '../../styles/colors';
+const {
+  fill: {
+    headerbar
+  }
+} = colors;
 const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title,
   className,
   children,
   style,
-  refs,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  showClose
+}, reference) => {
   const modal = useContext(ModalContext);
-  const ModalHeaderBox = css`
-        display: flex;
-        position: relative;
-        background-color: ${brand22};
-        width: 100%;
-        height: 56px;
-        padding: 16px 24px;
-        margin-bottom: 2px;
-        align-items: center;
-        justify-content: space-between;
-        border-radius: 4px 4px 0px 0px;
-        box-sizing: border-box;
-        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-        cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
-        order: 1;
-    `;
-  const HeaderTitle = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-        width: calc(100% - 40px);
-    `;
-  const ClearIconBox = css`
-        display: flex;
-        position: relative;
-        width: 24px;
-        height: 24px;
-        justify-content: center;
-        align-items: center;
-        margin-left: 16px;
-    `;
-  useEffect(() => {
-    !!refs && refs(ref);
-  }, []);
-  const Header = useMemo(() => jsx("div", {
-    css: ModalHeaderBox,
-    className: 'DGN-UI-Modal-Header ' + className,
-    ...props,
+  const ref = useRef(null);
+
+  const _ModalHeaderCSS = ModalHeaderCSS(modal);
+
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => jsx("div", {
+    css: _ModalHeaderCSS,
+    className: ['DGN-UI-Modal-Header', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     onMouseDown: modal.onMoveModal,
     ref: ref
-  }, jsx("div", {
-    css: HeaderTitle
   }, jsx(Typography, {
     type: 'h3',
     style: {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      width: '100%'
     }
-  }, children ? children : title)), jsx("div", {
-    css: ClearIconBox
-  }, jsx(ButtonIcon, {
+  }, children ? children : title), showClose && jsx(ButtonIcon, {
     viewType: 'ghost',
-    name: 'close',
+    name: 'Close',
+    style: {
+      marginLeft: 16
+    },
     onClick: modal.close
-  }))), [children, title, style]);
-  return Header;
+  })), [children, title, style, className, showClose]);
 }));
+
+const ModalHeaderCSS = modal => css`
+    ${flexRow};
+    ${positionRelative};
+    ${justifyBetween};
+    ${alignCenter};
+    ${borderBox};
+    background-color: ${headerbar};
+    width: 100%;
+    height: 56px;
+    padding: 16px 24px;
+    margin-bottom: 2px;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
+    order: 1;
+`;
+
 ModalHeader.defaultProps = {
   title: '',
-  className: ''
+  className: '',
+  style: {},
+  showClose: true
 };
 ModalHeader.propTypes = {
-  /** customize style inline */
+  /**  style inline of component */
   style: PropTypes.object,
 
-  /** class of ModalHeader */
+  /** class for component */
   className: PropTypes.string,
 
-  /** get modal header ref by function */
-  refs: PropTypes.func,
+  /** content for header (not work when have children) */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** title for header */
-  title: PropTypes.node,
+  /** content in header (priority) */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** child content in header (like title) */
-  children: PropTypes.node
+  /** show close modal button */
+  showClose: PropTypes.bool
 };
 export default ModalHeader;