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 fixes/updates#564

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 intolowcoder-org:devfromraheeliftikhar5:table-fixes
Dec 5, 2023
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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -34,6 +34,7 @@ export interface CellProps {
size?: string;
candidateTags?: string[];
candidateStatus?: { text: string; status: StatusType }[];
textOverflow?: boolean;
}

export type CellViewReturn = (props: CellProps) => ReactNode;
Expand All@@ -43,17 +44,6 @@ export type EditViewFn<T> = (props: {
onChangeEnd: () => void;
}) => ReactNode;

export const SizeWrapper = styled.div<{ $size?: string }>`
${(props) =>
props.$size &&
`padding: ${
props.$size === "small" ? "8.5px 8px" : props.$size === "large" ? "16.5px 16px" : "12.5px 8px"
};
line-height: 21px;
min-height: ${props.$size === "small" ? "39px" : props.$size === "large" ? "55px" : "47px"};
`}
`;

const BorderDiv = styled.div`
position: absolute;
border: 1.5px solid #315efb;
Expand DownExpand Up@@ -127,11 +117,15 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
}

return (
<ColumnTypeView>
<ColumnTypeView
textOverflow={props.textOverflow}
>
{status === "toSave" && !isEditing && <EditableChip />}
<SizeWrapper $size={props.size} onDoubleClick={enterEditFn}>
<div
onDoubleClick={enterEditFn}
>
{normalView}
</SizeWrapper>
</div>
</ColumnTypeView>
);
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import styled from "styled-components";

const ColumnTypeViewWrapper = styled.div`
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: keep-all;
}
const ColumnTypeViewWrapper = styled.div<{
textOverflow?: boolean
}>`
${props => !props.textOverflow && `
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: keep-all;
}
`}
`;

const ColumnTypeHoverView = styled.div<{
Expand DownExpand Up@@ -62,7 +66,10 @@ function childIsOverflow(nodes: HTMLCollection): boolean {
return false;
}

export default function ColumnTypeView(props: { children: React.ReactNode }) {
export default function ColumnTypeView(props: {
children: React.ReactNode,
textOverflow?: boolean,
}) {
const wrapperRef = useRef<HTMLDivElement>(null);
const hoverViewRef = useRef<HTMLDivElement>(null);
const [isHover, setIsHover] = useState(false);
Expand DownExpand Up@@ -161,6 +168,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
<>
<ColumnTypeViewWrapper
ref={wrapperRef}
textOverflow={props.textOverflow}
onMouseEnter={() => {
delayMouseEnter();
}}
Expand All@@ -171,7 +179,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
>
{props.children}
</ColumnTypeViewWrapper>
{isHover && hasOverflow && wrapperRef.current && (
{isHover && hasOverflow && wrapperRef.current &&!props.textOverflow &&(
<ColumnTypeHoverView
ref={hoverViewRef}
visible={adjustedPosition.done}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,6 +26,7 @@ import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
import { ColorControl } from "comps/controls/colorControl";
import { JSONValue } from "util/jsonTypes";
import styled from "styled-components";
import { TextOverflowControl } from "comps/controls/textOverflowControl";

export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
Expand DownExpand Up@@ -103,7 +104,8 @@ export const columnChildrenMap = {
borderWidth: withDefault(RadiusControl, ""),
radius: withDefault(RadiusControl, ""),
textSize: withDefault(RadiusControl, ""),
cellColor: CellColorComp,
cellColor: CellColorComp,
textOverflow: withDefault(TextOverflowControl, "ellipsis"),
};

const StyledIcon = styled.span`
Expand DownExpand Up@@ -228,6 +230,7 @@ export class ColumnComp extends ColumnInitComp {
preInputNode: <StyledIcon as={TextSizeIcon} title="" />,
placeholder: '14px',
})}
{this.children.textOverflow.getPropertyView()}
{this.children.cellColor.getPropertyView()}
</>
);
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@ import { lastValueIfEqual, shallowEqual } from "util/objectUtils";
import { IContainer } from "../containerBase";
import { getSelectedRowKeys } from "./selectionControl";
import { compTablePropertyView } from "./tablePropertyView";
import { RowColorComp, TableChildrenView, TableInitComp } from "./tableTypes";
import { RowColorComp,RowHeightComp,TableChildrenView, TableInitComp } from "./tableTypes";

import { useContext } from "react";
import { EditorContext } from "comps/editorState";
Expand DownExpand Up@@ -196,6 +196,17 @@ export class TableImplComp extends TableInitComp implements IContainer {
})
)
);
comp = comp.setChild(
"rowHeight",
comp.children.rowHeight.reduce(
RowHeightComp.changeContextDataAction({
currentRow: nextRowExample,
currentIndex: 0,
currentOriginalIndex: 0,
columnTitle: nextRowExample ? Object.keys(nextRowExample)[0] : undefined,
})
)
);
}

if (dataChanged) {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { Table } from "antd";
import { TableProps } from "antd/es/table";
import { TableCellContext, TableRowContext } from "comps/comps/tableComp/tableContext";
import { TableToolbar } from "comps/comps/tableComp/tableToolbarComp";
import { RowColorViewType } from "comps/comps/tableComp/tableTypes";
import { RowColorViewType, RowHeightViewType } from "comps/comps/tableComp/tableTypes";
import {
COL_MIN_WIDTH,
COLUMN_CHILDREN_KEY,
Expand DownExpand Up@@ -169,6 +169,10 @@ const TableWrapper = styled.div<{
border-top: none !important;
border-inline-start: none !important;

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

.ant-table-content {
overflow: unset !important;
}
Expand DownExpand Up@@ -280,8 +284,10 @@ const TableTh = styled.th<{ width?: number }>`

const TableTd = styled.td<{
background: string;
$style: TableColumnStyleType;
$style: TableColumnStyleType & {rowHeight?: string};
$isEditing: boolean;
$tableSize?: string;
$autoHeight?: boolean;
}>`
.ant-table-row-expand-icon,
.ant-table-row-indent {
Expand All@@ -291,16 +297,42 @@ const TableTd = styled.td<{
background: ${(props) => props.background};
border-color: ${(props) => props.$style.border};
}

background: ${(props) => props.background} !important;
border-color: ${(props) => props.$style.border} !important;
border-width: ${(props) => props.$style.borderWidth} !important;
border-radius: ${(props) => props.$style.radius};
padding: 0 !important;

> div> div{
> div {
color: ${(props) => props.$style.text};
font-size: ${(props) => props.$style.textSize};
line-height: 21px;

${(props) => props.$tableSize === 'small' && `
padding: 8.5px 8px;
min-height: ${props.$style.rowHeight || '39px'};
${!props.$autoHeight && `
overflow-y: auto;
max-height: ${props.$style.rowHeight || '39px'};
`};
`};
${(props) => props.$tableSize === 'middle' && `
padding: 12.5px 8px;
min-height: ${props.$style.rowHeight || '47px'};
${!props.$autoHeight && `
overflow-y: auto;
max-height: ${props.$style.rowHeight || '47px'};
`};
`};
${(props) => props.$tableSize === 'large' && `
padding: 16.5px 16px;
min-height: ${props.$style.rowHeight || '55px'};
${!props.$autoHeight && `
overflow-y: auto;
max-height: ${props.$style.rowHeight || '55px'};
`};
`};

&,
> .ant-badge > .ant-badge-status-text,
> div > .markdown-body {
Expand DownExpand Up@@ -383,30 +415,40 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
columns: CustomColumnType<RecordType>[];
viewModeResizable: boolean;
rowColorFn: RowColorViewType;
rowHeightFn: RowHeightViewType;
columnsStyle: TableColumnStyleType;
size?: string;
rowAutoHeight?: boolean;
};

function TableCellView(props: {
record: RecordType;
title: string;
rowColorFn: RowColorViewType;
rowHeightFn: RowHeightViewType;
cellColorFn: CellColorViewType;
rowIndex: number;
children: any;
columnsStyle: TableColumnStyleType;
columnStyle: TableColumnStyleType;
tableSize?: string;
autoHeight?: boolean;
}) {
const {
record,
title,
rowIndex,
rowColorFn,
rowHeightFn,
cellColorFn,
children,
columnsStyle,
columnStyle,
tableSize,
autoHeight,
...restProps
} = props;

const [editing, setEditing] = useState(false);
const rowContext = useContext(TableRowContext);
let tdView;
Expand All@@ -419,17 +461,24 @@ function TableCellView(props: {
currentOriginalIndex: record[OB_ROW_ORI_INDEX],
columnTitle: title,
});
const rowHeight = rowHeightFn({
currentRow: record,
currentIndex: rowIndex,
currentOriginalIndex: record[OB_ROW_ORI_INDEX],
columnTitle: title,
});
const cellColor = cellColorFn({
currentCell: record[title.toLowerCase()],
});

const style: TableColumnStyleType = {
const style = {
background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
text: columnStyle.text || columnsStyle.text,
border: columnStyle.border || columnsStyle.border,
radius: columnStyle.radius || columnsStyle.radius,
borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
textSize: columnStyle.textSize || columnsStyle.textSize,
rowHeight: rowHeight,
}
let { background } = style;
if (rowContext.selected) {
Expand All@@ -444,6 +493,8 @@ function TableCellView(props: {
background={background}
$style={style}
$isEditing={editing}
$tableSize={tableSize}
$autoHeight={autoHeight}
>
{children}
</TableTd>
Expand DownExpand Up@@ -511,10 +562,13 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
record,
title: col.titleText,
rowColorFn: props.rowColorFn,
rowHeightFn: props.rowHeightFn,
cellColorFn: cellColorFn,
rowIndex: rowIndex,
columnsStyle: props.columnsStyle,
columnStyle: style,
tableSize: props.size,
autoHeight: props.rowAutoHeight,
}),
onHeaderCell: () => ({
width: resizeWidth,
Expand DownExpand Up@@ -583,6 +637,7 @@ export function TableCompView(props: {
const compChildren = comp.children;
const style = compChildren.style.getView();
const rowStyle = compChildren.rowStyle.getView();
const rowAutoHeight = compChildren.rowAutoHeight.getView();
const columnsStyle = compChildren.columnsStyle.getView();
const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
Expand DownExpand Up@@ -610,7 +665,7 @@ export function TableCompView(props: {
size,
dynamicColumn,
dynamicColumnConfig,
columnsAggrData
columnsAggrData,
),
[
columnViews,
Expand DownExpand Up@@ -711,6 +766,7 @@ export function TableCompView(props: {
}
}}
rowColorFn={compChildren.rowColor.getView() as any}
rowHeightFn={compChildren.rowHeight.getView() as any}
{...compChildren.selection.getView()(onEvent)}
bordered={!compChildren.hideBordered.getView()}
onChange={(pagination, filters, sorter, extra) => {
Expand All@@ -722,6 +778,7 @@ export function TableCompView(props: {
viewModeResizable={compChildren.viewModeResizable.getView()}
dataSource={pageDataInfo.data}
size={compChildren.size.getView()}
rowAutoHeight={rowAutoHeight}
tableLayout="fixed"
loading={
loading ||
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -504,11 +504,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>

{["layout", "both"].includes(editorModeStatus) && (
<><Section name={"Table Style"}>
{comp.children.style.getPropertyView()}

{comp.children.style.getPropertyView()}
</Section>
<Section name={"Row Style"}>
{comp.children.rowStyle.getPropertyView()}
{comp.children.rowAutoHeight.getPropertyView()}
{comp.children.rowHeight.getPropertyView()}
{comp.children.rowColor.getPropertyView()}
</Section>
<Section name={"Column Style"}>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -54,14 +54,12 @@ const getStyle = (
return css`
background-color: ${style.toolbarBackground};
// Implement horizontal scrollbar and vertical page number selection is not blocked
// padding: ${position === "above" ? "13px 16px 313px 16px" : "313px 16px 13px 16px"};
// margin: ${position === "above" ? "0 0 -300px 0" : "-300px 0 0 0"};
padding: 13px 12px;
${fixedToolbar && `
position:sticky;
postion: -webkit-sticky;
z-index: 99;
`};
position: sticky;
postion: -webkit-sticky;
left: 0;

${fixedToolbar && `z-index: 99;`};
${fixedToolbar && position === 'below' && `bottom: 0;`};
${fixedToolbar && position === 'above' && `top: 0;` };

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