diginet-core-ui 1.3.73 → 1.3.74

package/components/modal/body.js

@@ -4,18 +4,20 @@
 import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { borderBox, displayBlock, overflowAuto, positionRelative } from '../../styles/general';
+import { border, borderBox, displayBlock, overflowAuto, parseWidthHeight, positionRelative } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
+import { responsivePaddingCSS } from './header';
 const {
   colors: {
     fill: {
       'scrollbar-rest': scrollbarRest,
       'scrollbar-active': scrollbarActive
     }
-  },
-  spacing
+  }
 } = theme;
 const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
@@ -24,7 +26,9 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -34,7 +38,7 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return useMemo(() => jsx("div", {
     css: ModalBodyCSS,
     id: id,
-    className: ['DGN-UI-Modal-Body', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Modal-Body', className),
     style: style,
     ref: ref
   }, children), [children, className, id, style]);
@@ -44,23 +48,22 @@ const ModalBodyCSS = css`
     ${positionRelative};
     ${borderBox};
     ${overflowAuto};
-    width: 100%;
-    height: auto;
-    padding: ${spacing([2, 4])};
+    ${parseWidthHeight('100%', 'auto')};
     order: 2;
     &::-webkit-scrollbar {
         width: 24px;
     }
     &::-webkit-scrollbar-thumb {
+        ${border(8, 'transparent')};
         border-radius: 10px;
         mix-blend-mode: normal;
         background-color: ${scrollbarRest};
         background-clip: content-box;
-        border: 8px solid transparent;
         :hover {
             background-color: ${scrollbarActive};
         }
     }
+    ${responsivePaddingCSS};
 `;
 ModalBody.defaultProps = {
   className: '',

package/components/modal/footer.js

@@ -5,20 +5,25 @@ import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { alignCenter, borderBox, flexRow, justifyEnd, positionRelative } from '../../styles/general';
-import theme from '../../theme/settings';
-const {
-  spacing
-} = theme;
+import { classNames } from '../../utils';
+import { responsivePaddingCSS } from './header';
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  boxShadow,
   children,
   className,
   id,
   style
 }, reference) => {
   const ref = useRef(null);
+
+  const _ModalFooterCSS = ModalFooterCSS(boxShadow);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -26,14 +31,15 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   return useMemo(() => jsx("div", {
-    css: ModalFooterCSS,
+    css: _ModalFooterCSS,
     id: id,
-    className: ['DGN-UI-Modal-Footer', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Modal-Footer', className),
     style: style,
     ref: ref
-  }, children), [children, className, id, style]);
+  }, children), [boxShadow, children, className, id, style]);
 }));
-const ModalFooterCSS = css`
+
+const ModalFooterCSS = boxShadow => css`
     ${flexRow};
     ${positionRelative};
     ${alignCenter};
@@ -41,16 +47,21 @@ const ModalFooterCSS = css`
     ${borderBox};
     width: 100%;
     min-height: 56px;
-    padding: ${spacing([4, 6])};
     border-radius: 0px 0px 4px 4px;
-    box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
+    box-shadow: ${boxShadow};
     order: 3;
+    ${responsivePaddingCSS};
 `;
+
 ModalFooter.defaultProps = {
+  boxShadow: '0px -1px 1px rgba(0, 0, 0, 0.25)',
   className: '',
   style: {}
 };
 ModalFooter.propTypes = {
+  /** The box-shadow of component. */
+  boxShadow: PropTypes.string,
+
   /** The content of the component. */
   children: PropTypes.node,
 

package/components/modal/header.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
 import { ButtonIcon, Typography } from '../';
-import { alignCenter, borderBox, flexRow, justifyBetween, positionRelative } from '../../styles/general';
+import { alignCenter, borderBox, flexRow, justifyBetween, parseWidthHeight, positionRelative } from '../../styles/general';
+import { classNames, handleBreakpoints } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -14,15 +15,25 @@ const {
       headerbar
     }
   },
+  boxShadows: {
+    small: smallBoxShadow
+  },
   spacing
 } = theme;
+export const responsivePaddingCSS = handleBreakpoints({
+  xs: 4,
+  md: 6
+}, propValue => {
+  return `padding: ${spacing([4, propValue])};`;
+});
 const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
-  title,
-  className,
+  action = {},
   children,
+  className,
+  id,
+  showClose,
   style,
-  showClose
+  title
 }, reference) => {
   const modal = useContext(ModalContext);
   const ref = useRef(null);
@@ -31,7 +42,9 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -41,7 +54,7 @@ const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return useMemo(() => jsx("div", {
     css: _ModalHeaderCSS,
     id: id,
-    className: ['DGN-UI-Modal-Header', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Modal-Header', className),
     style: style,
     onMouseDown: modal.onMoveModal,
     ref: ref
@@ -69,21 +82,20 @@ const ModalHeaderCSS = modal => css`
     ${justifyBetween};
     ${alignCenter};
     ${borderBox};
+    ${parseWidthHeight('100%', 56)};
     background-color: ${headerbar};
-    width: 100%;
-    height: 56px;
-    padding: ${spacing([4, 6])};
     border-radius: 4px 4px 0px 0px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: ${smallBoxShadow};
     cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
     order: 1;
+    ${responsivePaddingCSS};
 `;
 
 ModalHeader.defaultProps = {
-  title: '',
   className: '',
+  showClose: true,
   style: {},
-  showClose: true
+  title: ''
 };
 ModalHeader.propTypes = {
   /** The content of the component. */

package/components/modal/index.js

@@ -1,28 +1,33 @@
 /* eslint-disable react/display-name */
-import React, { memo, useEffect, useRef, forwardRef } from 'react';
+import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Modal from './modal';
 import Header from './header';
 import Body from './body';
 import Footer from './footer';
 const ModalSample = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  title,
-  style,
-  headerStyle,
+  action = {},
   bodyStyle,
-  footerStyle,
-  refs,
   children,
   footer,
+  footerStyle,
+  headerStyle,
+  style,
+  title,
   ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
 
-  useEffect(() => {
-    if (refs) refs(ref);
-  }, []);
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return /*#__PURE__*/React.createElement(Modal, {
     ref: ref,
     style: style,
@@ -39,31 +44,28 @@ ModalSample.defaultProps = {
   title: ''
 };
 ModalSample.propTypes = {
-  /** customize style inline */
-  style: PropTypes.object,
+  /** Style inline of the body component. */
+  bodyStyle: PropTypes.object,
 
-  /** custom style inline for header */
-  headerStyle: PropTypes.object,
+  /** The content of the body component. */
+  children: PropTypes.node,
 
-  /** custom style inline for body */
-  bodyStyle: PropTypes.object,
+  /** The content of the footer component. */
+  footer: PropTypes.node,
 
-  /** custom style inline for footer */
+  /** Style inline of the footer component. */
   footerStyle: PropTypes.object,
 
-  /** get modal ref by function */
-  refs: PropTypes.func,
-
-  /** title for header */
-  title: PropTypes.node,
+  /** Style inline of the header component. */
+  headerStyle: PropTypes.object,
 
-  /** an element at footer */
-  footer: PropTypes.node,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** child content in body */
-  children: PropTypes.node,
+  /** The content of the header component. */
+  title: PropTypes.node,
 
-  /** any props else */
+  /** Any props else. */
   props: PropTypes.any
 };
 export default ModalSample;

package/components/modal/modal.js

@@ -8,8 +8,9 @@ import { jsx, css } from '@emotion/core';
 import useDelayUnmount from '../../utils/useDelayUnmount';
 import ModalContext from './context';
 import { animations } from '../../styles/animation';
-import { borderBox, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, positionFixed, positionRelative } from '../../styles/general';
+import { borderBox, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, parseWidthHeight, positionFixed, positionRelative } from '../../styles/general';
 import theme from '../../theme/settings';
+import { classNames } from '../../utils';
 const {
   colors: {
     system: {
@@ -19,26 +20,28 @@ const {
   typography: {
     paragraph1
   },
+  spacing,
   zIndex: zIndexCORE
 } = theme;
 const fadeInDown = animations.fadeInDown;
 const fadeOutUp = animations.fadeOutUp;
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  alignment,
+  autoFocus,
+  children,
+  className,
+  darkTheme,
+  dragAnyWhere,
   id,
-  open,
   moveable,
-  dragAnyWhere,
   moveOutScreen,
-  style,
-  zIndex,
-  pressESCToClose,
-  darkTheme,
-  autoFocus,
   onClose,
-  children,
+  open,
+  pressESCToClose,
+  style,
   width,
-  alignment,
-  className
+  zIndex
 }, reference) => {
   const ref = useRef(null);
   const overflow = useRef(null);
@@ -172,7 +175,9 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [openState]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
-    const _instance = {}; // methods
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
 
     _instance.__proto__ = {}; // hidden methods
 
@@ -197,7 +202,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         css: _ModalBoxCSS,
         ref: modalBoxRef,
         onMouseDown: moveable && dragAnyWhere ? dragMouseDown : null,
-        className: [`DGN-UI-Modal-Box ${openState ? 'DGN-UI-Modal-Show' : 'DGN-UI-Modal-Hide'}`, className].join(' ').trim().replace(/\s+/g, ' '),
+        className: classNames('DGN-UI-Modal-Box', openState ? 'DGN-UI-Modal-Show' : 'DGN-UI-Modal-Hide', className),
         style: style
       }, jsx(ModalContext.Provider, {
         value: {
@@ -210,19 +215,18 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return null;
-  }, [id, moveable, dragAnyWhere, style, className, children, openState, showModal]);
+  }, [children, className, dragAnyWhere, id, moveable, moveOutScreen, onClose, style, openState, showModal]);
 }));
 
 const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
     ${flexRow};
     ${positionFixed};
     ${justifyCenter};
+    ${parseWidthHeight('100%', '100vh')};
     z-index: ${zIndex};
     align-items: ${alignment === 'top' ? 'inherit' : 'center'};
-    padding-top: ${alignment === 'top' ? '12px' : 0};
+    padding-top: ${alignment === 'top' ? spacing([3]) : 0};
     background-color: ${darkTheme ? 'rgba(21, 26, 48, 0.5)' : 'transparent'};
-    width: 100%;
-    height: 100vh;
     top: 0;
     left: 0;
 `;
@@ -256,18 +260,18 @@ const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
 `;
 
 Modal.defaultProps = {
+  alignment: 'top',
+  autoFocus: true,
+  className: '',
   darkTheme: true,
-  open: false,
-  pressESCToClose: true,
-  moveable: false,
   dragAnyWhere: false,
+  moveable: false,
   moveOutScreen: false,
-  autoFocus: true,
-  alignment: 'top',
-  width: '80%',
-  zIndex: zIndexCORE(),
+  open: false,
+  pressESCToClose: true,
   style: {},
-  className: ''
+  width: '80%',
+  zIndex: zIndexCORE()
 };
 Modal.propTypes = {
   /** The component alignment. */

package/components/others/option-wrapper/index.js

@@ -1,17 +1,12 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { useState, forwardRef, useEffect } from 'react';
 import { jsx } from '@emotion/core';
 
 const OptionWrapper = WrappedComponent => {
   return /*#__PURE__*/forwardRef((props, ref) => {
-    if (!ref) {
-      ref = useRef(null);
-    }
-
     const [options, setOptions] = useState({});
-    const componentRef = useRef(null);
 
     const option = (option, optionValue) => {
       if (typeof option === 'undefined') {
@@ -30,20 +25,12 @@ const OptionWrapper = WrappedComponent => {
     useEffect(() => {
       setOptions({});
     }, [props]);
-    useImperativeHandle(ref, () => ({ ...componentRef.current,
-      instance: { ...componentRef.current.instance,
-        option
-      } // const currentRef = componentRef.current || {};
-      // const _instance = { ...componentRef.current.instance, option }; // methods
-      // _instance.__proto__ = { ...componentRef.current.instance?.__proto__ }; // hidden methods
-      // currentRef.instance = _instance;
-      // console.log('currentRef', currentRef.instance);
-      // return currentRef;
-
-    }));
     return jsx(WrappedComponent, { ...props,
       ...options,
-      ref: componentRef
+      action: {
+        option
+      },
+      ref: ref
     });
   });
 };

package/components/paging/page-info.js

@@ -42,6 +42,7 @@ const getLastPage = (totalItems, itemsPerPage) => {
 
 const delayOnInput = getGlobal('delayOnInput');
 const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   bgColor,
   className,
   currentPage,
@@ -213,23 +214,34 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       changeBy: 'itemsPerPage'
     });
   }, [itemsPerPageState]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
       onChangePage: page => _onChangePage({
         page: page,
         changeBy: 'ref'
       }),
       onChangePerPage: per => _onChangePerPage(per),
-      setTotalItems: items => setTotalItemsState(items)
-    },
-    onChangePage: page => _onChangePage({
+      setTotalItems: items => setTotalItemsState(items),
+      ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+
+    currentRef.onChangePage = page => _onChangePage({
       page: page,
       changeBy: 'ref'
-    }),
-    onChangePerPage: per => _onChangePerPage(per),
-    setTotalItems: items => setTotalItemsState(items)
-  }));
+    });
+
+    currentRef.onChangePerPage = per => _onChangePerPage(per);
+
+    currentRef.setTotalItems = items => setTotalItemsState(items);
+
+    return currentRef;
+  });
 
   const updateSize = () => {
     if (timer.current) {
@@ -589,23 +601,23 @@ PagingInfo.propTypes = {
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
 
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
 
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
 
@@ -618,15 +630,15 @@ PagingInfo.propTypes = {
   /** Compact type for mobile. */
   typeShort: PropTypes.bool,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)