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

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

import PropTypes from 'prop-types';
import { Component } from 'react';
import Form from '@talend/react-forms';
import { MultiSelect } from "@talend/react-components";
import { jsx as _jsx } from "react/jsx-runtime";
const FieldTemplate = Form.UIForm.FieldTemplate;
export default class MultiSelectField extends 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) {
    Form.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
    } = Form.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__*/_jsx(FieldTemplate, {
      description: schema.description,
      descriptionId: descriptionId,
      errorId: errorId,
      errorMessage: errorMsg,
      id: id,
      isValid: isDeepValid,
      label: schema.title,
      required: schema.required,
      children: /*#__PURE__*/_jsx(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
      })
    });
  }
}
if (process.env.NODE_ENV !== 'production') {
  MultiSelectField.propTypes = {
    id: PropTypes.string,
    isValid: PropTypes.bool,
    errorMessage: PropTypes.string,
    errors: PropTypes.object,
    onChange: PropTypes.func.isRequired,
    onFinish: PropTypes.func.isRequired,
    onTrigger: PropTypes.func.isRequired,
    properties: PropTypes.object,
    resolveName: PropTypes.func,
    schema: PropTypes.shape({
      autoFocus: PropTypes.bool,
      description: PropTypes.string,
      disabled: PropTypes.bool,
      key: PropTypes.array,
      placeholder: PropTypes.string,
      readOnly: PropTypes.bool,
      required: PropTypes.bool,
      restricted: PropTypes.bool,
      title: PropTypes.string,
      titleMap: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string.isRequired,
        value: PropTypes.string.isRequired
      })),
      triggers: PropTypes.arrayOf(PropTypes.shape({
        onEvent: PropTypes.string
      }))
    }),
    value: PropTypes.arrayOf(PropTypes.string)
  };
}
MultiSelectField.defaultProps = {
  isValid: true,
  schema: {},
  value: [],
  resolveName: value => value
};
//# sourceMappingURL=MultiSelect.component.js.map