client/entity-editor/alias-editor/alias-row.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.array.filter.js");
require("core-js/modules/es.object.to-string.js");
var _reactBootstrap = require("react-bootstrap");
var _actions = require("./actions");
var _common = require("../validators/common");
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _languageField = _interopRequireDefault(require("../common/language-field"));
var _nameField = _interopRequireDefault(require("../common/name-field"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _sortNameField = _interopRequireDefault(require("../common/sort-name-field"));
var _reactRedux = require("react-redux");
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
var _helpers = require("../helpers");
/*
 * Copyright (C) 2016  Ben Ockmore
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */

/**
 * Container component. The AliasRow component renders a single Row containing
 * several input fields, allowing the user to set the name, sort name, language
 * and primary flag for an alias in the AliasEditor. A button is also included
 * to remove the alias from the editor.
 *
 * @param {Object} props - The properties passed to the component.
 * @param {number} props.languageValue - The ID of the language currently
 *        selected.
 * @param {Array} props.languageOptions - The list of possible languages for an
 *        alias.
 * @param {string} props.nameValue - The name currently set for this alias.
 * @param {string} props.sortNameValue - The sort name currently set for this
 *        alias.
 * @param {string} props.primaryChecked - Whether or not the primary checkbox
 *        is checked.
 * @param {Function} props.onLanguageChange - A function to be called when a
 *        new alias language is selected.
 * @param {Function} props.onNameChange - A function to be called when the
 *        name for the alias is changed.
 * @param {Function} props.onSortNameChange - A function to be called when the
 *        sort name for the alias is changed.
 * @param {Function} props.onRemoveButtonClick - A function to be called when
 *        the button to remove the alias is clicked.
 * @param {Function} props.onPrimaryClick - A function to be called when
 *        the primary checkbox is clicked.
 * @returns {ReactElement} React element containing the rendered AliasRow.
 */
var AliasRow = function AliasRow(_ref) {
  var languageOptions = _ref.languageOptions,
    languageValue = _ref.languageValue,
    nameValue = _ref.nameValue,
    sortNameValue = _ref.sortNameValue,
    primaryChecked = _ref.primaryChecked,
    onLanguageChange = _ref.onLanguageChange,
    onNameChange = _ref.onNameChange,
    onSortNameChange = _ref.onSortNameChange,
    onRemoveButtonClick = _ref.onRemoveButtonClick,
    onPrimaryClick = _ref.onPrimaryClick;
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
    lg: 4
  }, /*#__PURE__*/_react.default.createElement(_nameField.default, {
    autoFocus: true,
    defaultValue: nameValue,
    empty: (0, _helpers.isAliasEmpty)(nameValue, sortNameValue, languageValue),
    error: !(0, _common.validateAliasName)(nameValue),
    onChange: onNameChange
  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
    lg: 4
  }, /*#__PURE__*/_react.default.createElement(_sortNameField.default, {
    defaultValue: sortNameValue,
    empty: (0, _helpers.isAliasEmpty)(nameValue, sortNameValue, languageValue),
    error: !(0, _common.validateAliasSortName)(sortNameValue),
    storedNameValue: nameValue,
    onChange: onSortNameChange
  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
    lg: 4
  }, /*#__PURE__*/_react.default.createElement(_languageField.default, {
    empty: (0, _helpers.isAliasEmpty)(nameValue, sortNameValue, languageValue),
    error: !(0, _common.validateAliasLanguage)(languageValue),
    instanceId: "language",
    options: languageOptions,
    value: languageOptions.filter(function (el) {
      return el.value === languageValue;
    }),
    onChange: onLanguageChange
  }))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
    lg: {
      offset: 5,
      span: 2
    }
  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
    defaultChecked: primaryChecked,
    label: "Primary",
    type: "checkbox",
    onChange: onPrimaryClick
  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
    className: "text-right",
    lg: {
      offset: 2,
      span: 3
    }
  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
    block: true,
    className: "margin-top-d5",
    variant: "danger",
    onClick: onRemoveButtonClick
  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: _freeSolidSvgIcons.faTimes
  }), /*#__PURE__*/_react.default.createElement("span", null, "\xA0Remove")))), /*#__PURE__*/_react.default.createElement("hr", null));
};
AliasRow.displayName = 'AliasEditor.AliasRow';
AliasRow.propTypes = {
  languageOptions: _propTypes.default.array.isRequired,
  languageValue: _propTypes.default.number,
  nameValue: _propTypes.default.string.isRequired,
  onLanguageChange: _propTypes.default.func.isRequired,
  onNameChange: _propTypes.default.func.isRequired,
  onPrimaryClick: _propTypes.default.func.isRequired,
  onRemoveButtonClick: _propTypes.default.func.isRequired,
  onSortNameChange: _propTypes.default.func.isRequired,
  primaryChecked: _propTypes.default.bool.isRequired,
  sortNameValue: _propTypes.default.string.isRequired
};
AliasRow.defaultProps = {
  languageValue: null
};
function mapDispatchToProps(dispatch, _ref2) {
  var index = _ref2.index;
  return {
    onLanguageChange: function onLanguageChange(value) {
      return dispatch((0, _actions.updateAliasLanguage)(index, value && value.value));
    },
    onNameChange: function onNameChange(event) {
      return dispatch((0, _actions.debouncedUpdateAliasName)(index, event.target.value));
    },
    onPrimaryClick: function onPrimaryClick(event) {
      return dispatch((0, _actions.updateAliasPrimary)(index, event.target.checked));
    },
    onRemoveButtonClick: function onRemoveButtonClick() {
      return dispatch((0, _actions.removeAliasRow)(index));
    },
    onSortNameChange: function onSortNameChange(event) {
      return dispatch((0, _actions.debouncedUpdateAliasSortName)(index, event.target.value));
    }
  };
}
function mapStateToProps(rootState, _ref3) {
  var index = _ref3.index;
  var state = rootState.get('aliasEditor');
  return {
    languageValue: state.getIn([index, 'language']),
    nameValue: state.getIn([index, 'name']),
    primaryChecked: state.getIn([index, 'primary']),
    sortNameValue: state.getIn([index, 'sortName'])
  };
}
var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(AliasRow);
exports.default = _default;
//# sourceMappingURL=alias-row.js.map