diginet-core-ui 1.3.53 → 1.3.54

package/components/accordion/index.js

@@ -82,7 +82,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [id, disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [id, disabled, className, style, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};

package/components/accordion/summary.js

@@ -35,26 +35,25 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _SummaryRootCSS = SummaryRootCSS(background);
 
   const _onClick = e => {
-    if (!disabled) {
-      const target = e.target;
+    if (disabled) return;
+    const target = e.target;
 
-      if (onClickAccordion) {
-        onClickAccordion();
-        return;
-      }
+    if (onClickAccordion) {
+      onClickAccordion();
+      return;
+    }
 
-      if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
-        onClick(e);
-        return;
-      }
+    if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
+      onClick(e);
+      return;
+    }
 
-      if (expandState) {
-        if (expanded === undefined) setExpandState(false);
-        !!onCollapse && onCollapse(e);
-      } else if (!expandState) {
-        if (expanded === undefined) setExpandState(true);
-        !!onExpand && onExpand(e);
-      }
+    if (expandState) {
+      if (expanded === undefined) setExpandState(false);
+      !!onCollapse && onCollapse(e);
+    } else if (!expandState) {
+      if (expanded === undefined) setExpandState(true);
+      !!onExpand && onExpand(e);
     }
   };
 
@@ -137,7 +136,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
+  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',

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

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { Typography } from '../..';
-import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop } from '../../../styles/general';
+import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight } from '../../../styles/general';
 import { randomString } from '../../../utils';
 import { color as colors } from '../../../styles/colors';
 import theme from '../../../theme/settings';
@@ -24,6 +24,7 @@ const {
   },
   spacing
 } = theme;
+const padding = spacing(0.75);
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   className,
@@ -52,7 +53,6 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   if (typeof width === 'number') width += 'px';
   const [checkedState, setCheckedState] = useState(checked || defaultChecked);
-  const padding = spacing(0.5);
 
   if (!id) {
     [id] = useState('DGN-UI-' + randomString(10, {
@@ -62,123 +62,13 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const clMain = colors[color] || color;
-  const CheckBoxSquare = css`
-                ${flexRow};
-                ${positionRelative};
-                ${cursorPointer};
-                ${borderBox};
-                width: ${width};
-                min-width: ${width};
-                height: ${width};
-                min-height: ${width};
-                background-color: ${white};
-                border: 2px solid ${rest};
-                border-radius: 2px;
-                margin-right: ${spacing(2)}px;
-                &.determinate {
-                    &::after {
-                        ${displayBlock}
-                        ${positionAbsolute}
-				content   : '';
-                        height: 7px;
-                        left: 50%;
-                        top: 43%;
-                        transform: translate(-50%, -50%) scale(0) rotate(45deg);
-                        transition: transform 0.3s;
-                        width: 12.6px;
-                    }
-                }
-                &.indeterminate {
-                    &::after {
-                        ${flexRow}
-                        ${positionAbsolute}
-				content: "";
-                        background-color: white;
-                        left: 2px;
-                        top: 6px;
-                        width: 10px;
-                        height: 2px;
-                        transition: transform 0.3s;
-                        transform: scale(0);
-                    }
-                }
-                &:not(.disabled):not(.read-only) {
-                    &:hover {
-                        box-shadow: 0 0 0 3px ${clFillHover};
-                        background-color: ${clFillHover};
-                        border-color: ${clMain};
-                    }
-                    &:focus,
-                    &:active {
-                        box-shadow: 0 0 0 3px ${clFillPressed};
-                        background-color: ${clFillPressed};
-                    }
-                }
-                &:not(disabled):focus {
-                    box-shadow: 0 0 0 3px ${clFillPressed};
-                    background-color: ${clFillPressed};
-                }
-                &.disabled,
-                &.read-only {
-                    ${cursorNoDrop};
-                }
-            `;
-  const CheckBoxInput = css`
-                &:checked + label > span.css-${CheckBoxSquare.name} {
-                    &.determinate {
-                        &::after {
-                            transform: translate(-50%, -66%) scale(1) rotate(-45deg);
-                            background: linear-gradient(${white}, ${white}) left bottom/2px 100%,
-                                linear-gradient(${white}, ${white}) left bottom/100% 2px;
-                            background-repeat: no-repeat;
-                        }
-                    }
-                    &.indeterminate {
-                        &::after {
-                            transform: scale(1);
-                        }
-                    }
-                }
-                &:checked:not(:disabled) + label > span.css-${CheckBoxSquare.name} {
-                    background-color: ${clMain} !important;
-                    border-color: ${clMain} !important;
-                }
-                &:checked:disabled {
-                    & + label > span.css-${CheckBoxSquare.name} {
-                        &:not(.indeterminate) {
-                            background-color: ${clDisabled} !important;
-                        }
-                        &.indeterminate {
-                            background-color: ${clFormal2} !important;
-                            border-color: ${clFormal2} !important;
-                        }
-                    }
-                }
-                &:disabled {
-                    & + label > span.css-${CheckBoxSquare.name} {
-                        border-color: ${clDisabled};
-                    }
-                }
-            `;
-  const CheckBoxLabel = css`
-                ${flexRow};
-                ${positionRelative};
-                ${alignCenter};
-                ${borderBox};
-                margin-bottom: 0 !important;
-            `;
-  const CheckBoxRoot = css`
-                ${flexRow};
-                ${alignStart};
-                ${borderBox};
-            `;
-  const CheckboxContainer = css`
-                ${displayBlock};
-                ${positionRelative};
-                padding: ${padding}px;
-            `;
-
-  const handleChange = () => {
+
+  const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, clMain);
+
+  const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, clMain);
+
+  const handleChange = event => {
+    event.stopPropagation();
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
     const oldLogicChecked = inputRef.current.checked; //Use for TreeView
 
@@ -225,14 +115,14 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return jsx("div", {
     id: 'DGN-UI-Checkbox-' + id.replace('DGN-UI-', ''),
-    css: CheckboxContainer,
+    css: CheckboxContainerCSS,
     className: ['DGN-UI-Checkbox', className].join(' ').trim().replace(/\s+/g, ' '),
     ref: ref,
     ...props,
     onClick: handleChange
   }, jsx("div", {
-    css: CheckBoxRoot,
-    className: disabled ? 'disabled' : readOnly ? 'read-only' : ''
+    css: CheckBoxRootCSS,
+    className: ['DGN-UI-Checkbox-Root', disabled ? 'disabled' : readOnly ? 'read-only' : ''].join(' ').trim().replace(/\s+/g, ' ')
   }, jsx("input", {
     value: value,
     ...inputProps,
@@ -240,7 +130,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     readOnly: readOnly || inputProps.readOnly,
     disabled: disabled || inputProps.disabled,
     ref: inputRef,
-    css: CheckBoxInput,
+    css: _CheckBoxInputCSS,
     id: id,
     name: name,
     type: "checkbox",
@@ -248,16 +138,136 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onChange: handleChange,
     hidden: true
   }), jsx("label", {
-    css: CheckBoxLabel
+    css: CheckBoxLabelCSS
   }, jsx("span", {
     className: [determinate ? 'determinate' : 'indeterminate', readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' '),
-    css: CheckBoxSquare
+    css: _CheckBoxSquareCSS
   }), (children || label) && jsx(Typography, {
     type: 'p1',
+    style: {
+      marginLeft: spacing(1)
+    },
     color: disabled ? clDisabled : '',
     ...labelProps
   }, children || label))));
 }));
+
+const CheckBoxSquareCSS = (width, clMain) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${cursorPointer};
+    ${borderBox};
+    ${parseWidthHeight(width, width)};
+    min-width: ${width};
+    min-height: ${width};
+    background-color: ${white};
+    border: 2px solid ${rest};
+    border-radius: 2px;
+    margin: ${padding}px;
+    &.determinate {
+        &::after {
+            ${displayBlock};
+            ${positionAbsolute};
+            content: '';
+            height: 7px;
+            left: 50%;
+            top: 43%;
+            transform: translate(-50%, -50%) scale(0) rotate(45deg);
+            transition: transform 0.3s;
+            width: 12.6px;
+        }
+    }
+    &.indeterminate {
+        &::after {
+            ${flexRow};
+            ${positionAbsolute};
+            content: '';
+            background-color: white;
+            left: 2px;
+            top: 6px;
+            width: 10px;
+            height: 2px;
+            transition: transform 0.3s;
+            transform: scale(0);
+        }
+    }
+    &:not(.disabled):not(.read-only) {
+        &:hover {
+            box-shadow: 0 0 0 3px ${clFillHover};
+            background-color: ${clFillHover};
+            border-color: ${clMain};
+        }
+        &:focus,
+        &:active {
+            box-shadow: 0 0 0 3px ${clFillPressed};
+            background-color: ${clFillPressed};
+        }
+    }
+    &:not(disabled):focus {
+        box-shadow: 0 0 0 3px ${clFillPressed};
+        background-color: ${clFillPressed};
+    }
+    &.disabled,
+    &.read-only {
+        ${cursorNoDrop};
+    }
+`;
+
+const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
+    &:checked + label > span.css-${CheckBoxSquareCSSName} {
+        &.determinate {
+            &::after {
+                transform: translate(-50%, -66%) scale(1) rotate(-45deg);
+                background: linear-gradient(${white}, ${white}) left bottom/2px 100%,
+                    linear-gradient(${white}, ${white}) left bottom/100% 2px;
+                background-repeat: no-repeat;
+            }
+        }
+        &.indeterminate {
+            &::after {
+                transform: scale(1);
+            }
+        }
+    }
+    &:checked:not(:disabled) + label > span.css-${CheckBoxSquareCSSName} {
+        background-color: ${clMain} !important;
+        border-color: ${clMain} !important;
+    }
+    &:checked:disabled {
+        & + label > span.css-${CheckBoxSquareCSSName} {
+            &:not(.indeterminate) {
+                background-color: ${clDisabled} !important;
+            }
+            &.indeterminate {
+                background-color: ${clFormal2} !important;
+                border-color: ${clFormal2} !important;
+            }
+        }
+    }
+    &:disabled {
+        & + label > span.css-${CheckBoxSquareCSSName} {
+            border-color: ${clDisabled};
+        }
+    }
+`;
+
+const CheckBoxLabelCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    ${borderBox};
+    margin-bottom: 0 !important;
+`;
+const CheckBoxRootCSS = css`
+    ${flexRow};
+    ${alignStart};
+    ${borderBox};
+`;
+const CheckboxContainerCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    width: fit-content;
+`;
 Checkbox.defaultProps = {
   label: '',
   className: '',
@@ -271,57 +281,53 @@ Checkbox.defaultProps = {
   width: 18
 };
 Checkbox.propTypes = {
-  /** value to check/uncheck square */
+  /** If `true`, the component is checked. */
   checked: PropTypes.bool,
 
-  /** value to check/uncheck square (just one time) */
-  defaultChecked: PropTypes.bool,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** Prevent all event if true */
-  disabled: PropTypes.bool,
+  /** The main color of the component. ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
+  color: PropTypes.string,
 
-  /** Prevent all event if true (keeping style) */
-  readOnly: PropTypes.bool,
+  /** The default checked state. Use when the component is not controlled. */
+  defaultChecked: PropTypes.bool,
 
-  /** display tick or hyphen icon */
+  /** If `true` display tick or indeterminate if `false`. */
   determinate: PropTypes.bool,
 
-  /** Id is randomized randomly to avoid duplication. */
-  id: PropTypes.string,
-
-  /** value of input */
-  value: PropTypes.string,
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
 
-  /** class of Checkbox */
-  className: PropTypes.string,
+  /** The id of the component. */
+  id: PropTypes.string,
 
-  /** The name of the Checkbox corresponds to the label displayed on the interface */
-  name: PropTypes.string,
+  /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */
+  inputProps: PropTypes.object,
 
-  /** The name of the Radio is displayed on the interface */
+  /** The name of the Radio is displayed on the interface. */
   label: PropTypes.string,
 
-  /** color of checkbox background ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
-  color: PropTypes.string,
-
-  /** props for Typography of label */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
   labelProps: PropTypes.object,
 
-  /** props for input */
-  inputProps: PropTypes.object,
-
-  /** width is a number || string, width of Checkbox default 18 */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /** The function will run to return a true or false value of Radio Component */
-  onChange: PropTypes.func,
+  /** The name of the Checkbox corresponds to the label displayed on the interface. */
+  name: PropTypes.string,
 
   /**
-   * ref methods
+   * Callback fired when the state is changed.
    *
-   * * setChecked: Set check for input
-   * * getChecked: Get check of input
+   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
    */
-  ref: PropTypes.any
+  onChange: PropTypes.func,
+
+  /** If `true`, the component is readonly. */
+  readOnly: PropTypes.bool,
+
+  /** The width of checkbox. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** The value of input */
+  value: PropTypes.any
 };
 export default Checkbox;