@talend/react-containers/lib/ComponentForm/fields/MultiSelect/MultiSelect.component.js

Provide connected components aka containers for @talend/react-cmf based on @talend/react-components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _reactForms = _interopRequireDefault(require("@talend/react-forms"));
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const FieldTemplate = _reactForms.default.UIForm.FieldTemplate;
class MultiSelectField extends _react.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onTrigger = this.onTrigger.bind(this);
    this.onTriggerResult = this.onTriggerResult.bind(this);
    this.onChange = this.onChange.bind(this);
    this.getTitleMap = this.getTitleMap.bind(this);
  }
  componentDidMount() {
    this.onTrigger({
      type: 'didMount'
    });
  }
  onTrigger(event) {
    _reactForms.default.UIForm.callTrigger(event, {
      eventNames: [event.type],
      triggersDefinitions: this.props.schema.triggers,
      onTrigger: this.onTriggerResult,
      onLoading: isLoading => this.setState({
        isLoading
      }),
      onResponse: data => this.setState(data)
    });
  }
  onTriggerResult(event, trigger) {
    return this.props.onTrigger(event, {
      trigger,
      schema: this.props.schema,
      errors: this.props.errors,
      properties: this.props.properties
    });
  }
  onChange(event, selected) {
    const payload = {
      schema: {
        ...this.props.schema,
        titleMap: this.getTitleMap()
      },
      value: selected
    };
    this.props.onChange(event, payload);
    this.props.onFinish(event, payload);
  }
  getTitleMap() {
    if (this.state.titleMap) {
      return this.state.titleMap;
    }
    const {
      titleMap
    } = this.props.schema;
    if (titleMap && Object.keys(titleMap).length > 0) {
      return titleMap;
    }
    const {
      value = []
    } = this.props;
    const names = this.props.resolveName(value);
    return value.map((nextVal, index) => ({
      name: names[index],
      value: nextVal
    }));
  }
  getChildrenErrorMessage() {
    const {
      errors
    } = this.props.errors;
    if (!errors || errors.length === 0) {
      return undefined;
    }
    const key = this.props.schema.key.toString();
    return Object.entries(errors).filter(entry => entry[0].startsWith(key)).map(entry => entry[1]).join(', ');
  }
  render() {
    const {
      generateDescriptionId,
      generateErrorId
    } = _reactForms.default.UIForm.Message.utils;
    const {
      id,
      isValid,
      errorMessage,
      schema
    } = this.props;
    const descriptionId = generateDescriptionId(id);
    const errorId = generateErrorId(id);
    const errorMsg = errorMessage || this.getChildrenErrorMessage();
    const isDeepValid = isValid && !errorMsg;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldTemplate, {
      description: schema.description,
      descriptionId: descriptionId,
      errorId: errorId,
      errorMessage: errorMsg,
      id: id,
      isValid: isDeepValid,
      label: schema.title,
      required: schema.required,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.MultiSelect, {
        id: id,
        autoFocus: schema.autoFocus,
        disabled: schema.disabled,
        required: schema.required,
        placeholder: schema.placeholder,
        readOnly: schema.readOnly,
        restricted: schema.restricted,
        onBlur: this.onTrigger,
        onChange: this.onChange,
        onFocus: this.onTrigger,
        options: this.getTitleMap(),
        selected: this.props.value,
        isLoading: this.state.isLoading
      })
    });
  }
}
exports.default = MultiSelectField;
if (process.env.NODE_ENV !== 'production') {
  MultiSelectField.propTypes = {
    id: _propTypes.default.string,
    isValid: _propTypes.default.bool,
    errorMessage: _propTypes.default.string,
    errors: _propTypes.default.object,
    onChange: _propTypes.default.func.isRequired,
    onFinish: _propTypes.default.func.isRequired,
    onTrigger: _propTypes.default.func.isRequired,
    properties: _propTypes.default.object,
    resolveName: _propTypes.default.func,
    schema: _propTypes.default.shape({
      autoFocus: _propTypes.default.bool,
      description: _propTypes.default.string,
      disabled: _propTypes.default.bool,
      key: _propTypes.default.array,
      placeholder: _propTypes.default.string,
      readOnly: _propTypes.default.bool,
      required: _propTypes.default.bool,
      restricted: _propTypes.default.bool,
      title: _propTypes.default.string,
      titleMap: _propTypes.default.arrayOf(_propTypes.default.shape({
        name: _propTypes.default.string.isRequired,
        value: _propTypes.default.string.isRequired
      })),
      triggers: _propTypes.default.arrayOf(_propTypes.default.shape({
        onEvent: _propTypes.default.string
      }))
    }),
    value: _propTypes.default.arrayOf(_propTypes.default.string)
  };
}
MultiSelectField.defaultProps = {
  isValid: true,
  schema: {},
  value: [],
  resolveName: value => value
};
//# sourceMappingURL=MultiSelect.component.js.map