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

Action column index binded instead of taking it from state for column actions

Browse Source
This commit is contained in:
vicky_primathon.in 2020-06-22 13:55:03 +05:30
parent e534cec07c
commit 59a855bde9
4 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/client/src/components/designSystems/appsmith/ReactTableComponent.tsx
View File

@ -31,14 +31,14 @@ export interface ColumnMenuOptionProps {
id?: string;
category?: boolean;
options?: ColumnMenuSubOptionProps[];
onClick?: (isSelected: boolean) => void;
onClick?: (columnIndex: number, isSelected: boolean) => void;
}
export interface ColumnMenuSubOptionProps {
content: string;
isSelected: boolean;
closeOnClick: boolean;
onClick: () => void;
onClick: (columnIndex: number) => void;
}
interface ReactTableComponentProps {
@ -293,10 +293,6 @@ export class ReactTableComponent extends React.Component<
return reorderedColumns;
};
showMenu = (columnIndex: number) => {
this.setState({ columnIndex: columnIndex, action: "" });
};
getColumnMenu = () => {
const { columnIndex } = this.state;
let columnType = "";
@ -327,14 +323,18 @@ export class ReactTableComponent extends React.Component<
updateColumnType: this.updateColumnType,
handleUpdateCurrencySymbol: this.handleUpdateCurrencySymbol,
handleDateFormatUpdate: this.handleDateFormatUpdate,
updateAction: (action: string) => this.setState({ action: action }),
updateAction: (columnIndex: number, action: string) =>
this.setState({ action: action }),
});
return columnMenuOptions;
};
hideColumn = (isColumnHidden: boolean) => {
showMenu = (columnIndex: number) => {
this.setState({ columnIndex: columnIndex, action: "" });
};
hideColumn = (columnIndex: number, isColumnHidden: boolean) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const column = columns[columnIndex];
let hiddenColumns = this.props.hiddenColumns || [];
if (!isColumnHidden) {
@ -353,9 +353,8 @@ export class ReactTableComponent extends React.Component<
this.setState({ columnIndex: -1 });
};
updateColumnType = (columnType: string) => {
updateColumnType = (columnIndex: number, columnType: string) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const column = columns[columnIndex];
const columnTypeMap = this.props.columnTypeMap || {};
columnTypeMap[column.accessor] = {
@ -370,15 +369,14 @@ export class ReactTableComponent extends React.Component<
this.setState({ columnName: event.target.value });
};
onKeyPress = (key: string) => {
onKeyPress = (columnIndex: number, key: string) => {
if (key === "Enter") {
this.handleColumnNameUpdate();
this.handleColumnNameUpdate(columnIndex);
}
};
handleColumnNameUpdate = () => {
handleColumnNameUpdate = (columnIndex: number) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const columnName = this.state.columnName;
const column = columns[columnIndex];
const columnNameMap = this.props.columnNameMap || {};
@ -391,9 +389,11 @@ export class ReactTableComponent extends React.Component<
});
};
handleUpdateCurrencySymbol = (currencySymbol: string) => {
handleUpdateCurrencySymbol = (
columnIndex: number,
currencySymbol: string,
) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const column = columns[columnIndex];
const columnTypeMap = this.props.columnTypeMap || {};
columnTypeMap[column.accessor] = {
@ -407,9 +407,8 @@ export class ReactTableComponent extends React.Component<
});
};
handleDateFormatUpdate = (dateFormat: string) => {
handleDateFormatUpdate = (columnIndex: number, dateFormat: string) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const column = columns[columnIndex];
const columnTypeMap = this.props.columnTypeMap || {};
columnTypeMap[column.accessor] = {

12
app/client/src/components/designSystems/appsmith/Table.tsx
View File

@ -32,7 +32,7 @@ interface TableProps {
columnIndex: number;
columnAction: string;
onColumnNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
handleColumnNameUpdate: () => void;
handleColumnNameUpdate: (columnIndex: number) => void;
handleResizeColumn: Function;
selectTableRow: (
row: { original: object; index: number },
@ -42,7 +42,7 @@ interface TableProps {
updatePageNo: Function;
nextPageClick: () => void;
prevPageClick: () => void;
onKeyPress: (key: string) => void;
onKeyPress: (columnIndex: number, key: string) => void;
serverSidePaginationEnabled: boolean;
selectedRowIndex: number;
disableDrag: () => void;
@ -127,7 +127,9 @@ export const Table = (props: TableProps) => {
<InputGroup
placeholder="Enter Column Name"
onChange={props.onColumnNameChange}
onKeyPress={event => props.onKeyPress(event.key)}
onKeyPress={event =>
props.onKeyPress(columnIndex, event.key)
}
type="text"
defaultValue={
props.columnNameMap &&
@ -136,7 +138,9 @@ export const Table = (props: TableProps) => {
: column.id
}
className="input-group"
onBlur={() => props.handleColumnNameUpdate()}
onBlur={() =>
props.handleColumnNameUpdate(columnIndex)
}
/>
)}
{(props.columnIndex !== columnIndex ||

4
app/client/src/components/designSystems/appsmith/TableColumnMenu.tsx
View File

@ -46,7 +46,7 @@ export const TableColumnMenuPopup = (props: TableColumnMenuPopup) => {
key={index}
onClick={() => {
if (option.onClick) {
option.onClick(!!option.isSelected);
option.onClick(props.columnIndex, !!option.isSelected);
}
}}
className={
@ -74,7 +74,7 @@ export const TableColumnMenuPopup = (props: TableColumnMenuPopup) => {
(item: ColumnMenuSubOptionProps, itemIndex: number) => (
<OptionWrapper
key={itemIndex}
onClick={item.onClick}
onClick={() => item.onClick(props.columnIndex)}
className={
item.closeOnClick ? Classes.POPOVER_DISMISS : ""
}

89
app/client/src/components/designSystems/appsmith/TableUtilities.tsx
View File

@ -15,11 +15,14 @@ interface MenuOptionProps {
isColumnHidden: boolean;
columnType: string;
format?: string;
hideColumn: (isColumnHidden: boolean) => void;
updateAction: (action: string) => void;
updateColumnType: (columnType: string) => void;
handleUpdateCurrencySymbol: (currencySymbol: string) => void;
handleDateFormatUpdate: (dateFormat: string) => void;
hideColumn: (columnIndex: number, isColumnHidden: boolean) => void;
updateAction: (columnIndex: number, action: string) => void;
updateColumnType: (columnIndex: number, columnType: string) => void;
handleUpdateCurrencySymbol: (
columnIndex: number,
currencySymbol: string,
) => void;
handleDateFormatUpdate: (columnIndex: number, dateFormat: string) => void;
}
export const getMenuOptions = (props: MenuOptionProps) => {
@ -28,16 +31,16 @@ export const getMenuOptions = (props: MenuOptionProps) => {
content: "Rename a Column",
closeOnClick: true,
id: "rename_column",
onClick: () => {
props.updateAction("rename_column");
onClick: (columnIndex: number) => {
props.updateAction(columnIndex, "rename_column");
},
},
{
content: props.isColumnHidden ? "Show Column" : "Hide Column",
closeOnClick: true,
id: "hide_column",
onClick: () => {
props.hideColumn(props.isColumnHidden);
onClick: (columnIndex: number) => {
props.hideColumn(columnIndex, props.isColumnHidden);
},
},
];
@ -64,11 +67,11 @@ export const getMenuOptions = (props: MenuOptionProps) => {
),
closeOnClick: true,
isSelected: props.columnType === "image",
onClick: (isSelected: boolean) => {
onClick: (columnIndex: number, isSelected: boolean) => {
if (isSelected) {
props.updateColumnType("");
props.updateColumnType(columnIndex, "");
} else {
props.updateColumnType("image");
props.updateColumnType(columnIndex, "image");
}
},
},
@ -85,11 +88,11 @@ export const getMenuOptions = (props: MenuOptionProps) => {
),
isSelected: props.columnType === "video",
closeOnClick: true,
onClick: (isSelected: boolean) => {
onClick: (columnIndex: number, isSelected: boolean) => {
if (isSelected) {
props.updateColumnType("");
props.updateColumnType(columnIndex, "");
} else {
props.updateColumnType("video");
props.updateColumnType(columnIndex, "video");
}
},
},
@ -106,11 +109,11 @@ export const getMenuOptions = (props: MenuOptionProps) => {
),
closeOnClick: true,
isSelected: props.columnType === "text",
onClick: (isSelected: boolean) => {
onClick: (columnIndex: number, isSelected: boolean) => {
if (isSelected) {
props.updateColumnType("");
props.updateColumnType(columnIndex, "");
} else {
props.updateColumnType("text");
props.updateColumnType(columnIndex, "text");
}
},
},
@ -138,56 +141,56 @@ export const getMenuOptions = (props: MenuOptionProps) => {
content: "USD - $",
isSelected: props.format === "$",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("$");
onClick: (columnIndex: number) => {
props.handleUpdateCurrencySymbol(columnIndex, "$");
},
},
{
content: "INR - ₹",
isSelected: props.format === "₹",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("₹");
onClick: (columnIndex: number) => {
props.handleUpdateCurrencySymbol(columnIndex, "₹");
},
},
{
content: "GBP - £",
isSelected: props.format === "£",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("£");
onClick: (columnIndex: number) => {
props.handleUpdateCurrencySymbol(columnIndex, "£");
},
},
{
content: "AUD - A$",
isSelected: props.format === "A$",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("A$");
onClick: (columnIndex: number) => {
props.handleUpdateCurrencySymbol(columnIndex, "A$");
},
},
{
content: "EUR - €",
isSelected: props.format === "€",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("€");
onClick: (columnIndex: number) => {
props.handleUpdateCurrencySymbol(columnIndex, "€");
},
},
{
content: "SGD - S$",
isSelected: props.format === "S$",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("S$");
onClick: (columnIndex: number) => {
props.handleUpdateCurrencySymbol(columnIndex, "S$");
},
},
{
content: "CAD - C$",
isSelected: props.format === "C$",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("C$");
onClick: (columnIndex: number) => {
props.handleUpdateCurrencySymbol(columnIndex, "C$");
},
},
],
@ -216,32 +219,32 @@ export const getMenuOptions = (props: MenuOptionProps) => {
content: "MM-DD-YY",
isSelected: props.format === "MM-DD-YY",
closeOnClick: true,
onClick: () => {
props.handleDateFormatUpdate("MM-DD-YY");
onClick: (columnIndex: number) => {
props.handleDateFormatUpdate(columnIndex, "MM-DD-YY");
},
},
{
content: "DD-MM-YY",
isSelected: props.format === "DD-MM-YY",
closeOnClick: true,
onClick: () => {
props.handleDateFormatUpdate("DD-MM-YY");
onClick: (columnIndex: number) => {
props.handleDateFormatUpdate(columnIndex, "DD-MM-YY");
},
},
{
content: "DD/MM/YY",
isSelected: props.format === "DD/MM/YY",
closeOnClick: true,
onClick: () => {
props.handleDateFormatUpdate("DD/MM/YY");
onClick: (columnIndex: number) => {
props.handleDateFormatUpdate(columnIndex, "DD/MM/YY");
},
},
{
content: "MM/DD/YY",
isSelected: props.format === "MM/DD/YY",
closeOnClick: true,
onClick: () => {
props.handleDateFormatUpdate("MM/DD/YY");
onClick: (columnIndex: number) => {
props.handleDateFormatUpdate(columnIndex, "MM/DD/YY");
},
},
],
@ -259,11 +262,11 @@ export const getMenuOptions = (props: MenuOptionProps) => {
),
closeOnClick: true,
isSelected: props.columnType === "time",
onClick: (isSelected: boolean) => {
onClick: (columnIndex: number, isSelected: boolean) => {
if (isSelected) {
props.updateColumnType("");
props.updateColumnType(columnIndex, "");
} else {
props.updateColumnType("time");
props.updateColumnType(columnIndex, "time");
}
},
},