diginet-core-ui 1.3.83-beta.1 → 1.3.84

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

@@ -1078,8 +1078,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     title: "",
     onDrop: onDropInput,
     onDragLeave: onDropInput,
-    onClick: e => e.target.value = null // Fix not fire onChange when select same file
-    ,
     ...inputProps
   })), [inputProps]);
   const AttachedView = useMemo(() => jsx(ScrollBar, {
@@ -1440,14 +1438,12 @@ Attachment.defaultProps = {
   maxFile: Infinity,
   multiple: true,
   readOnly: false,
-  style: {},
   uploadErrorInfo: {
     maxFile: getGlobal(['errorDefault', 'maxFile']),
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  },
-  viewType: 'detail'
+  }
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */

package/components/paging/page-info.js

@@ -1,33 +1,32 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Divider, Dropdown, NumberInput, Typography } from "./..";
+import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle, useLayoutEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
+import { ButtonIcon, NumberInput, Dropdown, Typography, Divider } from "../";
 import { getGlobal } from "../../global";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { alignCenter, borderBox, cursorPointer, flexRow, justifyCenter, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, textCenter, whiteSpaceNoWrap } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, refType as ref } from "../../utils";
+import theme from "../../theme/settings";
+import { alignCenter, borderBox, flexRow, noPadding, textCenter, cursorPointer, parseHeight, whiteSpaceNoWrap, justifyCenter } from "../../styles/general";
 const {
   colors: {
     system: {
-      active: systemActive,
-      white: systemWhite
+      active,
+      white
     },
     line: {
-      system: lineSystem,
-      category: lineCategory
+      system,
+      category
     },
     text: {
-      main: textMain
+      main
     }
   },
   typography: {
     paragraph2
   },
   spacing
-} = useTheme();
+} = theme;
 const getLastPage = (totalItems, itemsPerPage) => {
   let _lastPage = 0;
   if (totalItems && totalItems >= 0 && itemsPerPage && itemsPerPage > 0) {
@@ -54,8 +53,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   totalItems,
   typeShort
 }, reference) => {
-  if (!reference) reference = useRef(null);
-  const ref = useRef(null);
+  let ref = useRef(null);
   const timer = useRef(null);
   const currentPageRef = useRef(null);
   const numberRef = useRef(null);
@@ -68,6 +66,8 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
   const [inputPageValue, setInputPageValue] = useState(currentPage);
   const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
+  // const _dynamicWidthCSS = dynamicWidthCSS(currentPageState.toString()?.length || 3);
+
   const _onChangePage = async ({
     page,
     e,
@@ -139,6 +139,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
     setItemsPerPageState(per);
+    // currentPageRef.current = 0;
+    // setCurrentPageState(0);
+    // setInputPageValue(0);
     _onChangePage({
       page: 0
     });
@@ -250,13 +253,13 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // getBoundingClientRect includes margin => phải trừ đi margin
       const style = window.getComputedStyle(child) || child.currentStyle;
       const margin = parseInt((style === null || style === void 0 ? void 0 : style.marginLeft) || 0) + parseInt((style === null || style === void 0 ? void 0 : style.marginRight) || 0);
-      if (infoChild.right - margin >= infoParent.right) {
+      if (infoChild.right - margin >= infoParent.width) {
         child.style.opacity = 0;
         child.style.setProperty('display', 'none', 'important');
       } else {
         child.style.opacity = 1;
       }
-      return infoChild.right >= infoParent.right;
+      return infoChild.right >= infoParent.width;
     });
   };
   const setWithNumber = useCallback((totalRefs = totalRef, numberRefs = numberRef) => {
@@ -294,12 +297,12 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     listPerPageData = [...new Map(listPerPageData.map(v => [JSON.stringify(v), v])).values()];
     listPerPageData.sort((a, b) => a.id - b.id);
     const showPaging = checkShowPaging();
-    return showPaging ? jsx("div", {
+    return showPaging && jsx("div", {
       ref: ref,
       css: _pagingInfoCSS,
       id: id,
       style: style,
-      className: classNames('DGN-UI-PagingInfo', className)
+      className: ['DGN-UI-PagingInfo', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx(ButtonIcon, {
       circular: true,
       viewType: 'ghost',
@@ -357,15 +360,15 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       placeholder: '',
       max: lastPage,
       onKeyDown: checkKeyPress,
-      onChange: onTypePaging
+      onChange: e => onTypePaging(e)
     }), "/", jsx(Typography, {
       ref: refs => {
         totalRef.current = refs;
         setWithNumber(refs, null);
       },
       css: css`
-                                    ${whiteSpaceNoWrap}
-                                `,
+                                        ${whiteSpaceNoWrap}
+                                    `,
       type: 'p2'
     }, lastPage)), jsx(ButtonIcon, {
       circular: true,
@@ -412,7 +415,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: lineCategory
+      color: category
     }) : getGlobal('lineNumber'), jsx(Dropdown, {
       allowSearch: false,
       viewType: 'underlined',
@@ -426,7 +429,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         readOnly: true
       },
       dropdownItemStyle: {
-        color: systemActive
+        color: active
       }
     })), jsx(Typography, {
       type: 'p2',
@@ -435,9 +438,9 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: lineCategory
-    }) : getGlobal('total') + ':', totalItemsState)) : null;
-  }, [bgColor, className, hideWithPage, style, typeShort, currentPageState, disableNextState, disablePrevState, inputPageValue, itemsPerPageState, listPerPageState, totalItemsState]);
+      color: category
+    }) : getGlobal('total') + ':', totalItemsState));
+  }, [typeShort, bgColor, style, className, hideWithPage, totalItemsState, itemsPerPageState, currentPageState, listPerPageState, disablePrevState, disableNextState, inputPageValue]);
 }));
 const ViewNumberInput = css`
     ${flexRow};
@@ -451,11 +454,11 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     ${alignCenter};
     ${paragraph2};
     ${borderBox};
-    ${parseHeight(40)};
-    border-top: solid 1px ${lineSystem};
+    ${parseHeight(40)}
+    border-top: solid 1px ${system};
     padding: ${spacing([1, 0])};
     background-color: ${bgColor};
-    color: ${textMain};
+    color: ${main};
     .inputPage {
         ${textCenter};
         margin: ${spacing([0, 0.5])};
@@ -464,7 +467,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
             input {
                 ${paragraph2};
                 ${textCenter};
-                color: ${systemActive};
+                color: ${active};
                 text-align: left;
             }
         }
@@ -482,9 +485,9 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     .DGN-UI-Dropdown {
         margin-left: ${`${spacing(typeShort ? [0] : [2])}`};
         margin-bottom: 0;
-        ${parseMinWidth(52)};
+        min-width: 52px;
         .DGN-UI-Dropdown-Form {
-            ${parseMinHeight(24)};
+            min-height: 24px;
             padding: 0;
             input,
             span {
@@ -493,12 +496,14 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
                 ${cursorPointer};
             }
             .DGN-UI-Dropdown-Icon {
-                margin-left: ${spacing([1.5])};
+                margin-left: 6px;
                 div,
                 span,
                 svg {
-                    ${parseWidthHeight(20)};
-                    ${parseMinWidthHeight(20)};
+                    width: 20px;
+                    min-width: 20px;
+                    height: 20px;
+                    min-height: 20px;
                 }
             }
         }
@@ -513,14 +518,14 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
     }
 `;
 PagingInfo.defaultProps = {
-  bgColor: systemWhite,
+  typeShort: false,
+  bgColor: white,
+  style: {},
   className: '',
+  totalItems: 0,
   currentPage: 0,
-  hideWithPage: 'none',
   listPerPage: [10, 15, 20, 30, 50],
-  style: {},
-  totalItems: 0,
-  typeShort: false
+  hideWithPage: 'none'
 };
 PagingInfo.propTypes = {
   /** Background color for component. */
@@ -573,7 +578,9 @@ PagingInfo.propTypes = {
    * * setTotalItems(items): Set total items
    *  * @param {items} - number
    */
-  reference: ref
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export { PagingInfo };
 export default OptionWrapper(PagingInfo);

package/components/tab/tab.js

@@ -102,7 +102,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _IndicatorCSS,
       className: 'Indicator'
     }));
-  }, [children, className, color, disabled, endIcon, index, label, labelProps, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
+  }, [children, className, color, disabled, endIcon, index, label, level, onClick, props, startIcon, style, isVertical, tabIndexState]);
 }));
 const TabButtonCSS = (color, isVertical) => css`
     ${flexRow};

package/icons/effect.js

@@ -1,37 +1,50 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../components/others/option-wrapper";
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { alignCenter, borderBox, flexRow, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, userSelectNone } from "../styles/general";
-import { useColor as colors, useTheme } from "../theme";
-import { capitalize, classNames, refType as ref } from "../utils";
+import { jsx, css } from '@emotion/core';
+import OptionWrapper from "../components/others/option-wrapper";
+import { color as colors } from "../styles/colors";
 import * as Icons from "./basic";
+import { capitalize } from "../utils";
+import { alignCenter, borderBox, flexRow, justifyCenter, outlineNone, userSelectNone } from "../styles/general";
 const {
-  colors: {
-    system: {
-      rest: systemRest
-    }
+  system: {
+    rest
   }
-} = useTheme();
+} = colors;
 const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
+  name,
   className,
+  style,
   color,
+  width,
   height,
-  id,
-  name,
-  onClick,
-  style,
   viewBox,
-  width,
+  onClick,
   ...props
 }, reference) => {
-  if (!reference) reference = useRef(null);
   const ref = useRef(null);
-  const _IconCSS = IconCSS(width, height);
-  const _NotFoundIconCSS = NotFoundIconCSS(width);
+  const IconCss = css`
+                ${flexRow};
+                ${justifyCenter};
+                ${alignCenter};
+                ${borderBox};
+                ${outlineNone};
+                ${userSelectNone};
+                width: max-content;
+                height: max-content;
+                min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
+            `;
+  const NotFoundIcon = css`
+                ${flexRow};
+                ${borderBox};
+                width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                border: 1px dashed ${rest};
+            `;
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -55,61 +68,48 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     } else {
       node = jsx("span", {
-        css: _NotFoundIconCSS
+        css: NotFoundIcon
       });
     }
     return jsx("span", {
-      css: _IconCSS,
-      ref: ref,
-      id: id,
-      className: classNames('DGN-UI-Icon', className),
+      className: 'DGN-UI-Icon ' + className,
       style: style,
+      css: IconCss,
+      ref: ref,
       onClick: onClick,
       ...props
     }, node);
-  }, [className, color, height, id, name, onClick, style, viewBox, width, props]);
+  }, [name, color, width, height, className, style, viewBox, onClick]);
 }));
-const IconCSS = (width = 24, height = 24) => css`
-    ${flexRow};
-    ${justifyCenter};
-    ${alignCenter};
-    ${borderBox};
-    ${outlineNone};
-    ${userSelectNone};
-    ${parseWidthHeight('max-content')};
-    ${parseMinWidthHeight(width, height)};
-`;
-const NotFoundIconCSS = (width = 24) => css`
-    ${flexRow};
-    ${borderBox};
-    ${parseWidthHeight(width)};
-    border: 1px dashed ${systemRest};
-`;
 Icon.defaultProps = {
   className: '',
-  color: 'dark6',
-  height: 24,
   style: {},
+  color: 'dark6',
   viewBox: true,
-  width: 24
+  width: 24,
+  height: 24
 };
 Icon.propTypes = {
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The color of the component. */
-  color: PropTypes.string,
-  /** Height of the component. */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Name of icon in [Basic Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic) */
+  /** name of icon in icons store */
   name: PropTypes.string.isRequired,
-  /** Style inline of component. */
+  /** color of icon<br />
+   * default: #7F828E
+   */
+  color: PropTypes.string,
+  /** className of icon in icons store */
+  className: PropTypes.string,
+  /** style of icon in icons store */
   style: PropTypes.object,
-  /** If `true`, component have view box. */
-  viewBox: PropTypes.bool,
-  /** Width of the component. */
+  /** the width of icon */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** the height of icon */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** have view box if true */
+  viewBox: PropTypes.bool,
+  /** have view box if true */
+  onClick: PropTypes.func,
   /**
-   * ref methods (ref.current.instance.*method*)
+   * ref methods
    *
    * * option(): Gets all UI component properties
    *  * Returns value - object
@@ -122,7 +122,9 @@ Icon.propTypes = {
    * * option(options): Updates the values of several properties
    *  * @param {options} - object
    */
-  reference: ref
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export { Icon };
 export default OptionWrapper(Icon);

package/package.json

@@ -1,73 +1,42 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.83-beta.1",
-  "description": "",
+  "version": "1.3.84",
+  "description": "The DigiNet core ui",
+  "homepage": "https://diginet.com.vn",
   "main": "index.js",
-  "license": "UNLICENSED",
   "scripts": {
-    "start": "npm-run-all --parallel start-sb eslint-test",
-    "start-sb": "start-storybook -p 9050",
-    "build-storybook": "build-storybook -c .storybook -s src",
-    "build": "run-script-os",
-    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
-    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
-    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
-    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
-    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
-    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
-    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
-    "version:add": "run-script-os",
-    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
-    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
-    "version:bump": "npm version patch --no-git-tag-version --silent",
-    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
-    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
-    "test-storybook": "test-storybook --url http://localhost:9050"
+    "start-js": "react-scripts start --max_old_space_size=4096",
+    "start": "npx npm-run-all -p start-js",
+    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
+    "eject": "react-scripts eject",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
-    "babel-plugin-module-resolver": "^4.1.0",
     "prop-types": "^15.7.2"
   },
-  "lint-staged": {
-    "*/**/*.{js,jsx,json}": [
-      "prettier --write",
-      "git add"
-    ]
+  "repository": {
+    "type": "git",
+    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@babel/preset-react": "^7.13.13",
-    "@storybook/addon-actions": "6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "6.2.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "6.2.9",
-    "@storybook/test-runner": "^0.7.1",
-    "autoprefixer": "^10.3.1",
-    "babel-loader": "^8.2.2",
-    "eslint": "^8.4.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-regex": "^1.10.0",
-    "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.1.2",
-    "mkdirp": "^1.0.4",
-    "npm-run-all": "^4.1.5",
-    "onchange": "^7.1.0",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "run-script-os": "^1.1.6",
-    "sass": "^1.37.0"
-  }
+  "keywords": [
+    "core ui",
+    "diginet"
+  ],
+  "author": "rocachien",
+  "contributors": [
+    {
+      "name": "Chien Do",
+      "email": "rocachien@gmail.com"
+    },
+    {
+      "name": "Nhat Tran",
+      "email": "tranminhnhat1005@gmail.com"
+    },
+    {
+      "name": "Thuan Nguyen",
+      "email": "nt.thuan.hutech@gmail.com"
+    }
+  ],
+  "license": "MIT"
 }

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 1.3.84
+- \[Fixed\]: Badge – Remove animation, conditional rendering with prop invisible
+- \[Fixed\]: InputBase – Fix css focus when readOnly
+
 ## 1.3.83
 - \[Changed\]: IconMenu – Add prop className, style
 - \[Changed\]: Grid – Add prop verticalAlign