Added toggle control

infexious-dev · Nov 8, 2023 · dbf19b0 · dbf19b0
1 parent 6ecd067
commit dbf19b0
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,7 @@ Updates include:
 >- Provided ability for columns (IColumnConfig) to have the "isSortedByDefault" prop. It allows the configured column to be sorted by default by showing the sort indicator when the grid is initially rendered. Note: this does not dynamically sort the grid, just a visual indicator of the current data and how it is sorted when grid initialises.
 >- ILinkOptions now has a new "isFocusable" prop which allows links in the grid to have their "data-is-focusable" controlled.
 >- Added "Checkbox" control to column's "inputType" (use via EditControlType enum). Use this to render a boolean-type field as a checkbox.
+>- Added "Toggle" control to column's "inputType" (use via EditControlType enum). Use this to render a boolean-type field as a toggle. Use new props "toggleOnText" and "toggleOffText" to control off/on toggle text.
 >- "dropdownValues" prop on IColumnConfig can now be a function that returns IDropdownOption[]. It accepts an "item" parameter so tailor-made dropdown options for an item are possible based on any its other properties.
 >- "editableOnlyInPanel" prop on IColumnConfig allows the column to only be editable in the panel (i.e. when the "Edit Panel" is open) when the "editable" prop is "true". "editable", "editableOnlyInPanel", and not "editable" columns on the grid now have CSS classes of "editable", "editable-panel-only", and "non-editable" added to their TooltipHost class names, respectively. TooltipHost class name is "cell-value".
 >- "panelEditDisabledUntil" prop on IColumnConfig allows custom disabling of fields in the add/edit panels based on other values.

diff --git a/src/Examples/gridconsumer/gridconfig.tsx b/src/Examples/gridconsumer/gridconfig.tsx
@@ -44,6 +44,22 @@ export const GridColumnConfig: IColumnConfig[] =
             disableSort: false,
             inputType: EditControlType.Checkbox
         },
+        {
+            key: 'toggle',
+            name: 'Toggle',
+            text: 'Toggle',
+            editable: true,
+            minWidth: 50,
+            maxWidth: 100,
+            isResizable: true,
+            includeColumnInExport: true,
+            includeColumnInSearch: true,
+            applyColumnFilter: true,
+            disableSort: false,
+            inputType: EditControlType.Toggle,
+            toggleOnText: "Yes",
+            toggleOffText: "No"
+        },
         {
             key: 'customerhovercol',
             name: 'Custom Hover Column',
@@ -290,6 +306,7 @@ export const GridColumnConfigCustomPanelEdit: IColumnConfig[] =
 export class GridItemsType {
     id: number;
     check: boolean;
+    toggle: boolean;
     customerhovercol: string;
     name: string;
     age: number;

diff --git a/src/Examples/gridconsumer/gridconsumer.tsx b/src/Examples/gridconsumer/gridconsumer.tsx
@@ -170,6 +170,7 @@ const Consumer = () => {
 
             newDummyData.id = i;
             newDummyData.check = !!GetRandomInt(0, 1);
+            newDummyData.toggle = !!GetRandomInt(0, 1);
             newDummyData.customerhovercol = 'Hover Me';
             newDummyData.name = 'Name' + GetRandomInt(1, 10);
             newDummyData.age = GetRandomInt(20, 40);

diff --git a/src/libs/editablegrid/addrowpanel.tsx b/src/libs/editablegrid/addrowpanel.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, DatePicker, Dropdown, IDropdownOption, ITag, Label, Position, PrimaryButton, SpinButton, Stack, TextField } from "@fluentui/react";
+import { Checkbox, DatePicker, Dropdown, IDropdownOption, ITag, Label, Position, PrimaryButton, SpinButton, Stack, TextField, Toggle } from "@fluentui/react";
 import React, { useEffect, useState } from "react";
 import { IColumnConfig } from "../types/columnconfigtype";
 import { DataType } from "../types/datatype";
@@ -91,7 +91,7 @@ const AddRowPanel = (props: Props) => {
                         placeholder="Select a date..."
                         ariaLabel="Select a date"
                         onSelectDate={(date) => onCellDateChange(date, column)}
-                        //value={props != null && props.panelValues != null ? new Date(props.panelValues[item.key]) : new Date()}
+                    //value={props != null && props.panelValues != null ? new Date(props.panelValues[item.key]) : new Date()}
                     />);
                     break;
                 case EditControlType.Picker:
@@ -131,6 +131,21 @@ const AddRowPanel = (props: Props) => {
                         </div>
                     );
                     break;
+                case EditControlType.Toggle:
+                    tmpRenderObj.push(
+                        <div key={column.key}>
+                            <Label>{column.text}</Label>
+                            <Toggle
+                                onText={column.toggleOnText}
+                                offText={column.toggleOffText}
+                                styles={{ root: { marginTop: 0 } }}
+                                disabled={!column.editable || (column.panelEditDisabledUntil ? column.panelEditDisabledUntil(columnValuesObj, column) : false)}
+                                checked={columnValuesObj[column.key].value || false}
+                                onChange={(ev, checked) => onCheckboxChange(checked, column)}
+                            />
+                        </div>
+                    );
+                    break;
                 case EditControlType.MultilineTextField:
                     tmpRenderObj.push(<TextField
                         key={column.key}

diff --git a/src/libs/editablegrid/columnupdatedialog.tsx b/src/libs/editablegrid/columnupdatedialog.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { Checkbox, DatePicker, DefaultButton, Dialog, DialogFooter, Dropdown, IDropdownOption, IDropdownStyles, IStackTokens, ITag, ITextFieldStyles, Label, mergeStyleSets, PrimaryButton, Stack, TextField } from "@fluentui/react";
+import { Checkbox, DatePicker, DefaultButton, Dialog, DialogFooter, Dropdown, IDropdownOption, IDropdownStyles, IStackTokens, ITag, ITextFieldStyles, Label, mergeStyleSets, PrimaryButton, Stack, TextField, Toggle } from "@fluentui/react";
 import React, { useEffect, useState } from "react";
 import { IColumnConfig } from "../types/columnconfigtype";
 import { EditControlType } from "../types/editcontroltype";
@@ -203,6 +203,20 @@ const ColumnUpdateDialog = (props: Props) => {
                             />
                         </div>
                     );
+                case EditControlType.Toggle:
+                    return (
+                        <div key={item.key}>
+                            <Label>{item.text}</Label>
+                            <Toggle
+                                onText={item.toggleOnText}
+                                offText={item.toggleOffText}
+                                styles={{ root: { marginTop: 0 } }}
+                                disabled={!item.editable}
+                                checked={columnValuesObj[item.key].value || false}
+                                onChange={(ev, checked) => onCheckboxChange(checked, item)}
+                            />
+                        </div>
+                    );
                 case EditControlType.MultilineTextField:
                     return (<TextField
                         errorMessage={columnValuesObj[item.key].error}

diff --git a/src/libs/editablegrid/editablegrid.tsx b/src/libs/editablegrid/editablegrid.tsx
@@ -12,7 +12,7 @@ import {
 } from 'office-ui-fabric-react/lib/DetailsList';
 import { MarqueeSelection } from '@fluentui/react/lib/MarqueeSelection';
 import { IconButton } from '@fluentui/react/lib/components/Button/IconButton/IconButton';
-import { DefaultButton, PrimaryButton, Dropdown, IDropdownOption, DialogFooter, Announced, Dialog, SpinButton, DatePicker, ScrollablePane, ScrollbarVisibility, Sticky, StickyPositionType, IRenderFunction, mergeStyles, Spinner, SpinnerSize, TagPicker, ITag, IBasePickerSuggestionsProps, IInputProps, HoverCard, HoverCardType, Link, Checkbox } from '@fluentui/react';
+import { DefaultButton, PrimaryButton, Dropdown, IDropdownOption, DialogFooter, Announced, Dialog, SpinButton, DatePicker, ScrollablePane, ScrollbarVisibility, Sticky, StickyPositionType, IRenderFunction, mergeStyles, Spinner, SpinnerSize, TagPicker, ITag, IBasePickerSuggestionsProps, IInputProps, HoverCard, HoverCardType, Link, Checkbox, Toggle } from '@fluentui/react';
 import { TextField } from '@fluentui/react/lib/TextField';
 import { IColumnConfig } from '../types/columnconfigtype';
 import { controlClass, dropdownStyles, GetDynamicSpanStyles, textFieldStyles } from './editablegridstyles';
@@ -1372,7 +1372,7 @@ const EditableGrid = (props: Props) => {
                     const isEditableInPanelOnly = isEditableInGrid && column.editableOnlyInPanel;
                     const rowInEdit = activateCellEdit && activateCellEdit[Number(item['_grid_row_id_'])!] && activateCellEdit[Number(item['_grid_row_id_'])!]['isActivated'];
                     const tooltipText =
-                        props.cellEditTooltip?.showTooltip && !rowInEdit && !editMode && isEditableInGrid && !isEditableInPanelOnly && column.inputType !== EditControlType.Checkbox ?
+                        props.cellEditTooltip?.showTooltip && !rowInEdit && !editMode && isEditableInGrid && !isEditableInPanelOnly && column.inputType !== EditControlType.Checkbox && column.inputType !== EditControlType.Toggle ?
                             _shouldRenderSpan ?
                                 props.enableSingleClickCellEdit ?
                                     "Click to edit" :
@@ -1567,6 +1567,45 @@ const EditableGrid = (props: Props) => {
                                     />
                                 )
                             }</TooltipHost>
+                        case EditControlType.Toggle:
+                            let isToggleDisabled: boolean = false;
+
+                            isToggleDisabled = !props.enableCellEdit || !column.editable || column.editableOnlyInPanel || item._is_muted_ || !item._can_edit_row_;
+
+                            if (column.editable && !column.editableOnlyInPanel && props.enableRowEdit && (activateCellEdit && activateCellEdit[Number(item['_grid_row_id_'])!] && activateCellEdit[Number(item['_grid_row_id_'])!]['isActivated'])) {
+                                isToggleDisabled = false;
+                            }
+
+                            return <TooltipHost {...tooltipHostProps} >{
+                                (column?.hoverComponentOptions?.enable ?
+                                    (<HoverCard
+                                        type={HoverCardType.plain}
+                                        plainCardProps={{
+                                            onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                        }}
+                                        instantOpenOnClick
+                                    >
+                                        <Toggle
+                                            onText={column.toggleOnText}
+                                            offText={column.toggleOffText}
+                                            ariaLabel={column.key}
+                                            disabled={isToggleDisabled}
+                                            checked={activateCellEdit[rowNum!].properties[column.key].value || false}
+                                            onChange={(ev, checked) => onCheckboxChange(checked, rowNum!, column, item)}
+                                        />
+
+                                    </HoverCard>)
+                                    :
+                                    <Toggle
+                                        onText={column.toggleOnText}
+                                        offText={column.toggleOffText}
+                                        ariaLabel={column.key}
+                                        disabled={isToggleDisabled}
+                                        checked={activateCellEdit[rowNum!].properties[column.key].value || false}
+                                        onChange={(ev, checked) => onCheckboxChange(checked, rowNum!, column, item)}
+                                    />
+                                )
+                            }</TooltipHost>
                         case EditControlType.Link:
                             return <span className='span-value'>{
                                 (column?.hoverComponentOptions?.enable ?

diff --git a/src/libs/editablegrid/editpanel.tsx b/src/libs/editablegrid/editpanel.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { Checkbox, DatePicker, Dropdown, IDropdownOption, ITag, Label, PrimaryButton, Stack, TextField } from "@fluentui/react";
+import { Checkbox, DatePicker, Dropdown, IDropdownOption, ITag, Label, PrimaryButton, Stack, TextField, Toggle } from "@fluentui/react";
 import React, { useEffect, useState } from "react";
 import { IColumnConfig } from "../types/columnconfigtype";
 import { DataType } from "../types/datatype";
@@ -153,6 +153,21 @@ const EditPanel = (props: Props) => {
                         </div>
                     );
                     break;
+                case EditControlType.Toggle:
+                    tmpRenderObj.push(
+                        <div key={column.key}>
+                            <Label>{column.text}</Label>
+                            <Toggle
+                                onText={column.toggleOnText}
+                                offText={column.toggleOffText}
+                                styles={{ root: { marginTop: 0 } }}
+                                disabled={!column.editable || (column.panelEditDisabledUntil ? column.panelEditDisabledUntil(columnValuesObj, column) : false)}
+                                checked={columnValuesObj[column.key].value || false}
+                                onChange={(ev, checked) => onCheckboxChange(checked, column)}
+                            />
+                        </div>
+                    );
+                    break;
                 case EditControlType.MultilineTextField:
                     tmpRenderObj.push(<TextField
                         key={column.key}

diff --git a/src/libs/types/columnconfigtype.tsx b/src/libs/types/columnconfigtype.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ConstrainMode, IColumn, IDetailsHeaderProps } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsList.types';
+import { IColumn } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsList.types';
 import { IDropdownOption } from "office-ui-fabric-react";
 import { CalculationType } from "./calculationtype";
 import { ICellStyleRulesType, StringOperators } from './cellstyleruletype';
@@ -30,6 +30,8 @@ export interface IColumnConfig extends IColumn {
     linkOptions?: ILinkOptions;
     onCustomRender?: (item?: any, index?: number, column?: IColumn) => any;
     isSortedByDefault?: boolean;
+    toggleOnText?: string;
+    toggleOffText?: string;
 };
 
 export interface ILinkOptions {

diff --git a/src/libs/types/editcontroltype.tsx b/src/libs/types/editcontroltype.tsx
@@ -10,5 +10,6 @@ export enum EditControlType {
     DateTime,
     Picker,
     Checkbox,
+    Toggle,
     Link
 }