dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-28 23:26:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix formview style

Browse Source
This commit is contained in:
Jan Prochazka
2021-01-23 20:40:49 +01:00
parent e253cfb1b0
commit 213ee01fa6
1 changed files with 98 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
packages/web/src/formview/FormView.js
View File

@@ -26,6 +26,14 @@ const Table = styled.table`
outline: none; outline: none;
`; `;
const OuterWrapper = styled.div`
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
`;
const Wrapper = styled.div` const Wrapper = styled.div`
position: absolute; position: absolute;
left: 0; left: 0;
@@ -477,97 +485,99 @@ export default function FormView(props) {
if (!formDisplay || !formDisplay.isLoadedCorrectly) return toolbar; if (!formDisplay || !formDisplay.isLoadedCorrectly) return toolbar;
return ( return (
<Wrapper ref={wrapperRef} onContextMenu={handleContextMenu}> <OuterWrapper>
{columnChunks.map((chunk, chunkIndex) => ( <Wrapper ref={wrapperRef} onContextMenu={handleContextMenu}>
<Table key={chunkIndex} onMouseDown={handleTableMouseDown}> {columnChunks.map((chunk, chunkIndex) => (
{chunk.map((col, rowIndex) => ( <Table key={chunkIndex} onMouseDown={handleTableMouseDown}>
<TableRow key={col.uniqueName} theme={theme} ref={headerRowRef} style={{ height: `${rowHeight}px` }}> {chunk.map((col, rowIndex) => (
<TableHeaderCell <TableRow key={col.uniqueName} theme={theme} ref={headerRowRef} style={{ height: `${rowHeight}px` }}>
theme={theme} <TableHeaderCell
data-row={rowIndex} theme={theme}
data-col={chunkIndex * 2} data-row={rowIndex}
// @ts-ignore data-col={chunkIndex * 2}
isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2} // @ts-ignore
ref={element => setCellRef(rowIndex, chunkIndex * 2, element)} isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
> ref={element => setCellRef(rowIndex, chunkIndex * 2, element)}
<ColumnLabelMargin >
{...col} <ColumnLabelMargin
headerText={col.columnName} {...col}
style={{ marginLeft: (col.uniquePath.length - 1) * 20 }} headerText={col.columnName}
extInfo={col.foreignKey ? ` -> ${col.foreignKey.refTableName}` : null} style={{ marginLeft: (col.uniquePath.length - 1) * 20 }}
/> extInfo={col.foreignKey ? ` -> ${col.foreignKey.refTableName}` : null}
{col.foreignKey && (
<ShowFormButton
theme={theme}
className="buttonLike"
onClick={e => {
e.stopPropagation();
formDisplay.toggleExpandedColumn(col.uniqueName);
}}
>
<ExpandIcon isExpanded={formDisplay.isExpandedColumn(col.uniqueName)} />
</ShowFormButton>
)}
</TableHeaderCell>
<TableBodyCell
theme={theme}
data-row={rowIndex}
data-col={chunkIndex * 2 + 1}
// @ts-ignore
isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
ref={element => setCellRef(rowIndex, chunkIndex * 2 + 1, element)}
>
{inplaceEditorState.cell &&
rowIndex == inplaceEditorState.cell[0] &&
chunkIndex * 2 + 1 == inplaceEditorState.cell[1] ? (
<InplaceEditor
widthPx={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
inplaceEditorState={inplaceEditorState}
dispatchInsplaceEditor={dispatchInsplaceEditor}
cellValue={rowData[col.uniqueName]}
onSetValue={value => {
former.setCellValue(col.uniqueName, value);
}}
// grider={grider}
// rowIndex={rowIndex}
// uniqueName={col.uniqueName}
/> />
) : (
<> {col.foreignKey && (
{rowData && ( <ShowFormButton
<CellFormattedValue value={rowData[col.uniqueName]} dataType={col.dataType} theme={theme} /> theme={theme}
)} className="buttonLike"
{!!col.hintColumnName && onClick={e => {
rowData && e.stopPropagation();
!(rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) && ( formDisplay.toggleExpandedColumn(col.uniqueName);
<HintSpan>{rowData[col.hintColumnName]}</HintSpan> }}
>
<ExpandIcon isExpanded={formDisplay.isExpandedColumn(col.uniqueName)} />
</ShowFormButton>
)}
</TableHeaderCell>
<TableBodyCell
theme={theme}
data-row={rowIndex}
data-col={chunkIndex * 2 + 1}
// @ts-ignore
isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
ref={element => setCellRef(rowIndex, chunkIndex * 2 + 1, element)}
>
{inplaceEditorState.cell &&
rowIndex == inplaceEditorState.cell[0] &&
chunkIndex * 2 + 1 == inplaceEditorState.cell[1] ? (
<InplaceEditor
widthPx={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
inplaceEditorState={inplaceEditorState}
dispatchInsplaceEditor={dispatchInsplaceEditor}
cellValue={rowData[col.uniqueName]}
onSetValue={value => {
former.setCellValue(col.uniqueName, value);
}}
// grider={grider}
// rowIndex={rowIndex}
// uniqueName={col.uniqueName}
/>
) : (
<>
{rowData && (
<CellFormattedValue value={rowData[col.uniqueName]} dataType={col.dataType} theme={theme} />
)} )}
{col.foreignKey && rowData && rowData[col.uniqueName] && ( {!!col.hintColumnName &&
<ShowFormButton rowData &&
theme={theme} !(rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) && (
className="buttonLike" <HintSpan>{rowData[col.hintColumnName]}</HintSpan>
onClick={e => { )}
e.stopPropagation(); {col.foreignKey && rowData && rowData[col.uniqueName] && (
openReferenceForm(rowData, col, openNewTab, conid, database); <ShowFormButton
}} theme={theme}
> className="buttonLike"
<FontIcon icon="icon form" /> onClick={e => {
</ShowFormButton> e.stopPropagation();
)} openReferenceForm(rowData, col, openNewTab, conid, database);
</> }}
)} >
</TableBodyCell> <FontIcon icon="icon form" />
</TableRow> </ShowFormButton>
))} )}
</Table> </>
))} )}
</TableBodyCell>
</TableRow>
))}
</Table>
))}
<FocusField type="text" ref={focusFieldRef} onKeyDown={handleKeyDown} /> <FocusField type="text" ref={focusFieldRef} onKeyDown={handleKeyDown} />
{toolbar}
</Wrapper>
{rowCountInfo && <RowCountLabel theme={theme}>{rowCountInfo}</RowCountLabel>} {rowCountInfo && <RowCountLabel theme={theme}>{rowCountInfo}</RowCountLabel>}
</OuterWrapper>
{toolbar}
</Wrapper>
); );
} }