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

React forms library based on json schema form.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
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 _Message = _interopRequireDefault(require("../../Message"));
var _generateId = require("../../Message/generateId");
var _ArrayItem = _interopRequireDefault(require("./ArrayItem.component"));
var _DefaultArrayTemplateModule = _interopRequireDefault(require("./DefaultArrayTemplate.module.scss"));
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function DefaultArrayTemplate(props) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.I18N_DOMAIN_FORMS);
  const {
    canReorder,
    errorMessage,
    id,
    isValid,
    onAdd,
    onRemove,
    onReorder,
    renderItem,
    schema,
    value,
    valueIsUpdating,
    options = {},
    isCloseable
  } = props;
  const descriptionId = (0, _generateId.generateDescriptionId)(id);
  const errorId = (0, _generateId.generateErrorId)(id);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    className: (0, _classnames.default)(_DefaultArrayTemplateModule.default['tf-array-fieldset'], 'tf-array-fieldset'),
    "data-content": schema.title,
    children: [schema.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.VisuallyHidden, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
        children: schema.title
      })
    }), !schema.readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.Action, {
      id: `${id || 'tf-array'}-btn`,
      className: (0, _classnames.default)(_DefaultArrayTemplateModule.default['tf-array-add'], 'tf-array-add'),
      bsStyle: "info",
      onClick: onAdd,
      disabled: valueIsUpdating || schema.disabled,
      label: options.btnLabel || t('ARRAY_ADD_ELEMENT', {
        defaultValue: 'Add'
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
      errorMessage: errorMessage,
      description: schema.description,
      isValid: isValid,
      descriptionId: descriptionId,
      errorId: errorId
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
      id: id,
      className: (0, _classnames.default)(_DefaultArrayTemplateModule.default['tf-array'], 'tf-array'),
      "aria-describedby": `${descriptionId} ${errorId}`,
      "aria-invalid": isValid,
      children: value.map((itemValue, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
        className: (0, _classnames.default)(_DefaultArrayTemplateModule.default.item, 'item', `item-${index}`),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrayItem.default, {
          hasMoveDown: index < value.length - 1,
          hasMoveUp: index > 0,
          id: id && `${id}-control-${index}`,
          index: index,
          onRemove: onRemove,
          onReorder: canReorder ? onReorder : undefined,
          isClosed: itemValue.isClosed,
          valueIsUpdating: valueIsUpdating,
          renderItem: renderItem,
          isCloseable: isCloseable,
          disabled: schema.disabled,
          readOnly: schema.readOnly
        })
      }, index))
    })]
  });
}
DefaultArrayTemplate.defaultProps = {
  isCloseable: false
};
DefaultArrayTemplate.ArrayItem = _ArrayItem.default;
if (process.env.NODE_ENV !== 'production') {
  DefaultArrayTemplate.propTypes = {
    canReorder: _propTypes.default.bool,
    errorMessage: _propTypes.default.string,
    id: _propTypes.default.string,
    isValid: _propTypes.default.bool,
    onAdd: _propTypes.default.func.isRequired,
    onRemove: _propTypes.default.func.isRequired,
    onReorder: _propTypes.default.func.isRequired,
    renderItem: _propTypes.default.func.isRequired,
    schema: _propTypes.default.object.isRequired,
    value: _propTypes.default.array.isRequired,
    valueIsUpdating: _propTypes.default.bool,
    options: _propTypes.default.shape({
      btnLabel: _propTypes.default.string
    }),
    isCloseable: _propTypes.default.bool
  };
}
var _default = exports.default = DefaultArrayTemplate;
//# sourceMappingURL=DefaultArrayTemplate.component.js.map