@dnb/eufemia 10.55.0 → 10.56.0

package/cjs/components/date-picker/DatePicker.js

@@ -23,10 +23,10 @@ var _DatePickerAddon = _interopRequireDefault(require("./DatePickerAddon"));
 var _DatePickerFooter = _interopRequireDefault(require("./DatePickerFooter"));
 var _filterValidProps = require("../../shared/helpers/filterValidProps");
 var _shared = require("../../shared");
+var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
 var _AlignmentHelper;
 const _excluded = ["hidePicker"],
-  _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "hide_navigation_buttons", "first_day", "reset_date", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "mask_order", "mask_placeholder", "submit_button_text", "cancel_button_text", "reset_button_text", "show_reset_button", "className", "tooltip"],
-  _excluded3 = ["locale", "id", "month", "date", "start_date", "end_date", "min_date", "max_date", "enable_keyboard_nav", "hide_navigation", "return_format", "date_format", "hide_days", "correct_invalid_date", "opened", "direction", "range"];
+  _excluded2 = ["label", "title", "labelDirection", "labelSrOnly", "onlyMonth", "hideLastWeek", "disableAutofocus", "hideNavigationButtons", "firstDay", "resetDate", "link", "sync", "inputElement", "addonElement", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "suffix", "maskOrder", "maskPlaceholder", "submitButtonText", "cancelButtonText", "resetButtonText", "showResetButton", "className", "tooltip"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
@@ -39,56 +39,54 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const defaultProps = {
-  mask_order: 'dd/mm/yyyy',
-  mask_placeholder: 'dd/mm/åååå',
-  date_format: 'yyyy-MM-dd',
-  return_format: 'yyyy-MM-dd',
-  hide_navigation: false,
-  hide_navigation_buttons: false,
-  hide_days: false,
-  only_month: false,
-  hide_last_week: false,
-  disable_autofocus: false,
-  enable_keyboard_nav: false,
-  show_input: false,
-  submit_button_text: 'Ok',
-  cancel_button_text: 'Avbryt',
-  reset_button_text: 'Tilbakestill',
-  reset_date: true,
-  first_day: 'monday',
+  maskOrder: 'dd/mm/yyyy',
+  maskPlaceholder: 'dd/mm/åååå',
+  dateFormat: 'yyyy-MM-dd',
+  returnFormat: 'yyyy-MM-dd',
+  hideNavigation: false,
+  hideNavigationButtons: false,
+  hideDays: false,
+  onlyMonth: false,
+  hideLastWeek: false,
+  disableAutofocus: false,
+  enableKeyboardNav: false,
+  showInput: false,
+  submitButtonText: 'Ok',
+  cancelButtonText: 'Avbryt',
+  resetButtonText: 'Tilbakestill',
+  resetDate: true,
+  firstDay: 'monday',
   range: false,
   link: false,
   sync: true,
-  status_state: 'error',
+  statusState: 'error',
   opened: false,
-  no_animation: false,
+  noAnimation: false,
   direction: 'auto'
 };
 function DatePicker(externalProps) {
   const props = _objectSpread(_objectSpread({}, defaultProps), externalProps);
   const {
-    prevent_close,
-    on_hide,
-    on_show,
-    on_submit,
-    on_cancel,
-    on_reset,
-    no_animation,
-    show_input,
-    align_picker,
-    show_submit_button,
-    show_cancel_button,
+    preventClose,
+    onHide,
+    onShow,
+    onSubmit,
+    onCancel,
+    onReset,
+    noAnimation,
+    showInput,
+    alignPicker,
+    showSubmitButton,
+    showCancelButton,
     range,
-    hide_days,
-    hide_navigation,
-    opened: propsOpened,
-    end_date
-  } = props;
-  const [opened, setOpened] = (0, _react.useState)(propsOpened);
+    hideDays,
+    hideNavigation,
+    opened: openedProp,
+    endDate: endDateProp
+  } = (0, _withSnakeCaseProps.convertSnakeCaseProps)(props);
+  const [opened, setOpened] = (0, _react.useState)(openedProp);
   const [hidden, setHidden] = (0, _react.useState)(!opened);
-  const [startDate, setStartDate] = (0, _react.useState)();
-  const [endDate, setEndDate] = (0, _react.useState)();
-  const showInput = props.show_input;
+  const [dates, setDates] = (0, _react.useState)({});
   const context = (0, _react.useContext)(_Context.default);
   const blurDelay = 201;
   const id = props.id || (0, _componentHelper.makeUniqueId)();
@@ -99,8 +97,8 @@ function DatePicker(externalProps) {
   const hideTimeout = (0, _react.useRef)();
   const outsideClick = (0, _react.useRef)();
   const translation = (0, _shared.useTranslation)().DatePicker;
-  if (end_date && !range) {
-    (0, _componentHelper.warn)(`The DatePicker got a "end_date". You have to set range={true} as well!.`);
+  if (endDateProp && !range) {
+    (0, _componentHelper.warn)(`The DatePicker got a "endDate". You have to set range={true} as well!.`);
   }
   const removeOutsideClickHandler = (0, _react.useCallback)(() => {
     if (outsideClick.current) {
@@ -108,14 +106,14 @@ function DatePicker(externalProps) {
     }
   }, []);
   const hidePicker = (0, _react.useCallback)(args => {
-    if (prevent_close) {
+    if (preventClose) {
       return;
     }
     if (args && args.event && args.event.persist) {
       args.event.persist();
     }
     setOpened(false);
-    on_hide === null || on_hide === void 0 ? void 0 : on_hide(_objectSpread({}, getReturnObject.current(args)));
+    onHide === null || onHide === void 0 ? void 0 : onHide(_objectSpread({}, getReturnObject.current(args)));
     hideTimeout.current = setTimeout(() => {
       setHidden(true);
       if (args !== null && args !== void 0 && args['focusOnHide']) {
@@ -127,9 +125,9 @@ function DatePicker(externalProps) {
           (0, _componentHelper.warn)(e);
         }
       }
-    }, no_animation ? 1 : blurDelay);
+    }, noAnimation ? 1 : blurDelay);
     removeOutsideClickHandler();
-  }, [no_animation, prevent_close, on_hide, removeOutsideClickHandler]);
+  }, [noAnimation, preventClose, onHide, removeOutsideClickHandler]);
   const setOutsideClickHandler = (0, _react.useCallback)(() => {
     outsideClick.current = (0, _componentHelper.detectOutsideClick)(innerRef.current, _ref => {
       let {
@@ -142,11 +140,11 @@ function DatePicker(externalProps) {
   }, [hidePicker]);
   const setTrianglePosition = (0, _react.useCallback)(() => {
     const triangleWidth = 16;
-    if (show_input && triangleRef.current && innerRef.current) {
+    if (showInput && triangleRef.current && innerRef.current) {
       try {
         const shellWidth = innerRef.current.querySelector('.dnb-input__shell').getBoundingClientRect().width;
         const buttonWidth = innerRef.current.querySelector('.dnb-input__submit-button__button').getBoundingClientRect().width;
-        if (align_picker === 'right') {
+        if (alignPicker === 'right') {
           const distance = buttonWidth / 2 - triangleWidth / 2;
           triangleRef.current.style.marginRight = `${distance / 16}rem`;
         } else {
@@ -157,131 +155,114 @@ function DatePicker(externalProps) {
         (0, _componentHelper.warn)(e);
       }
     }
-  }, [show_input, align_picker]);
+  }, [showInput, alignPicker]);
   const showPicker = (0, _react.useCallback)(event => {
     if (hideTimeout.current) {
       clearTimeout(hideTimeout.current);
     }
     setOpened(true);
     setHidden(false);
-    on_show === null || on_show === void 0 ? void 0 : on_show(_objectSpread({}, getReturnObject.current(event)));
+    onShow === null || onShow === void 0 ? void 0 : onShow(_objectSpread({}, getReturnObject.current(event)));
     setTrianglePosition();
     setOutsideClickHandler();
-  }, [setTrianglePosition, setOutsideClickHandler, on_show]);
+  }, [setTrianglePosition, setOutsideClickHandler, onShow]);
   (0, _react.useEffect)(() => {
-    if (propsOpened) {
+    if (openedProp) {
       showPicker();
     }
     return () => {
       clearTimeout(hideTimeout.current);
       removeOutsideClickHandler();
     };
-  }, [propsOpened, removeOutsideClickHandler, showPicker]);
+  }, [openedProp, removeOutsideClickHandler, showPicker]);
   const onPickerChange = (0, _react.useCallback)(_ref2 => {
     let {
         hidePicker: shouldHidePicker = true
       } = _ref2,
       args = _objectWithoutProperties(_ref2, _excluded);
-    if (shouldHidePicker && !show_submit_button && !show_cancel_button) {
+    if (shouldHidePicker && !showSubmitButton && !showCancelButton) {
       hidePicker();
     }
-    setStartDate(args.startDate);
-    setEndDate(args.endDate);
-  }, [hidePicker, show_submit_button, show_cancel_button]);
+    setDates({
+      startDate: args.startDate,
+      endDate: args.endDate
+    });
+  }, [hidePicker, showSubmitButton, showCancelButton]);
   const onSubmitHandler = (0, _react.useCallback)(event => {
     hidePicker(event);
-    on_submit === null || on_submit === void 0 ? void 0 : on_submit(_objectSpread({}, getReturnObject.current({
+    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(_objectSpread({}, getReturnObject.current({
       event
     })));
-  }, [hidePicker, on_submit]);
+  }, [hidePicker, onSubmit]);
   const onCancelHandler = (0, _react.useCallback)(event => {
     hidePicker();
-    on_cancel === null || on_cancel === void 0 ? void 0 : on_cancel(_objectSpread({}, getReturnObject.current(event)));
-  }, [hidePicker, on_cancel]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(_objectSpread({}, getReturnObject.current(event)));
+  }, [hidePicker, onCancel]);
   const onResetHandler = (0, _react.useCallback)(event => {
     hidePicker();
-    on_reset === null || on_reset === void 0 ? void 0 : on_reset(_objectSpread({}, getReturnObject.current(event)));
-  }, [hidePicker, on_reset]);
+    onReset === null || onReset === void 0 ? void 0 : onReset(_objectSpread({}, getReturnObject.current(event)));
+  }, [hidePicker, onReset]);
   const togglePicker = (0, _react.useCallback)(args => {
     !opened ? showPicker(args) : hidePicker(args);
   }, [opened, showPicker, hidePicker]);
   const formatSelectedDateTitle = (0, _react.useCallback)(() => {
     const {
-      selected_date,
+      selectedDate,
       start,
       end
     } = translation;
+    const {
+      startDate,
+      endDate
+    } = dates;
     let currentDate = startDate ? (0, _format.default)(startDate, 'PPPP') : null;
     if (range && startDate && endDate) {
       currentDate = `${start} ${currentDate} - ${end} ${(0, _format.default)(endDate, 'PPPP')}`;
     }
-    return currentDate ? selected_date.replace(/%s/, currentDate) : '';
-  }, [range, translation, startDate, endDate]);
+    return currentDate ? selectedDate.replace(/%s/, currentDate) : '';
+  }, [range, translation, dates]);
   const extendedProps = (0, _componentHelper.extendPropsWithContext)(props, defaultProps, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }, context.getTranslation(props).DatePicker, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.FormRow), (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement), context.DatePicker);
+  }, (0, _withSnakeCaseProps.convertSnakeCaseProps)(context.getTranslation(props).DatePicker), (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.FormRow), (0, _withSnakeCaseProps.convertSnakeCaseProps)((0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement)), context.DatePicker);
   const {
       label,
       title,
-      label_direction,
-      label_sr_only,
-      only_month,
-      hide_last_week,
-      disable_autofocus,
-      hide_navigation_buttons,
-      first_day,
-      reset_date,
+      labelDirection,
+      labelSrOnly,
+      onlyMonth,
+      hideLastWeek,
+      disableAutofocus,
+      hideNavigationButtons,
+      firstDay,
+      resetDate,
       link,
       sync,
-      input_element,
-      addon_element,
+      inputElement,
+      addonElement,
       shortcuts,
       disabled,
       stretch,
       skeleton,
       size,
       status,
-      status_state,
-      status_props,
-      status_no_animation,
+      statusState,
+      statusProps,
+      statusNoAnimation,
       globalStatus,
       suffix,
-      mask_order,
-      mask_placeholder,
-      submit_button_text,
-      cancel_button_text,
-      reset_button_text,
-      show_reset_button,
+      maskOrder,
+      maskPlaceholder,
+      submitButtonText,
+      cancelButtonText,
+      resetButtonText,
+      showResetButton,
       className,
       tooltip
     } = extendedProps,
     restProps = _objectWithoutProperties(extendedProps, _excluded2);
-  let attributes = null;
-  {
-    const {
-        locale,
-        id,
-        month,
-        date,
-        start_date,
-        end_date,
-        min_date,
-        max_date,
-        enable_keyboard_nav,
-        hide_navigation,
-        return_format,
-        date_format,
-        hide_days,
-        correct_invalid_date,
-        opened,
-        direction,
-        range
-      } = restProps,
-      rest = _objectWithoutProperties(restProps, _excluded3);
-    attributes = rest;
-  }
-  const shouldHideDays = only_month ? true : hide_days;
-  const shouldHideNavigation = only_month ? hide_navigation_buttons ? false : true : hide_navigation;
+  const attributes = (0, _react.useMemo)(() => filterOutNonAttributes(restProps), [restProps]);
+  const shouldHideDays = onlyMonth ? true : hideDays;
+  const shouldHideNavigation = onlyMonth ? hideNavigationButtons ? false : true : hideNavigation;
   const showStatus = (0, _componentHelper.getStatusState)(status);
   const pickerParams = {};
   if (showStatus || suffix) {
@@ -295,7 +276,7 @@ function DatePicker(externalProps) {
   };
   const selectedDateTitle = formatSelectedDateTitle();
   const mainParams = {
-    className: (0, _classnames.default)("dnb-date-picker dnb-form-component", (range || show_submit_button || show_cancel_button || show_reset_button) && 'dnb-date-picker--show-footer', (0, _SpacingHelper.createSpacingClasses)(props), className, status && `dnb-date-picker__status--${status_state}`, label_direction && `dnb-date-picker--${label_direction}`, opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', align_picker && `dnb-date-picker--${align_picker}`, stretch && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`),
+    className: (0, _classnames.default)("dnb-date-picker dnb-form-component", (range || showSubmitButton || showCancelButton || showResetButton) && 'dnb-date-picker--show-footer', (0, _SpacingHelper.createSpacingClasses)(props), className, status && `dnb-date-picker__status--${statusState}`, labelDirection && `dnb-date-picker--${labelDirection}`, opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', alignPicker && `dnb-date-picker--${alignPicker}`, stretch && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`),
     lang: context.locale
   };
   const remainingDOMProps = (0, _componentHelper.validateDOMAttributes)(props, attributes);
@@ -309,8 +290,8 @@ function DatePicker(externalProps) {
     id: id + '-label',
     forId: id,
     text: label,
-    label_direction: label_direction,
-    srOnly: label_sr_only,
+    labelDirection: labelDirection,
+    srOnly: labelSrOnly,
     disabled: disabled,
     skeleton: skeleton
   }), _react.default.createElement("span", _extends({
@@ -324,10 +305,10 @@ function DatePicker(externalProps) {
     text_id: id + '-status',
     width_selector: id + '-shell',
     text: status,
-    state: status_state,
-    no_animation: status_no_animation,
+    state: statusState,
+    no_animation: statusNoAnimation,
     skeleton: skeleton
-  }, status_props)), _react.default.createElement("span", {
+  }, statusProps)), _react.default.createElement("span", {
     className: "dnb-date-picker__row"
   }, _react.default.createElement("span", {
     className: "dnb-date-picker__shell",
@@ -338,55 +319,55 @@ function DatePicker(externalProps) {
     disabled: disabled,
     stretch: stretch,
     skeleton: skeleton,
-    maskOrder: mask_order,
-    maskPlaceholder: mask_placeholder,
+    maskOrder: maskOrder,
+    maskPlaceholder: maskPlaceholder,
     isRange: range,
     showInput: showInput,
     selectedDateTitle: selectedDateTitle,
-    input_element: input_element,
+    inputElement: inputElement,
     opened: opened,
     hidden: hidden,
     size: size,
     status: status ? 'error' : null,
-    status_state: status_state,
+    statusState: statusState,
     lang: context.locale
   }, attributes, {
     submitAttributes: remainingSubmitProps,
     onSubmit: togglePicker
-  }, status_props)), _react.default.createElement("span", {
+  }, statusProps)), _react.default.createElement("span", {
     className: "dnb-date-picker__container"
   }, _react.default.createElement("span", {
     className: "dnb-date-picker__triangle",
     ref: triangleRef
   }), !hidden && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_DatePickerRange.default, {
     id: id,
-    firstDayOfWeek: first_day,
-    resetDate: reset_date,
+    firstDayOfWeek: firstDay,
+    resetDate: resetDate,
     isRange: range,
     isLink: link,
     isSync: sync,
     hideDays: shouldHideDays,
     hideNav: shouldHideNavigation,
-    views: hide_navigation_buttons ? [{
+    views: hideNavigationButtons ? [{
       nextBtn: false,
       prevBtn: false
     }] : null,
-    onlyMonth: only_month,
-    hideNextMonthWeek: hide_last_week,
-    noAutoFocus: disable_autofocus,
+    onlyMonth: onlyMonth,
+    hideNextMonthWeek: hideLastWeek,
+    noAutoFocus: disableAutofocus,
     onChange: onPickerChange,
     locale: context.locale
-  }), (addon_element || shortcuts) && _react.default.createElement(_DatePickerAddon.default, {
-    renderElement: addon_element,
+  }), (addonElement || shortcuts) && _react.default.createElement(_DatePickerAddon.default, {
+    renderElement: addonElement,
     shortcuts: shortcuts
   }), _react.default.createElement(_DatePickerFooter.default, {
     isRange: range,
     onSubmit: onSubmitHandler,
     onCancel: onCancelHandler,
     onReset: onResetHandler,
-    submitButtonText: submit_button_text,
-    cancelButtonText: cancel_button_text,
-    resetButtonText: reset_button_text
+    submitButtonText: submitButtonText,
+    cancelButtonText: cancelButtonText,
+    resetButtonText: resetButtonText
   })))), suffix && _react.default.createElement(_Suffix.default, {
     className: "dnb-date-picker__suffix",
     id: id + '-suffix',
@@ -396,6 +377,15 @@ function DatePicker(externalProps) {
     "aria-live": "assertive"
   }, selectedDateTitle)));
 }
+const NonAttributes = ['locale', 'id', 'month', 'date', 'startDate', 'endDate', 'minDate', 'maxDate', 'enableKeyboardNav', 'hideNavigation', 'returnFormat', 'dateFormat', 'hideDays', 'correctInvalidDate', 'opened', 'direction', 'range', 'showInput', 'noAnimation', 'onDaysRender', 'onShow', 'onType', 'onHide', 'showSubmitButton', 'showCancelButton', 'selectedDate', 'selectedMonth', 'selectedYear', 'nextMonth', 'nextYear', 'openPickerText', 'placeholderCharacters', 'prevMonth', 'prevYear', 'endMonth', 'startMonth', 'alignPicker'];
+function filterOutNonAttributes(props) {
+  return Object.keys(props).reduce((attributes, key) => {
+    if (!NonAttributes.includes(key)) {
+      attributes[key] = props[key];
+    }
+    return attributes;
+  }, {});
+}
 var _default = DatePicker;
 exports.default = _default;
 DatePicker._supportsSpacingProps = true;