@talend/react-components/lib/Enumeration/Header/HeaderInput.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Action = _interopRequireDefault(require("../../Actions/Action"));
var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function headerClasses(headerError) {
  return (0, _classnames.default)(_HeaderModule.default['tc-enumeration-header'], 'tc-enumeration-header', {
    'has-error': !!headerError
  });
}
function headerErrorClasses() {
  return (0, _classnames.default)(_HeaderModule.default['tc-enumeration-header-error'], 'tc-enumeration-header-error');
}
function getAction(action, index, getInternalInputRef) {
  function onClick(event) {
    const internalInputRef = getInternalInputRef();
    if (action.onClick) {
      action.onClick(event, {
        value: internalInputRef.value
      });
    }
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
    label: action.label,
    icon: action.icon,
    onClick: onClick,
    disabled: action.disabled,
    tooltipPlacement: "bottom",
    inProgress: action.inProgress,
    hideLabel: true,
    link: true
  }, `${index}-enum-header-action`);
}
function HeaderInput({
  headerInput,
  headerError,
  onInputChange,
  id,
  inputLabel,
  inputPlaceholder,
  onAddKeyDown,
  value,
  inputRef
}) {
  let internalInputRef = null;
  function onInputChangeHandler(event) {
    onInputChange(event, {
      value: event.target.value
    });
  }
  function onAddKeyDownHandler(event) {
    onAddKeyDown(event, {
      value: event.target.value
    });
  }
  function getInternalInputRef() {
    return internalInputRef;
  }
  const errorId = `${id}_error`;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
    className: headerClasses(headerError),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      type: "text",
      "aria-label": inputLabel,
      "aria-describedby": errorId,
      id: id,
      placeholder: inputPlaceholder,
      ref: input => {
        internalInputRef = input;
        if (inputRef) {
          inputRef(input);
        }
      },
      onChange: onInputChangeHandler,
      onKeyDown: onAddKeyDownHandler,
      value: value,
      autoFocus: true
    }), headerError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      id: errorId,
      className: headerErrorClasses(),
      "aria-live": "assertive",
      children: headerError
    }), headerInput.filter(action => !action.disabled).map((action, index) => getAction(action, index, getInternalInputRef.bind(this)))]
  });
}
HeaderInput.propTypes = {
  id: _propTypes.default.string.isRequired,
  headerInput: _propTypes.default.arrayOf(_propTypes.default.shape(_Action.default.propTypes)).isRequired,
  headerError: _propTypes.default.string,
  onInputChange: _propTypes.default.func,
  inputLabel: _propTypes.default.string,
  inputPlaceholder: _propTypes.default.string,
  inputRef: _propTypes.default.func,
  onAddKeyDown: _propTypes.default.func,
  value: _propTypes.default.string
};
var _default = exports.default = HeaderInput;
//# sourceMappingURL=HeaderInput.component.js.map