diginet-core-ui 1.3.99-beta.2 → 1.3.99-beta.3

package/components/form-control/calendar/function.js

@@ -5,7 +5,7 @@ import { Button, ButtonIcon, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import { render } from 'react-dom';
-import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, mgt, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pd, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
+import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, gap, inset, itemsCenter, justifyBetween, mg, mgt, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pd, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { date as moment } from "../../../utils";
 const {
@@ -41,23 +41,33 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
         ${itemsCenter};
         ${parseMaxWidth(400)};
         ${mg([4, 4, 0])};
+        ${gap(8)};
         .${unique.navigator.around} {
             ${displayFlex};
             ${flexRow};
         }
         .${unique.navigator.center} {
+            ${displayFlex};
             ${parseWidth('100%')};
+            button {
+                &:hover {
+                    ${borderRadius(20)};
+                    ${bgColor('fill/hover')};
+                }
+                &:active {
+                    ${bgColor('fill/pressed')};
+                }
+            }
         }
     }
     .${unique.table.container} {
         ${displayFlex};
         ${flexRow};
-        ${mg([2, 0])};
+        ${mg([2, 0, 4])};
     }
     .${unique.table.table} {
         ${mg([0, 4])};
-        ${pd(0)};
-        ${parseWidth('calc(100% - 32px)')};
+        ${parseWidth('100%')};
         border-collapse: separate;
         table-layout: fixed;
         .${unique.table.data} {
@@ -68,15 +78,15 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 ${userSelectNone};
                 ${textColor('text/main')};
                 &:nth-of-type(7n - 1) {
-                    ${textColor('info8')};
+                    ${textColor('semantic/info')};
                 }
                 &:nth-of-type(7n) {
-                    ${textColor('danger8')};
+                    ${textColor('semantic/danger')};
                 }
                 &.next_month,
                 &.previous_month,
                 &.${unique.day.limit} {
-                    opacity: 0.25;
+                    ${textColor('system/disabled')};
                 }
                 &.${unique.day.limit} {
                     ${pointerEventsNone};
@@ -142,10 +152,10 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
             ${parseHeight(24)};
             ${textColor('text/normal_label')};
             &:nth-of-type(6) {
-                ${textColor('info8')};
+                ${textColor('semantic/info')};
             }
             &:nth-of-type(7) {
-                ${textColor('danger8')};
+                ${textColor('semantic/danger')};
             }
         }
     }
@@ -207,7 +217,7 @@ const typographyProps = className => {
       transition: 'background-color 150ms linear',
       width: 24
     },
-    type: 'h6'
+    type: 'p2'
   };
 };
 /**
@@ -220,26 +230,7 @@ const buttonIconProps = className => {
   return {
     className,
     circular: true,
-    viewType: 'text',
-    size: 'small'
-  };
-};
-/**
- *
- * @description return props of the button icon.
- * @param {Function} fn
- * @returns {Object} props of the button text
- */
-const buttonTextProps = fn => {
-  return {
-    onClick: fn,
-    color: 'primary',
-    size: 'small',
-    style: {
-      borderRadius: 20,
-      textTransform: 'initial',
-      width: '100%'
-    }
+    viewType: 'ghost'
   };
 };
 
@@ -464,7 +455,7 @@ const renderHeader = className => {
       className: className.table.header
     }, jsx(Typography, {
       color: 'inherit',
-      type: 'h6'
+      type: 'p2'
     }, weekdays[i])));
   }
   return jsx("thead", null, jsx("tr", {
@@ -499,11 +490,15 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
 })), jsx("div", {
   className: className.navigator.center
 }, jsx(Button, {
-  ...buttonTextProps(fn)
+  css: [borderRadius(20), parseWidth('100%'), pd(0)],
+  colorHover: 'fill/hover',
+  size: 'tiny',
+  onClick: fn
 }, jsx(Typography, {
   color: 'primary',
   type: 'h3',
-  ref: refs.content
+  ref: refs.content,
+  format: ['lowercase']
 }))), jsx("div", {
   className: className.navigator.around
 }, jsx(ButtonIcon, {

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

@@ -1,11 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-
 import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { date as moment } from "../../../utils";
-import { isAfterLimit, isBeforeLimit, onUpdateCalendar, renderHeader, renderNavigator, isValidDate, generateCalendarCSS } from "./function";
+import { generateCalendarCSS, isAfterLimit, isBeforeLimit, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from "./function";
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actions,
   className,
@@ -17,6 +16,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   value,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   // const [id] = useState(randomString(6, { allowSymbol: false }));
   const unique = {
     container: 'DGN-UI-Calendar',
@@ -49,7 +49,6 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const tableRef = useRef(null);
   const activeValue = useRef(null);
   const navigatorValue = useRef(null);
-  useImperativeHandle(reference, () => ref.current);
   const [, setActiveValue] = useState(Date.now());
   const [, setNavigatorValue] = useState(Date.now());
   const navigatorRefs = {
@@ -61,6 +60,14 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
   const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {}; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   /**
    * END REFERENCE
    */