diginet-core-ui 1.4.1-beta.2 → 1.4.1-beta.4

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

@@ -5,14 +5,8 @@ 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, 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 {
-  boxShadows: {
-    large: boxShadowsLarge
-  }
-} = useTheme();
+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, shadowLarge, shadowNone, textCenter, textColor, userSelectNone } from "../../../styles/general";
+import { classNames, date as moment } from "../../../utils";
 
 /**
  * START STYLE
@@ -33,7 +27,7 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
     ${bgColor('system/white')};
     ${parseWidth('100%')};
     ${parseMaxWidth(400)};
-    box-shadow: ${boxShadow ? boxShadowsLarge : 'none'};
+    ${boxShadow ? shadowLarge : shadowNone};
     .${unique.navigator.navigator} {
         ${displayFlex};
         ${flexRow};
@@ -351,7 +345,7 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       tableData.push(jsx("td", {
         key: `previous_month-${prevDate - i + 1}`,
         "data-time": Date.parse(day) - 1 /*(displayAnotherMonth ? 0 : 1)*/,
-        className: `${[className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day)].join(' ')}`
+        className: classNames(className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day))
       }, jsx(Typography, {
         ...typographyProps(className.day.day)
       }, '')));
@@ -364,7 +358,7 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       tableData.push(jsx("td", {
         key: `this_month-${i + 1}`,
         "data-time": Date.parse(day),
-        className: `${[className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit), isBetween(day, active[0], active[1], className.day)].join(' ')}`,
+        className: classNames(className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit), isBetween(day, active[0], active[1], className.day)),
         onClick: onTableDataClick
       }, jsx(Typography, {
         ...typographyProps(className.day.day)
@@ -380,7 +374,7 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       tableData.push(jsx("td", {
         key: `next_month-${i + 1}`,
         "data-time": Date.parse(day) + 1 /*(displayAnotherMonth ? 0 : 1)*/,
-        className: `${[className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day)].join(' ')}`
+        className: classNames(className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day))
       }, jsx(Typography, {
         ...typographyProps(className.day.day)
       }, '')));
@@ -394,7 +388,7 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       tableData.push(jsx("td", {
         key: `previous_month-${prevDate - i + 1}`,
         "data-time": Date.parse(day) - (displayAnotherMonth ? 0 : 1),
-        className: `${[className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
+        className: classNames(className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)),
         onClick: onTableDataClick
       }, jsx(Typography, {
         ...typographyProps(className.day.day)
@@ -408,7 +402,7 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       tableData.push(jsx("td", {
         key: `this_month-${i + 1}`,
         "data-time": Date.parse(day),
-        className: `${[className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
+        className: classNames(className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)),
         onClick: onTableDataClick
       }, jsx(Typography, {
         ...typographyProps(className.day.day)
@@ -422,7 +416,7 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       tableData.push(jsx("td", {
         key: `next_month-${i + 1}`,
         "data-time": Date.parse(day) + (displayAnotherMonth ? 0 : 1),
-        className: `${[className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
+        className: classNames(className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)),
         onClick: onTableDataClick
       }, jsx(Typography, {
         ...typographyProps(className.day.day)

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

@@ -3,7 +3,7 @@
 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 { classNames, date as moment } from "../../../utils";
 import { generateCalendarCSS, isAfterLimit, isBeforeLimit, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from "./function";
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actions,
@@ -206,7 +206,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
    */
   return jsx("div", {
     ...props,
-    className: [unique.container, className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames(unique.container, className),
     css: generateCalendarCSS(unique),
     ref: ref
   }, renderNavigator(unique, navigatorRefs, setPrevYear, setPrevMonth, setNextMonth, setNextYear), tableMemo, actions);

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

@@ -9,7 +9,7 @@ import locale from "../../../../locale";
 import theme from "../../../../theme/settings";
 import { date as moment } from "../../../../utils";
 import { typography } from "../../../../styles/typography";
-import { itemsCenter, border, boxBorder, borderRadius4px, bgColor, cursorPointer, flexCol, flexRow, displayInlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, parseMinHeight, textCenter, textColor, userSelectNone, pd } from "../../../../styles/general";
+import { itemsCenter, border, boxBorder, borderRadius4px, bgColor, cursorPointer, flexCol, flexRow, displayInlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, parseMinHeight, textCenter, textColor, userSelectNone } from "../../../../styles/general";
 const {
   paragraph2,
   heading6

package/components/form-control/date-range-picker/index.js

@@ -7,15 +7,12 @@ import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, pd, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
-import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
+import { capitalizeSentenceCase, classNames, isEqual, date as moment, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 const {
-  boxShadows: {
-    large: boxShadowsLarge
-  },
   spacing,
   zIndex: zIndexCORE
 } = useTheme();
@@ -103,7 +100,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
+  var _placeholder;
   if (!reference) reference = useRef(null);
+  placeholder = (_placeholder = placeholder) !== null && _placeholder !== void 0 ? _placeholder : `${displayFormat} - ${displayFormat}`;
   const footerRef = useRef(null);
   const iconRef = useRef(null);
   const ipConRef = useRef(null);
@@ -1030,7 +1029,7 @@ const pickerCSS = {
         ${flexCol};
         ${borderRadius4px};
         ${bgColor('system/white')};
-        box-shadow: ${boxShadowsLarge};
+        ${shadowLarge};
         .${unique.wrapper} {
             ${displayFlex};
             ${flexRow};

package/components/form-control/time-picker/v2/index.js

@@ -11,6 +11,7 @@ import { typography } from "../../../../styles/typography";
 import { date, classNames } from "../../../../utils";
 const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
+  actionIconAt,
   className,
   disabled,
   displayFormat,
@@ -30,7 +31,6 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   value,
   viewType,
-  endIcon,
   returnFormat,
   readOnly,
   required,
@@ -446,6 +446,14 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setMinValue(min);
     setMaxValue(max);
   }, [min, max]);
+  const iconComp = jsx(ButtonIcon, {
+    disabled: disabled || readOnly,
+    viewType: 'ghost',
+    viewBox: true,
+    name: 'clock'
+  });
+  const endIcon = actionIconAt === 'end' && iconComp;
+  const startIcon = actionIconAt === 'start' && iconComp;
   return useMemo(() => {
     return jsx("div", {
       ref: ref,
@@ -471,6 +479,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         },
         value: displayTime,
         endIcon: endIcon,
+        startIcon: startIcon,
         onKeyDown: e => e.preventDefault(),
         status: error ? 'danger' : 'default',
         readOnly: true
@@ -604,7 +613,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       disabled: disabled
     }, error));
-  }, [className, currentInputFocus, disabled, displayTime, displayFormat, error, errorProps, id, inputProps, inputStyle, endIcon, placeholder, onChange, mode12h, minValue, maxValue, label, labelProps, style, minuteStep, timeValue, value, viewType, required, returnFormat, readOnly]);
+  }, [actionIconAt, className, currentInputFocus, disabled, displayTime, displayFormat, error, errorProps, id, inputProps, inputStyle, placeholder, onChange, mode12h, minValue, maxValue, label, labelProps, style, minuteStep, timeValue, value, viewType, required, returnFormat, readOnly]);
 }));
 const TimePickerCSS = css`
     ${mgt([1])};
@@ -690,16 +699,16 @@ const TimePickerAMPMCSS = currentText => css`
     }
 `;
 TimePicker.defaultProps = {
+  actionIconAt: 'end',
   className: '',
   disabled: false,
   displayFormat: 'HH:mm:ss',
   mode12h: false,
-  placeholder: '',
+  placeholder: 'HH:mm:ss',
   readOnly: false,
   required: false,
   returnFormat: 'HH:mm:ss',
   error: '',
-  endIcon: 'clock',
   minuteStep: 1,
   min: '',
   max: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.1-beta.2",
+  "version": "1.4.1-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/styles/general.js

@@ -417,9 +417,15 @@ const selfEnd = css`
 const selfStart = css`
     align-self: flex-start;
 `;
+const shadowLarge = css`
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+`;
 const shadowNone = css`
     box-shadow: none;
 `;
+const shadowSmall = css`
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
+`;
 const textCapitalize = css`
     text-transform: capitalize;
 `;
@@ -487,4 +493,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { animation, aspectSquare, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderRight, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { animation, aspectSquare, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderRight, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowLarge, shadowNone, shadowSmall, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };