Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

2020-08-18 12:07:07 +00:00 · 2020-08-18 12:07:07 +00:00 · fb28b4e4b9
commit fb28b4e4b9
parent 850f614e27 33cd1ac1d9
6 changed files with 94 additions and 113 deletions
--- a/app/client/src/components/designSystems/appsmith/Table.tsx
+++ b/app/client/src/components/designSystems/appsmith/Table.tsx
@ -66,7 +66,7 @@ const defaultColumn = {
 };

 export const Table = (props: TableProps) => {
-  const dataString = JSON.stringify(props.data);
+  const data = React.useMemo(() => props.data, [props.data]);
  const columnString = JSON.stringify({
    columns: props.columns,
    actions: props.columnActions,
@ -74,8 +74,6 @@ export const Table = (props: TableProps) => {
    compactMode: props.compactMode,
  });
  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const data = React.useMemo(() => props.data, [dataString]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
  const columns = React.useMemo(() => props.columns, [columnString]);

  const pageCount = Math.ceil(props.data.length / props.pageSize);
--- a/app/client/src/components/designSystems/appsmith/TableFilters.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableFilters.tsx
@ -62,7 +62,7 @@ const TableFilters = (props: TableFilterProps) => {
  );

  useEffect(() => {
-    const filters: ReactTableFilter[] = props.filters || [];
+    const filters: ReactTableFilter[] = props.filters ? [...props.filters] : [];
    if (filters.length === 0) {
      filters.push({
        column: "",
@ -150,7 +150,7 @@ const TableFilters = (props: TableFilterProps) => {
              value={filter.value}
              columns={columns}
              applyFilter={(filter: ReactTableFilter, index: number) => {
-                const updatedFilters = props.filters || [];
+                const updatedFilters = props.filters ? [...props.filters] : [];
                updatedFilters[index] = filter;
                props.applyFilter(updatedFilters);
              }}
--- a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
@ -33,9 +33,6 @@ export const TableWrapper = styled.div<{
    .tbody {
      overflow: hidden;
    }
-    .tr:first-of-type {
-      width: calc(100% - 6px);
-    }
    .tbody {
      overflow-y: scroll;
      /* Subtracting 9px to handling widget padding */
@ -44,7 +41,6 @@ export const TableWrapper = styled.div<{
        props.tableSizes.TABLE_HEADER_HEIGHT -
        props.tableSizes.COLUMN_HEADER_HEIGHT -
        9}px;
-      ${scrollbarLight};
      .tr {
        width: 100%;
      }
--- a/app/client/src/components/designSystems/appsmith/TableUtilities.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableUtilities.tsx
@ -633,7 +633,12 @@ export const TableHeaderCell = (props: {
        </div>
      )}
      {props.displayColumnActions && (
-        <div className="column-menu">
+        <div
+          className="column-menu"
+          onClick={(event: React.MouseEvent<HTMLElement>) => {
+            event.stopPropagation();
+          }}
+        >
          <TableColumnMenuPopup
            getColumnMenu={props.getColumnMenu}
            columnIndex={props.columnIndex}
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@ -21,7 +21,6 @@ import { ColumnAction } from "components/propertyControls/ColumnActionSelectorCo
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import Skeleton from "components/utils/Skeleton";
 import moment from "moment";
-import memoize from "memoize-one";
 const ReactTableComponent = lazy(() =>
  import("components/designSystems/appsmith/ReactTableComponent"),
 );
@ -84,7 +83,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
      label: VALIDATION_TYPES.TEXT,
      selectedRowIndex: VALIDATION_TYPES.NUMBER,
      searchText: VALIDATION_TYPES.TEXT,
-      // filteredTableData: VALIDATION_TYPES.TABLE_DATA,
      defaultSearchText: VALIDATION_TYPES.TEXT,
    };
  }
@ -263,106 +261,82 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
    return updatedTableData;
  };

-  filterTableData = memoize(
-    (
-      tableData: object[],
-      columns: ReactTableColumnProps[],
-      filters?: ReactTableFilter[],
-      searchText?: string,
-      sortedColumn?: {
-        column: string;
-        asc: boolean;
-      },
-    ) => {
-      if (!tableData || !tableData.length) {
-        return [];
-      }
-      let sortedTableData = [];
-      const searchKey = searchText ? searchText.toUpperCase() : "";
-      if (sortedColumn) {
-        const sortColumn = sortedColumn.column;
-        const sortOrder = sortedColumn.asc;
-        sortedTableData = sortTableFunction(
-          tableData,
-          columns,
-          sortColumn,
-          sortOrder,
-        );
-      } else {
-        sortedTableData = [...tableData];
-      }
-      const filteredTableData = sortedTableData.filter(
-        (item: { [key: string]: any }) => {
-          const searchFound = searchKey
-            ? Object.values(item)
-                .join(", ")
-                .toUpperCase()
-                .includes(searchKey)
-            : true;
-          if (!searchFound) return false;
-          if (!filters || filters.length === 0) return true;
-          const filterOperator: Operator =
-            filters.length >= 2 ? filters[1].operator : OperatorTypes.OR;
-          let filter = filterOperator === OperatorTypes.AND ? true : false;
-          for (let i = 0; i < filters.length; i++) {
-            const filterValue = compare(
-              item[filters[i].column],
-              filters[i].value,
-              filters[i].condition,
-            );
-            if (filterOperator === OperatorTypes.AND) {
-              filter = filter && filterValue;
-            } else {
-              filter = filter || filterValue;
-            }
-          }
-          return filter;
-        },
-      );
-      // super.updateWidgetMetaProperty("filteredTableData", filteredTableData);
-      return filteredTableData;
-    },
-  );
+  filterTableData = () => {
+    const { searchText, sortedColumn, filters, tableData } = this.props;
+    const columns = this.getTableColumns(tableData);

-  resetFilteredTableData = (
-    filters?: ReactTableFilter[],
-    searchText?: string,
-    sortedColumn?: {
-      column: string;
-      asc: boolean;
-    },
-  ) => {
-    const { tableData } = this.props;
-    const tableColumns = this.getTableColumns(tableData);
-    this.filterTableData(
-      tableData,
-      tableColumns,
-      filters,
-      searchText,
-      sortedColumn,
+    if (!tableData || !tableData.length) {
+      return [];
+    }
+    let sortedTableData = [];
+    const searchKey = searchText ? searchText.toUpperCase() : "";
+    if (sortedColumn) {
+      const sortColumn = sortedColumn.column;
+      const sortOrder = sortedColumn.asc;
+      sortedTableData = sortTableFunction(
+        tableData,
+        columns,
+        sortColumn,
+        sortOrder,
+      );
+    } else {
+      sortedTableData = [...tableData];
+    }
+    const filteredTableData = sortedTableData.filter(
+      (item: { [key: string]: any }) => {
+        const searchFound = searchKey
+          ? Object.values(item)
+              .join(", ")
+              .toUpperCase()
+              .includes(searchKey)
+          : true;
+        if (!searchFound) return false;
+        if (!filters || filters.length === 0) return true;
+        const filterOperator: Operator =
+          filters.length >= 2 ? filters[1].operator : OperatorTypes.OR;
+        let filter = filterOperator === OperatorTypes.AND ? true : false;
+        for (let i = 0; i < filters.length; i++) {
+          const filterValue = compare(
+            item[filters[i].column],
+            filters[i].value,
+            filters[i].condition,
+          );
+          if (filterOperator === OperatorTypes.AND) {
+            filter = filter && filterValue;
+          } else {
+            filter = filter || filterValue;
+          }
+        }
+        return filter;
+      },
    );
+    return filteredTableData;
  };

-  getPageView() {
-    const {
-      tableData,
-      hiddenColumns,
-      filters,
-      searchText,
-      sortedColumn,
-    } = this.props;
-    const tableColumns = this.getTableColumns(tableData);
-    // Use the filtered data to render the table.
-    const filteredTableData = this.filterTableData(
-      tableData,
-      tableColumns,
-      filters,
-      searchText,
-      sortedColumn,
-    );
-    if (this.props.filteredTableData === undefined) {
-      super.updateWidgetMetaProperty("filteredTableData", filteredTableData);
+  componentDidMount() {
+    super.updateWidgetMetaProperty("filteredTableData", this.filterTableData());
+  }
+  componentDidUpdate(prevProps: TableWidgetProps) {
+    if (
+      JSON.stringify(this.props.tableData) !==
+        JSON.stringify(prevProps.tableData) ||
+      JSON.stringify(this.props.filters) !==
+        JSON.stringify(prevProps.filters) ||
+      this.props.searchText !== prevProps.searchText ||
+      JSON.stringify(this.props.sortedColumn) !==
+        JSON.stringify(prevProps.sortedColumn)
+    ) {
+      super.updateWidgetMetaProperty(
+        "filteredTableData",
+        this.filterTableData(),
+      );
    }
+  }
+
+  getPageView() {
+    const { tableData, hiddenColumns, filteredTableData } = this.props;
+    const tableColumns = this.getTableColumns(tableData);
+
    const transformedData = this.transformData(
      filteredTableData || [],
      tableColumns,
@ -397,7 +371,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
    if (pageSize !== this.props.pageSize) {
      super.updateWidgetMetaProperty("pageSize", pageSize);
    }
-    // /*
    return (
      <Suspense fallback={<Skeleton />}>
        <ReactTableComponent
@ -455,7 +428,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
          filters={this.props.filters}
          applyFilter={(filters: ReactTableFilter[]) => {
            this.resetSelectedRowIndex();
-            this.resetFilteredTableData(filters, searchText, sortedColumn);
            super.updateWidgetMetaProperty("filters", filters);
          }}
          compactMode={this.props.compactMode || CompactModeTypes.DEFAULT}
@ -468,7 +440,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
          }}
          sortTableColumn={(column: string, asc: boolean) => {
            this.resetSelectedRowIndex();
-            this.resetFilteredTableData(filters, searchText, { column, asc });
            super.updateWidgetMetaProperty("sortedColumn", {
              column: column,
              asc: asc,
@ -480,8 +451,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
  }

  handleSearchTable = (searchKey: any) => {
-    const { onSearchTextChanged, filters, sortedColumn } = this.props;
-    this.resetFilteredTableData(filters, searchKey, sortedColumn);
+    const { onSearchTextChanged } = this.props;
    this.resetSelectedRowIndex();
    this.updateWidgetMetaProperty("pageNo", 1);
    super.updateWidgetMetaProperty("searchText", searchKey);
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@ -13228,13 +13228,25 @@ pretty-format@^24.9.0:
    ansi-styles "^3.2.0"
    react-is "^16.8.4"

-prismjs@^1.21.0:
+pretty-hrtime@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+
+prismjs@^1.21.0, prismjs@^1.8.4:
  version "1.21.0"
  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3"
  integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==
  optionalDependencies:
    clipboard "^2.0.0"

+prismjs@~1.17.0:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
+  integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 private@^0.1.6, private@^0.1.8, private@~0.1.5:
  version "0.1.8"
  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"