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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.renderInputComponent = renderInputComponent;
exports.renderItem = renderItem;
exports.renderItemsContainerFactory = renderItemsContainerFactory;
exports.renderSectionTitle = renderSectionTitle;
var _reactDebounceInput = _interopRequireDefault(require("react-debounce-input"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _CircularProgress = _interopRequireDefault(require("../CircularProgress"));
var _Emphasis = _interopRequireDefault(require("../Emphasis"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _theme = require("../theme");
var _TypeaheadModule = _interopRequireDefault(require("./Typeahead.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const css = (0, _theme.getTheme)(_TypeaheadModule.default);
function renderInputComponent(props) {
  const {
    caret,
    key,
    debounceMinLength,
    debounceTimeout,
    icon,
    setReferenceElement,
    disabled,
    readOnly,
    ...rest
  } = props;
  const hasCaret = caret && !disabled && !readOnly;
  const typeaheadContainerIconClasses = (0, _classnames.default)('tc-typeahead-typeahead-input-icon', _TypeaheadModule.default['typeahead-input-container'], icon && _TypeaheadModule.default['typeahead-input-icon'], hasCaret && _TypeaheadModule.default['typeahead-input-caret']);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: typeaheadContainerIconClasses,
    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: css('icon-cls', {
        'icon-caret': hasCaret
      }),
      children: icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        ...icon
      })
    }), debounceMinLength || debounceTimeout ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDebounceInput.default, {
      id: key,
      ...rest,
      disabled: disabled,
      readOnly: readOnly,
      debounceTimeout: debounceTimeout,
      element: _designSystem.Form.Text,
      minLength: debounceMinLength,
      inputRef: node => {
        // eslint-disable-next-line react/no-find-dom-node
        setReferenceElement(_reactDom.default.findDOMNode(node));
      }
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Text, {
      id: key,
      ...rest,
      hideLabel: true,
      disabled: disabled,
      readOnly: readOnly,
      ref: setReferenceElement
    }), hasCaret && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: css('icon-cls', {
        'icon-caret': hasCaret
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        name: "talend-caret-down"
      })
    })]
  });
}
renderInputComponent.propTypes = {
  key: _propTypes.default.string,
  debounceMinLength: _propTypes.default.number,
  debounceTimeout: _propTypes.default.number,
  icon: _propTypes.default.shape({
    name: _propTypes.default.string,
    title: _propTypes.default.string
  }),
  inputRef: _propTypes.default.func,
  caret: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  readOnly: _propTypes.default.bool
};
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 = (0, _classnames.default)(containerProps.className, _TypeaheadModule.default['items-container'], {
      [_TypeaheadModule.default['container-open']]: searching || noResult
    });
    let content;
    if (searching) {
      content = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: `${_TypeaheadModule.default['is-searching']} is-searching`,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: searchingText
        })]
      }, "searching");
    } else if (noResult && loading) {
      content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${_TypeaheadModule.default['is-loading']} is-loading`,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: loadingText
        })
      }, "loading");
    } else if (noDomain && noDomainRenderer) {
      content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${_TypeaheadModule.default['no-domain']} no-domain`,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: noDomainRenderer()
        })
      }, "no-domain");
    } else if (noResult) {
      content = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: `${_TypeaheadModule.default['no-result']} no-result`,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          name: "talend-fieldglass",
          title: noResultText
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: noResultText
        })]
      }, "no-result");
    } else {
      content = children;
    }
    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", {
        ref: containerProps.ref,
        className: _TypeaheadModule.default['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.default.object,
    children: _propTypes.default.node
  };
  return ItemsContainerComponent;
}
function renderSectionTitle(section) {
  if (section && (section.icon || section.title)) {
    const {
      hint
    } = section;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: css('section-header', 'tc-typeahead-section-header'),
      children: [section.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        name: section.icon.name,
        title: section.icon.title
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: css('section-header-title', 'tc-typeahead-section-header-title', {
          hint
        }),
        children: section.title
      })]
    });
  }
  return null;
}
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__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(_TypeaheadModule.default.item, {
      [_TypeaheadModule.default.disabled]: item.disabled,
      [_TypeaheadModule.default.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,
      [_TypeaheadModule.default.multiline]: title && description
    }),
    title: title,
    "data-feature": item['data-feature'] || rest['data-feature'],
    children: [(0, _lodash.get)(item, 'icon') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
      className: _TypeaheadModule.default['item-icon'],
      ...item.icon
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _TypeaheadModule.default['item-text'],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: css('item-title', 'tc-typeahead-item-title'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Emphasis.default, {
          value: value,
          text: title
        })
      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: css('item-description', 'tc-typeahead-item-description'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Emphasis.default, {
          value: value,
          text: description
        })
      })]
    })]
  });
}
//# sourceMappingURL=Typeahead.component.renderers.js.map