diginet-core-ui 1.3.94-beta.3 → 1.3.94-beta.5

package/components/index.js

@@ -106,7 +106,7 @@ export { default as ModalFooter } from "./modal/footer";
 
 // PAGING
 export { default as PagingInfo } from "./paging/page-info";
-export { default as PagingSelector } from "./paging/page-selector2";
+export { default as PagingSelector } from "./paging/page-selector";
 
 // PAPER
 export { default as Paper } from "./paper";

package/components/modal/body.js

@@ -1,6 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { boxBorder, displayBlock, displayNone, order, overflowAuto, parseWidthHeight, positionRelative } from "../../styles/general";
@@ -11,7 +12,8 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
   id,
-  style
+  style,
+  ...props
 }, reference) => {
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
@@ -31,9 +33,10 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       id: id,
       className: classNames('DGN-UI-Modal-Body', className),
-      style: style
+      style: style,
+      ...props
     }, children);
-  }, [children, className, id, style]);
+  }, [children, className, id, style, props]);
 }));
 const ModalBodyCSS = css`
     ${displayBlock};
@@ -59,4 +62,5 @@ ModalBody.propTypes = {
   /** Style inline of component. */
   style: PropTypes.object
 };
-export default ModalBody;
+export { ModalBody };
+export default OptionWrapper(ModalBody);

package/components/modal/footer.js

@@ -1,9 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { boxBorder, flexRow, itemsCenter, justifyEnd, order, parseWidth, positionRelative } from "../../styles/general";
+import { boxBorder, displayFlex, flexRow, itemsCenter, justifyEnd, order, parseWidth, positionRelative } from "../../styles/general";
 import { classNames } from "../../utils";
 import { responsivePaddingCSS } from "./header";
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -38,6 +39,7 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [boxShadow, children, className, id, style]);
 }));
 const ModalFooterCSS = boxShadow => css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${itemsCenter};
@@ -64,4 +66,5 @@ ModalFooter.propTypes = {
   /** Style inline of component. */
   style: PropTypes.object
 };
-export default ModalFooter;
+export { ModalFooter };
+export default OptionWrapper(ModalFooter);

package/components/modal/header.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ButtonIcon, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { bgColor, boxBorder, cursorMove, displayFlex, flexRow, itemsCenter, justifyBetween, mgl, order, parseWidth, parseWidthHeight, positionRelative, truncate } from "../../styles/general";
@@ -114,4 +115,5 @@ ModalHeader.propTypes = {
   /** The content of the component if not have prop `children`. */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
-export default ModalHeader;
+export { ModalHeader };
+export default OptionWrapper(ModalHeader);

package/components/modal/modal.js

@@ -1,11 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { animations } from "../../styles/animation";
-import { bgColor, borderRadius4px, boxBorder, cursorMove, flexCol, flexRow, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionRelative, top } from "../../styles/general";
+import { bgColor, borderRadius, boxBorder, cursorMove, displayFlex, flexCol, flexRow, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionRelative, top } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, useDelayUnmount } from "../../utils";
 import ModalContext from "./context";
@@ -187,6 +188,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [alignment, autoFocus, children, className, darkTheme, dragAnyWhere, id, moveable, moveOutScreen, onClose, open, pressESCToClose, style, width, zIndex, openState, showModal]);
 }));
 const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
+    ${displayFlex};
     ${flexRow};
     ${positionAbsolute}
     ${justifyCenter};
@@ -200,15 +202,16 @@ const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
 `;
 const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
     ${paragraph1};
+    ${displayFlex};
     ${flexCol};
     ${positionRelative};
-    ${borderRadius4px}
+    ${borderRadius(4)};
     ${boxBorder};
     ${parseWidthHeight(width, 'max-content')};
     ${parseMaxWidthHeight('90%', 'calc(100% - 12px)')};
     ${parseMinWidth(150)};
     ${moveable && dragAnyWhere && cursorMove};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     margin: 0 auto;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     -webkit-box-orient: vertical;
@@ -267,4 +270,5 @@ Modal.propTypes = {
   /** The z-index of component. */
   zIndex: PropTypes.number
 };
-export default Modal;
+export { Modal };
+export default OptionWrapper(Modal);

package/components/paging/page-info.js

@@ -6,27 +6,18 @@ import OptionWrapper from "../others/option-wrapper";
 import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { itemsCenter, boxBorder, cursorPointer, flexRow, justifyCenter, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, textCenter, whiteSpaceNoWrap } from "../../styles/general";
+import { bgColor, borderTop, boxBorder, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, mg, mgb, mgl, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pd, textCenter, textColor, textLeft, whiteSpaceNoWrap } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
-      active: systemActive,
-      white: systemWhite
-    },
-    line: {
-      system: lineSystem,
-      category: lineCategory
-    },
-    text: {
-      main: textMain
+      active: systemActive
     }
   },
   typography: {
     paragraph2
-  },
-  spacing
+  }
 } = useTheme();
 const getLastPage = (totalItems, itemsPerPage) => {
   let _lastPage = 0;
@@ -57,7 +48,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const timer = useRef(null);
-  const currentPageRef = useRef(null);
+  const currentPageRef = useRef(currentPage);
   const numberRef = useRef(null);
   const totalRef = useRef(null);
   const [totalItemsState, setTotalItemsState] = useState(totalItems);
@@ -67,7 +58,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [disablePrevState, setDisablePrevState] = useState(true);
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
   const [inputPageValue, setInputPageValue] = useState(currentPage);
-  const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
+  const _PagingInfoCSS = PagingInfoCSS(bgColor, typeShort);
   const _onChangePage = async ({
     page,
     e,
@@ -296,7 +287,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const showPaging = checkShowPaging();
     return showPaging ? jsx("div", {
       ref: ref,
-      css: _pagingInfoCSS,
+      css: _PagingInfoCSS,
       id: id,
       style: style,
       className: classNames('DGN-UI-PagingInfo', className)
@@ -363,9 +354,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         totalRef.current = refs;
         setWithNumber(refs, null);
       },
-      css: css`
-                                    ${whiteSpaceNoWrap}
-                                `,
+      css: whiteSpaceNoWrap,
       type: 'p2'
     }, lastPage)), jsx(ButtonIcon, {
       circular: true,
@@ -412,7 +401,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: lineCategory
+      color: 'line/category'
     }) : getGlobal('lineNumber'), jsx(Dropdown, {
       allowSearch: false,
       viewType: 'underlined',
@@ -435,57 +424,59 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: lineCategory
+      color: 'line/category'
     }) : getGlobal('total') + ':', totalItemsState)) : null;
   }, [bgColor, className, hideWithPage, style, typeShort, currentPageState, disableNextState, disablePrevState, inputPageValue, itemsPerPageState, listPerPageState, totalItemsState]);
 }));
 const ViewNumberInput = css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${justifyCenter};
+    ${mg([0, 1])};
     transition: all 0.1s;
-    margin: ${spacing([0, 1])};
 `;
-const pagingInfoCSS = (bgColor, typeShort) => css`
+const PagingInfoCSS = (bgCl, typeShort) => css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${paragraph2};
     ${boxBorder};
     ${parseHeight(40)};
-    border-top: solid 1px ${lineSystem};
-    padding: ${spacing([1, 0])};
-    background-color: ${bgColor};
-    color: ${textMain};
+    ${borderTop(1, 'line/system')};
+    ${pd([1, 0])};
+    ${bgColor(bgCl)};
+    ${textColor('text/main')};
     .inputPage {
         ${textCenter};
-        margin: ${spacing([0, 0.5])};
+        ${mg([0, 0.5])};
         .DGN-UI-InputBase {
             ${noPadding};
             input {
                 ${paragraph2};
                 ${textCenter};
-                color: ${systemActive};
-                text-align: left;
+                ${textColor('system/active')};
+                ${textLeft};
             }
         }
     }
     .txt-line-number {
+        ${displayFlex};
         ${whiteSpaceNoWrap};
         ${itemsCenter};
         opacity: 0;
-        display: flex !important;
         transition: opacity 0.3s ease;
     }
     .DGN-UI-Divider {
-        margin: ${spacing([0, 2])};
+        ${mg([0, 2])};
     }
     .DGN-UI-Dropdown {
-        margin-left: ${`${spacing(typeShort ? [0] : [2])}`};
-        margin-bottom: 0;
+        ${mgl([typeShort ? 0 : 2])};
+        ${mgb(0)};
         ${parseMinWidth(52)};
         .DGN-UI-Dropdown-Form {
             ${parseMinHeight(24)};
-            padding: 0;
+            ${pd(0)};
             input,
             span {
                 ${paragraph2};
@@ -493,7 +484,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
                 ${cursorPointer};
             }
             .DGN-UI-Dropdown-Icon {
-                margin-left: ${spacing([1.5])};
+                ${mgl([1.5])};
                 div,
                 span,
                 svg {
@@ -504,16 +495,17 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         }
     }
     .total-items {
-        ${whiteSpaceNoWrap};
+        ${displayFlex};
         ${flexRow};
+        ${whiteSpaceNoWrap};
         ${itemsCenter};
-        margin-left: ${`${spacing(typeShort ? [0] : [4])}`};
+        ${mgl([typeShort ? 0 : 4])};
         opacity: 0;
         transition: opacity 0.3s ease;
     }
 `;
 PagingInfo.defaultProps = {
-  bgColor: systemWhite,
+  bgColor: 'system/white',
   className: '',
   currentPage: 0,
   hideWithPage: 'none',
@@ -572,8 +564,19 @@ PagingInfo.propTypes = {
    *  * @param {per} - number
    * * setTotalItems(items): Set total items
    *  * @param {items} - number
+   *
+   * * 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: ref
+  ref: ref
 };
 export { PagingInfo };
 export default OptionWrapper(PagingInfo);