@talend/react-forms/lib/UIForm/fields/Datalist/displayMode/TextMode.component.js

React forms library based on json schema form.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = require("../../../../constants");
var _translate = _interopRequireDefault(require("../../../../translate"));
var _trigger = _interopRequireDefault(require("../../../trigger"));
var _FieldTemplate = require("../../FieldTemplate");
var _constants2 = require("../constants");
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class TextMode extends _react.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    const onTrigger = (event, trigger) => this.props.onTrigger(event, {
      trigger,
      schema: this.props.schema,
      errors: this.props.errors,
      properties: this.props.properties
    });
    (0, _trigger.default)(null, {
      eventNames: [_constants2.DID_MOUNT, _constants2.FOCUS],
      triggersDefinitions: this.props.schema.triggers,
      onTrigger,
      onLoading: isLoading => this.setState({
        isLoading
      }),
      onResponse: data => this.setState(data)
    });
  }
  render() {
    const {
      id,
      schema,
      value,
      t
    } = this.props;
    const {
      title,
      labelProps,
      options
    } = schema;
    let titleEntry;
    if (options && options.isMultiSection) {
      options.titleMap.find(section => {
        titleEntry = section.suggestions.find(entry => entry.value === value);
        return !!titleEntry;
      });
    } else {
      const titleMap = (0, _lodash.get)(this.state, 'titleMap') || (0, _lodash.get)(this.props, 'schema.titleMap') || [];
      titleEntry = titleMap.find(entry => entry.value === value);
    }
    let displayValue = titleEntry && titleEntry.name || value;
    if (value && this.state.isLoading) {
      displayValue = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
        "aria-busy": "true",
        children: [value, " ", `(${t('DATALIST_WIDGET_LOADING_LABELS', {
          defaultValue: 'loading labels'
        })})`]
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldTemplate.TextMode, {
      id: id,
      label: title,
      labelProps: labelProps,
      children: displayValue
    });
  }
}
if (process.env.NODE_ENV !== 'production') {
  TextMode.propTypes = {
    errors: _propTypes.default.object,
    id: _propTypes.default.string,
    onTrigger: _propTypes.default.func,
    properties: _propTypes.default.object,
    schema: _propTypes.default.shape({
      options: _propTypes.default.shape({
        isMultiSection: _propTypes.default.bool,
        titleMap: _propTypes.default.array
      }),
      title: _propTypes.default.string,
      labelProps: _propTypes.default.object,
      titleMap: _propTypes.default.arrayOf(_propTypes.default.shape({
        name: _propTypes.default.string.isRequired,
        value: _propTypes.default.string.isRequired
      })),
      triggers: _propTypes.default.array,
      type: _propTypes.default.string
    }),
    t: _propTypes.default.func,
    value: _propTypes.default.string
  };
}
TextMode.defaultProps = {
  schema: {},
  value: '',
  t: (0, _translate.default)()
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.I18N_DOMAIN_FORMS)(TextMode);
//# sourceMappingURL=TextMode.component.js.map