Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Table scrollbars#1093

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 5 commits intodevfromtable-scrollbars
Aug 6, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletionclient/packages/lowcoder-design/src/components/ScrollBar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -56,6 +56,8 @@ interface IProps {
};
$hideplaceholder?: boolean;
hideScrollbar?: boolean;
prefixNode?: React.ReactNode;
suffixNode?: React.ReactNode;
}

export const ScrollBar = ({
Expand All@@ -65,6 +67,8 @@ export const ScrollBar = ({
scrollableNodeProps,
hideScrollbar = false,
$hideplaceholder = false,
prefixNode,
suffixNode,
...otherProps
}: IProps) => {
const height = style?.height ?? '100%';
Expand All@@ -73,12 +77,24 @@ export const ScrollBar = ({

return hideScrollbar ? (
<ScrollBarWrapper className={className}>
{prefixNode}
{children}
{suffixNode}
</ScrollBarWrapper>
) : (
<ScrollBarWrapper className={className}>
<SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
{children}
{({ scrollableNodeProps, contentNodeProps }) => {
return (
<div {...scrollableNodeProps as any}>
{prefixNode}
<div {...contentNodeProps as any}>
{children}
</div>
{suffixNode}
</div>
);
}}
</SimpleBar>
</ScrollBarWrapper>
);
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -78,7 +78,9 @@ export const getStyle = (
.ant-select-selection-search {
padding:${style.padding};
}
.ant-select-selection-search-input {
.ant-select-selection-search-input,
.ant-select-selection-item,
.ant-select-selection-item .option-label {
font-family:${(styleasSelectStyleType).fontFamily} !important;
text-transform:${(styleasSelectStyleType).textTransform} !important;
text-decoration:${(styleasSelectStyleType).textDecoration} !important;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -28,7 +28,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
import { PrimaryColor } from "constants/style";
import { trans } from "i18n";
import _ from "lodash";
import { darkenColor, isDarkColor } from "lowcoder-design";
import { darkenColor, isDarkColor, ScrollBar } from "lowcoder-design";
import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
import { Resizable } from "react-resizable";
import styled, { css } from "styled-components";
Expand All@@ -43,6 +43,7 @@ import { CellColorViewType } from "./column/tableColumnComp";
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil";


function genLinerGradient(color: string) {
Expand DownExpand Up@@ -141,17 +142,35 @@ const TitleResizeHandle = styled.span`
const BackgroundWrapper = styled.div<{
$style: TableStyleType;
$tableAutoHeight: boolean;
}>`
$showHorizontalScrollbar: boolean;
$showVerticalScrollbar: boolean;
}>`
display: flex;
flex-direction: column;
background: ${(props) => props.$style.background} !important;
// border: ${(props) => `${props.$style.border} !important`};
border-radius: ${(props) => props.$style.radius} !important;
// padding: unset !important;
padding: ${(props) => props.$style.padding} !important;
margin: ${(props) => props.$style.margin} !important;
overflow: scroll !important;
border-style: ${(props) => props.$style.borderStyle} !important;
border-width: ${(props) => `${props.$style.borderWidth} !important`};
${(props) => props.$style}
border-color: ${(props) => `${props.$style.border} !important`};
height: calc(100% - ${(props) => getVerticalMargin(props.$style.margin.split(' '))});
overflow: hidden;

> div.table-scrollbar-wrapper {
height: auto;
overflow: auto;
${(props) => !props.$showHorizontalScrollbar && `
div.simplebar-horizontal {
visibility: hidden !important;
}
`}
${(props) => !props.$showVerticalScrollbar && `
div.simplebar-vertical {
visibility: hidden !important;
}
`}
}
`;

// TODO: find a way to limit the calc function for max-height only to first Margin value
Expand All@@ -166,8 +185,6 @@ const TableWrapper = styled.div<{
$visibleResizables: boolean;
$showHRowGridBorder?: boolean;
}>`
overflow: unset !important;

.ant-table-wrapper {
border-top: unset;
border-color: inherit;
Expand All@@ -193,22 +210,18 @@ const TableWrapper = styled.div<{
}

.ant-table {
overflow-y:scroll;
background: ${(props) =>props.$style.background};
.ant-table-container {
border-left: unset;
border-top: none !important;
border-inline-start: none !important;
overflow-y:scroll;
height:300px

&::after {
box-shadow: none !important;
}

.ant-table-content {
overflow-y:scroll;
overflow-x:scroll;
overflow: unset !important
}

// A table expand row contains table
Expand All@@ -220,21 +233,23 @@ const TableWrapper = styled.div<{
border-top: unset;

> .ant-table-thead {
${(props) =>
props.$fixedHeader && `
position: sticky;
position: -webkit-sticky;
// top: ${props.$fixedToolbar ? '47px' : '0'};
top: 0;
z-index: 99;
`
}
> tr > th {
background-color: ${(props) => props.$headerStyle.headerBackground};

border-color: ${(props) => props.$headerStyle.border};
border-width: ${(props) => props.$headerStyle.borderWidth};
color: ${(props) => props.$headerStyle.headerText};
// border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
${(props) =>
props.$fixedHeader && `
position: sticky;
position: -webkit-sticky;
top: ${props.$fixedToolbar ? '47px' : '0'};
z-index: 99;
`
}


> div {
margin: ${(props) => props.$headerStyle.margin};
Expand DownExpand Up@@ -715,6 +730,8 @@ export function TableCompView(props: {
const toolbarStyle = compChildren.toolbarStyle.getView();
const rowAutoHeight = compChildren.rowAutoHeight.getView();
const tableAutoHeight = comp.getTableAutoHeight();
const showHorizontalScrollbar = compChildren.showHorizontalScrollbar.getView();
const showVerticalScrollbar = compChildren.showVerticalScrollbar.getView();
const visibleResizables = compChildren.visibleResizables.getView();
const showHRowGridBorder = compChildren.showHRowGridBorder.getView();
const columnsStyle = compChildren.columnsStyle.getView();
Expand DownExpand Up@@ -832,70 +849,84 @@ export function TableCompView(props: {

return (
<BackgroundColorContext.Provider value={style.background} >
<BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
{toolbar.position === "above" && toolbarView}
<TableWrapper
$style={style}
$rowStyle={rowStyle}
$headerStyle={headerStyle}
$toolbarStyle={toolbarStyle}
$toolbarPosition={toolbar.position}
$fixedHeader={compChildren.fixedHeader.getView()}
$fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
$visibleResizables={visibleResizables}
$showHRowGridBorder={showHRowGridBorder}
<BackgroundWrapper
ref={ref}
$style={style}
$tableAutoHeight={tableAutoHeight}
$showHorizontalScrollbar={showHorizontalScrollbar}
$showVerticalScrollbar={showVerticalScrollbar}
>
{toolbar.position === "above" && toolbar.fixedToolbar && toolbarView}
<ScrollBar
className="table-scrollbar-wrapper"
style={{ height: "100%", margin: "0px", padding: "0px" }}
hideScrollbar={!showHorizontalScrollbar && !showVerticalScrollbar}
prefixNode={toolbar.position === "above" && !toolbar.fixedToolbar && toolbarView}
suffixNode={toolbar.position === "below" && !toolbar.fixedToolbar && toolbarView}
>
<ResizeableTable<RecordType>
expandable={{
...expansion.expandableConfig,
childrenColumnName: supportChildren
? COLUMN_CHILDREN_KEY
: "OB_CHILDREN_KEY_PLACEHOLDER",
fixed: "left",
onExpand: (expanded) => {
if (expanded) {
handleChangeEvent('rowExpand')
} else {
handleChangeEvent('rowShrink')
<TableWrapper
$style={style}
$rowStyle={rowStyle}
$headerStyle={headerStyle}
$toolbarStyle={toolbarStyle}
$toolbarPosition={toolbar.position}
$fixedHeader={compChildren.fixedHeader.getView()}
$fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
$visibleResizables={visibleResizables}
$showHRowGridBorder={showHRowGridBorder}
>
<ResizeableTable<RecordType>
expandable={{
...expansion.expandableConfig,
childrenColumnName: supportChildren
? COLUMN_CHILDREN_KEY
: "OB_CHILDREN_KEY_PLACEHOLDER",
fixed: "left",
onExpand: (expanded) => {
if (expanded) {
handleChangeEvent('rowExpand')
} else {
handleChangeEvent('rowShrink')
}
}
}}
rowColorFn={compChildren.rowColor.getView() as any}
rowHeightFn={compChildren.rowHeight.getView() as any}
{...compChildren.selection.getView()(onEvent)}
bordered={compChildren.showRowGridBorder.getView()}
onChange={(pagination, filters, sorter, extra) => {
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
}}
showHeader={!compChildren.hideHeader.getView()}
columns={antdColumns}
columnsStyle={columnsStyle}
viewModeResizable={compChildren.viewModeResizable.getView()}
visibleResizables={compChildren.visibleResizables.getView()}
dataSource={pageDataInfo.data}
size={compChildren.size.getView()}
rowAutoHeight={rowAutoHeight}
tableLayout="fixed"
loading={
loading ||
// fixme isLoading type
(compChildren.showDataLoadSpinner.getView() &&
(compChildren.data as any).isLoading()) ||
compChildren.loading.getView()
}
}}
rowColorFn={compChildren.rowColor.getView() as any}
rowHeightFn={compChildren.rowHeight.getView() as any}
{...compChildren.selection.getView()(onEvent)}
bordered={compChildren.showRowGridBorder.getView()}
onChange={(pagination, filters, sorter, extra) => {
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
}}
showHeader={!compChildren.hideHeader.getView()}
columns={antdColumns}
columnsStyle={columnsStyle}
viewModeResizable={compChildren.viewModeResizable.getView()}
visibleResizables={compChildren.visibleResizables.getView()}
dataSource={pageDataInfo.data}
size={compChildren.size.getView()}
rowAutoHeight={rowAutoHeight}
tableLayout="fixed"
loading={
loading ||
// fixme isLoading type
(compChildren.showDataLoadSpinner.getView() &&
(compChildren.data as any).isLoading()) ||
compChildren.loading.getView()
}
onCellClick={(columnName: string, dataIndex: string) => {
comp.children.selectedCell.dispatchChangeValueAction({
name: columnName,
dataIndex: dataIndex,
});
}}
/>

<SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
{expansion.expandModalView}
</SlotConfigContext.Provider>
</TableWrapper>
{toolbar.position === "below" && toolbarView}
onCellClick={(columnName: string, dataIndex: string) => {
comp.children.selectedCell.dispatchChangeValueAction({
name: columnName,
dataIndex: dataIndex,
});
}}
/>

<SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
{expansion.expandModalView}
</SlotConfigContext.Provider>
</TableWrapper>
</ScrollBar>
{toolbar.position === "below" && toolbar.fixedToolbar && toolbarView}
</BackgroundWrapper>

</BackgroundColorContext.Provider>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -462,6 +462,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
radioButton: true,
})}
{comp.children.autoHeight.getPropertyView()}
{comp.children.showHorizontalScrollbar.propertyView({
label: trans("prop.showHorizontalScrollbar"),
})}
{!comp.children.autoHeight.getView() && comp.children.showVerticalScrollbar.propertyView({
label: trans("prop.showVerticalScrollbar"),
})}
{comp.children.fixedHeader.propertyView({
label: trans("table.fixedHeader"),
tooltip: trans("table.fixedHeaderTooltip")
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -197,6 +197,8 @@ const tableChildrenMap = {
hideHeader: BoolControl,
fixedHeader: BoolControl,
autoHeight: withDefault(AutoHeightControl, "auto"),
showVerticalScrollbar: BoolControl,
showHorizontalScrollbar: BoolControl,
data: withIsLoadingMethod(JSONObjectArrayControl),
showDataLoadSpinner: withDefault(BoolPureControl, true),
columns: ColumnListComp,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1512,7 +1512,6 @@ export const TableHeaderStyle = [
},
TEXT_SIZE,
TEXT_WEIGHT,
FONT_FAMILY,
]asconst;

exportconstTableRowStyle=[
Expand Down
2 changes: 2 additions & 0 deletionsclient/packages/lowcoder/src/i18n/locales/de.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -200,6 +200,8 @@ export const de: typeof en = {
"className":"Klasse",
"dataTestId":"Test ID",
"horizontalGridCells":"Horizontale Gitterzellen",
"showHorizontalScrollbar":"Horizontale Bildlaufleiste anzeigen",
"showVerticalScrollbar":"Vertikale Bildlaufleiste anzeigen",
},
"autoHeightProp":{
...en.autoHeightProp,
Expand Down
2 changes: 2 additions & 0 deletionsclient/packages/lowcoder/src/i18n/locales/en.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -220,6 +220,8 @@ export const en = {
"preventOverwriting": "Prevent overwriting styles",
"color": "Color",
"horizontalGridCells": "Horizontal Grid Cells",
"showHorizontalScrollbar": "Show Horizontal Scrollbar",
"showVerticalScrollbar": "Show Vertical Scrollbar",
},
"autoHeightProp": {
"auto": "Auto",
Expand Down
2 changes: 2 additions & 0 deletionsclient/packages/lowcoder/src/i18n/locales/pt.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -231,6 +231,8 @@ export const pt: typeof en = {
"className": "Nome da Classe CSS",
"dataTestId": "ID Individual",
"horizontalGridCells": "Células de grade horizontal",
"showHorizontalScrollbar": "Mostrar barra de rolagem horizontal",
"showVerticalScrollbar": "Mostrar barra de rolagem vertical",
},
"autoHeightProp": {
...en.autoHeightProp,
Expand Down
2 changes: 2 additions & 0 deletionsclient/packages/lowcoder/src/i18n/locales/zh.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -220,6 +220,8 @@ export const zh: typeof en = {
"horizontal":"水平",
"minHorizontalWidth":"最小水平宽度",
"horizontalGridCells":"水平网格单元",
"showHorizontalScrollbar":"显示水平滚动条",
"showVerticalScrollbar":"显示垂直滚动条",
},

autoHeightProp:{
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp