@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
79 lines (77 loc) • 2.54 kB
JavaScript
/**** Libraries ****/
import React from 'react';
import { renderNode, isRenderable } from '@zohodesk/utils';
import { EmptyState_propTypes } from "./props/propTypes";
import { EmptyState_defaultProps } from "./props/defaultProps";
import { MULTISELECT_I18N_KEYS } from "./constants";
/**** CSS ****/
import style from "./MultiSelect.module.css";
export default class EmptyState extends React.PureComponent {
render() {
let {
emptyMessage,
isLoading,
noMoreOptionsMessage,
options,
searchEmptyMessage,
searchString,
suggestions,
dataId,
renderCustomEmptyState,
getCustomEmptyState,
palette,
i18nKeys,
htmlId,
a11y
} = this.props;
let {
loadingText = MULTISELECT_I18N_KEYS.loadingText,
emptyText = emptyMessage,
noMoreText = noMoreOptionsMessage,
searchEmptyText = searchEmptyMessage
} = i18nKeys;
let className = ` ${style[palette]}`;
let {
role = 'alert'
} = a11y;
return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
className: className,
"data-id": `${dataId}_Loading`,
"data-test-id": `${dataId}_Loading`,
role: role,
id: htmlId
}, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/React.createElement("div", {
className: className,
"data-id": `${dataId}_srchEmptyMsg`,
"data-test-id": `${dataId}_srchEmptyMsg`,
role: role,
id: htmlId
}, searchEmptyText || emptyText) : options.length === 0 ? isRenderable(renderCustomEmptyState) ? renderNode(renderCustomEmptyState, {
title: emptyText,
dataId,
role,
htmlId,
className
}) : /*#__PURE__*/React.createElement("div", {
className: className,
"data-id": `${dataId}_noOptnsMsg`,
"data-test-id": `${dataId}_noOptnsMsg`,
role: role,
id: htmlId
}, emptyText) : isRenderable(renderCustomEmptyState) ? renderNode(renderCustomEmptyState, {
title: noMoreText || emptyText,
dataId,
role,
htmlId,
className
}) : /*#__PURE__*/React.createElement("div", {
className: className,
"data-id": `${dataId}_NoMoreOptionMsg`,
"data-test-id": `${dataId}_NoMoreOptionMsg`,
role: role,
id: htmlId
}, noMoreText || emptyText));
}
}
EmptyState.propTypes = EmptyState_propTypes;
EmptyState.defaultProps = EmptyState_defaultProps;