From f55357029c8e4a35f7e0c4dc960d597f17df8db8 Mon Sep 17 00:00:00 2001 From: Satbir Singh Date: Mon, 29 Jun 2020 09:10:19 +0000 Subject: [PATCH] Removed syncfusion completely. --- app/client/package.json | 3 +- .../syncfusion/TableComponent.tsx | 349 ------------------ .../src/pages/Editor/QueryEditor/Form.tsx | 1 - .../src/pages/organization/settings.tsx | 68 ++-- app/client/src/widgets/TableWidget.tsx | 8 - 5 files changed, 36 insertions(+), 393 deletions(-) delete mode 100644 app/client/src/components/designSystems/syncfusion/TableComponent.tsx diff --git a/app/client/package.json b/app/client/package.json index cadb6c6ac4..8cbebaff0a 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -18,7 +18,6 @@ "@optimizely/optimizely-sdk": "^4.0.0", "@sentry/browser": "^5.6.3", "@sentry/webpack-plugin": "^1.10.0", - "@syncfusion/ej2-react-grids": "^17.4.40", "@tinymce/tinymce-react": "^3.5.0", "@types/chance": "^1.0.7", "@types/fontfaceobserver": "^0.0.6", @@ -193,4 +192,4 @@ "pre-commit": "lint-staged" } } -} +} \ No newline at end of file diff --git a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx deleted file mode 100644 index 0adb0d6cb6..0000000000 --- a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx +++ /dev/null @@ -1,349 +0,0 @@ -import { - ColumnDirective, - ColumnsDirective, - GridComponent, - ColumnModel, - Inject, - Resize, - Page, - SelectionSettingsModel, - Reorder, - ColumnMenu, - CommandColumn, - CommandModel, - CommandClickEventArgs, - ColumnMenuOpenEventArgs, - ColumnMenuItemModel, - PageSettingsModel, - Toolbar, - PdfExport, - ExcelExport, - Search, - RowDataBoundEventArgs, -} from "@syncfusion/ej2-react-grids"; -import { getValue } from "@syncfusion/ej2-base"; -import { ClickEventArgs } from "@syncfusion/ej2-navigations"; -import React, { useRef, MutableRefObject, memo } from "react"; -import styled from "constants/DefaultTheme"; -import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl"; -import { Classes } from "@blueprintjs/core"; -import { TablePagination } from "../appsmith/TablePagination"; -import { - AUTOFIT_ALL_COLUMNS, - AUTOFIT_THIS_COLUMN, - AUTOFIT_COLUMN, -} from "constants/messages"; - -import "@syncfusion/ej2-base/styles/material.css"; -import "@syncfusion/ej2-buttons/styles/material.css"; -import "@syncfusion/ej2-calendars/styles/material.css"; -import "@syncfusion/ej2-dropdowns/styles/material.css"; -import "@syncfusion/ej2-inputs/styles/material.css"; -import "@syncfusion/ej2-navigations/styles/material.css"; -import "@syncfusion/ej2-popups/styles/material.css"; -import "@syncfusion/ej2-splitbuttons/styles/material.css"; -import "@syncfusion/ej2-react-grids/styles/material.css"; - -export interface TableComponentProps { - data: object[]; - columns: ColumnModel[]; - onRowClick: (rowData: object, rowIndex: number) => void; - isLoading: boolean; - height: number; - contentHeight: number; - width: number; - columnActions?: ColumnAction[]; - onCommandClick: (dynamicTrigger: string) => void; - disableDrag: (disable: boolean) => void; - nextPageClick: Function; - prevPageClick: Function; - pageNo: number; - serverSidePaginationEnabled: boolean; - updatePageNo: Function; - updateHiddenColumns: Function; - resetSelectedRowIndex: Function; - selectedRowIndex: number; - id: string; - exportCsv?: boolean; - exportExcel?: boolean; - exportPDF?: boolean; - pageSize: number; - rowHeight: number; -} - -const StyledGridComponent = styled(GridComponent)` - &&& { - height: 100%; - .e-altrow { - background-color: #fafafa; - } - .e-active { - background: #cccccc; - } - .e-gridcontent { - height: calc(100% - 130px); - overflow: auto; - } - .e-gridpager { - position: absolute; - bottom: 0; - } - } -`; - -const TableContainer = styled.div` - height: 100%; -`; -const settings: SelectionSettingsModel = { - type: "Multiple", - enableToggle: false, -}; - -type GridRef = MutableRefObject; - -/* eslint-disable react/display-name */ -const TableComponent = memo( - (props: TableComponentProps) => { - const grid: GridRef = useRef(null); - function disableBubbling(e: any) { - e.preventDefault(); - e.stopPropagation(); - } - const handleCreated = () => { - if (grid.current && grid.current.element) { - const header = grid.current.getHeaderContent(); - header.addEventListener("mousedown", disableBubbling); - grid.current - .getPager() - .getElementsByClassName("e-pagercontainer")[0] - .addEventListener("click", (e: any) => { - const pageNo = e.srcElement.getAttribute("index"); - if (pageNo !== null && props.pageNo !== pageNo) { - props.resetSelectedRowIndex(); - if (!props.serverSidePaginationEnabled) { - props.updatePageNo(pageNo); - } - } - }); - } - }; - - const handleDestroy = () => { - /* It is as concern whether this will still propagate to the - internal of syncfusion, resulting in a full cleanup of all - eventhandlers, components, etc. - */ - if (grid.current && grid.current.element) { - const headers = grid.current.element.getElementsByClassName( - "e-gridheader", - ); - for (let i = 0; i < headers.length; i++) { - const header = headers[i]; - header.removeEventListener("mousedown", disableBubbling); - } - } - }; - - function rowSelected() { - if (grid.current) { - /** Get the selected row indexes */ - const selectedrowindex: number[] = grid.current.getSelectedRowIndexes(); - /** Get the selected records. */ - const selectedrecords: object[] = grid.current.getSelectedRecords(); - if (selectedrecords.length !== 0) { - let index = selectedrowindex[0]; - const pageSettings: PageSettingsModel = grid.current.pageSettings; - if ( - pageSettings && - pageSettings.currentPage !== undefined && - pageSettings.pageSize !== undefined - ) { - index = - index + (pageSettings.currentPage - 1) * pageSettings.pageSize; - } - props.onRowClick(selectedrecords[0], index); - } - } - } - - const commands: CommandModel[] = (props.columnActions || []).map(action => { - return { - buttonOption: { content: action.label }, - data: action.dynamicTrigger, - }; - }); - - function onCommandClick(args: CommandClickEventArgs | undefined) { - if (args) { - const _target = args.target; - if (props.columnActions && _target) { - props.columnActions - .filter( - action => - action.label.toLowerCase() === _target.title.toLowerCase(), - ) - .forEach(action => { - props.onCommandClick(action.dynamicTrigger); - }); - } - } - } - - function rowDataBound(args: RowDataBoundEventArgs) { - const color = getValue("_color", args.data); - if (args.row && color) { - (args.row as any).style.backgroundColor = color; - } - } - - function columnMenuOpen(args: ColumnMenuOpenEventArgs) { - for (const item of args.items) { - if (item.text) { - if (item.text === AUTOFIT_ALL_COLUMNS) { - (item as ColumnMenuItemModel).hide = true; - } - if (item.text === AUTOFIT_THIS_COLUMN) { - (item as ColumnMenuItemModel).text = AUTOFIT_COLUMN; - } - } - } - } - function columnMenuClick() { - props.updateHiddenColumns( - grid.current - ?.getColumns() - .filter(column => !column.visible) - .map(col => col.field), - ); - } - - const handleToolbarClick = (args: ClickEventArgs) => { - if (grid.current && args.item.id === `${props.id}_excelexport`) { - grid.current.excelExport({ fileName: `${props.id}.xlsx` }); - } - if (grid.current && args.item.id === `${props.id}_csvexport`) { - grid.current.csvExport({ fileName: `${props.id}.csv` }); - } - if (grid.current && args.item.id === `${props.id}_pdfexport`) { - grid.current.pdfExport({ fileName: `${props.id}.pdf` }); - } - }; - const handleResizeStart = (args: any) => { - args.e.stopPropagation(); - }; - - const toolbarOptions: string[] = []; - if (!!props.exportCsv) toolbarOptions.push("CsvExport"); - if (!!props.exportExcel) toolbarOptions.push("ExcelExport"); - if (!!props.exportPDF) toolbarOptions.push("PdfExport"); - - return ( - - { - if (grid.current) { - grid.current.selectionModule.selectRow(props.selectedRowIndex); - } - }} - pageSettings={{ - pageSize: props.pageSize, - currentPage: props.pageNo, - totalRecordsCount: props.data.length, - }} - // contentHeight={`calc(100%-${props.height - props.contentHeight}px)`} - contentHeight={props.contentHeight} - rowHeight={props.rowHeight} - rowSelected={rowSelected} - resizeStart={handleResizeStart} - ref={grid} - width={"100%"} - allowPaging={!props.serverSidePaginationEnabled} - allowReordering={true} - allowResizing={true} - showColumnMenu={true} - commandClick={onCommandClick} - columnMenuOpen={columnMenuOpen} - rowDataBound={rowDataBound} - toolbar={!!toolbarOptions.length && toolbarOptions} - allowPdfExport - allowExcelExport - // enableVirtualization - > - - - {props.columns.map(col => { - return ( - - ); - })} - {commands.length > 0 && ( - - )} - - - {props.serverSidePaginationEnabled && ( - - )} - - ); - }, - (prevProps, nextProps) => { - const dataNotEqual = - JSON.stringify(nextProps.data) !== JSON.stringify(prevProps.data); - - if ( - (dataNotEqual && - nextProps.data.length !== 0 && - prevProps.data.length !== 0) || - (nextProps.data.length === 0 && prevProps.data.length > 0) - ) { - nextProps.updateHiddenColumns(undefined); - } - - const propsNotEqual = - nextProps.isLoading !== prevProps.isLoading || - dataNotEqual || - nextProps.height !== prevProps.height || - JSON.stringify(nextProps.columnActions) !== - JSON.stringify(prevProps.columnActions) || - nextProps.serverSidePaginationEnabled !== - prevProps.serverSidePaginationEnabled || - nextProps.pageNo !== prevProps.pageNo || - nextProps.exportCsv !== prevProps.exportCsv || - nextProps.exportExcel !== prevProps.exportExcel || - nextProps.exportPDF !== prevProps.exportPDF; - - return !propsNotEqual; - }, -); - -export default TableComponent; diff --git a/app/client/src/pages/Editor/QueryEditor/Form.tsx b/app/client/src/pages/Editor/QueryEditor/Form.tsx index 77f93e6886..15b5066eba 100644 --- a/app/client/src/pages/Editor/QueryEditor/Form.tsx +++ b/app/client/src/pages/Editor/QueryEditor/Form.tsx @@ -28,7 +28,6 @@ import { BaseButton } from "components/designSystems/blueprint/ButtonComponent"; import { Datasource } from "api/DatasourcesApi"; import { QUERY_EDITOR_FORM_NAME } from "constants/forms"; import { PLUGIN_PACKAGE_POSTGRES } from "constants/QueryEditorConstants"; -import "@syncfusion/ej2-react-grids/styles/material.css"; import { Colors } from "constants/Colors"; import JSONViewer from "./JSONViewer"; import Table from "./Table"; diff --git a/app/client/src/pages/organization/settings.tsx b/app/client/src/pages/organization/settings.tsx index 1f9e2a54ba..3f44772193 100644 --- a/app/client/src/pages/organization/settings.tsx +++ b/app/client/src/pages/organization/settings.tsx @@ -17,7 +17,6 @@ import { OrgUser, Organization } from "constants/orgConstants"; import { Menu, MenuItem, Popover, Position } from "@blueprintjs/core"; import styled from "styled-components"; import { FormIcons } from "icons/FormIcons"; -import "@syncfusion/ej2-react-grids/styles/material.css"; import { RouteComponentProps } from "react-router"; import Spinner from "components/editorComponents/Spinner"; import FormDialogComponent from "components/editorComponents/form/FormDialogComponent"; @@ -102,6 +101,40 @@ export const OrgSettings = (props: PageProps) => { props.allUsers, props.allRole, ]); + + const RoleNameCell = (cellProps: any) => { + const { + roleName, + roles, + username, + isCurrentUser, + isChangingRole, + } = cellProps.row.original; + + if (isCurrentUser) { + return
{roleName}
; + } + + return ( + + } + position={Position.BOTTOM_LEFT} + > + + {roleName} + + {isChangingRole ? : undefined} + + + ); + }; + const columns = React.useMemo(() => { return [ { @@ -115,38 +148,7 @@ export const OrgSettings = (props: PageProps) => { { Header: "Role", accessor: "roleName", - Cell: (cellProps: any) => { - const { - roleName, - roles, - username, - isCurrentUser, - isChangingRole, - } = cellProps.row.original; - - if (isCurrentUser) { - return
{roleName}
; - } - - return ( - - } - position={Position.BOTTOM_LEFT} - > - - {roleName} - - {isChangingRole ? : undefined} - - - ); - }, + Cell: RoleNameCell, }, { Header: "Delete", diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx index 1f1fa636b8..fee45055f9 100644 --- a/app/client/src/widgets/TableWidget.tsx +++ b/app/client/src/widgets/TableWidget.tsx @@ -10,19 +10,11 @@ import { WidgetPropertyValidationType, BASE_WIDGET_VALIDATION, } from "utils/ValidationFactory"; -// import { ColumnModel } from "@syncfusion/ej2-grids"; -// import { ColumnDirTypecast } from "@syncfusion/ej2-react-grids"; import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl"; import { TriggerPropertiesMap } from "utils/WidgetFactory"; import Skeleton from "components/utils/Skeleton"; import { Classes } from "@blueprintjs/core"; -// const TableComponent = React.lazy(() => -// import( -// /* webpackPrefetch: true, webpackChunkName: "table" */ "components/designSystems/syncfusion/TableComponent" -// ), -// ); - // const ROW_HEIGHT = 37; // const TABLE_HEADER_HEIGHT = 39; // const TABLE_FOOTER_HEIGHT = 48;