Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Feature :: Table image column type addition (#4547)

Browse source 
* feat :: adding column type image

* feat :: adding image fit property
This commit is contained in:
Kiran Ashok 2022-10-31 14:12:57 +05:30 committed by GitHub
parent 50be9d34a3
commit 2dd9fef0b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 103 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/Editor/Components/Table/Table.jsx
View file

@ -791,7 +791,11 @@ export function Table({
{...cellProps}
style={{ ...cellProps.style, backgroundColor: cellBackgroundColor ?? 'inherit' }}
>
<div className="td-container">{cell.render('Cell')}</div>
<div
className={`td-container ${cell.column.columnType === 'image' && 'jet-table-image-column'}`}
>
{cell.render('Cell')}
</div>
</td>
);
})}

22
frontend/src/Editor/Components/Table/columns/index.jsx
View file

@ -35,7 +35,8 @@ export default function generateColumnsData({
columnType === 'multiselect' ||
columnType === 'badge' ||
columnType === 'badges' ||
columnType === 'radio'
columnType === 'radio' ||
columnType === 'image'
) {
columnOptions.selectOptions = [];
const values = resolveReferences(column.values, currentState, []);
@ -328,6 +329,25 @@ export default function generateColumnsData({
</div>
);
}
case 'image': {
return (
<div>
{cellValue && (
<img
src={cellValue}
style={{
pointerEvents: 'auto',
width: `${column?.width}px`,
height: `${column?.height}px`,
borderRadius: `${column?.borderRadius}%`,
objectFit: `${column?.objectFit}`,
}}
alt={cellValue}
/>
)}
</div>
);
}
case 'radio': {
return (
<div>

83
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -180,6 +180,7 @@ class TableComponent extends React.Component {
{ name: 'Multiselect', value: 'multiselect' },
{ name: 'Toggle switch', value: 'toggle' },
{ name: 'Date Picker', value: 'datepicker' },
{ name: 'Image', value: 'image' },
]}
value={column.columnType}
search={true}
@ -526,16 +527,80 @@ class TableComponent extends React.Component {
</div>
</div>
)}
{column.columnType === 'image' && (
<>
<div className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.borderRadius', 'Border radius')}</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.borderRadius}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'borderRadius', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'borderRadius')}
/>
</div>
<div className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.width', 'Width')}</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.width}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'width', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'width')}
/>
</div>
<div className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.height', 'Height')}</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.height}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'height', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'height')}
/>
</div>
<div className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.objectFit', 'Object fit')}</label>
<SelectSearch
className={`${this.props.darkMode ? 'select-search-dark' : 'select-search'}`}
options={[
{ name: 'Cover', value: 'cover' },
{ name: 'Contain', value: 'contain' },
{ name: 'Fill', value: 'fill' },
]}
value={column.objectFit}
search={true}
closeOnSelect={true}
onChange={(value) => {
this.onColumnItemChange(index, 'objectFit', value);
}}
filterOptions={fuzzySearch}
placeholder={this.props.t('Select') + '...'}
/>
</div>
</>
)}
<div className="form-check form-switch my-4">
<input
className="form-check-input"
type="checkbox"
onClick={() => this.onColumnItemChange(index, 'isEditable', !column.isEditable)}
checked={column.isEditable}
/>
<span className="form-check-label">{this.props.t('widget.Table.makeEditable', 'make editable')}</span>
</div>
{column.columnType !== 'image' && (
<div className="form-check form-switch my-4">
<input
className="form-check-input"
type="checkbox"
onClick={() => this.onColumnItemChange(index, 'isEditable', !column.isEditable)}
checked={column.isEditable}
/>
<span className="form-check-label">{this.props.t('widget.Table.makeEditable', 'make editable')}</span>
</div>
)}
</Popover.Content>
</Popover>
);

3
frontend/src/_styles/theme.scss
View file

@ -3436,6 +3436,9 @@ input:focus-visible {
background: transparent;
}
}
.jet-table-image-column{
margin: 0 auto;
}
.modal-backdrop.show {
opacity: 0.74;