Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add toggle for indentation.

Browse source
This commit is contained in:
devanshu052000 2025-01-07 17:59:16 +05:30
parent f30eae7366
commit 8304a72458
4 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
View file

@ -267,6 +267,24 @@ export const PropertiesTabElements = ({
)}
</div>
)}
{column.columnType === 'json' && (
<div className="border mx-3 column-popover-card-ui" style={{ borderRadius: '6px', marginTop: '-8px' }}>
<div style={{ background: 'var(--surfaces-surface-02)', padding: '8px 12px' }}>
<ProgramaticallyHandleProperties
label="Indent"
currentState={currentState}
index={index}
darkMode={darkMode}
callbackFunction={onColumnItemChange}
property="jsonIndentation"
props={column}
component={component}
paramMeta={{ type: 'toggle', displayName: 'Indent' }}
paramType="properties"
/>
</div>
</div>
)}
<div className="border mx-3 column-popover-card-ui" style={{ borderRadius: '6px', marginTop: '-8px' }}>
<div style={{ background: 'var(--surfaces-surface-02)', padding: '8px 12px' }}>
<ProgramaticallyHandleProperties

9
frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
View file

@ -50,6 +50,8 @@ export const ProgramaticallyHandleProperties = ({
return props?.parseInUnixTimestamp;
case 'isDateSelectionEnabled':
return props?.isDateSelectionEnabled;
case 'jsonIndentation':
return props?.jsonIndentation;
default:
return;
}
@ -81,6 +83,9 @@ export const ProgramaticallyHandleProperties = ({
if (property === 'linkColor') {
return definitionObj?.value ?? '#1B1F24';
}
if (property === 'jsonIndentation') {
return definitionObj?.value ?? `{{true}}`;
}
return definitionObj?.value ?? `{{false}}`;
};
@ -111,7 +116,9 @@ export const ProgramaticallyHandleProperties = ({
const fxActiveFieldsPropExists = props?.hasOwnProperty('fxActiveFields') ?? false;
//to support backward compatibility, when fxActive is true for a particular column, we are passing all possible combinations which should render codehinter
const fxActive =
props?.fxActive && resolveReferences(props.fxActive) ? ['isEditable', 'columnVisibility', 'linkTarget'] : [];
props?.fxActive && resolveReferences(props.fxActive)
? ['isEditable', 'columnVisibility', 'jsonIndentation', 'linkTarget']
: [];
const checkFxActiveFieldIsArrray = (fxActiveFieldsProperty) => {
// adding error handling mechanism for fxActiveFieldsProperty , if props.fxActiveFields is array , then return props.fxActiveFields or else return [], this will make sure, fxActiveFields wil always be array

2
frontend/src/AppBuilder/Widgets/Table/Json.jsx
View file

@ -5,6 +5,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
const Json = ({
isEditable,
jsonIndentation,
darkMode,
handleCellValueChange,
cellTextColor,
@ -17,7 +18,6 @@ const Json = ({
cellSize,
maxRowHeightValue,
}) => {
const jsonIndentation = false;
const ref = React.useRef(null);
const [hovered, setHovered] = useState(false);

2
frontend/src/AppBuilder/Widgets/Table/columns/index.jsx
View file

@ -716,9 +716,11 @@ export default function generateColumnsData({
);
}
case 'json': {
const jsonIndentation = getResolvedValue(column?.jsonIndentation) ?? true;
return (
<Json
isEditable={isEditable}
jsonIndentation={jsonIndentation}
darkMode={darkMode}
handleCellValueChange={handleCellValueChange}
cellTextColor={cellTextColor}