@talend/react-components/lib/Enumeration/Items/Item/ItemEdit.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Action = _interopRequireDefault(require("../../../Actions/Action"));
var _constants = _interopRequireDefault(require("../../../constants"));
var _Item = _interopRequireDefault(require("./Item.propTypes"));
var _ItemEdit = _interopRequireDefault(require("./ItemEdit.propTypes"));
var _ItemModule = _interopRequireDefault(require("./Item.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function itemClasses(error) {
  return (0, _classnames.default)(_ItemModule.default['tc-enumeration-item'], 'tc-enumeration-item', {
    [_ItemModule.default['has-error']]: !!error,
    'has-error': !!error
  });
}
function itemErrorClasses() {
  return (0, _classnames.default)(_ItemModule.default['tc-enumeration-item-error'], 'tc-enumeration-item-error');
}
function itemLabelClasses() {
  return (0, _classnames.default)(_ItemModule.default['tc-enumeration-item-label'], 'tc-enumeration-item-label');
}
function itemEditActionsClasses() {
  return (0, _classnames.default)(_ItemModule.default['tc-enumeration-item-actions'], 'tc-enumeration-item-actions');
}
class ItemEdit extends _react.Component {
  constructor(props) {
    super(props);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.submit = this.submit.bind(this);
    this.itemChange = this.itemChange.bind(this);
    this.cancel = this.cancel.bind(this);
    this.onActionClick = this.onActionClick.bind(this);
  }
  componentDidMount() {
    this.itemInput.value = this.props.item[this.props.item.itemProps.key].join(',');
  }
  onKeyDown(event) {
    switch (event.key) {
      case 'Esc':
      case 'Escape':
        this.cancel(event);
        break;
      case 'Enter':
        this.submit(event);
        break;
      default:
        break;
    }
  }
  onActionClick(event, action) {
    const indexItem = this.props.item.index;
    if (action.onClick) {
      action.onClick(event, {
        value: this.itemInput.value,
        index: indexItem
      });
    }
  }
  getAction(action, index) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
      label: action.label,
      icon: action.icon,
      disabled: action.disabled,
      onClick: event => this.onActionClick(event, action),
      tooltipPlacement: "bottom",
      inProgress: action.inProgress,
      hideLabel: true,
      link: true
    }, index);
  }
  submit(event) {
    return this.props.item.itemProps.onSubmitItem(event, {
      value: event.target.value,
      model: this.props.item,
      index: this.props.item.index
    });
  }
  itemChange(event) {
    return this.props.item.itemProps.onChangeItem(event, {
      value: event.target.value,
      model: this.props.item,
      index: this.props.item.index
    });
  }
  cancel(event) {
    return this.props.item.itemProps.onAbortItem(event, {
      value: event.target.value,
      model: this.props.item,
      index: this.props.item.index
    });
  }
  render() {
    function updateDisabledStatus(action, currentEdit) {
      if (currentEdit[action.id] !== undefined && 'disabled' in currentEdit[action.id]) {
        return {
          ...action,
          disabled: currentEdit[action.id].disabled
        };
      }
      return action;
    }
    const editActions = this.props.item.itemProps.actions.map(action => updateDisabledStatus(action, this.props.currentEdit));
    const errorId = `${this.props.id}-error`;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      role: "row",
      className: itemClasses(this.props.item.error),
      id: this.props.id,
      style: this.props.style,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
        "aria-label": this.props.t('TC_ENUMERATION_EDIT_ENTRY', {
          defaultValue: 'Enter the new value'
        }),
        "aria-describedby": errorId,
        id: `${this.props.id}-input`,
        role: "gridcell",
        className: itemLabelClasses(),
        ref: input => {
          this.itemInput = input;
        },
        type: "text",
        onKeyDown: this.onKeyDown,
        onChange: this.itemChange
        // eslint-disable-next-line jsx-a11y/no-autofocus
        ,
        autoFocus: true
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        role: "gridcell",
        className: itemEditActionsClasses(),
        children: editActions.map((action, index) => this.getAction(action, index))
      }), this.props.item.error && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        id: errorId,
        className: itemErrorClasses(),
        "aria-live": "assertive",
        children: this.props.item.error
      })]
    });
  }
}
ItemEdit.propTypes = {
  ..._Item.default,
  ..._ItemEdit.default,
  currentEdit: _propTypes.default.shape({
    validate: _propTypes.default.shape({
      disabled: _propTypes.default.bool
    }),
    abort: _propTypes.default.shape({
      disabled: _propTypes.default.bool
    })
  })
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(ItemEdit);
//# sourceMappingURL=ItemEdit.component.js.map