@talend/react-forms/lib-esm/UIForm/fields/Select/Select.component.js

React forms library based on json schema form.

/* eslint-disable jsx-a11y/no-autofocus */
import PropTypes from 'prop-types';
import { Form } from '@talend/design-system';
import { getLabelProps } from '../../utils/labels';
import { extractDataAttributes } from '../../utils/properties';
import { jsx as _jsx } from "react/jsx-runtime";
function getSelectedOptions(select, multiple) {
  if (multiple) {
    return Array.prototype.slice.call(select.options).filter(option => option.selected).map(option => option.value);
  }
  return select.value;
}
export default function Select({
  id,
  isValid,
  errorMessage,
  onChange,
  onFinish,
  schema,
  value,
  valueIsUpdating
}) {
  const {
    autoFocus,
    description,
    disabled = false,
    placeholder,
    readOnly = false,
    title,
    labelProps,
    ...rest
  } = schema;
  const multiple = schema.schema.type === 'array' && schema.schema.uniqueItems;
  return /*#__PURE__*/_jsx(Form.Select, {
    id: id,
    multiple: multiple,
    autoFocus: autoFocus,
    disabled: disabled || valueIsUpdating,
    placeholder: placeholder,
    onChange: event => {
      const payload = {
        schema,
        value: getSelectedOptions(event.target, multiple)
      };
      onChange(event, payload);
      onFinish(event, payload);
    },
    readOnly: readOnly,
    value: value,
    required: schema.required,
    label: getLabelProps(title, labelProps, schema.hint, schema.required),
    description: errorMessage || description,
    hasError: !isValid,
    "aria-invalid": !isValid,
    "aria-required": schema.required,
    ...extractDataAttributes(rest),
    children: schema.titleMap && schema.titleMap.map((option, index) => {
      return /*#__PURE__*/_jsx("option", {
        value: option.value,
        selected: value === option.value,
        children: option.name
      }, option.value || option.name || index);
    })
  });
}
if (process.env.NODE_ENV !== 'production') {
  Select.propTypes = {
    id: PropTypes.string,
    isValid: PropTypes.bool,
    errorMessage: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    onFinish: PropTypes.func.isRequired,
    schema: PropTypes.shape({
      autoFocus: PropTypes.bool,
      description: PropTypes.string,
      disabled: PropTypes.bool,
      placeholder: PropTypes.string,
      readOnly: PropTypes.bool,
      required: PropTypes.bool,
      schema: PropTypes.shape({
        type: PropTypes.string,
        uniqueItems: PropTypes.bool
      }),
      title: PropTypes.string,
      labelProps: PropTypes.object,
      titleMap: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string.isRequired,
        value: PropTypes.string.isRequired
      })),
      type: PropTypes.string,
      hint: PropTypes.shape({
        icon: PropTypes.string,
        className: PropTypes.string,
        overlayComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
        overlayPlacement: PropTypes.string
      })
    }),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
    valueIsUpdating: PropTypes.bool
  };
}
Select.defaultProps = {
  isValid: true,
  schema: {},
  value: ''
};
//# sourceMappingURL=Select.component.js.map