@talend/react-components/lib-esm/Typeahead/Typeahead.component.renderers.js

Set of react components.

import DebounceInput from 'react-debounce-input';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { Form } from '@talend/design-system';
import CircularProgress from '../CircularProgress';
import Emphasis from '../Emphasis';
import Icon from '../Icon';
import { getTheme } from '../theme';
import theme from './Typeahead.module.scss';
import { get } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const css = getTheme(theme);
export function renderInputComponent(props) {
  const {
    caret,
    key,
    debounceMinLength,
    debounceTimeout,
    icon,
    setReferenceElement,
    disabled,
    readOnly,
    ...rest
  } = props;
  const hasCaret = caret && !disabled && !readOnly;
  const typeaheadContainerIconClasses = classNames('tc-typeahead-typeahead-input-icon', theme['typeahead-input-container'], icon && theme['typeahead-input-icon'], hasCaret && theme['typeahead-input-caret']);
  return /*#__PURE__*/_jsxs("div", {
    className: typeaheadContainerIconClasses,
    children: [icon && /*#__PURE__*/_jsx("div", {
      className: css('icon-cls', {
        'icon-caret': hasCaret
      }),
      children: icon && /*#__PURE__*/_jsx(Icon, {
        ...icon
      })
    }), debounceMinLength || debounceTimeout ? /*#__PURE__*/_jsx(DebounceInput, {
      id: key,
      ...rest,
      disabled: disabled,
      readOnly: readOnly,
      debounceTimeout: debounceTimeout,
      element: Form.Text,
      minLength: debounceMinLength,
      inputRef: node => {
        // eslint-disable-next-line react/no-find-dom-node
        setReferenceElement(ReactDOM.findDOMNode(node));
      }
    }) : /*#__PURE__*/_jsx(Form.Text, {
      id: key,
      ...rest,
      hideLabel: true,
      disabled: disabled,
      readOnly: readOnly,
      ref: setReferenceElement
    }), hasCaret && /*#__PURE__*/_jsx("div", {
      className: css('icon-cls', {
        'icon-caret': hasCaret
      }),
      children: /*#__PURE__*/_jsx(Icon, {
        name: "talend-caret-down"
      })
    })]
  });
}
renderInputComponent.propTypes = {
  key: PropTypes.string,
  debounceMinLength: PropTypes.number,
  debounceTimeout: PropTypes.number,
  icon: PropTypes.shape({
    name: PropTypes.string,
    title: PropTypes.string
  }),
  inputRef: PropTypes.func,
  caret: PropTypes.bool,
  disabled: PropTypes.bool,
  readOnly: PropTypes.bool
};
export function renderItemsContainerFactory(items, noResultText, searching, searchingText, loading, loadingText, referenceElement, render = content => content, setPopperElement, styles, attributes, t, noDomainRenderer) {
  const isShown = items;
  const noResult = items && !items.length;
  const noDomain = !items || items && !items.length;
  function ItemsContainerComponent({
    containerProps,
    children
  }) {
    if (!isShown) {
      return undefined;
    }
    const containerClassName = classNames(containerProps.className, theme['items-container'], {
      [theme['container-open']]: searching || noResult
    });
    let content;
    if (searching) {
      content = /*#__PURE__*/_jsxs("div", {
        className: `${theme['is-searching']} is-searching`,
        children: [/*#__PURE__*/_jsx(CircularProgress, {}), /*#__PURE__*/_jsx("span", {
          children: searchingText
        })]
      }, "searching");
    } else if (noResult && loading) {
      content = /*#__PURE__*/_jsx("div", {
        className: `${theme['is-loading']} is-loading`,
        children: /*#__PURE__*/_jsx("span", {
          children: loadingText
        })
      }, "loading");
    } else if (noDomain && noDomainRenderer) {
      content = /*#__PURE__*/_jsx("div", {
        className: `${theme['no-domain']} no-domain`,
        children: /*#__PURE__*/_jsx("span", {
          children: noDomainRenderer()
        })
      }, "no-domain");
    } else if (noResult) {
      content = /*#__PURE__*/_jsxs("div", {
        className: `${theme['no-result']} no-result`,
        children: [/*#__PURE__*/_jsx(Icon, {
          name: "talend-fieldglass",
          title: noResultText
        }), /*#__PURE__*/_jsx("span", {
          children: noResultText
        })]
      }, "no-result");
    } else {
      content = children;
    }
    return /*#__PURE__*/_jsx("div", {
      className: containerClassName,
      id: containerProps.id,
      ref: setPopperElement,
      style: styles.popper,
      ...attributes.popper,
      // we need to make this div focusable for FocusManager to not close this box when we click on custom children.
      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
      tabIndex: "0",
      "aria-label": t('TYPEAHEAD_SUGGESTIONS', {
        defaultValue: 'Suggestions'
      }),
      children: /*#__PURE__*/_jsx("div", {
        ref: containerProps.ref,
        className: theme['items-body'],
        style: {
          maxHeight: styles.popper.maxHeight,
          minHeight: styles.popper.minHeight
        },
        children: render(content, {
          isShown,
          loading,
          noResult,
          searching
        }, containerProps.ref, referenceElement)
      })
    }, containerProps.key);
  }
  ItemsContainerComponent.propTypes = {
    containerProps: PropTypes.object,
    children: PropTypes.node
  };
  return ItemsContainerComponent;
}
export function renderSectionTitle(section) {
  if (section && (section.icon || section.title)) {
    const {
      hint
    } = section;
    return /*#__PURE__*/_jsxs("div", {
      className: css('section-header', 'tc-typeahead-section-header'),
      children: [section.icon && /*#__PURE__*/_jsx(Icon, {
        name: section.icon.name,
        title: section.icon.title
      }), /*#__PURE__*/_jsx("span", {
        className: css('section-header-title', 'tc-typeahead-section-header-title', {
          hint
        }),
        children: section.title
      })]
    });
  }
  return null;
}
export function renderItem(item, {
  value,
  valueId,
  ...rest
}) {
  let title;
  let itemValueId;
  let description;
  if (typeof item === 'string') {
    title = itemValueId = item;
  } else {
    var _ref, _item$value;
    title = (item.title || item.name || '').toString().trim();
    itemValueId = ((_ref = (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item.id) !== null && _ref !== void 0 ? _ref : '').toString().trim();
    description = item.description;
  }
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(theme.item, {
      [theme.disabled]: item.disabled,
      [theme.selected]: valueId !== undefined && (valueId === null || valueId === void 0 ? void 0 : valueId.toString()) === itemValueId || valueId === undefined && (value === null || value === void 0 ? void 0 : value.toString()) === title,
      [theme.multiline]: title && description
    }),
    title: title,
    "data-feature": item['data-feature'] || rest['data-feature'],
    children: [get(item, 'icon') && /*#__PURE__*/_jsx(Icon, {
      className: theme['item-icon'],
      ...item.icon
    }), /*#__PURE__*/_jsxs("div", {
      className: theme['item-text'],
      children: [/*#__PURE__*/_jsx("span", {
        className: css('item-title', 'tc-typeahead-item-title'),
        children: /*#__PURE__*/_jsx(Emphasis, {
          value: value,
          text: title
        })
      }), description && /*#__PURE__*/_jsx("p", {
        className: css('item-description', 'tc-typeahead-item-description'),
        children: /*#__PURE__*/_jsx(Emphasis, {
          value: value,
          text: description
        })
      })]
    })]
  });
}
//# sourceMappingURL=Typeahead.component.renderers.js.map