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

[Bug fixed ] :[ Table widget ] Badge column type is always editable in table row regardless of the editable property (#4999)

Browse source 
* bug fixed: Badge column type is always editable in table row regardless of the editable property

* refactored the code
This commit is contained in:
Manish Kushare 2022-12-20 17:07:49 +05:30 committed by GitHub
parent 85cea9e6f1
commit 35fc8d160c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/Editor/Components/Table/CustomSelect.jsx
View file

@ -2,10 +2,19 @@ import React from 'react';
import SelectSearch from 'react-select-search';
import { useTranslation } from 'react-i18next';
export const CustomSelect = ({ options, value, multiple, onChange, darkMode }) => {
export const CustomSelect = ({ options, value, multiple, onChange, darkMode, isEditable }) => {
const { t } = useTranslation();
function renderValue(valueProps) {
if (!isEditable) {
const stringifyValue = String(valueProps.value);
const arrayOfValueProps = stringifyValue.includes(',') ? stringifyValue.split(', ') : stringifyValue.split(' ');
return arrayOfValueProps.map((value, index) => (
<span key={index} className="badge bg-blue-lt p-2 mx-1">
{value}
</span>
));
}
if (valueProps) {
const stringifyValue = String(valueProps.value);
const arrayOfValueProps = stringifyValue.includes(',') ? stringifyValue.split(', ') : stringifyValue.split(' ');

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

@ -313,6 +313,7 @@ export default function generateColumnsData({
handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
}}
darkMode={darkMode}
isEditable={column.isEditable}
/>
</div>
);

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

@ -256,7 +256,6 @@ class TableComponent extends React.Component {
}}
/>
</div>
{(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
<div>
@ -279,21 +278,23 @@ class TableComponent extends React.Component {
/>
</div>
<div className="field mb-2">
<label className="form-label">{this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.cellBackgroundColor ?? 'inherit'}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'cellBackgroundColor', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'cellBackgroundColor')}
popOverCallback={(showing) => {
this.setColumnPopoverRootCloseBlocker('cellBackgroundColor', showing);
}}
/>
</div>
<label className="form-label">
{this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}
</label>
<CodeHinter
currentState={this.props.currentState}
initialValue={column.cellBackgroundColor ?? 'inherit'}
theme={this.props.darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
placeholder={''}
onChange={(value) => this.onColumnItemChange(index, 'cellBackgroundColor', value)}
componentName={this.getPopoverFieldSource(column.columnType, 'cellBackgroundColor')}
popOverCallback={(showing) => {
this.setColumnPopoverRootCloseBlocker('cellBackgroundColor', showing);
}}
/>
</div>
{column.isEditable && (
<div>