@talend/react-forms/lib/UIForm/fieldsets/Array/ArrayItem.component.js

React forms library based on json schema form.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ReorderButton = ReorderButton;
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 _designSystem = require("@talend/design-system");
var _constants = require("../../../constants");
var _ArrayItemModule = _interopRequireDefault(require("./ArrayItem.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ReorderButton(props) {
  const {
    disabled,
    index,
    hasMoveDown,
    hasMoveUp,
    id,
    isMoveDown,
    onReorder
  } = props;
  let buttonProps;
  let label;
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.I18N_DOMAIN_FORMS);
  if (isMoveDown) {
    buttonProps = {
      id: id && `${id}-moveDown`,
      disabled: disabled || !hasMoveDown,
      onClick: event => props.onReorder(event, {
        previousIndex: index,
        nextIndex: index + 1
      }),
      icon: 'arrow-bottom'
    };
    label = t('ARRAY_ITEM_MOVE_DOWN', {
      defaultValue: 'Move down'
    });
  } else {
    buttonProps = {
      id: id && `${id}-moveUp`,
      disabled: disabled || !hasMoveUp,
      onClick: event => onReorder(event, {
        previousIndex: index,
        nextIndex: index - 1
      }),
      icon: 'arrow-top'
    };
    label = t('ARRAY_ITEM_MOVE_UP', {
      defaultValue: 'Move up'
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
    ...buttonProps,
    size: "XS",
    children: label
  });
}
if (process.env.NODE_ENV !== 'production') {
  ReorderButton.propTypes = {
    disabled: _propTypes.default.bool,
    hasMoveDown: _propTypes.default.bool.isRequired,
    hasMoveUp: _propTypes.default.bool.isRequired,
    id: _propTypes.default.string,
    index: _propTypes.default.number.isRequired,
    isMoveDown: _propTypes.default.bool,
    onReorder: _propTypes.default.func.isRequired
  };
}
function ArrayItem(props) {
  const {
    renderItem,
    disabled,
    id,
    index,
    onRemove,
    onReorder,
    isClosed,
    valueIsUpdating,
    isCloseable,
    readOnly
  } = props;
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.I18N_DOMAIN_FORMS);
  const widgetIsDisabled = disabled || valueIsUpdating;
  const deleteAction = {
    id: id && `${id}-delete`,
    onClick: event => onRemove(event, index),
    disabled: widgetIsDisabled,
    icon: 'trash',
    tooltip: t('ARRAY_ITEM_DELETE', 'Delete')
  };
  const actions = [];
  if (!readOnly) {
    actions.push(deleteAction);
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(_ArrayItemModule.default['tf-array-item'], 'tf-array-item'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _ArrayItemModule.default.control,
      children: !isClosed && onReorder && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ReorderButton, {
          ...props,
          index: index,
          disabled: widgetIsDisabled
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ReorderButton, {
          ...props,
          index: index,
          isMoveDown: true,
          disabled: widgetIsDisabled
        })]
      })
    }), renderItem(index, {
      actions
    }), !isCloseable && !readOnly && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _ArrayItemModule.default.delete,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
        ...deleteAction,
        children: t('ARRAY_FIELD_TEMPLATE_ACTION_DELETE', {
          defaultValue: 'Delete'
        })
      })
    })]
  });
}
if (process.env.NODE_ENV !== 'production') {
  ArrayItem.propTypes = {
    renderItem: _propTypes.default.func,
    disabled: _propTypes.default.bool,
    readOnly: _propTypes.default.bool,
    id: _propTypes.default.string,
    index: _propTypes.default.number.isRequired,
    isClosed: _propTypes.default.bool,
    onRemove: _propTypes.default.func.isRequired,
    onReorder: _propTypes.default.func,
    valueIsUpdating: _propTypes.default.bool,
    isCloseable: _propTypes.default.bool
  };
}
ArrayItem.defaultProps = {
  isCloseable: false,
  renderItem: () => null
};
var _default = exports.default = ArrayItem;
//# sourceMappingURL=ArrayItem.component.js.map