@talend/react-components/lib/DateTimePickers/DateRange/Manager/Manager.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DateRangePickerException = DateRangePickerException;
exports.default = void 0;
var _react = require("react");
var _isBefore = require("date-fns/isBefore");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _dateExtraction = require("../../Date/date-extraction");
var _errorMessages = _interopRequireDefault(require("../../shared/error-messages"));
var _Context = require("../Context");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function DateRangePickerException(code, message) {
  this.message = (0, _errorMessages.default)(message);
  this.code = code;
}
function extractRangeParts(startDate, endDate, options) {
  const startDateParts = (0, _dateExtraction.extractDate)(startDate, options);
  const endDateParts = (0, _dateExtraction.extractDate)(endDate, options);
  return {
    startDate: {
      value: startDateParts.localDate,
      textInput: startDateParts.textInput
    },
    endDate: {
      value: endDateParts.localDate,
      textInput: endDateParts.textInput
    },
    errors: startDateParts.errors.concat(endDateParts.errors),
    errorMessage: startDateParts.errorMessage || endDateParts.errorMessage
  };
}
function ContextualManager(props) {
  const options = {
    dateFormat: props.dateFormat
  };
  const initialState = extractRangeParts(props.startDate, props.endDate, options);
  const [state, setState] = (0, _react.useState)(initialState);
  (0, _react.useEffect)(() => {
    if (props.startDate !== state.startDate.value || props.endDate !== state.endDate.value) {
      const parts = extractRangeParts(props.startDate, props.endDate, options);
      setState(parts);
    }
  }, [props.startDate, props.endDate]);
  function onChange(event, nextState) {
    const errors = [...(nextState.errors || [])];
    const startDate = nextState.startDate.value;
    const endDate = nextState.endDate.value;
    if (startDate && endDate) {
      if (!(0, _isBefore.isBefore)(startDate, endDate)) {
        errors.push(new DateRangePickerException('INVALID_RANGE_START_AFTER_END', 'INVALID_RANGE_START_AFTER_END'));
      }
    }
    if (props.onChange) {
      const payload = {
        startDate,
        endDate,
        errors,
        errorMessage: errors[0] ? errors[0].message : null,
        origin: nextState.origin
      };
      props.onChange(event, payload);
    }
  }
  function onStartChange(event, {
    date: startDate
  }) {
    const {
      date,
      textInput,
      errors,
      errorMessage
    } = (0, _dateExtraction.extractFromDate)(startDate, options);
    const nextState = {};
    nextState.startDate = {
      value: date,
      textInput
    };
    nextState.errors = errors;
    nextState.errorMessage = errorMessage;
    setState(prevState => ({
      ...prevState,
      ...nextState
    }));
    onChange(event, {
      ...state,
      ...nextState,
      origin: 'START_PICKER'
    });
  }
  function onEndChange(event, {
    date: endDate
  }) {
    const {
      date,
      textInput,
      errors,
      errorMessage
    } = (0, _dateExtraction.extractFromDate)(endDate, options);
    const nextState = {};
    nextState.endDate = {
      value: date,
      textInput
    };
    nextState.errors = errors;
    nextState.errorMessage = errorMessage;
    setState(prevState => ({
      ...prevState,
      ...nextState
    }));
    onChange(event, {
      ...state,
      ...nextState,
      origin: 'END_PICKER'
    });
  }
  function onStartInputChange(event) {
    const userInput = event.target.value;
    const {
      localDate,
      textInput,
      errors,
      errorMessage
    } = (0, _dateExtraction.extractPartsFromTextInput)(userInput, options);
    const nextState = {
      startDate: {
        value: localDate,
        textInput
      },
      errors,
      errorMessage
    };
    setState(prevState => ({
      ...prevState,
      ...nextState
    }));
    onChange(event, {
      ...state,
      ...nextState,
      origin: 'START_INPUT'
    });
  }
  function onEndInputChange(event) {
    const userInput = event.target.value;
    const {
      localDate,
      textInput,
      errors,
      errorMessage
    } = (0, _dateExtraction.extractPartsFromTextInput)(userInput, options);
    const nextState = {
      endDate: {
        value: localDate,
        textInput
      },
      errors,
      errorMessage
    };
    setState(prevState => ({
      ...prevState,
      ...nextState
    }));
    onChange(event, {
      ...state,
      ...nextState,
      origin: 'END_INPUT'
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.DateRangeContext.Provider, {
    value: {
      startDate: state.startDate,
      endDate: state.endDate,
      inputManagement: {
        onStartChange: onStartInputChange,
        onEndChange: onEndInputChange,
        placeholder: props.dateFormat
      },
      pickerManagement: {
        onStartChange,
        onEndChange
      }
    },
    children: props.children
  });
}
ContextualManager.defaultProps = {
  dateFormat: 'YYYY-MM-DD'
};
ContextualManager.displayName = 'DateRange.Manager';
ContextualManager.propTypes = {
  children: _propTypes.default.element,
  startDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
  endDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
  dateFormat: _propTypes.default.string,
  onChange: _propTypes.default.func.isRequired
};
var _default = exports.default = ContextualManager;
//# sourceMappingURL=Manager.component.js.map