diginet-core-ui 1.3.50 → 1.3.51

package/components/accordion/css.js

@@ -1,37 +1,37 @@
 import { css } from '@emotion/core';
-import { typography } from '../../styles/typography';
-import { color as colors } from '../../styles/colors';
-import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import theme from '../../theme/settings';
+import { alignCenter, alignStart, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 const {
-  heading3
-} = typography;
-const {
-  system: {
-    active,
-    disabled: systemDisabled
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled
+    },
+    fill: {
+      disabled: fillDisabled,
+      headerbar,
+      focus,
+      hover,
+      pressed
+    }
   },
-  fill: {
-    disabled: fillDisabled,
-    headerbar,
-    focus,
-    hover,
-    pressed
-  }
-} = colors;
-export const SummaryRootCSS = css`
+  typography: {
+    heading3
+  },
+  spacing
+} = theme;
+export const SummaryRootCSS = background => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignCenter};
+    ${alignStart};
     ${cursorPointer};
     ${borderBox};
     ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    padding: 16px 24px;
-    &.background {
-        background-color: ${headerbar};
-    }
+    padding: ${spacing(4)}px ${spacing(6)}px;
+    ${background && `background-color: ${background === true ? headerbar : theme.colors[background] || background};`};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
         ${cursorPointer};
@@ -47,8 +47,7 @@ export const SummaryRootCSS = css`
         ${flexRow};
         .Accordion-Icon.rotate-able {
             ${borderBox};
-            width: 24px;
-            height: 24px;
+            ${parseWidthHeight(24, 24)};
             &:not(.TreeView) {
                 transform: rotateZ(0deg);
                 transform-origin: center;
@@ -62,7 +61,7 @@ export const SummaryRootCSS = css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            margin-right: 8px;
+            margin-right: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -70,7 +69,7 @@ export const SummaryRootCSS = css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            margin-left: 8px;
+            margin-left: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -144,8 +143,7 @@ export const SummaryRootCSS = css`
         ${displayInlineBlock};
         ${positionRelative};
         ${cursorPointer};
-        width: 24px;
-        height: 24px;
+        ${parseWidthHeight(24, 24)};
         transition: transform 200ms linear;
         .Accordion-Expand-Icon {
             transform: scale(1);
@@ -169,7 +167,6 @@ export const SummaryRootCSS = css`
             max-width: 34px;
             min-height: 24px;
             max-height: 34px;
-            padding: 3px;
         }
     }
 `;

package/components/accordion/details.js

@@ -5,16 +5,18 @@ import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderBox, displayBlock, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
-import { typography } from '../../styles/typography';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  paragraph1
-} = typography;
-const {
-  text: {
-    main
-  }
-} = colors;
+  colors: {
+    text: {
+      main
+    }
+  },
+  typography: {
+    paragraph1
+  },
+  spacing
+} = theme;
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -52,7 +54,7 @@ const DetailsRootCSS = css`
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
         ${paragraph1};
-        padding: 0 24px 16px 24px;
+        padding: 0 ${spacing(6)}px ${spacing(4)}px ${spacing(6)}px;
         color: ${main};
         &.disabled {
             ${pointerEventsNone}
@@ -66,13 +68,13 @@ AccordionDetails.defaultProps = {
   id: ''
 };
 AccordionDetails.propTypes = {
-  /** The element to display in alert like text props (priority) */
+  /** The content of the component. */
   children: PropTypes.node,
 
-  /** class for De */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** style inline of component */
-  style: PropTypes.object
+  /** Class for component. */
+  className: PropTypes.string
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -41,10 +41,10 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       style: style,
       className: ['DGN-UI-Accordion-Group', className].join(' ').trim().replace(/\s+/g, ' ')
-    }, Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+    }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
       onExpand: e => onCollapseOther(e, child.props.onExpand)
     })));
-  }, [className, children]);
+  }, [style, className, children]);
 }));
 const AccordionGroupRootCSS = css`
     ${borderRadius4px};
@@ -113,16 +113,16 @@ AccordionGroup.defaultProps = {
   style: {}
 };
 AccordionGroup.propTypes = {
-  /** collapse other if true */
-  collapseOther: PropTypes.bool,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** class on element */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** insist <Accordion /> */
-  children: PropTypes.node.isRequired,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** style inline of component */
-  style: PropTypes.object
+  /** If `true`, collapse other when expand */
+  collapseOther: PropTypes.bool
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -7,13 +7,16 @@ import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
 import Divider from '../divider';
 import { borderRadius4px, displayBlock, positionRelative } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  line: {
-    category
+  colors: {
+    line: {
+      category
+    }
   }
-} = colors;
+} = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   disabled,
   expand,
   expanded,
@@ -57,6 +60,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
+      id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
@@ -78,7 +82,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [id, disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};
@@ -102,31 +106,31 @@ Accordion.defaultProps = {
   style: {}
 };
 Accordion.propTypes = {
-  /** prevent all event if true */
+  /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** expand immediate after render if true (don't use this) */
+  /** If `true`, expand immediate after render (shouldn't use this). */
   expand: PropTypes.bool,
 
-  /** expand state of accordion (use this) */
+  /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
 
-  /** class on element */
-  className: PropTypes.string,
-
-  /** class on element */
+  /** The box-shadow of component. */
   boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** The function will run after expand Accordion detail */
+  /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
 
-  /** The function will run after collapse Accordion detail */
-  onCollapse: PropTypes.func,
-
-  /** insist <AccordionSummary />, <AccordionDetails /> */
-  children: PropTypes.node,
-
-  /** style inline of component */
-  style: PropTypes.object
+  /** Callback fired when Accordion is collapsed. */
+  onCollapse: PropTypes.func
 };
 export default Accordion;

package/components/accordion/summary.js

@@ -8,6 +8,7 @@ import { renderIcon } from '../../utils';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   expandIcon,
   collapseIcon,
   expandIconAt,
@@ -18,9 +19,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expandIconProps,
   style
 }, reference) => {
-  const ref = useRef(null);
-  const expandIconRef = useRef(null);
-  const timer = useRef(null);
   const {
     expanded,
     expandState,
@@ -30,8 +28,13 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onCollapse,
     setExpandState
   } = useContext(AccordionContext);
+  const ref = useRef(null);
+  const expandIconRef = useRef(null);
+  const timer = useRef(null);
 
-  const onClickHandler = e => {
+  const _SummaryRootCSS = SummaryRootCSS(background);
+
+  const _onClick = e => {
     if (!disabled) {
       const target = e.target;
 
@@ -93,19 +96,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useEffect(() => {
-    if (/^(#|rgb)/.test(background)) {
-      if (ref.current) {
-        ref.current.style.backgroundColor = background;
-      }
-
-      return () => {
-        if (ref.current) {
-          ref.current.style.backgroundColor = null;
-        }
-      };
-    }
-  }, [background]);
   useEffect(() => {
     if (expandState) {
       showHideDetailHandler('show');
@@ -124,19 +114,20 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
-      css: SummaryRootCSS,
+      id: id,
+      css: _SummaryRootCSS,
       ref: ref,
       tabIndex: "-1",
-      onClick: onClickHandler,
+      onClick: _onClick,
       style: style,
-      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
     }, children), !!expandIcon && jsx("div", {
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
-      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim()
+      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
     }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
       className: 'Accordion-Expand-Icon'
     }) : jsx("span", {
@@ -146,7 +137,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
+  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',
@@ -156,28 +147,28 @@ AccordionSummary.defaultProps = {
   style: {}
 };
 AccordionSummary.propTypes = {
-  /** the icon to display for expand icon */
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Icon display for expand icon. */
   expandIcon: PropTypes.any,
 
-  /** the icon to display for collapse icon */
+  /** Icon display for collapse icon. */
   collapseIcon: PropTypes.any,
 
-  /** the position to render expand icon */
+  /** Position to render icon. */
   expandIconAt: PropTypes.oneOf(['start', 'end']),
 
-  /** background for label summary */
+  /** Background for label summary. */
   background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** class for Summary component */
-  className: PropTypes.string,
-
-  /** The element to display in alert like text props (priority) */
-  children: PropTypes.node,
-
-  /** props of expand and collapse icons */
-  expandIconProps: PropTypes.any,
-
-  /** style inline of component */
-  style: PropTypes.object
+  /** Other props of icons. */
+  expandIconProps: PropTypes.any
 };
 export default AccordionSummary;

package/components/form-control/input-base/index.js

@@ -86,7 +86,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     padding-top: 4px;
                     &:not(:focus-within):hover {
                         &::before {
-                            border-bottom-color: ${colors.brand};
+                            ${!readOnly && `border-bottom-color: ${colors.brand}`};
                         }
                     }
                     &:focus-within {
@@ -125,11 +125,13 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     box-sizing: border-box;
                     background-color: ${colors.white};
                     &:not(:focus-within):hover {
-                        background-color: ${colors.hover};
-                        border-color: ${colors.brand};
-                        input {
+                        ${!readOnly && `
                             background-color: ${colors.hover};
-                        }
+                            border-color: ${colors.brand};
+                            input {
+                                background-color: ${colors.hover};
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
@@ -203,9 +205,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     &.outlined {
                         background-color: ${colors.dark12};
                     }
-                    input {
+                    /* input {
                         color: ${colors.disabled};
-                    }
+                    } */
                     .start-icon,
                     .end-icon {
                         &:not(.non-effect),
@@ -276,15 +278,17 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 position: relative;
                 resize: ${resize};
                 box-sizing: border-box;
-                &:disabled {
+                /* &:disabled {
                     color: ${colors.disabled};
-                }
+                } */
                 &:hover:not(:focus-within) {
-                    border-color: ${colors.brand};
-                    color: ${colors.primary};
-                    ::placeholder {
+                    ${!readOnly && `
+                        border-color: ${colors.brand};
                         color: ${colors.primary};
-                    }
+                        ::placeholder {
+                            color: ${colors.primary};
+                        }
+                    `};
                 }
                 &:focus-within {
                     color: ${colors.primary};
@@ -316,11 +320,13 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         height: 24px;
                     }
                     &:not(:focus-within):hover {
-                        background-color: ${colors.hover};
-                        border-color: ${colors.brand};
-                        input {
+                        ${!readOnly && `
                             background-color: ${colors.hover};
-                        }
+                            border-color: ${colors.brand};
+                            input {
+                                background-color: ${colors.hover};
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
@@ -351,17 +357,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         height: 24px;
                     }
                     &:not(:focus-within):hover {
-                        &::before {
+                        ${!readOnly && `
+                            &::before {
                             border-bottom-color: ${colors.brand};
-                        }
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
-                    &::after {
-                        border-bottom-color: ${colors.info5};
-                        transform: scaleX(1);
-                    }
-                `}
+                            &::after {
+                                border-bottom-color: ${colors.info5};
+                                transform: scaleX(1);
+                            }
+                        `}
                     }
                     &::before {
                         content: '';
@@ -386,7 +394,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 &.disabled {
                     pointer-events: none;
                     resize: none;
-                    color: ${colors.disabled};
+                    /* color: ${colors.disabled}; */
                     &.outlined {
                         background-color: ${colors.dark12};
                     }

package/components/tree-view/css.js

@@ -7,6 +7,7 @@ export const TreeViewRootCSS = css`
     .DGN-UI-Accordion {
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
+            ${alignCenter};
             min-height: 40px;
             padding: 0;
             border-radius: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.50",
+  "version": "1.3.51",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",
@@ -13,10 +13,7 @@
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
-    "@emotion/styled": "^10.0.27",
-    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "prop-types": "^15.7.2"
   },
   "repository": {
     "type": "git",

package/readme.md

@@ -38,6 +38,11 @@ npm test
 ```
 
 ## Changelog
+## 1.3.51
+- \[Fixed\]: THEME – Fix bug makeStyles add duplicate style tag into head tag
+- \[Fixed\]: Accordion – Change css AccordionSummary; Fix when children of AccordionGroup null
+- \[Fixed\]: InputBase – Fix disabled css
+
 ## 1.3.50
 - \[Fixed\]: Dropdown – Fix dropdown onInput search
 

package/styles/general.js

@@ -177,7 +177,7 @@ export const parseWidth = width => css`
 export const parseHeight = height => css`
     height: ${isNaN(height) ? height : height + 'px'};
 `;
-export const parseWidthHeight = (width, height) => css`
+export const parseWidthHeight = (width, height = width) => css`
     width: ${isNaN(width) ? width : width + 'px'};
     height: ${isNaN(height) ? height : height + 'px'};
 `;

package/theme/make-styles.js

@@ -1,6 +1,12 @@
 import { css } from '@emotion/core';
 import theme from './settings';
-export const makeStylesEls = [];
+let makeStylesEls = [];
+
+const setMakeStylesEls = value => {
+  makeStylesEls = value;
+};
+
+export { makeStylesEls, setMakeStylesEls };
 
 const makeStyle = obj => {
   if (typeof obj === 'function') {
@@ -65,11 +71,14 @@ const separateStyle = (className, style) => {
 };
 
 const createStyle = (className, style) => {
+  const styleInnerHTML = `${/@media/.test(className) ? '' : '.'}${className} {${style}}`; // Nếu đã có style trong head thì không thêm vào nữa
+
+  if (checkExist(styleInnerHTML)) return;
   const styleEl = document.createElement('style');
   styleEl.type = 'text/css';
   styleEl.dataMeta = 'makeStyles';
   document.head.appendChild(styleEl);
-  styleEl.appendChild(document.createTextNode(`${/@media/.test(className) ? '' : '.'}${className} {${style}}`));
+  styleEl.appendChild(document.createTextNode(styleInnerHTML));
   makeStylesEls.push(styleEl);
 };
 
@@ -92,4 +101,12 @@ const getEndBraces = (str, start) => {
   return temp;
 };
 
+const checkExist = styleInnerHTML => {
+  let isExist = false;
+  makeStylesEls.some(el => {
+    if (el.innerHTML === styleInnerHTML) isExist = true;
+  });
+  return isExist;
+};
+
 export default makeStyle;

package/theme/theme-provider.js

@@ -4,7 +4,7 @@
 import { memo, useEffect } from 'react';
 import { jsx, css } from '@emotion/core';
 import { setTheme } from './set-theme';
-import { makeStylesEls } from './make-styles';
+import { makeStylesEls, setMakeStylesEls } from './make-styles';
 import { string, object, node } from 'prop-types';
 import { font } from '../styles/font';
 const {
@@ -50,6 +50,7 @@ const ThemeProvider = /*#__PURE__*/memo(({
   children
 }) => {
   useEffect(() => {
+    setMakeStylesEls([]);
     return () => {
       if (makeStylesEls.length) {
         makeStylesEls.forEach(el => el && el.remove && el.remove());

package/utils/useDelayUnmount.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useDelayUnmount = (isMounted, delayTime) => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    let timeoutId;
+
+    if (isMounted && !show) {
+      setShow(true);
+    } else if (!isMounted && show) {
+      timeoutId = setTimeout(() => setShow(false), delayTime);
+    }
+
+    return () => clearTimeout(timeoutId);
+  }, [isMounted, delayTime, show]);
+  return show;
+};
+
+export default useDelayUnmount;