diginet-core-ui 1.3.74 → 1.3.75-beta.2

package/components/button/icon.js

@@ -376,14 +376,14 @@ ButtonIcon.propTypes = {
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
 
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
@@ -399,19 +399,19 @@ ButtonIcon.propTypes = {
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/button/index.js

@@ -491,19 +491,19 @@ Button.propTypes = {
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

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

@@ -1774,12 +1774,14 @@ 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. */
@@ -1791,17 +1793,17 @@ Attachment.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
 
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
 
@@ -1844,16 +1846,16 @@ Attachment.propTypes = {
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
 
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
 

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

@@ -5,8 +5,8 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle, Fragment } from 'react';
 import { Typography } from '../..';
-import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight } from '../../../styles/general';
-import { randomString } from '../../../utils';
+import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight, border } from '../../../styles/general';
+import { classNames, randomString, refType as ref } from '../../../utils';
 import { color as colors } from '../../../styles/colors';
 import theme from '../../../theme/settings';
 const {
@@ -29,26 +29,27 @@ const {
 } = theme;
 const padding = spacing(0.75);
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
+  action = {},
+  checked,
+  children,
   className,
-  disabled,
-  readOnly,
-  name,
-  label,
   color,
-  value,
-  checked,
   defaultChecked,
   determinate,
-  onChange,
-  inputRef,
-  children,
-  inputProps,
+  disabled,
   forTreeView,
-  width,
+  id,
+  inputProps,
+  inputRef,
+  label,
   labelProps,
-  stopPropagation,
+  name,
+  onChange,
+  readOnly,
   required,
+  stopPropagation,
+  value,
+  width,
   ...props
 }, reference) => {
   if (!inputRef) {
@@ -82,11 +83,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     setChecked(checked !== undefined ? Boolean(checked) : !checkedState);
+    const currentInputRef = inputRef.current;
+    if (!forTreeView) inputRef.current.checked = !checkedState;
     const e = {
       value: forTreeView ? oldLogicChecked : !checkedState,
-      target: forTreeView ? inputRef.current : { ...inputRef.current,
-        checked: !checkedState
-      }
+      target: currentInputRef
     };
     if (onChange) onChange(e, checkedState);
   };
@@ -102,10 +103,12 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [checked]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
+    currentRef.element = ref.current;
     const _instance = {
       determinate: determinate,
       setChecked: setChecked,
-      getChecked: () => checkedState
+      getChecked: () => checkedState,
+      ...action
     }; // methods
 
     _instance.__proto__ = {}; // hidden methods
@@ -121,17 +124,17 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     id: 'DGN-UI-Checkbox-' + id.replace('DGN-UI-', ''),
     css: CheckboxContainerCSS,
-    className: ['DGN-UI-Checkbox', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Checkbox', className),
     ref: ref,
     ...props,
     onClick: handleChange
   }, jsx("div", {
     css: CheckBoxRootCSS,
-    className: ['DGN-UI-Checkbox-Root', disabled ? 'disabled' : readOnly ? 'read-only' : ''].join(' ').trim().replace(/\s+/g, ' ')
+    className: classNames('DGN-UI-Checkbox-Root', disabled && 'disabled', readOnly && 'read-only')
   }, jsx("input", {
     value: value,
     ...inputProps,
-    className: [determinate ? 'determinate' : 'indeterminate', inputProps.className || ''].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames(determinate ? 'determinate' : 'indeterminate', inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
     readOnly: readOnly || inputProps.readOnly,
     disabled: disabled || inputProps.disabled,
     ref: inputRef,
@@ -145,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }), jsx("label", {
     css: CheckBoxLabelCSS
   }, jsx("span", {
-    className: [determinate ? 'determinate' : 'indeterminate', readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' '),
+    className: classNames(determinate ? 'determinate' : 'indeterminate', readOnly && 'read-only', disabled && 'disabled'),
     css: _CheckBoxSquareCSS
   }), (children || label) && jsx(Typography, {
     type: 'p1',
@@ -167,35 +170,33 @@ const CheckBoxSquareCSS = (width, clMain) => css`
     ${cursorPointer};
     ${borderBox};
     ${parseWidthHeight(width, width)};
+    ${border(2, rest)};
     min-width: ${width};
     min-height: ${width};
     background-color: ${white};
-    border: 2px solid ${rest};
     border-radius: 2px;
     margin: ${padding}px;
     &.determinate {
         &::after {
             ${displayBlock};
             ${positionAbsolute};
+            ${parseWidthHeight(12.6, 7)};
             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};
+            ${parseWidthHeight(10, 2)};
             content: '';
             background-color: white;
             left: 2px;
             top: 6px;
-            width: 10px;
-            height: 2px;
             transition: transform 0.3s;
             transform: scale(0);
         }
@@ -278,17 +279,17 @@ const CheckboxContainerCSS = css`
     width: fit-content;
 `;
 Checkbox.defaultProps = {
-  label: '',
   className: '',
   color: 'primary',
-  disabled: false,
-  readOnly: false,
   defaultChecked: false,
   determinate: true,
+  disabled: false,
   inputProps: {},
+  label: '',
   labelProps: {},
-  width: 18,
-  stopPropagation: true
+  readOnly: false,
+  stopPropagation: true,
+  width: 18
 };
 Checkbox.propTypes = {
   /** If `true`, the component is checked. */
@@ -315,6 +316,9 @@ Checkbox.propTypes = {
   /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */
   inputProps: PropTypes.object,
 
+  /** Pass a ref to the input element. */
+  inputRef: ref,
+
   /** The name of the Radio is displayed on the interface. */
   label: PropTypes.string,
 
@@ -334,13 +338,13 @@ Checkbox.propTypes = {
   /** If `true`, the component is readonly. */
   readOnly: PropTypes.bool,
 
-  /** The width of checkbox. */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** If `true`, the label will indicate that the checkbox is required. */
+  required: PropTypes.bool,
 
   /** The value of input */
   value: PropTypes.any,
 
-  /** If `true`, the label will indicate that the checkbox is required. */
-  required: PropTypes.bool
+  /** The width of checkbox. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 export default Checkbox;