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

Feature: customise color property of toggle type cells (#630)

Browse source
This commit is contained in:
Navaneeth Pk 2021-08-28 20:57:10 +05:30 committed by GitHub
parent 48750bb8a9
commit 21fa8518ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -382,6 +382,7 @@ export function Table({
<Toggle
value={cellValue}
readOnly={!column.isEditable}
activeColor={column.activeColor}
onChange={(value) => {
handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
}}

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

@ -1,6 +1,6 @@
import React, { useState } from 'react';
export const Toggle = ({readOnly, value, onChange, options }) => {
export const Toggle = ({readOnly, value, onChange, activeColor, options }) => {
const [on, setOn] = useState(() => value)
const toggle = () => {
@ -16,6 +16,7 @@ export const Toggle = ({readOnly, value, onChange, options }) => {
className="form-check-input"
type="checkbox"
checked={on}
style={{ backgroundColor: activeColor}}
onClick={() => {if(!readOnly) toggle()}}
/>
</label>

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

@ -97,7 +97,7 @@ class Table extends React.Component {
columnPopover = (column, index) => {
return (
<Popover id="popover-basic-2">
<Popover id="popover-basic-2" className="shadow">
<Popover.Content>
<div className="field mb-2">
<label className="form-label">Column type</label>
@ -146,10 +146,25 @@ class Table extends React.Component {
e.stopPropagation();
this.onColumnItemChange(index, 'key', e.target.value);
}}
placeholder={column.name}
defaultValue={column.key}
/>
</div>
{true &&
<div>
<div className="field mb-2">
<Color
param={{ name: 'Active color' }}
paramType="properties"
componentMeta={{ properties: { color: { displayName: 'Active color'} } }}
definition={{ value: column.activeColor || '#3c92dc' }}
onChange={(name, value, color) => this.onColumnItemChange(index, 'activeColor', color)}
/>
</div>
</div>
}
{(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges' || column.columnType === 'radio') && (
<div>
<div className="field mb-2">