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

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

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

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

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