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

Set of react components.

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); }
import { Component } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { getDataAttrFromProps } from '@talend/utils';
import { Action } from '../Actions';
import FocusManager from '../FocusManager';
import getDefaultT from '../translate';
import theme from './InlineForm.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
class InlineForm extends 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__*/_jsx(FocusManager, {
      onFocusOut: this.onSubmit,
      children: /*#__PURE__*/_jsxs("form", {
        onSubmit: this.onSubmit,
        className: classNames(theme['tc-editable-text-form'], 'tc-editable-text-form'),
        children: [/*#__PURE__*/_jsxs("div", {
          className: classNames('form-group', {
            'has-error': notValid
          }),
          children: [/*#__PURE__*/_jsx("input", {
            ref: this.selectInput,
            id: "inputTitle",
            type: "text",
            placeholder: placeholder,
            className: classNames(theme['tc-editable-text-form-input'], 'tc-editable-text-form-input', 'form-control'),
            onChange: this.onChange,
            value: this.state.value,
            onKeyDown: this.onKeyDown
          }), errorMessage && /*#__PURE__*/_jsx("p", {
            className: "help-block text-danger",
            children: errorMessage
          })]
        }), /*#__PURE__*/_jsxs("div", {
          className: classNames(theme['tc-editable-text-form-buttons'], 'tc-editable-text-form-buttons'),
          children: [/*#__PURE__*/_jsx(Action, {
            name: "action-cancel-title",
            label: t('CANCEL_TOOLTIP', {
              defaultValue: 'Cancel'
            }),
            icon: "talend-cross",
            onClick: this.onCancel,
            bsStyle: "link",
            className: classNames(theme['tc-editable-text-form-buttons-icon'], 'tc-editable-text-form-buttons-icon', theme['tc-editable-text-form-buttons-cancel'], 'tc-editable-text-form-buttons-cancel'),
            hideLabel: true,
            "data-feature": feature && `${feature}.cancel`
          }), /*#__PURE__*/_jsx(Action, {
            type: "submit",
            name: "action-submit-title",
            label: t('SUBMIT_TOOLTIP', {
              defaultValue: 'Submit'
            }),
            icon: "talend-check",
            bsStyle: "link",
            className: classNames(theme['tc-editable-text-form-buttons-icon'], 'tc-editable-text-form-buttons-icon', theme['tc-editable-text-form-buttons-submit'], 'tc-editable-text-form-buttons-submit'),
            disabled: notFilled,
            hideLabel: true,
            "data-feature": feature && `${feature}.submit`,
            ...getDataAttrFromProps(this.props)
          })]
        })]
      })
    });
  }
}
_defineProperty(InlineForm, "propTypes", {
  text: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  errorMessage: PropTypes.string,
  feature: PropTypes.string,
  onSubmit: PropTypes.func.isRequired,
  onCancel: PropTypes.func,
  onChange: PropTypes.func,
  t: PropTypes.func,
  required: PropTypes.bool
});
_defineProperty(InlineForm, "defaultProps", {
  t: getDefaultT(),
  required: true
});
export default InlineForm;
//# sourceMappingURL=InlineForm.component.js.map