Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-22 16:38:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Feature: Radio buttons as table cell type (#424)

Browse source
This commit is contained in:
Navaneeth Pk 2021-08-02 10:16:59 +05:30 committed by GitHub
parent f837b31e0b
commit 80da5ef884
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/Editor/Components/Table/Radio.jsx Normal file
View file

@ -0,0 +1,19 @@
import React, { useState } from 'react';
export const Radio = ({ options, value, onChange, readOnly }) => {
value = value || [];
return (
<div className="radio row">
<div>
{options.map((option) =>
<label class="form-check form-check-inline" onClick={() => { if(!readOnly) onChange(option.value); } }>
<input class="form-check-input" type="radio" checked={option.value === value} disabled={readOnly && (option.value !== value)}/>
<span class ="form-check-label">{option.name}</span>
</label>
)}
</div>
</div>
);
};

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

@ -17,6 +17,7 @@ import Papa from 'papaparse';
import { Pagination } from './Pagination';
import { CustomSelect } from './CustomSelect';
import { Tags } from './Tags';
import { Radio } from './Radio';
var _ = require('lodash');
@ -226,7 +227,7 @@ export function Table({
const columnType = column.columnType;
const columnOptions = {};
if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge' || columnType === 'badges') {
if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge' || columnType === 'badges' || columnType === 'radio') {
const values = resolveReferences(column.values, currentState) || [];
const labels = resolveReferences(column.labels, currentState, []) || [];
@ -349,6 +350,19 @@ export function Table({
/>
</div>
);
} if (columnType === 'radio') {
return (
<div>
<Radio
options={columnOptions.selectOptions}
value={cellValue}
readOnly={!column.isEditable}
onChange={(value) => {
handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
}}
/>
</div>
);
}
return cellValue || '';
}

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

@ -101,6 +101,7 @@ class Table extends React.Component {
{ name: 'Multiple badges', value: 'badges' },
{ name: 'Tags', value: 'tags' },
{ name: 'Dropdown', value: 'dropdown' },
{ name: 'Radio', value: 'radio' },
{ name: 'Multiselect', value: 'multiselect' }
]}
value={column.columnType}
@ -138,7 +139,7 @@ class Table extends React.Component {
/>
</div>
{(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges') && (
{(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges' || column.columnType === 'radio') && (
<div>
<div className="field mb-2">
<label className="form-label">Values</label>