diginet-core-ui 1.4.1-beta.3 → 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/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.3",
+  "version": "1.4.1-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",