@atlaskit/help 4.2.3 → 6.0.0

package/dist/es2019/components/WhatsNew/WhatsNewResults/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import Select from '@atlaskit/select';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { VIEW } from '../../constants';
 import { messages } from '../../../messages';
 import { WHATS_NEW_ITEM_TYPES } from '../../../model/WhatsNew';
@@ -9,6 +9,7 @@ import { REQUEST_STATE } from '../../../model/Requests';
 import { FADEIN_OVERLAY_TRANSITION_DURATION_MS, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE } from '../../constants';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
 import { useNavigationContext } from '../../contexts/navigationContext';
+import WhatsNewResultsEmpty from './WhatsNewResultsEmpty';
 import WhatsNewResultsError from './WhatsNewResultsError';
 import WhatsNewResultsLoading from './WhatsNewResultsLoading';
 import WhatsNewResultsList from './WhatsNewResultsList';
@@ -50,7 +51,11 @@ export const WhatsNewResults = ({
     searchWhatsNewArticlesState,
     onWhatsNewButtonClick
   } = useWhatsNewArticleContext();
-  const [selectedOption, setSelectedOption] = useState('');
+  const SELECT_DEFAULT_VALUE = {
+    value: '',
+    label: formatMessage(messages.help_whats_new_filter_select_option_all)
+  };
+  const [selectedOption, setSelectedOption] = useState(SELECT_DEFAULT_VALUE);
   const handleOnShowMoreButtonClick = useCallback(() => {
     if (searchWhatsNewArticlesResult && onSearchWhatsNewArticles) {
       const {
@@ -59,12 +64,25 @@ export const WhatsNewResults = ({
       } = searchWhatsNewArticlesResult;
 
       if (nextPage && hasNextPage) {
-        onSearchWhatsNewArticles(selectedOption, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, nextPage);
+        onSearchWhatsNewArticles(selectedOption.value, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, nextPage);
       }
     }
   }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
 
-  const handleOnEnter = () => onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+  const handleOnEnter = () => {
+    setSelectedOption(SELECT_DEFAULT_VALUE);
+    onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+  };
+
+  const handleOnClearFilter = () => {
+    if (onSearchWhatsNewArticles) {
+      setSelectedOption({
+        value: '',
+        label: formatMessage(messages.help_whats_new_filter_select_option_all)
+      });
+      onSearchWhatsNewArticles('', NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, '');
+    }
+  };
 
   return /*#__PURE__*/React.createElement(Transition, {
     in: helpContextView === VIEW.WHATS_NEW,
@@ -75,10 +93,7 @@ export const WhatsNewResults = ({
       ...transitionStyles[state]
     }
   }, searchWhatsNewArticlesState !== REQUEST_STATE.error && /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
-    defaultValue: {
-      value: '',
-      label: formatMessage(messages.help_whats_new_filter_select_option_all)
-    },
+    defaultValue: selectedOption,
     className: "single-select",
     classNamePrefix: "react-select",
     options: [{
@@ -100,20 +115,27 @@ export const WhatsNewResults = ({
       label: formatMessage(messages.help_whats_new_filter_select_option_experiment),
       value: WHATS_NEW_ITEM_TYPES.EXPERIMENT
     }],
+    value: selectedOption,
     onChange: option => {
       if (onSearchWhatsNewArticles) {
         const selectedOptionValue = option.value;
-        setSelectedOption(selectedOptionValue);
+        const selectedOptionLabel = option.label;
+        setSelectedOption({
+          value: selectedOptionValue,
+          label: selectedOptionLabel
+        });
         onSearchWhatsNewArticles(selectedOptionValue, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, '');
       }
     }
-  })), /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WhatsNewResultsList, {
+  })), /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, searchWhatsNewArticlesResult.articles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsList, {
     whatsNewArticles: searchWhatsNewArticlesResult.articles,
     onWhatsNewResultItemClick: onWhatsNewButtonClick,
     onShowMoreButtonClick: handleOnShowMoreButtonClick,
     hasNextPage: searchWhatsNewArticlesResult === null || searchWhatsNewArticlesResult === void 0 ? void 0 : searchWhatsNewArticlesResult.hasNextPage,
     nextPage: searchWhatsNewArticlesResult === null || searchWhatsNewArticlesResult === void 0 ? void 0 : searchWhatsNewArticlesResult.nextPage,
     loadingMore: searchWhatsNewArticlesState === REQUEST_STATE.loading
+  }) : /*#__PURE__*/React.createElement(WhatsNewResultsEmpty, {
+    onClearFilter: handleOnClearFilter
   })), searchWhatsNewArticlesState === REQUEST_STATE.error && /*#__PURE__*/React.createElement(WhatsNewResultsError, {
     onSearch: onSearchWhatsNewArticles
   }))));