Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

reorder widgets alphabetically, autofocus search input (#2325)

Browse Source
This commit is contained in:
Rishabh Saxena 2020-12-23 17:02:30 +05:30 committed by GitHub
parent fb7ae53002
commit 396b12b024
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 106 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
app/client/src/mockResponses/WidgetSidebarResponse.tsx
View File

@ -2,106 +2,92 @@ import { WidgetCardProps } from "widgets/BaseWidget";
import { generateReactKey } from "utils/generators";
/* eslint-disable no-useless-computed-key */
const WidgetSidebarResponse: {
[id: string]: WidgetCardProps[];
} = {
["Form Widgets"]: [
{
type: "FORM_WIDGET",
widgetCardName: "Form",
key: generateReactKey(),
},
{
type: "INPUT_WIDGET",
widgetCardName: "Input",
key: generateReactKey(),
},
{
type: "DROP_DOWN_WIDGET",
widgetCardName: "Dropdown",
key: generateReactKey(),
},
{
type: "BUTTON_WIDGET",
widgetCardName: "Button",
key: generateReactKey(),
},
{
type: "CHECKBOX_WIDGET",
widgetCardName: "Checkbox",
key: generateReactKey(),
},
{
type: "RADIO_GROUP_WIDGET",
widgetCardName: "Radio",
key: generateReactKey(),
},
// {
// type: "SWITCH_WIDGET",
// icon: "icon-switch",
// widgetCardName: "Switch",
// key: generateReactKey(),
// },
{
type: "DATE_PICKER_WIDGET",
widgetCardName: "DatePicker",
key: generateReactKey(),
},
{
type: "RICH_TEXT_EDITOR_WIDGET",
widgetCardName: "Rich Text Editor",
key: generateReactKey(),
},
{
type: "FILE_PICKER_WIDGET",
widgetCardName: "FilePicker",
key: generateReactKey(),
},
],
["Display widgets"]: [
{
type: "IMAGE_WIDGET",
widgetCardName: "Image",
key: generateReactKey(),
},
{
type: "TEXT_WIDGET",
widgetCardName: "Text",
key: generateReactKey(),
},
{
type: "TABLE_WIDGET",
widgetCardName: "Table",
key: generateReactKey(),
},
{
type: "VIDEO_WIDGET",
widgetCardName: "Video",
key: generateReactKey(),
},
{
type: "MAP_WIDGET",
widgetCardName: "Map",
key: generateReactKey(),
},
{
type: "CHART_WIDGET",
widgetCardName: "Chart",
key: generateReactKey(),
},
],
["Layout widgets"]: [
{
type: "TABS_WIDGET",
widgetCardName: "Tabs",
key: generateReactKey(),
},
{
type: "CONTAINER_WIDGET",
widgetCardName: "Container",
key: generateReactKey(),
},
],
};
const WidgetSidebarResponse: WidgetCardProps[] = [
{
type: "BUTTON_WIDGET",
widgetCardName: "Button",
key: generateReactKey(),
},
{
type: "CHART_WIDGET",
widgetCardName: "Chart",
key: generateReactKey(),
},
{
type: "CHECKBOX_WIDGET",
widgetCardName: "Checkbox",
key: generateReactKey(),
},
{
type: "CONTAINER_WIDGET",
widgetCardName: "Container",
key: generateReactKey(),
},
{
type: "DATE_PICKER_WIDGET",
widgetCardName: "DatePicker",
key: generateReactKey(),
},
{
type: "DROP_DOWN_WIDGET",
widgetCardName: "Dropdown",
key: generateReactKey(),
},
{
type: "FILE_PICKER_WIDGET",
widgetCardName: "FilePicker",
key: generateReactKey(),
},
{
type: "FORM_WIDGET",
widgetCardName: "Form",
key: generateReactKey(),
},
{
type: "IMAGE_WIDGET",
widgetCardName: "Image",
key: generateReactKey(),
},
{
type: "INPUT_WIDGET",
widgetCardName: "Input",
key: generateReactKey(),
},
{
type: "MAP_WIDGET",
widgetCardName: "Map",
key: generateReactKey(),
},
{
type: "RADIO_GROUP_WIDGET",
widgetCardName: "Radio",
key: generateReactKey(),
},
{
type: "RICH_TEXT_EDITOR_WIDGET",
widgetCardName: "Rich Text Editor",
key: generateReactKey(),
},
{
type: "TABLE_WIDGET",
widgetCardName: "Table",
key: generateReactKey(),
},
{
type: "TABS_WIDGET",
widgetCardName: "Tabs",
key: generateReactKey(),
},
{
type: "TEXT_WIDGET",
widgetCardName: "Text",
key: generateReactKey(),
},
{
type: "VIDEO_WIDGET",
widgetCardName: "Video",
key: generateReactKey(),
},
];
export default WidgetSidebarResponse;

30
app/client/src/pages/Editor/WidgetSidebar.tsx
View File

@ -84,17 +84,11 @@ const WidgetSidebar = (props: IPanelProps) => {
let filteredCards = cards;
if (keyword.trim().length > 0) {
filteredCards = produce(cards, draft => {
for (const [key, value] of Object.entries(cards)) {
value.forEach((card, index) => {
if (card.widgetCardName.toLowerCase().indexOf(keyword) === -1) {
delete draft[key][index];
}
});
draft[key] = draft[key].filter(Boolean);
if (draft[key].length === 0) {
delete draft[key];
cards.forEach((card, index) => {
if (card.widgetCardName.toLowerCase().indexOf(keyword) === -1) {
delete draft[index];
}
}
});
});
}
setFilteredCards(filteredCards);
@ -119,7 +113,6 @@ const WidgetSidebar = (props: IPanelProps) => {
el?.removeEventListener("cleared", search);
};
}, [searchInputRef, search]);
const groups = Object.keys(filteredCards);
return (
<>
<ExplorerSearch
@ -141,16 +134,11 @@ const WidgetSidebar = (props: IPanelProps) => {
onClick={props.closePanel}
/>
</Header>
{groups.map((group: string) => (
<React.Fragment key={group}>
<h5>{group}</h5>
<CardsWrapper>
{filteredCards[group].map((card: WidgetCardProps) => (
<WidgetCard details={card} key={card.key} />
))}
</CardsWrapper>
</React.Fragment>
))}
<CardsWrapper>
{filteredCards.map((card: WidgetCardProps) => (
<WidgetCard details={card} key={card.key} />
))}
</CardsWrapper>
</MainWrapper>
</>
);

2
app/client/src/reducers/uiReducers/widgetSidebarReducer.ts
View File

@ -9,7 +9,7 @@ import {
import { EditorReduxState } from "./editorReducer";
export interface WidgetSidebarReduxState {
cards: { [id: string]: WidgetCardProps[] };
cards: WidgetCardProps[];
}
const initialState: WidgetSidebarReduxState = {

15
app/client/src/selectors/editorSelectors.tsx
View File

@ -96,14 +96,17 @@ export const getWidgetCards = createSelector(
widgetConfigs: WidgetConfigReducerState,
) => {
const cards = widgetCards.cards;
const groups: string[] = Object.keys(cards);
groups.forEach((group: string) => {
cards[group] = cards[group].map((widget: WidgetCardProps) => {
return cards
.map((widget: WidgetCardProps) => {
const { rows, columns } = widgetConfigs.config[widget.type];
return { ...widget, rows, columns };
});
});
return cards;
})
.sort(
(
{ widgetCardName: widgetACardName }: WidgetCardProps,
{ widgetCardName: widgetBCardName }: WidgetCardProps,
) => widgetACardName.localeCompare(widgetBCardName),
);
},
);