@talend/react-components/lib/EditableText/InlineForm.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@talend/utils");
var _Actions = require("../Actions");
var _FocusManager = _interopRequireDefault(require("../FocusManager"));
var _translate = _interopRequireDefault(require("../translate"));
var _InlineFormModule = _interopRequireDefault(require("./InlineForm.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class InlineForm extends _react.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onCancel = this.onCancel.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.selectInput = this.selectInput.bind(this);
    this.state = {
      value: props.text
    };
  }
  onChange(event) {
    if (this.props.onChange) {
      this.props.onChange(event);
    }
    this.setState({
      value: event.target.value
    });
  }
  onCancel(event) {
    if (this.props.onCancel) {
      this.props.onCancel(event);
    }
    this.setState({
      value: ''
    });
  }
  onKeyDown(event) {
    switch (event.key) {
      case 'Esc':
      case 'Escape':
        this.onCancel(event);
        break;
      default:
        break;
    }
  }
  onSubmit(event) {
    event.preventDefault();
    if (this.state.value.trim().length !== 0 || !this.props.required) {
      this.props.onSubmit(event, {
        value: this.state.value,
        props: this.props
      });
    }
  }
  selectInput(input) {
    this.inputText = input;
    if (this.inputText) {
      this.inputText.select();
      this.inputText.focus();
    }
  }
  render() {
    const {
      feature,
      t,
      placeholder,
      required,
      errorMessage
    } = this.props;
    const notFilled = required && this.state.value.trim().length === 0;
    const notValid = notFilled || !!errorMessage;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusManager.default, {
      onFocusOut: this.onSubmit,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
        onSubmit: this.onSubmit,
        className: (0, _classnames.default)(_InlineFormModule.default['tc-editable-text-form'], 'tc-editable-text-form'),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: (0, _classnames.default)('form-group', {
            'has-error': notValid
          }),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
            ref: this.selectInput,
            id: "inputTitle",
            type: "text",
            placeholder: placeholder,
            className: (0, _classnames.default)(_InlineFormModule.default['tc-editable-text-form-input'], 'tc-editable-text-form-input', 'form-control'),
            onChange: this.onChange,
            value: this.state.value,
            onKeyDown: this.onKeyDown
          }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
            className: "help-block text-danger",
            children: errorMessage
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: (0, _classnames.default)(_InlineFormModule.default['tc-editable-text-form-buttons'], 'tc-editable-text-form-buttons'),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Action, {
            name: "action-cancel-title",
            label: t('CANCEL_TOOLTIP', {
              defaultValue: 'Cancel'
            }),
            icon: "talend-cross",
            onClick: this.onCancel,
            bsStyle: "link",
            className: (0, _classnames.default)(_InlineFormModule.default['tc-editable-text-form-buttons-icon'], 'tc-editable-text-form-buttons-icon', _InlineFormModule.default['tc-editable-text-form-buttons-cancel'], 'tc-editable-text-form-buttons-cancel'),
            hideLabel: true,
            "data-feature": feature && `${feature}.cancel`
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Action, {
            type: "submit",
            name: "action-submit-title",
            label: t('SUBMIT_TOOLTIP', {
              defaultValue: 'Submit'
            }),
            icon: "talend-check",
            bsStyle: "link",
            className: (0, _classnames.default)(_InlineFormModule.default['tc-editable-text-form-buttons-icon'], 'tc-editable-text-form-buttons-icon', _InlineFormModule.default['tc-editable-text-form-buttons-submit'], 'tc-editable-text-form-buttons-submit'),
            disabled: notFilled,
            hideLabel: true,
            "data-feature": feature && `${feature}.submit`,
            ...(0, _utils.getDataAttrFromProps)(this.props)
          })]
        })]
      })
    });
  }
}
_defineProperty(InlineForm, "propTypes", {
  text: _propTypes.default.string.isRequired,
  placeholder: _propTypes.default.string,
  errorMessage: _propTypes.default.string,
  feature: _propTypes.default.string,
  onSubmit: _propTypes.default.func.isRequired,
  onCancel: _propTypes.default.func,
  onChange: _propTypes.default.func,
  t: _propTypes.default.func,
  required: _propTypes.default.bool
});
_defineProperty(InlineForm, "defaultProps", {
  t: (0, _translate.default)(),
  required: true
});
var _default = exports.default = InlineForm;
//# sourceMappingURL=InlineForm.component.js.map