-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/draggable filters in table widget (#5886)
The filter pane in the table widget was fixed to top which would hinder the viewport for the end user. We have now changed the filter pane to a draggable component such that the user can place it anywhere on the canvas while they apply filters to see data change in realtime. * FEATURE #4088 : added draggable filterpane for table widget * FEATURE #4088 : update icons, editMode prop and added renderDragBlock support in popper * FIX #5329: added close button for close filter pane * FIX #5332 : updated zindex for table filter pane * fix list widget test * Fix drag icon position and cypress failing tests * Fix endsWidth comparator function
- Loading branch information
1 parent
fb78233
commit 6f91c1a
Showing
35 changed files
with
733 additions
and
213 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 140 additions & 0 deletions
140
app/client/src/components/designSystems/appsmith/TableComponent/TableFilterPane.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import React, { Component } from "react"; | ||
| import { connect } from "react-redux"; | ||
| import { get } from "lodash"; | ||
| import * as log from "loglevel"; | ||
| import { AppState } from "reducers"; | ||
| import styled from "styled-components"; | ||
|
|
||
| import { Colors } from "constants/Colors"; | ||
| import { | ||
| ReactTableColumnProps, | ||
| ReactTableFilter, | ||
| } from "components/designSystems/appsmith/TableComponent/Constants"; | ||
| import TableFilterPaneContent from "components/designSystems/appsmith/TableComponent/TableFilterPaneContent"; | ||
| import { ThemeMode, getCurrentThemeMode } from "selectors/themeSelectors"; | ||
| import { Layers } from "constants/Layers"; | ||
| import Popper from "pages/Editor/Popper"; | ||
| import { generateClassName } from "utils/generators"; | ||
| import { getTableFilterState } from "selectors/tableFilterSelectors"; | ||
| import { getWidgetMetaProps } from "sagas/selectors"; | ||
| import { ReduxActionTypes } from "constants/ReduxActionConstants"; | ||
| import { selectWidgetAction } from "actions/widgetSelectionActions"; | ||
| import { ReactComponent as DragHandleIcon } from "assets/icons/ads/app-icons/draghandler.svg"; | ||
|
|
||
| const DragBlock = styled.div` | ||
| height: 41px; | ||
| width: 83px; | ||
| background: ${Colors.ATHENS_GRAY_DARKER}; | ||
| box-sizing: border-box; | ||
| font-size: 12px; | ||
| color: ${Colors.SLATE_GRAY}; | ||
| letter-spacing: 0.04em; | ||
| font-weight: 500; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| cursor: pointer; | ||
| span { | ||
| padding-left: 8px; | ||
| color: ${Colors.GRAY}; | ||
| } | ||
| `; | ||
|
|
||
| export interface TableFilterPaneProps { | ||
| widgetId: string; | ||
| columns: ReactTableColumnProps[]; | ||
| filters?: ReactTableFilter[]; | ||
| applyFilter: (filters: ReactTableFilter[]) => void; | ||
| } | ||
|
|
||
| interface PositionPropsInt { | ||
| top: number; | ||
| left: number; | ||
| } | ||
|
|
||
| type Props = ReturnType<typeof mapStateToProps> & | ||
| ReturnType<typeof mapDispatchToProps> & | ||
| TableFilterPaneProps; | ||
|
|
||
| class TableFilterPane extends Component<Props> { | ||
| getPopperTheme() { | ||
| return ThemeMode.LIGHT; | ||
| } | ||
|
|
||
| handlePositionUpdate = (position: any) => { | ||
| this.props.setPanePoistion( | ||
| this.props.tableFilterPane.widgetId as string, | ||
| position, | ||
| ); | ||
| }; | ||
|
|
||
| render() { | ||
| if ( | ||
| this.props.tableFilterPane.isVisible && | ||
| this.props.tableFilterPane.widgetId === this.props.widgetId | ||
| ) { | ||
| log.debug("tablefilter pane rendered"); | ||
| const className = | ||
| "t--table-filter-toggle-btn " + | ||
| generateClassName(this.props.tableFilterPane.widgetId); | ||
| const el = document.getElementsByClassName(className)[0]; | ||
| return ( | ||
| <Popper | ||
| disablePopperEvents={get(this.props, "metaProps.isMoved", false)} | ||
| isDraggable | ||
| isOpen | ||
| onPositionChange={this.handlePositionUpdate} | ||
| placement="top" | ||
| position={get(this.props, "metaProps.position") as PositionPropsInt} | ||
| renderDragBlock={ | ||
| <DragBlock> | ||
| <DragHandleIcon /> | ||
| <span>Move</span> | ||
| </DragBlock> | ||
| } | ||
| renderDragBlockPositions={{ | ||
| left: "0px", | ||
| }} | ||
| targetNode={el} | ||
| themeMode={this.getPopperTheme()} | ||
| zIndex={Layers.tableFilterPane} | ||
| > | ||
| <TableFilterPaneContent {...this.props} /> | ||
| </Popper> | ||
| ); | ||
| } else { | ||
| return null; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const mapStateToProps = (state: AppState, ownProps: TableFilterPaneProps) => { | ||
| return { | ||
| tableFilterPane: getTableFilterState(state), | ||
| themeMode: getCurrentThemeMode(state), | ||
| metaProps: getWidgetMetaProps(state, ownProps.widgetId), | ||
| }; | ||
| }; | ||
|
|
||
| const mapDispatchToProps = (dispatch: any) => { | ||
| return { | ||
| setPanePoistion: (widgetId: string, position: any) => { | ||
| dispatch({ | ||
| type: ReduxActionTypes.TABLE_PANE_MOVED, | ||
| payload: { | ||
| widgetId, | ||
| position, | ||
| }, | ||
| }); | ||
| dispatch(selectWidgetAction(widgetId)); | ||
| }, | ||
| hideFilterPane: (widgetId: string) => { | ||
| dispatch({ | ||
| type: ReduxActionTypes.HIDE_TABLE_FILTER_PANE, | ||
| payload: { widgetId }, | ||
| }); | ||
| dispatch(selectWidgetAction(widgetId)); | ||
| }, | ||
| }; | ||
| }; | ||
| export default connect(mapStateToProps, mapDispatchToProps)(TableFilterPane); |
Oops, something went wrong.