@dxc-technology/halstack-react 0.0.0-df9dd3c → 0.0.0-dfb16f5

package/date-input/DateInput.js

@@ -11,6 +11,8 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -23,14 +25,16 @@ var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/Click
 
 var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
-var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
+var _dayjs2 = _interopRequireDefault(require("@date-io/dayjs"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
 var _templateObject;
@@ -39,34 +43,37 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var getValueForPicker = function getValueForPicker(value, format) {
+  return (0, _dayjs["default"])(value, format.toUpperCase(), true).format();
+};
+
 var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
+      name = _ref.name,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       value = _ref.value,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
       helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
-      _ref$clearable = _ref.clearable,
-      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$optional = _ref.optional,
-      optional = _ref$optional === void 0 ? false : _ref$optional,
+      clearable = _ref.clearable,
+      disabled = _ref.disabled,
+      optional = _ref.optional,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
       error = _ref.error,
-      _ref$autocomplete = _ref.autocomplete,
-      autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
+      autocomplete = _ref.autocomplete,
       margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+      size = _ref.size,
+      tabIndex = _ref.tabIndex;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(defaultValue),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       innerValue = _useState2[0],
       setInnerValue = _useState2[1];
@@ -82,11 +89,13 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       setAnchorEl = _useState6[1];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var refDate = ref || (0, _react.useRef)(null);
 
   var handleCalendarOnKeyDown = function handleCalendarOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 27:
-        // Esc
+    switch (event.key) {
+      case "Esc":
+      case "Escape":
         event.preventDefault();
         setIsOpen(false);
         break;
@@ -94,12 +103,13 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
-    var newValue = (0, _moment["default"])(newDate).format(format.toUpperCase());
+    var newValue = (0, _dayjs["default"])(newDate).format(format.toUpperCase());
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange({
+    newDate !== null && newDate !== void 0 && newDate.toJSON() ? onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      error: null,
-      date: newDate !== null && newDate !== void 0 && newDate.toJSON() ? newDate : null
+      date: newDate
+    }) : onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: newValue
     });
   };
 
@@ -107,36 +117,39 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     var newValue = _ref2.value,
         inputError = _ref2.error;
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
-    var momentDate = (0, _moment["default"])(newValue, format.toUpperCase(), true);
-    var invalidDateMessage = newValue !== "" && !momentDate.isValid() ? "Invalid date." : null;
-    onChange === null || onChange === void 0 ? void 0 : onChange({
+    var dayjsDate = (0, _dayjs["default"])(newValue, format.toUpperCase(), true);
+    var invalidDateMessage = newValue !== "" && !dayjsDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
+    var callbackParams = inputError || invalidDateMessage ? {
       value: newValue,
-      error: inputError || invalidDateMessage,
-      date: momentDate.isValid() ? momentDate.toDate() : null
-    });
+      error: inputError || invalidDateMessage
+    } : {
+      value: newValue
+    };
+    dayjsDate.isValid() ? onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, callbackParams), {}, {
+      date: dayjsDate.toDate()
+    })) : onChange === null || onChange === void 0 ? void 0 : onChange(callbackParams);
   };
 
   var handleIOnBlur = function handleIOnBlur(_ref3) {
     var value = _ref3.value,
         inputError = _ref3.error;
-    var momentDate = (0, _moment["default"])(value, format.toUpperCase(), true);
-    var invalidDateMessage = value !== "" && !momentDate.isValid() ? "Invalid date." : null;
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+    var dayjsDate = (0, _dayjs["default"])(value, format.toUpperCase(), true);
+    var invalidDateMessage = value !== "" && !dayjsDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
+    var callbackParams = inputError || invalidDateMessage ? {
       value: value,
-      error: inputError || invalidDateMessage,
-      date: momentDate.isValid() ? momentDate.toDate() : null
-    });
+      error: inputError || invalidDateMessage
+    } : {
+      value: value
+    };
+    dayjsDate.isValid() ? onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread({}, callbackParams), {}, {
+      date: dayjsDate.toDate()
+    })) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParams);
   };
 
-  var getValueForPicker = function getValueForPicker() {
-    return (0, _moment["default"])(value !== null && value !== void 0 ? value : innerValue, format.toUpperCase(), true).format();
-  };
-
-  var openCalendar = function openCalendar(event) {
-    if (event) {
-      setIsOpen(!isOpen);
-      setAnchorEl(event.currentTarget);
-    }
+  var openCalendar = function openCalendar() {
+    var dateBtn = refDate.current.getElementsByTagName("button")[0];
+    setIsOpen(!isOpen);
+    setAnchorEl(dateBtn);
   };
 
   var closeCalendar = function closeCalendar() {
@@ -300,10 +313,11 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
     theme: dateTheme
   }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
-    utils: _dateFns["default"]
+    utils: _dayjs2["default"]
   }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
+    defaultValue: defaultValue,
     value: value !== null && value !== void 0 ? value : innerValue,
     helperText: helperText,
     placeholder: placeholder ? format.toUpperCase() : null,
@@ -318,7 +332,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     margin: margin,
     size: size,
     tabIndex: tabIndex,
-    ref: ref
+    ref: refDate
   }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
     onKeyDown: handleCalendarOnKeyDown,
     open: isOpen,
@@ -343,7 +357,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     "aria-modal": "true"
   }, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
     variant: "static",
-    value: getValueForPicker(),
+    value: getValueForPicker(value !== null && value !== void 0 ? value : innerValue, format),
     onChange: function onChange(date) {
       return handleCalendarOnClick(date);
     },

package/date-input/DateInput.stories.tsx

@@ -19,7 +19,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcDateInput label="Disabled date input" helperText="Help message" value="06-04-2027" clearable disabled />
+      <DxcDateInput label="Disabled date input" helperText="Help message" defaultValue="06-04-2027" clearable disabled />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Invalid" theme="light" level={4} />
@@ -27,7 +27,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Relation between icons" theme="light" level={4} />
-      <DxcDateInput label="Error date input" error="Error message." value="06-04-2027" clearable />
+      <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2027" clearable />
     </ExampleContainer>
     <BackgroundColorProvider color="#333333">
       <DarkContainer>
@@ -38,7 +38,7 @@ export const Chromatic = () => (
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Disabled" theme="dark" level={4} />
-          <DxcDateInput label="Disabled Date input" helperText="Help message" value="06-04-2027" clearable disabled />
+          <DxcDateInput label="Disabled Date input" helperText="Help message" defaultValue="06-04-2027" clearable disabled />
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Invalid" theme="dark" level={4} />
@@ -46,7 +46,7 @@ export const Chromatic = () => (
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Relation between icons" theme="dark" level={4} />
-          <DxcDateInput label="Error date input" value="06-04-2027" error="Error message." clearable />
+          <DxcDateInput label="Error date input" defaultValue="06-04-2027" error="Error message." clearable />
         </ExampleContainer>
       </DarkContainer>
     </BackgroundColorProvider>
@@ -98,7 +98,7 @@ export const Chromatic = () => (
 const DatePicker = () => (
   <ExampleContainer expanded>
     <Title title="Show date input" theme="light" level={4} />
-    <DxcDateInput label="Date input" value="10-06-2023" />
+    <DxcDateInput label="Date input" defaultValue="10-06-2023" />
   </ExampleContainer>
 );
 
@@ -113,7 +113,7 @@ ShowDatePicker.play = async ({ canvasElement }) => {
 const YearPicker = () => (
   <ExampleContainer expanded>
     <Title title="Show date input" theme="light" level={4} />
-    <DxcDateInput label="Date input" value="10-06-2023" />
+    <DxcDateInput label="Date input" defaultValue="10-06-2023" />
   </ExampleContainer>
 );
 
@@ -126,7 +126,7 @@ ShowYearPicker.play = async () => {
 const YearPickerFocus = () => (
   <ExampleContainer expanded>
     <Title title="Show date input" theme="light" level={4} />
-    <DxcDateInput label="Date input" value="10-06-2023" />
+    <DxcDateInput label="Date input" defaultValue="10-06-2023" />
   </ExampleContainer>
 );