@talend/react-forms/lib/UIForm/fields/Date/Date.component.js

React forms library based on json schema form.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
var _FieldTemplate = _interopRequireDefault(require("../FieldTemplate"));
var _Date = require("./Date.utils");
var _generateId = require("../../Message/generateId");
var _properties = require("../../utils/properties");
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const memorizedIsoStrToDate = (0, _memoizeOne.default)(_Date.isoStrToDate);
function DateWidget(props) {
  const {
    errorMessage,
    id,
    isValid,
    onChange,
    onFinish,
    options,
    schema,
    value,
    valueIsUpdating
  } = props;
  const descriptionId = (0, _generateId.generateDescriptionId)(id);
  const errorId = (0, _generateId.generateErrorId)(id);
  const convertedValue = schema.schema.format === 'iso-datetime' ? memorizedIsoStrToDate(value) : value;
  const [state, setState] = (0, _react.useState)({
    errorMessage: ''
  });
  function onDateChange(event, {
    errorMessage: nextErrorMessage,
    date,
    textInput
  }) {
    setState({
      errorMessage: nextErrorMessage
    });
    let fieldValue = date;
    if (!nextErrorMessage && date) {
      fieldValue = (0, _Date.convertDate)(date, textInput, props.schema.schema);
    }
    const payload = {
      schema,
      value: fieldValue
    };
    onChange(event, payload);
    if (!nextErrorMessage) {
      onFinish(event, payload);
    }
  }
  function onBlur(event) {
    onFinish(event, {
      schema
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldTemplate.default, {
    description: schema.description,
    descriptionId: descriptionId,
    errorId: errorId,
    errorMessage: state.errorMessage || errorMessage,
    id: id,
    isValid: isValid,
    label: schema.title,
    labelProps: schema.labelProps,
    required: schema.required,
    valueIsUpdating: valueIsUpdating,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.InputDatePicker
    // eslint-disable-next-line jsx-a11y/no-autofocus
    , {
      autoFocus: schema.autoFocus,
      dateFormat: options.dateFormat,
      disabled: schema.disabled || valueIsUpdating,
      placeholder: schema.placeholder,
      id: id,
      onChange: onDateChange,
      onBlur: onBlur,
      readOnly: schema.readOnly,
      value: convertedValue,
      useUTC: options.useUTC
      // eslint-disable-next-line jsx-a11y/aria-proptypes
      ,
      "aria-invalid": !isValid,
      "aria-required": schema.required,
      "aria-describedby": `${descriptionId} ${errorId}`,
      ...(0, _properties.extractDataAttributes)(schema)
    })
  });
}
DateWidget.displayName = 'Date Widget';
DateWidget.defaultProps = {
  options: {}
};
if (process.env.NODE_ENV !== 'production') {
  DateWidget.propTypes = {
    id: _propTypes.default.string,
    isValid: _propTypes.default.bool,
    errorMessage: _propTypes.default.string,
    onChange: _propTypes.default.func.isRequired,
    onFinish: _propTypes.default.func.isRequired,
    options: _propTypes.default.shape({
      dateFormat: _propTypes.default.string,
      useUTC: _propTypes.default.string
    }),
    schema: _propTypes.default.shape({
      autoFocus: _propTypes.default.bool,
      description: _propTypes.default.string,
      disabled: _propTypes.default.bool,
      format: _propTypes.default.string,
      placeholder: _propTypes.default.string,
      readOnly: _propTypes.default.bool,
      required: _propTypes.default.bool,
      title: _propTypes.default.string,
      labelProps: _propTypes.default.object,
      schema: _propTypes.default.shape({
        format: _propTypes.default.string,
        type: _propTypes.default.string
      })
    }),
    value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.instanceOf(Date)]),
    valueIsUpdating: _propTypes.default.bool
  };
}
var _default = exports.default = DateWidget;
//# sourceMappingURL=Date.component.js.map