suddjian commented on a change in pull request #15868:
URL: https://github.com/apache/superset/pull/15868#discussion_r675795296
##########
File path:
superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
##########
@@ -469,83 +578,147 @@ export default function VizTypeGallery(props:
VizTypeGalleryProps) {
searchInputRef.current!.blur();
}, []);
- const selectCategory = useCallback(
+ const clickSelector = useCallback(
(key: string) => {
if (isSearchFocused) {
stopSearching();
}
- setActiveCategory(key);
+ setActiveSelector(key);
// clear the selected viz if it is not present in the new category
const isSelectedVizCompatible =
selectedVizMetadata && doesVizMatchCategory(selectedVizMetadata, key);
- if (key !== activeCategory && !isSelectedVizCompatible) {
+ if (key !== activeSelector && !isSelectedVizCompatible) {
onChange(null);
}
},
[
stopSearching,
isSearchFocused,
- activeCategory,
+ activeSelector,
selectedVizMetadata,
onChange,
],
);
+ const clearSelector = useCallback(e => {
+ e.stopPropagation();
+ if (isSearchFocused) {
+ stopSearching();
+ }
+ // clear current selector and set all charts
+ setActiveSelector(ALL_CHARTS);
+ }, []);
+
const vizEntriesToDisplay = isActivelySearching
? searchResults
- : chartsByCategory[activeCategory] || [];
+ : activeSelector === ALL_CHARTS
+ ? sortedMetadata
+ : chartsByCategory[activeSelector] || chartsByTags[activeSelector] || [];
return (
<VizPickerLayout className={className}>
<LeftPane>
- <SearchWrapper>
- <Input
- type="text"
- ref={searchInputRef as any /* cast required because emotion */}
- value={searchInputValue}
- placeholder={t('Search')}
- onChange={changeSearch}
- onFocus={focusSearch}
- data-test={`${VIZ_TYPE_CONTROL_TEST_ID}__search-input`}
- prefix={
- <InputIconAlignment>
- <Icons.Search iconSize="m" />
- </InputIconAlignment>
- }
- suffix={
- <InputIconAlignment>
- {searchInputValue && (
- <Icons.XLarge iconSize="m" onClick={stopSearching} />
- )}
- </InputIconAlignment>
- }
- />
- </SearchWrapper>
- <CategoriesWrapper>
- {categories.map(category => (
- <CategorySelector
- key={category}
- category={category}
- isSelected={!isActivelySearching && category === activeCategory}
- onClick={selectCategory}
- />
- ))}
- </CategoriesWrapper>
+ <Wrapper>
+ <Collapse
+ expandIconPosition="right"
+ ghost
+ defaultActiveKey={Object.values(COLLAPSE_LABEL)}
+ >
+ <Collapse.Panel
Review comment:
Or actually I think a better way to reduce duplication would be adding a
component `<SelectorGroup>` that renders a Collapse Panel and its contents.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
