Merge pull request #4006 from appsmithorg/fix/native-scrollbars-experience
Fix-Native scrollbar UX with custom scrollbars
This commit is contained in:
Somangshu Goswami
GitHub
commit
64961dde16
|
|
@ -31,6 +31,7 @@
|
|||
"@types/node": "^10.12.18",
|
||||
"@types/prismjs": "^1.16.1",
|
||||
"@types/react": "^16.8.2",
|
||||
"@types/react-custom-scrollbars": "^4.0.7",
|
||||
"@types/react-dom": "^16.8.0",
|
||||
"@types/react-helmet": "^5.0.14",
|
||||
"@types/react-instantsearch-dom": "^6.3.0",
|
||||
|
|
@ -98,6 +99,7 @@
|
|||
"react": "^16.12.0",
|
||||
"react-base-table": "^1.9.1",
|
||||
"react-beautiful-dnd": "^12.2.0",
|
||||
"react-custom-scrollbars": "^4.2.1",
|
||||
"react-dnd": "^9.3.4",
|
||||
"react-dnd-html5-backend": "^9.3.4",
|
||||
"react-dnd-touch-backend": "^9.4.0",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import styled from "styled-components";
|
|||
import AppIcon, { AppIconName, AppIconCollection } from "./AppIcon";
|
||||
import { Size } from "./Button";
|
||||
import { CommonComponentProps, Classes } from "./common";
|
||||
import ScrollIndicator from "./ScrollIndicator";
|
||||
import ScrollIndicator from "components/ads/ScrollIndicator";
|
||||
|
||||
type IconSelectorProps = CommonComponentProps & {
|
||||
onSelect?: (icon: AppIconName) => void;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,23 @@
|
|||
import React, { useEffect, useState, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import _ from "lodash";
|
||||
import { useSpring, animated, interpolate } from "react-spring";
|
||||
import { animated } from "react-spring";
|
||||
import { useSpring, interpolate } from "react-spring";
|
||||
|
||||
export const ScrollThumb = styled(animated.div)<{
|
||||
mode?: "DARK" | "LIGHT";
|
||||
}>`
|
||||
position: relative;
|
||||
width: 4px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
background-color: ${(props) =>
|
||||
props.mode
|
||||
? props.mode === "LIGHT"
|
||||
? props.theme.colors.scrollbarLight
|
||||
: props.theme.colors.scrollbarDark
|
||||
: props.theme.colors.scrollbarLight};
|
||||
border-radius: ${(props) => props.theme.radii[3]}px;
|
||||
`;
|
||||
|
||||
const ScrollTrack = styled.div<{
|
||||
isVisible: boolean;
|
||||
|
|
@ -12,32 +28,20 @@ const ScrollTrack = styled.div<{
|
|||
}>`
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.15s ease-in;
|
||||
top: ${(props) => (props.top ? props.top : "0px")};
|
||||
bottom: ${(props) => (props.bottom ? props.bottom : "0px")};
|
||||
right: ${(props) => (props.right ? props.right : "2px")};
|
||||
width: 4px;
|
||||
opacity: ${(props) => (props.isVisible ? 1 : 0)};
|
||||
box-shadow: inset 0 0 6px
|
||||
${(props) =>
|
||||
props.mode
|
||||
? props.mode === "LIGHT"
|
||||
? props.theme.colors.scrollbarLightBG
|
||||
: props.theme.colors.scrollbarDarkBG
|
||||
: props.theme.colors.scrollbarBG};
|
||||
overflow: hidden;
|
||||
opacity: ${(props) => (props.isVisible ? 1 : 0)};
|
||||
transition: opacity 0.15s ease-in;
|
||||
`;
|
||||
|
||||
const ScrollThumb = styled(animated.div)<{ mode?: "DARK" | "LIGHT" }>`
|
||||
: props.theme.colors.scrollbarLightBG};
|
||||
width: 4px;
|
||||
background-color: ${(props) =>
|
||||
props.mode
|
||||
? props.mode === "LIGHT"
|
||||
? props.theme.colors.scrollbarLight
|
||||
: props.theme.colors.scrollbarDark
|
||||
: props.theme.colors.scrollbar};
|
||||
border-radius: ${(props) => props.theme.radii[3]}px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
|
|
@ -45,9 +49,16 @@ interface Props {
|
|||
top?: string;
|
||||
bottom?: string;
|
||||
right?: string;
|
||||
alwaysShowScrollbar?: boolean;
|
||||
mode?: "DARK" | "LIGHT";
|
||||
}
|
||||
function ScrollIndicator({ containerRef, top, bottom, right }: Props) {
|
||||
function ScrollIndicator({
|
||||
containerRef,
|
||||
top,
|
||||
bottom,
|
||||
right,
|
||||
alwaysShowScrollbar,
|
||||
}: Props) {
|
||||
const [{ thumbPosition }, setThumbPosition] = useSpring<{
|
||||
thumbPosition: number;
|
||||
config: {
|
||||
|
|
@ -65,7 +76,9 @@ function ScrollIndicator({ containerRef, top, bottom, right }: Props) {
|
|||
tension: 800,
|
||||
},
|
||||
}));
|
||||
const [isScrollVisible, setIsScrollVisible] = useState(false);
|
||||
const [isScrollVisible, setIsScrollVisible] = useState(
|
||||
alwaysShowScrollbar || false,
|
||||
);
|
||||
const thumbRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -100,9 +113,8 @@ function ScrollIndicator({ containerRef, top, bottom, right }: Props) {
|
|||
}, [isScrollVisible]);
|
||||
|
||||
const hideScrollbar = _.debounce(() => {
|
||||
setIsScrollVisible(false);
|
||||
setIsScrollVisible(alwaysShowScrollbar || false);
|
||||
}, 1500);
|
||||
|
||||
return (
|
||||
<ScrollTrack
|
||||
bottom={bottom}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const SearchInputWrapper = styled(InputGroup)`
|
|||
&&& svg {
|
||||
opacity: 0.6;
|
||||
}
|
||||
margin: 5px 20px;
|
||||
margin: 5px 16px;
|
||||
width: 250px;
|
||||
min-width: 150px;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -29,20 +29,20 @@ export enum VerticalAlignmentTypes {
|
|||
|
||||
export const TABLE_SIZES: { [key: string]: TableSizes } = {
|
||||
[CompactModeTypes.DEFAULT]: {
|
||||
COLUMN_HEADER_HEIGHT: 38,
|
||||
TABLE_HEADER_HEIGHT: 42,
|
||||
COLUMN_HEADER_HEIGHT: 32,
|
||||
TABLE_HEADER_HEIGHT: 38,
|
||||
ROW_HEIGHT: 40,
|
||||
ROW_FONT_SIZE: 14,
|
||||
},
|
||||
[CompactModeTypes.SHORT]: {
|
||||
COLUMN_HEADER_HEIGHT: 38,
|
||||
TABLE_HEADER_HEIGHT: 42,
|
||||
COLUMN_HEADER_HEIGHT: 32,
|
||||
TABLE_HEADER_HEIGHT: 38,
|
||||
ROW_HEIGHT: 20,
|
||||
ROW_FONT_SIZE: 12,
|
||||
},
|
||||
[CompactModeTypes.TALL]: {
|
||||
COLUMN_HEADER_HEIGHT: 38,
|
||||
TABLE_HEADER_HEIGHT: 42,
|
||||
COLUMN_HEADER_HEIGHT: 32,
|
||||
TABLE_HEADER_HEIGHT: 38,
|
||||
ROW_HEIGHT: 60,
|
||||
ROW_FONT_SIZE: 18,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useRef } from "react";
|
||||
import {
|
||||
useTable,
|
||||
usePagination,
|
||||
|
|
@ -6,7 +6,11 @@ import {
|
|||
useResizeColumns,
|
||||
useRowSelect,
|
||||
} from "react-table";
|
||||
import { TableWrapper } from "./TableStyledWrappers";
|
||||
import {
|
||||
TableWrapper,
|
||||
TableHeaderWrapper,
|
||||
TableHeaderInnerWrapper,
|
||||
} from "./TableStyledWrappers";
|
||||
import { ReactTableFilter } from "components/designSystems/appsmith/TableComponent/TableFilters";
|
||||
import { TableHeaderCell, renderEmptyRows } from "./TableUtilities";
|
||||
import TableHeader from "./TableHeader";
|
||||
|
|
@ -19,8 +23,9 @@ import {
|
|||
} from "components/designSystems/appsmith/TableComponent/Constants";
|
||||
import { Colors } from "constants/Colors";
|
||||
|
||||
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
||||
import ScrollIndicator from "components/ads/ScrollIndicator";
|
||||
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
||||
import { Scrollbars } from "react-custom-scrollbars";
|
||||
|
||||
interface TableProps {
|
||||
width: number;
|
||||
|
|
@ -62,9 +67,16 @@ const defaultColumn = {
|
|||
width: 150,
|
||||
};
|
||||
|
||||
function ScrollbarVerticalThumb(props: any) {
|
||||
return <div {...props} className="thumb-vertical" />;
|
||||
}
|
||||
|
||||
function ScrollbarHorizontalThumb(props: any) {
|
||||
return <div {...props} className="thumb-horizontal" />;
|
||||
}
|
||||
|
||||
export function Table(props: TableProps) {
|
||||
const isResizingColumn = React.useRef(false);
|
||||
const tableWrapperRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleResizeColumn = (columnWidths: Record<string, number>) => {
|
||||
const columnSizeMap = {
|
||||
|
|
@ -89,6 +101,13 @@ export function Table(props: TableProps) {
|
|||
columnSizeMap: props.columnSizeMap,
|
||||
});
|
||||
const columns = React.useMemo(() => props.columns, [columnString]);
|
||||
const tableHeadercolumns = React.useMemo(
|
||||
() =>
|
||||
props.columns.filter((column: ReactTableColumnProps) => {
|
||||
return column.accessor !== "actions";
|
||||
}),
|
||||
[columnString],
|
||||
);
|
||||
const pageCount = Math.ceil(props.data.length / props.pageSize);
|
||||
const currentPageIndex = props.pageNo < pageCount ? props.pageNo : 0;
|
||||
const {
|
||||
|
|
@ -139,134 +158,169 @@ export function Table(props: TableProps) {
|
|||
const selectedRowIndex = props.selectedRowIndex;
|
||||
const selectedRowIndices = props.selectedRowIndices || [];
|
||||
const tableSizes = TABLE_SIZES[props.compactMode || CompactModeTypes.DEFAULT];
|
||||
/* Subtracting 9px to handling widget padding */
|
||||
const tableWrapperRef = useRef<HTMLDivElement | null>(null);
|
||||
const tableBodyRef = useRef<HTMLDivElement | null>(null);
|
||||
const tableHeaderWrapperRef = React.createRef<HTMLDivElement>();
|
||||
return (
|
||||
<TableWrapper
|
||||
backgroundColor={Colors.ATHENS_GRAY_DARKER}
|
||||
height={props.height}
|
||||
id={`table${props.widgetId}`}
|
||||
ref={tableWrapperRef}
|
||||
tableSizes={tableSizes}
|
||||
triggerRowSelection={props.triggerRowSelection}
|
||||
width={props.width}
|
||||
>
|
||||
<TableHeader
|
||||
applyFilter={props.applyFilter}
|
||||
columns={props.columns.filter((column: ReactTableColumnProps) => {
|
||||
return column.accessor !== "actions";
|
||||
})}
|
||||
compactMode={props.compactMode}
|
||||
currentPageIndex={currentPageIndex}
|
||||
editMode={props.editMode}
|
||||
filters={props.filters}
|
||||
nextPageClick={props.nextPageClick}
|
||||
pageCount={pageCount}
|
||||
pageNo={props.pageNo}
|
||||
pageOptions={pageOptions}
|
||||
prevPageClick={props.prevPageClick}
|
||||
searchKey={props.searchKey}
|
||||
searchTableData={props.searchTableData}
|
||||
<TableHeaderWrapper
|
||||
backgroundColor={Colors.WHITE}
|
||||
ref={tableHeaderWrapperRef}
|
||||
serverSidePaginationEnabled={props.serverSidePaginationEnabled}
|
||||
tableColumns={props.columns}
|
||||
tableData={props.data}
|
||||
tableSizes={tableSizes}
|
||||
updateCompactMode={props.updateCompactMode}
|
||||
updatePageNo={props.updatePageNo}
|
||||
widgetName={props.widgetName}
|
||||
width={props.width}
|
||||
/>
|
||||
<div className={props.isLoading ? Classes.SKELETON : "tableWrap"}>
|
||||
<div {...getTableProps()} className="table">
|
||||
<div
|
||||
className="thead"
|
||||
onMouseLeave={props.enableDrag}
|
||||
onMouseOver={props.disableDrag}
|
||||
>
|
||||
<Scrollbars
|
||||
renderThumbHorizontal={ScrollbarHorizontalThumb}
|
||||
renderThumbVertical={ScrollbarVerticalThumb}
|
||||
style={{ width: props.width, height: 38 }}
|
||||
>
|
||||
<TableHeaderInnerWrapper
|
||||
backgroundColor={Colors.WHITE}
|
||||
serverSidePaginationEnabled={props.serverSidePaginationEnabled}
|
||||
tableSizes={tableSizes}
|
||||
width={props.width}
|
||||
>
|
||||
{headerGroups.map((headerGroup: any, index: number) => (
|
||||
<div
|
||||
{...headerGroup.getHeaderGroupProps()}
|
||||
className="tr"
|
||||
key={index}
|
||||
>
|
||||
{headerGroup.headers.map((column: any, columnIndex: number) => {
|
||||
return (
|
||||
<TableHeaderCell
|
||||
column={column}
|
||||
columnIndex={columnIndex}
|
||||
columnName={column.Header}
|
||||
isAscOrder={column.isAscOrder}
|
||||
isHidden={column.isHidden}
|
||||
isResizingColumn={isResizingColumn.current}
|
||||
key={columnIndex}
|
||||
sortTableColumn={props.sortTableColumn}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
{headerGroups.length === 0 &&
|
||||
renderEmptyRows(
|
||||
1,
|
||||
props.columns,
|
||||
props.width,
|
||||
subPage,
|
||||
prepareRow,
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
{...getTableBodyProps()}
|
||||
className={`tbody ${
|
||||
props.pageSize > subPage.length ? "no-scroll" : ""
|
||||
}`}
|
||||
>
|
||||
{subPage.map((row, rowIndex) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<TableHeader
|
||||
applyFilter={props.applyFilter}
|
||||
columns={tableHeadercolumns}
|
||||
compactMode={props.compactMode}
|
||||
currentPageIndex={currentPageIndex}
|
||||
editMode={props.editMode}
|
||||
filters={props.filters}
|
||||
nextPageClick={props.nextPageClick}
|
||||
pageCount={pageCount}
|
||||
pageNo={props.pageNo}
|
||||
pageOptions={pageOptions}
|
||||
prevPageClick={props.prevPageClick}
|
||||
searchKey={props.searchKey}
|
||||
searchTableData={props.searchTableData}
|
||||
serverSidePaginationEnabled={props.serverSidePaginationEnabled}
|
||||
tableColumns={columns}
|
||||
tableData={props.data}
|
||||
tableSizes={tableSizes}
|
||||
updateCompactMode={props.updateCompactMode}
|
||||
updatePageNo={props.updatePageNo}
|
||||
widgetName={props.widgetName}
|
||||
/>
|
||||
</TableHeaderInnerWrapper>
|
||||
</Scrollbars>
|
||||
</TableHeaderWrapper>
|
||||
<div
|
||||
className={props.isLoading ? Classes.SKELETON : "tableWrap"}
|
||||
ref={tableWrapperRef}
|
||||
>
|
||||
<Scrollbars
|
||||
renderThumbHorizontal={ScrollbarHorizontalThumb}
|
||||
style={{ width: props.width, height: props.height - 48 }}
|
||||
>
|
||||
<div {...getTableProps()} className="table">
|
||||
<div
|
||||
className="thead"
|
||||
onMouseLeave={props.enableDrag}
|
||||
onMouseOver={props.disableDrag}
|
||||
>
|
||||
{headerGroups.map((headerGroup: any, index: number) => (
|
||||
<div
|
||||
{...row.getRowProps()}
|
||||
className={
|
||||
"tr" +
|
||||
`${
|
||||
row.index === selectedRowIndex ||
|
||||
selectedRowIndices.includes(row.index)
|
||||
? " selected-row"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
key={rowIndex}
|
||||
onClick={() => {
|
||||
row.toggleRowSelected();
|
||||
props.selectTableRow(row);
|
||||
}}
|
||||
{...headerGroup.getHeaderGroupProps()}
|
||||
className="tr"
|
||||
key={index}
|
||||
>
|
||||
{row.cells.map((cell, cellIndex) => {
|
||||
return (
|
||||
<div
|
||||
{...cell.getCellProps()}
|
||||
className="td"
|
||||
data-colindex={cellIndex}
|
||||
data-rowindex={rowIndex}
|
||||
key={cellIndex}
|
||||
>
|
||||
{cell.render("Cell")}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{headerGroup.headers.map(
|
||||
(column: any, columnIndex: number) => {
|
||||
return (
|
||||
<TableHeaderCell
|
||||
column={column}
|
||||
columnIndex={columnIndex}
|
||||
columnName={column.Header}
|
||||
isAscOrder={column.isAscOrder}
|
||||
isHidden={column.isHidden}
|
||||
isResizingColumn={isResizingColumn.current}
|
||||
key={columnIndex}
|
||||
sortTableColumn={props.sortTableColumn}
|
||||
/>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{props.pageSize > subPage.length &&
|
||||
renderEmptyRows(
|
||||
props.pageSize - subPage.length,
|
||||
props.columns,
|
||||
props.width,
|
||||
subPage,
|
||||
prepareRow,
|
||||
)}
|
||||
))}
|
||||
{headerGroups.length === 0 &&
|
||||
renderEmptyRows(
|
||||
1,
|
||||
props.columns,
|
||||
props.width,
|
||||
subPage,
|
||||
prepareRow,
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
{...getTableBodyProps()}
|
||||
className={`tbody ${
|
||||
props.pageSize > subPage.length ? "no-scroll" : ""
|
||||
}`}
|
||||
ref={tableBodyRef}
|
||||
>
|
||||
{subPage.map((row, rowIndex) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<div
|
||||
{...row.getRowProps()}
|
||||
className={
|
||||
"tr" +
|
||||
`${
|
||||
row.index === selectedRowIndex ||
|
||||
selectedRowIndices.includes(row.index)
|
||||
? " selected-row"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
key={rowIndex}
|
||||
onClick={(e) => {
|
||||
row.toggleRowSelected();
|
||||
props.selectTableRow(row);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{row.cells.map((cell, cellIndex) => {
|
||||
return (
|
||||
<div
|
||||
{...cell.getCellProps()}
|
||||
className="td"
|
||||
data-colindex={cellIndex}
|
||||
data-rowindex={rowIndex}
|
||||
key={cellIndex}
|
||||
>
|
||||
{cell.render("Cell")}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{props.pageSize > subPage.length &&
|
||||
renderEmptyRows(
|
||||
props.pageSize - subPage.length,
|
||||
props.columns,
|
||||
props.width,
|
||||
subPage,
|
||||
prepareRow,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Scrollbars>
|
||||
</div>
|
||||
<ScrollIndicator containerRef={tableWrapperRef} mode="LIGHT" />
|
||||
<ScrollIndicator
|
||||
containerRef={tableBodyRef}
|
||||
mode="LIGHT"
|
||||
top={props.editMode ? "70px" : "73px"}
|
||||
/>
|
||||
</TableWrapper>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { Icon, NumericInput } from "@blueprintjs/core";
|
|||
import {
|
||||
RowWrapper,
|
||||
PaginationWrapper,
|
||||
TableHeaderWrapper,
|
||||
PaginationItemWrapper,
|
||||
CommonFunctionsMenuWrapper,
|
||||
} from "./TableStyledWrappers";
|
||||
|
|
@ -22,7 +21,6 @@ import TableDataDownload from "components/designSystems/appsmith/TableComponent/
|
|||
import TableCompactMode from "components/designSystems/appsmith/TableComponent/TableCompactMode";
|
||||
import { Colors } from "constants/Colors";
|
||||
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
||||
import ScrollIndicator from "components/ads/ScrollIndicator";
|
||||
|
||||
const PageNumberInputWrapper = styled(NumericInput)`
|
||||
&&& input {
|
||||
|
|
@ -34,6 +32,7 @@ const PageNumberInputWrapper = styled(NumericInput)`
|
|||
border-radius: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 !important;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
|
@ -107,21 +106,12 @@ interface TableHeaderProps {
|
|||
editMode: boolean;
|
||||
compactMode?: CompactMode;
|
||||
updateCompactMode: (compactMode: CompactMode) => void;
|
||||
width: number;
|
||||
tableSizes: TableSizes;
|
||||
}
|
||||
|
||||
function TableHeader(props: TableHeaderProps) {
|
||||
const tableHeaderWrapperRef = React.createRef<HTMLDivElement>();
|
||||
|
||||
return (
|
||||
<TableHeaderWrapper
|
||||
backgroundColor={Colors.WHITE}
|
||||
ref={tableHeaderWrapperRef}
|
||||
serverSidePaginationEnabled={props.serverSidePaginationEnabled}
|
||||
tableSizes={props.tableSizes}
|
||||
width={props.width}
|
||||
>
|
||||
<>
|
||||
<SearchComponent
|
||||
onSearch={props.searchTableData}
|
||||
placeholder="Search..."
|
||||
|
|
@ -210,8 +200,7 @@ function TableHeader(props: TableHeaderProps) {
|
|||
</PaginationItemWrapper>
|
||||
</PaginationWrapper>
|
||||
)}
|
||||
<ScrollIndicator containerRef={tableHeaderWrapperRef} mode="LIGHT" />
|
||||
</TableHeaderWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
CellAlignment,
|
||||
} from "components/designSystems/appsmith/TableComponent/Constants";
|
||||
import { Colors, Color } from "constants/Colors";
|
||||
import { hideScrollbar } from "constants/DefaultTheme";
|
||||
import { FontStyleTypes, TEXT_SIZES } from "constants/WidgetConstants";
|
||||
|
||||
export const TableWrapper = styled.div<{
|
||||
|
|
@ -26,7 +27,18 @@ export const TableWrapper = styled.div<{
|
|||
.tableWrap {
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: ${(props) => props.width - 8}px;
|
||||
overflow-x: auto;
|
||||
${hideScrollbar};
|
||||
.thumb-horizontal {
|
||||
height: 4px !important;
|
||||
border-radius: ${(props) => props.theme.radii[3]}px;
|
||||
background: ${(props) => props.theme.colors.scrollbarLight} !important;
|
||||
&:hover {
|
||||
height: 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table {
|
||||
border-spacing: 0;
|
||||
|
|
@ -35,16 +47,25 @@ export const TableWrapper = styled.div<{
|
|||
background: ${Colors.ATHENS_GRAY_DARKER};
|
||||
display: table;
|
||||
width: 100%;
|
||||
${hideScrollbar};
|
||||
.tr {
|
||||
width: 100%;
|
||||
}
|
||||
.thead,
|
||||
.tbody {
|
||||
overflow: hidden;
|
||||
}
|
||||
.tbody {
|
||||
height: ${(props) => props.height - 80}px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
${hideScrollbar};
|
||||
.tr {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.tr {
|
||||
width: calc(100% - 8px);
|
||||
overflow: hidden;
|
||||
cursor: ${(props) => props.triggerRowSelection && "pointer"};
|
||||
background: ${Colors.WHITE};
|
||||
|
|
@ -104,6 +125,11 @@ export const TableWrapper = styled.div<{
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.draggable-header,
|
||||
.hidden-header {
|
||||
|
|
@ -404,16 +430,37 @@ export const TableHeaderWrapper = styled.div<{
|
|||
tableSizes: TableSizes;
|
||||
backgroundColor?: Color;
|
||||
}>`
|
||||
position: relative;
|
||||
display: flex;
|
||||
border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
|
||||
width: ${(props) => props.width}px;
|
||||
width: ${(props) => props.width - 8}px;
|
||||
.show-page-items {
|
||||
display: ${(props) => (props.width < 700 ? "none" : "flex")};
|
||||
}
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
height: ${(props) => props.tableSizes.TABLE_HEADER_HEIGHT}px;
|
||||
min-height: ${(props) => props.tableSizes.TABLE_HEADER_HEIGHT}px;
|
||||
overflow-x: auto;
|
||||
${hideScrollbar};
|
||||
.thumb-horizontal {
|
||||
height: 4px !important;
|
||||
border-radius: ${(props) => props.theme.radii[3]}px;
|
||||
background: ${(props) => props.theme.colors.scrollbarLight};
|
||||
&:hover {
|
||||
height: 6px !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const TableHeaderInnerWrapper = styled.div<{
|
||||
serverSidePaginationEnabled: boolean;
|
||||
width: number;
|
||||
tableSizes: TableSizes;
|
||||
backgroundColor?: Color;
|
||||
}>`
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
|
||||
`;
|
||||
|
||||
export const CommonFunctionsMenuWrapper = styled.div<{
|
||||
|
|
@ -444,7 +491,7 @@ export const TableIconWrapper = styled.div<{
|
|||
box-shadow: ${(props) =>
|
||||
props.selected ? `inset 0px 4px 0px ${Colors.GREEN}` : "none"};
|
||||
width: 48px;
|
||||
height: 42px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -458,8 +505,8 @@ export const TableIconWrapper = styled.div<{
|
|||
|
||||
export const SortIconWrapper = styled.div`
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
`;
|
||||
|
||||
export const RenderOptionWrapper = styled.div<{ selected: boolean }>`
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@ export const renderEmptyRows = (
|
|||
const AscendingIcon = styled(ControlIcons.SORT_CONTROL as AnyStyledComponent)`
|
||||
padding: 0;
|
||||
position: relative;
|
||||
top: 18px;
|
||||
top: 12px;
|
||||
cursor: pointer;
|
||||
transform: rotate(180deg);
|
||||
&& svg {
|
||||
|
|
|
|||
|
|
@ -33,27 +33,27 @@ export default {
|
|||
getPageSize: (props, moment, _) => {
|
||||
const TABLE_SIZES = {
|
||||
DEFAULT: {
|
||||
COLUMN_HEADER_HEIGHT: 38,
|
||||
TABLE_HEADER_HEIGHT: 42,
|
||||
COLUMN_HEADER_HEIGHT: 32,
|
||||
TABLE_HEADER_HEIGHT: 38,
|
||||
ROW_HEIGHT: 40,
|
||||
ROW_FONT_SIZE: 14,
|
||||
},
|
||||
SHORT: {
|
||||
COLUMN_HEADER_HEIGHT: 38,
|
||||
TABLE_HEADER_HEIGHT: 42,
|
||||
COLUMN_HEADER_HEIGHT: 32,
|
||||
TABLE_HEADER_HEIGHT: 38,
|
||||
ROW_HEIGHT: 20,
|
||||
ROW_FONT_SIZE: 12,
|
||||
},
|
||||
TALL: {
|
||||
COLUMN_HEADER_HEIGHT: 38,
|
||||
TABLE_HEADER_HEIGHT: 42,
|
||||
COLUMN_HEADER_HEIGHT: 32,
|
||||
TABLE_HEADER_HEIGHT: 38,
|
||||
ROW_HEIGHT: 60,
|
||||
ROW_FONT_SIZE: 18,
|
||||
},
|
||||
};
|
||||
const compactMode = props.compactMode || "DEFAULT";
|
||||
const componentHeight =
|
||||
(props.bottomRow - props.topRow) * props.parentRowSpace;
|
||||
(props.bottomRow - props.topRow) * props.parentRowSpace - 10;
|
||||
const tableSizes = TABLE_SIZES[compactMode];
|
||||
let pageSize = Math.floor(
|
||||
(componentHeight -
|
||||
|
|
|
|||
|
|
@ -3733,7 +3733,6 @@
|
|||
"@types/marked@^1.2.2":
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/marked/-/marked-1.2.2.tgz#1f858a0e690247ecf3b2eef576f98f86e8d960d4"
|
||||
integrity sha512-wLfw1hnuuDYrFz97IzJja0pdVsC0oedtS4QsKH1/inyW9qkLQbXgMUqEQT0MVtUBx3twjWeInUfjQbhBVLECXw==
|
||||
|
||||
"@types/mdast@^3.0.0":
|
||||
version "3.0.3"
|
||||
|
|
@ -3817,6 +3816,12 @@
|
|||
"@types/react" "*"
|
||||
"@types/reactcss" "*"
|
||||
|
||||
"@types/react-custom-scrollbars@^4.0.7":
|
||||
version "4.0.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-custom-scrollbars/-/react-custom-scrollbars-4.0.7.tgz#b1312ec749fcf4a01fee7466508501e072ede7ea"
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-dom@*", "@types/react-dom@^16.8.0":
|
||||
version "16.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
|
||||
|
|
@ -3921,7 +3926,6 @@
|
|||
"@types/react-window@^1.8.2":
|
||||
version "1.8.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
|
||||
integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
|
|
@ -4652,6 +4656,10 @@ acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
|
|||
version "7.4.1"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
|
||||
|
||||
add-px-to-style@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
|
||||
|
||||
address@1.1.2, address@^1.0.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
|
||||
|
|
@ -5583,7 +5591,6 @@ bluebird@^3.3.5, bluebird@^3.5.5, bluebird@^3.7.2:
|
|||
bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
|
||||
version "4.12.0"
|
||||
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
|
||||
integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
|
||||
|
||||
bn.js@^5.1.1:
|
||||
version "5.1.3"
|
||||
|
|
@ -6325,7 +6332,6 @@ code-point-at@^1.0.0:
|
|||
codemirror@^5.59.2:
|
||||
version "5.59.2"
|
||||
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922"
|
||||
integrity sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA==
|
||||
|
||||
collapse-white-space@^1.0.2:
|
||||
version "1.0.6"
|
||||
|
|
@ -6449,7 +6455,6 @@ compression@^1.7.4:
|
|||
compute-scroll-into-view@^1.0.16:
|
||||
version "1.0.16"
|
||||
resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz#5b7bf4f7127ea2c19b750353d7ce6776a90ee088"
|
||||
integrity sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ==
|
||||
|
||||
concat-map@0.0.1:
|
||||
version "0.0.1"
|
||||
|
|
@ -6586,7 +6591,6 @@ core-js@^3.6.4:
|
|||
core-js@^3.9.1:
|
||||
version "3.9.1"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
|
||||
integrity sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==
|
||||
|
||||
core-util-is@1.0.2, core-util-is@~1.0.0:
|
||||
version "1.0.2"
|
||||
|
|
@ -7380,6 +7384,14 @@ dom-converter@^0.2:
|
|||
dependencies:
|
||||
utila "~0.4"
|
||||
|
||||
dom-css@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
|
||||
dependencies:
|
||||
add-px-to-style "1.0.0"
|
||||
prefix-style "2.0.1"
|
||||
to-camel-case "1.0.0"
|
||||
|
||||
dom-helpers@^3.4.0:
|
||||
version "3.4.0"
|
||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
|
||||
|
|
@ -7551,7 +7563,6 @@ element-resize-detector@^1.2.1:
|
|||
elliptic@^6.5.3:
|
||||
version "6.5.4"
|
||||
resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
|
||||
integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
|
||||
dependencies:
|
||||
bn.js "^4.11.9"
|
||||
brorand "^1.1.0"
|
||||
|
|
@ -11284,7 +11295,6 @@ locate-path@^5.0.0:
|
|||
lodash-es@4.17.14:
|
||||
version "4.17.14"
|
||||
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.14.tgz#12a95a963cc5955683cee3b74e85458954f37ecc"
|
||||
integrity sha512-7zchRrGa8UZXjD/4ivUWP1867jDkhzTG2c/uj739utSd7O/pFFdxspCemIFKEEjErbcqRzn8nKnGsi7mvTgRPA==
|
||||
|
||||
lodash-es@^4.17.21:
|
||||
version "4.17.21"
|
||||
|
|
@ -11294,7 +11304,6 @@ lodash-es@^4.17.21:
|
|||
lodash-move@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash-move/-/lodash-move-1.1.1.tgz#59f76e0f1ac57e6d8683f531bec07c5b6ea4e348"
|
||||
integrity sha1-WfduDxrFfm2Gg/UxvsB8W26k40g=
|
||||
dependencies:
|
||||
lodash "^4.6.1"
|
||||
|
||||
|
|
@ -11545,7 +11554,6 @@ markdown-to-jsx@^6.10.3, markdown-to-jsx@^6.11.4:
|
|||
marked@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.0.tgz#9662bbcb77ebbded0662a7be66ff929a8611cee5"
|
||||
integrity sha512-NqRSh2+LlN2NInpqTQnS614Y/3NkVMFFU6sJlRFEpxJ/LHuK/qJECH7/fXZjk4VZstPW/Pevjil/VtSONsLc7Q==
|
||||
|
||||
marker-clusterer-plus@^2.1.4:
|
||||
version "2.1.4"
|
||||
|
|
@ -12837,7 +12845,6 @@ path-to-regexp@^1.7.0:
|
|||
path-to-regexp@^6.2.0:
|
||||
version "6.2.0"
|
||||
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38"
|
||||
integrity sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==
|
||||
|
||||
path-type@^1.0.0:
|
||||
version "1.1.0"
|
||||
|
|
@ -13608,6 +13615,10 @@ preact@^10.0.0:
|
|||
version "10.5.4"
|
||||
resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.4.tgz#1e4d148f949fa54656df6c9bc9218bd4e12016e3"
|
||||
|
||||
prefix-style@2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
|
||||
|
||||
prelude-ls@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
|
||||
|
|
@ -13689,7 +13700,6 @@ pretty-hrtime@^1.0.3:
|
|||
prismjs@^1.23.0, prismjs@^1.8.4:
|
||||
version "1.23.0"
|
||||
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
|
||||
integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
|
||||
optionalDependencies:
|
||||
clipboard "^2.0.0"
|
||||
|
||||
|
|
@ -13987,7 +13997,7 @@ raf-schd@^4.0.2:
|
|||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
|
||||
|
||||
raf@^3.4.1:
|
||||
raf@^3.1.0, raf@^3.4.1:
|
||||
version "3.4.1"
|
||||
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
|
||||
dependencies:
|
||||
|
|
@ -14117,6 +14127,14 @@ react-color@^2.17.0:
|
|||
reactcss "^1.2.0"
|
||||
tinycolor2 "^1.4.1"
|
||||
|
||||
react-custom-scrollbars@^4.2.1:
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
|
||||
dependencies:
|
||||
dom-css "^2.0.0"
|
||||
prop-types "^15.5.10"
|
||||
raf "^3.1.0"
|
||||
|
||||
react-day-picker@7.4.8:
|
||||
version "7.4.8"
|
||||
resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.4.8.tgz#675625240d3fae1b41c0a9d5177c968c8517c1d4"
|
||||
|
|
@ -14686,7 +14704,6 @@ react-window@^1.8.2:
|
|||
react-window@^1.8.6:
|
||||
version "1.8.6"
|
||||
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
|
||||
integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
memoize-one ">=3.1.1 <6"
|
||||
|
|
@ -15475,7 +15492,6 @@ scriptjs@^2.5.8:
|
|||
scroll-into-view-if-needed@^2.2.26:
|
||||
version "2.2.26"
|
||||
resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.26.tgz#e4917da0c820135ff65ad6f7e4b7d7af568c4f13"
|
||||
integrity sha512-SQ6AOKfABaSchokAmmaxVnL9IArxEnLEX9j4wAZw+x4iUTb40q7irtHG3z4GtAWz5veVZcCnubXDBRyLVQaohw==
|
||||
dependencies:
|
||||
compute-scroll-into-view "^1.0.16"
|
||||
|
||||
|
|
@ -16681,10 +16697,20 @@ to-arraybuffer@^1.0.0:
|
|||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
|
||||
|
||||
to-camel-case@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
|
||||
dependencies:
|
||||
to-space-case "^1.0.0"
|
||||
|
||||
to-fast-properties@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
|
||||
|
||||
to-no-case@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
|
||||
|
||||
to-object-path@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
|
||||
|
|
@ -16713,6 +16739,12 @@ to-regex@^3.0.1, to-regex@^3.0.2:
|
|||
regex-not "^1.0.2"
|
||||
safe-regex "^1.1.0"
|
||||
|
||||
to-space-case@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
|
||||
dependencies:
|
||||
to-no-case "^1.0.0"
|
||||
|
||||
toggle-selection@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user