diginet-core-ui 1.3.66 → 1.3.68

package/components/grid/index.js

@@ -22,11 +22,13 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   container,
   direction,
   item,
+  leftSpacing: leftSpacingProp,
   lg,
   md,
   rowSpacing: rowSpacingProp,
   sm,
   spacing,
+  topSpacing: topSpacingProp,
   wrap,
   xl,
   xs,
@@ -36,11 +38,13 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columns = container ? columnsProp : columnsContext;
+  const topSpacing = topSpacingProp || rowSpacing;
+  const leftSpacing = leftSpacingProp || columnSpacing;
   const ref = useRef(null);
 
   const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap);
 
-  const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing);
+  const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing, topSpacing, leftSpacing);
 
   const _HandleGridCSS = HandleGridCSS([xs, sm, md, lg, xl], columns);
 
@@ -63,7 +67,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(GridContext.Provider, {
       value: columns
     }, children));
-  }, [id, container, item, direction, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, zeroMinWidth, className, columns, children]);
+  }, [id, container, item, direction, leftSpacing, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, topSpacing, zeroMinWidth, className, columns, children]);
 }));
 
 const getOffset = val => {
@@ -151,19 +155,40 @@ const GridCSS = (direction, zeroMinWidth, container, item, wrap) => css`
 })};
 `;
 
-const GridSpacingCSS = (rowSpacing, columnSpacing) => css`
-    ${rowSpacing && handleBreakpoints(rowSpacing, propValue => {
+const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing) => css`
+    ${topSpacing && handleBreakpoints(topSpacing, propValue => {
   const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
 
   if (spacing !== '0px') {
     return `
             margin-top: -${getOffset(spacing)};
+            `;
+  }
+
+  return '';
+})};
+    ${rowSpacing && handleBreakpoints(rowSpacing, propValue => {
+  const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
+  if (spacing !== '0px') {
+    return `
             & > .DGN-UI-Grid-item {
                 padding-top: ${getOffset(spacing)};
             }
             `;
   }
 
+  return '';
+})};
+    ${leftSpacing && handleBreakpoints(leftSpacing, propValue => {
+  const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
+  if (spacing !== '0px') {
+    return `
+                margin-left: -${getOffset(spacing)};
+                `;
+  }
+
   return '';
 })};
     ${columnSpacing && handleBreakpoints(columnSpacing, propValue => {
@@ -172,7 +197,6 @@ const GridSpacingCSS = (rowSpacing, columnSpacing) => css`
   if (spacing !== '0px') {
     return `
                 width: calc(100% + ${getOffset(spacing)});
-                margin-left: -${getOffset(spacing)};
                 & > .DGN-UI-Grid-item {
                 padding-left: ${getOffset(spacing)};
             }
@@ -230,6 +254,9 @@ Grid.propTypes = {
   /** If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. */
   item: PropTypes.bool,
 
+  /** Defines the horizontal space of `container` components. */
+  leftSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
 
@@ -245,6 +272,9 @@ Grid.propTypes = {
   /** Defines the space between the type `item` components. It can only be used on a type `container` component. */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
 
+  /** Defines the vertical space of `container` components. */
+  topSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 

package/components/index.js

@@ -22,7 +22,11 @@ export { default as Badge } from './badge'; // BUTTON
 export { default as Button } from './button';
 export { default as ButtonIcon } from './button/icon'; // CARD
 
-export { default as CardContainer } from './card'; // CHART
+export { default as Card } from './card';
+export { default as CardHeader } from './card/header';
+export { default as CardBody } from './card/body';
+export { default as CardFooter } from './card/footer';
+export { default as CardExtra } from './card/extra'; // CHART
 
 export { default as PieChart } from './chart/Pie';
 export { default as ColumnChart } from './chart/bar';
@@ -57,7 +61,8 @@ export { default as Toggle } from './form-control/toggle'; // Grid
 
 export { default as Grid } from './grid';
 export { default as Row } from './grid/Row';
-export { default as Col } from './grid/Col'; //Icon
+export { default as Col } from './grid/Col';
+export { default as Container } from './grid/Container'; //Icon
 
 export { default as Icon } from '../icons/index'; // List
 

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import { useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
 import { jsx } from '@emotion/core';
 
 const OptionWrapper = WrappedComponent => {
@@ -10,17 +10,15 @@ const OptionWrapper = WrappedComponent => {
       ref = useRef(null);
     }
 
-    const [options, setOptions] = useState(props);
+    const [options, setOptions] = useState({});
     const componentRef = useRef(null);
 
     const option = (option, optionValue) => {
       if (typeof option === 'undefined') {
-        return options;
+        return props;
       } else if (typeof option === 'string') {
-        if (typeof optionValue === 'undefined') return options[option];else setOptions({ ...options,
-          ...{
-            [option]: optionValue
-          }
+        if (typeof optionValue === 'undefined') return props[option];else setOptions({
+          [option]: optionValue
         });
       } else if (typeof option === 'object') {
         setOptions({ ...options,
@@ -29,26 +27,22 @@ const OptionWrapper = WrappedComponent => {
       }
     };
 
-    useImperativeHandle(ref, () => {
-      var _componentRef$current;
-
-      const currentRef = componentRef.current || {};
-      const _instance = { ...componentRef.current.instance,
-        ...{
-          option
-        }
-      }; // methods
-
-      _instance.__proto__ = { ...((_componentRef$current = componentRef.current.instance) === null || _componentRef$current === void 0 ? void 0 : _componentRef$current.__proto__)
-      }; // hidden methods
-
-      currentRef.instance = _instance;
-      return currentRef;
-    });
-    useEffect(() => setOptions({ ...options,
-      ...props
-    }), [props]);
-    return jsx(WrappedComponent, { ...options,
+    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
     });
   });