@dnb/eufemia 10.2.0 → 10.3.0

package/components/date-picker/DatePickerInput.d.ts

@@ -16,43 +16,35 @@ export interface DatePickerInputProps
   separatorRexExp?: RegExp;
   submitAttributes?: Record<string, unknown>;
   isRange?: boolean;
-
   /**
    * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`.
    */
   size?: InputSize;
-
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */
   status?: FormStatusText;
-
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: FormStatusState;
-
   /**
    * Use an object to define additional FormStatus properties.
    */
   status_props?: FormStatusProps;
-
   /**
    * Gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input.
    */
   input_element?: InputInputElement;
-
   /**
    * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from &#39;date-fns/locale/en-GB&#39;`. Defaults to `nb-NO`.
    */
   locale?: Record<string, unknown>;
   disabled?: boolean;
-
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
   skeleton?: SkeletonShow;
-
   /**
    * To open the date-picker by default. Defaults to `false`.
    */

package/components/date-picker/DatePickerInput.js

@@ -2,13 +2,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 const _excluded = ["id", "title", "submitAttributes", "isRange", "maskOrder", "maskPlaceholder", "separatorRexExp", "onChange", "onFocus", "onSubmit", "selectedDateTitle", "showInput", "input_element", "locale", "disabled", "skeleton", "opened", "size", "status", "status_state", "status_props"];
-
 var _span;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+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) { _defineProperty(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; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import addDays from 'date-fns/addDays';
@@ -27,19 +23,15 @@ import DatePickerContext from './DatePickerContext';
 export default class DatePickerInput extends React.PureComponent {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       _listenForPropChanges: true,
       focusState: 'virgin'
     });
-
     _defineProperty(this, "shortcutHandler", async e => {
       if (this.focusMode) {
         const success = (e.clipboardData || typeof window !== 'undefined' && window.clipboardData).getData('text');
-
         if (success) {
           e.preventDefault();
-
           try {
             const separators = ['.', '/'];
             const possibleFormats = ['yyyy-MM-dd'];
@@ -52,19 +44,15 @@ export default class DatePickerInput extends React.PureComponent {
               possibleFormats.push(date.split('').reverse().join(''));
             });
             let date;
-
             for (let i = 0, l = possibleFormats.length; i < l; ++i) {
               date = convertStringToDate(success, {
                 date_format: possibleFormats[i]
               });
-
               if (date) {
                 break;
               }
             }
-
             const mode = this.focusMode === 'start' ? 'startDate' : 'endDate';
-
             if (date && !this.state[mode]) {
               this.context.setState({
                 [mode]: date
@@ -76,7 +64,6 @@ export default class DatePickerInput extends React.PureComponent {
         }
       }
     });
-
     _defineProperty(this, "callOnChangeAsInvalid", state => {
       this.context.updateState({
         hoverDate: null
@@ -87,7 +74,6 @@ export default class DatePickerInput extends React.PureComponent {
             endDate,
             event
           } = _objectSpread(_objectSpread({}, this.context), state);
-
           this.context.callOnChangeHandler({
             startDate,
             endDate,
@@ -96,7 +82,6 @@ export default class DatePickerInput extends React.PureComponent {
         }
       });
     });
-
     _defineProperty(this, "callOnChange", _ref => {
       let {
         startDate,
@@ -106,19 +91,15 @@ export default class DatePickerInput extends React.PureComponent {
       const state = {
         changeMonthViews: true
       };
-
       if (typeof startDate !== 'undefined' && isValid(startDate)) {
         state.startDate = startDate;
       }
-
       if (!this.props.isRange) {
         endDate = startDate;
       }
-
       if (typeof endDate !== 'undefined' && isValid(endDate)) {
         state.endDate = endDate;
       }
-
       this.context.updateState(state, () => {
         if (typeof startDate !== 'undefined' && isValid(startDate) || typeof endDate !== 'undefined' && isValid(endDate)) {
           this.context.callOnChangeHandler({
@@ -127,38 +108,31 @@ export default class DatePickerInput extends React.PureComponent {
         }
       });
     });
-
     _defineProperty(this, "callOnType", _ref2 => {
       let {
         event
       } = _ref2;
-
       const getDates = () => ['start', 'end'].reduce((acc, mode) => {
         acc[`${mode}Date`] = [this[`_${mode}Year`] || this.context[`__${mode}Year`] || 'yyyy', this[`_${mode}Month`] || this.context[`__${mode}Month`] || 'mm', this[`_${mode}Day`] || this.context[`__${mode}Day`] || 'dd'].join('-');
         return acc;
       }, {});
-
       let {
         startDate,
         endDate
       } = getDates();
       startDate = parseISO(startDate);
       endDate = parseISO(endDate);
-
       if (!isValid(startDate)) {
         startDate = null;
       }
-
       if (!isValid(endDate)) {
         endDate = null;
       }
-
       let returnObject = this.context.getReturnObject({
         startDate,
         endDate,
         event
       });
-
       if (returnObject.is_valid === false || returnObject.is_valid_start_date === false || returnObject.is_valid_end_date === false) {
         const {
           startDate,
@@ -172,44 +146,35 @@ export default class DatePickerInput extends React.PureComponent {
         };
         returnObject = _objectSpread(_objectSpread({}, returnObject), typedDates);
       }
-
       dispatchCustomElementEvent(this.context, 'on_type', returnObject);
     });
-
     _defineProperty(this, "prepareCounting", async _ref3 => {
       let {
         keyCode,
         target,
         event
       } = _ref3;
-
       try {
         const isDate = target.getAttribute('class').match(/__input--([day|month|year]+)($|\s)/)[1];
         const isInRange = target.getAttribute('id').match(/-([start|end]+)-/)[1];
         let date = isInRange === 'start' ? this.context.startDate : this.context.endDate;
-
         if (!date) {
           return;
         }
-
         const count = keyCode === 'up' ? 1 : -1;
-
         if (keyCode === 'up' || keyCode === 'down') {
           switch (isDate) {
             case 'day':
               date = addDays(date, count);
               break;
-
             case 'month':
               date = addMonths(date, count);
               break;
-
             case 'year':
               date = addYears(date, count);
               break;
           }
         }
-
         this.callOnChange({
           [isInRange === 'start' ? 'startDate' : 'endDate']: date,
           event
@@ -220,25 +185,21 @@ export default class DatePickerInput extends React.PureComponent {
         warn(e);
       }
     });
-
     _defineProperty(this, "selectStart", target => {
       target.focus();
       target.setSelectionRange(0, 0);
     });
-
     _defineProperty(this, "onFocusHandler", event => {
       try {
         selectAll(event.target);
       } catch (e) {
         warn(e);
       }
-
       this.setState({
         focusState: 'focus',
         _listenForPropChanges: false
       });
     });
-
     _defineProperty(this, "onBlurHandler", () => {
       this.focusMode = null;
       this.setState({
@@ -246,15 +207,12 @@ export default class DatePickerInput extends React.PureComponent {
         _listenForPropChanges: false
       });
     });
-
     _defineProperty(this, "onKeyDownHandler", async event => {
       const keyCode = keycode(event);
       const target = event.target;
-
       if (target.selectionStart !== target.selectionEnd) {
         this.selectStart(target);
       }
-
       switch (keyCode) {
         case 'up':
         case 'down':
@@ -266,11 +224,9 @@ export default class DatePickerInput extends React.PureComponent {
             target
           });
           return false;
-
         case 'tab':
           return false;
       }
-
       const size = parseFloat(target.getAttribute('size'));
       const firstSelectionStart = target.selectionStart;
       await wait(1);
@@ -282,15 +238,12 @@ export default class DatePickerInput extends React.PureComponent {
         } = _ref4;
         return current === target;
       });
-
       if (index < this.refList.length - 1 && (secondSelectionStart === size && isValid && keyCode !== 'left' && keyCode !== 'backspace' || firstSelectionStart === size && keyCode === 'right')) {
         try {
           if (!this.refList[index + 1].current) {
             return;
           }
-
           const nextSibling = this.refList[index + 1].current;
-
           if (nextSibling) {
             nextSibling.focus();
             nextSibling.setSelectionRange(0, 0);
@@ -304,7 +257,6 @@ export default class DatePickerInput extends React.PureComponent {
           case 'backspace':
             try {
               const prevSibling = this.refList[index - 1].current;
-
               if (prevSibling) {
                 const endPos = prevSibling.value.length;
                 prevSibling.focus();
@@ -313,52 +265,41 @@ export default class DatePickerInput extends React.PureComponent {
             } catch (e) {
               warn(e);
             }
-
             break;
         }
       }
     });
-
     _defineProperty(this, "set_startDay", event => {
       this.setDate(event, 'start', 'Day');
     });
-
     _defineProperty(this, "set_startMonth", event => {
       this.setDate(event, 'start', 'Month');
     });
-
     _defineProperty(this, "set_startYear", event => {
       this.setDate(event, 'start', 'Year');
     });
-
     _defineProperty(this, "set_endDay", event => {
       this.setDate(event, 'end', 'Day');
     });
-
     _defineProperty(this, "set_endMonth", event => {
       this.setDate(event, 'end', 'Month');
     });
-
     _defineProperty(this, "set_endYear", event => {
       this.setDate(event, 'end', 'Year');
     });
-
     _defineProperty(this, "setDate", (event, mode, type) => {
       event.persist();
       const value = event.target.value;
       this[`_${mode}${type}`] = value;
-
       if (this.context[`${mode}Date`]) {
         this[`tmp_${mode}Date`] = this.context[`${mode}Date`];
       }
-
       const fallback = this[`tmp_${mode}Date`];
       const year = this[`_${mode}Year`] || fallback && fallback.getFullYear();
       const month = this[`_${mode}Month`] || fallback && fallback.getMonth() + 1;
       const day = this[`_${mode}Day`] || fallback && fallback.getDate();
       const date = new Date(parseFloat(year), parseFloat(month) - 1, parseFloat(day));
       const isValidDate = !/[^0-9]/.test(day) && !/[^0-9]/.test(month) && !/[^0-9]/.test(year) && isValid(date) && date.getDate() == parseFloat(day) && date.getMonth() + 1 == parseFloat(month) && date.getFullYear() == parseFloat(year);
-
       if (isValidDate) {
         this.callOnChange({
           [`${mode}Date`]: date,
@@ -376,12 +317,10 @@ export default class DatePickerInput extends React.PureComponent {
           event
         });
       }
-
       this.callOnType({
         event
       });
     });
-
     _defineProperty(this, "renderInputElement", params => {
       const {
         id,
@@ -398,18 +337,14 @@ export default class DatePickerInput extends React.PureComponent {
         "aria-hidden": true
       }, ' – '))), isRange && endDateList);
     });
-
     const _separators = props.maskOrder.match(props.separatorRexExp);
-
     this.maskList = props.maskOrder.split(props.separatorRexExp).reduce((acc, cur) => {
       if (cur) {
         acc.push(cur);
-
         if (_separators.length > 0) {
           acc.push(_separators.shift());
         }
       }
-
       return acc;
     }, []);
     this._startDayRef = React.createRef();
@@ -419,18 +354,15 @@ export default class DatePickerInput extends React.PureComponent {
     this._endMonthRef = React.createRef();
     this._endYearRef = React.createRef();
   }
-
   componentWillUnmount() {
     if (this._shortcuts) {
       this._shortcuts.remove(this.osShortcut);
     }
   }
-
   getPlaceholderChar(value) {
     const index = this.props.maskOrder.indexOf(value);
     return this.props.maskPlaceholder[index];
   }
-
   generateDateList(params, mode) {
     return this.maskList.map((value, i) => {
       const state = value.slice(0, 1);
@@ -447,7 +379,6 @@ export default class DatePickerInput extends React.PureComponent {
         year
       } = this.context.translation.DatePicker;
       const isRangeLabel = isRange ? `${this.context.translation.DatePicker[mode]} ` : '';
-
       if (!separatorRexExp.test(value)) {
         if (!input_element) {
           params = _objectSpread(_objectSpread({}, params), {}, {
@@ -461,10 +392,8 @@ export default class DatePickerInput extends React.PureComponent {
             placeholderChar
           });
         }
-
         const DateField = input_element && React.isValidElement(input_element) ? input_element : InputElement;
         const inputSizeClassName = size && `dnb-date-picker__input--${size}`;
-
         switch (state) {
           case 'd':
             this.refList.push(this[`_${mode}DayRef`]);
@@ -485,7 +414,6 @@ export default class DatePickerInput extends React.PureComponent {
               hidden: true,
               id: `${this.props.id}-${mode}-day-label`
             }, isRangeLabel + day));
-
           case 'm':
             this.refList.push(this[`_${mode}MonthRef`]);
             return React.createElement(React.Fragment, {
@@ -505,7 +433,6 @@ export default class DatePickerInput extends React.PureComponent {
               hidden: true,
               id: `${this.props.id}-${mode}-month-label`
             }, isRangeLabel + month));
-
           case 'y':
             this.refList.push(this[`_${mode}YearRef`]);
             return React.createElement(React.Fragment, {
@@ -527,7 +454,6 @@ export default class DatePickerInput extends React.PureComponent {
             }, isRangeLabel + year));
         }
       }
-
       return React.createElement("span", {
         key: 's' + i,
         className: "dnb-date-picker--separator",
@@ -535,7 +461,6 @@ export default class DatePickerInput extends React.PureComponent {
       }, placeholderChar);
     });
   }
-
   formatDate() {
     const {
       open_picker_text
@@ -545,46 +470,42 @@ export default class DatePickerInput extends React.PureComponent {
     } = this.props;
     return selectedDateTitle ? `${selectedDateTitle}, ${open_picker_text}` : open_picker_text;
   }
-
   render() {
     const _this$props = this.props,
-          {
-      id,
-      title,
-      submitAttributes,
-      isRange,
-      maskOrder,
-      maskPlaceholder,
-      separatorRexExp,
-      onChange,
-      onFocus,
-      onSubmit,
-      selectedDateTitle,
-      showInput,
-      input_element,
-      locale,
-      disabled,
-      skeleton,
-      opened,
-      size,
-      status,
-      status_state,
-      status_props
-    } = _this$props,
-          attributes = _objectWithoutProperties(_this$props, _excluded);
-
+      {
+        id,
+        title,
+        submitAttributes,
+        isRange,
+        maskOrder,
+        maskPlaceholder,
+        separatorRexExp,
+        onChange,
+        onFocus,
+        onSubmit,
+        selectedDateTitle,
+        showInput,
+        input_element,
+        locale,
+        disabled,
+        skeleton,
+        opened,
+        size,
+        status,
+        status_state,
+        status_props
+      } = _this$props,
+      attributes = _objectWithoutProperties(_this$props, _excluded);
     const {
       focusState
     } = this.state;
     validateDOMAttributes(this.props, attributes);
     validateDOMAttributes(null, submitAttributes);
     const UsedButton = showInput ? SubmitButton : Button;
-
     if (!showInput) {
       submitAttributes.innerRef = submitAttributes.ref;
       submitAttributes.ref = null;
     }
-
     return React.createElement("fieldset", {
       className: "dnb-date-picker__fieldset",
       lang: locale === null || locale === void 0 ? void 0 : locale.code
@@ -619,11 +540,8 @@ export default class DatePickerInput extends React.PureComponent {
       lang: locale === null || locale === void 0 ? void 0 : locale.code
     }, attributes)));
   }
-
 }
-
 _defineProperty(DatePickerInput, "contextType", DatePickerContext);
-
 _defineProperty(DatePickerInput, "defaultProps", {
   id: null,
   title: null,
@@ -647,7 +565,6 @@ _defineProperty(DatePickerInput, "defaultProps", {
   onSubmit: null,
   onFocus: null
 });
-
 process.env.NODE_ENV !== "production" ? DatePickerInput.propTypes = {
   id: PropTypes.string,
   title: PropTypes.string,
@@ -671,12 +588,10 @@ process.env.NODE_ENV !== "production" ? DatePickerInput.propTypes = {
   onSubmit: PropTypes.func,
   onFocus: PropTypes.func
 } : void 0;
-
 const selectAll = target => {
   target.focus();
   target.select();
 };
-
 const InputElement = props => {
   return React.createElement(TextMask, _extends({
     guide: true,
@@ -688,5 +603,5 @@ const InputElement = props => {
     autoCorrect: "off"
   }, props));
 };
-
-const wait = t => new Promise(r => setTimeout(r, t));
+const wait = t => new Promise(r => setTimeout(r, t));
+//# sourceMappingURL=DatePickerInput.js.map