diff options
| author | bobzel <zzzman@gmail.com> | 2024-04-21 19:03:49 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2024-04-21 19:03:49 -0400 |
| commit | 939e18624af4252551f38c43335ee8ef0acd144c (patch) | |
| tree | d4e7a8dd4db05737ec1343ff8d80611537bde65b /src/client/views/nodes/FontIconBox/FontIconBox.tsx | |
| parent | 57d9c12d6b88d6814e468aca93b9bf809eabd9ce (diff) | |
more lint cleanup
Diffstat (limited to 'src/client/views/nodes/FontIconBox/FontIconBox.tsx')
| -rw-r--r-- | src/client/views/nodes/FontIconBox/FontIconBox.tsx | 60 |
1 files changed, 25 insertions, 35 deletions
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 70fc63115..79738c452 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -1,13 +1,14 @@ +/* eslint-disable react/jsx-props-no-spreading */ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, ColorPicker, Dropdown, DropdownType, EditableText, IconButton, IListItemProps, MultiToggle, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components'; +import { Button, ColorPicker, Dropdown, DropdownType, IconButton, IListItemProps, MultiToggle, NumberDropdown, NumberDropdownType, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { ClientUtils, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc'; import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, Utils } from '../../../../Utils'; -import { ClientUtils, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; +import { emptyFunction } from '../../../../Utils'; import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; import { SelectionManager } from '../../../util/SelectionManager'; import { SettingsManager } from '../../../util/SettingsManager'; @@ -34,7 +35,7 @@ export enum ButtonType { NumberSliderButton = 'numSliderBtn', NumberDropdownButton = 'numDropdownBtn', NumberInlineButton = 'numInlineBtn', - EditableText = 'editableText', + EditText = 'editableText', } export interface ButtonProps extends FieldViewProps { @@ -83,7 +84,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { if (iconFalse) { icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as any; if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />; - else return null; + return null; } icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any; return !icon ? null : icon === 'pres-trail' ? TrailsIcon(color) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />; @@ -109,7 +110,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { * - Color button * - Dropdown list * - Number button - **/ + * */ _batch: UndoManager.Batch | undefined = undefined; /** @@ -118,17 +119,12 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { @computed get numberDropdown() { let type: NumberDropdownType; switch (this.type) { - case ButtonType.NumberDropdownButton: - type = 'dropdown'; - break; - case ButtonType.NumberInlineButton: - type = 'input'; - break; + case ButtonType.NumberDropdownButton: type = 'dropdown'; break; + case ButtonType.NumberInlineButton: type = 'input'; break; case ButtonType.NumberSliderButton: - default: - type = 'slider'; + default: type = 'slider'; break; - } + } // prettier-ignore const numScript = (value?: number) => ScriptCast(this.Document.script).script.run({ this: this.Document, self: this.Document, value, _readOnly_: value === undefined }); const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); // Script for checking the outcome of the toggle @@ -155,12 +151,10 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { setupMoveUpEvents( this, e, - (e: PointerEvent) => { - return ScriptCast(this.Document.onDragScript)?.script.run({ this: this.Document, self: this.Document, value: { doc: value, e } }).result; - }, + () => ScriptCast(this.Document.onDragScript)?.script.run({ this: this.Document, self: this.Document, value: { doc: value, e } }).result, emptyFunction, emptyFunction - ); + ); // prettier-ignore return false; }; @@ -189,7 +183,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { } return ( <Popup - icon={<FontAwesomeIcon size={'1x'} icon={icon} />} + icon={<FontAwesomeIcon size="1x" icon={icon} />} text={text} type={Type.TERT} color={SettingsManager.userColor} @@ -275,8 +269,8 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { // Determine the type of toggle button const tooltip: string = StrCast(this.Document.toolTip); - const script = ScriptCast(this.Document.onClick); - const toggleStatus = script ? script.script.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result : false; + // const script = ScriptCast(this.Document.onClick); + // const toggleStatus = script ? script.script.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result : false; // Colors const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); const items = DocListCast(this.dataDoc.data); @@ -313,7 +307,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { const toggleStatus = script?.script.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result ?? false; // Colors const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); - const backgroundColor = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor); + // const backgroundColor = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor); return ( <Toggle @@ -323,7 +317,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { toggleStatus={toggleStatus} text={buttonText} color={color} - //background={SettingsManager.userBackgroundColor} + // background={SettingsManager.userBackgroundColor} icon={this.Icon(color)!} label={this.label} onPointerDown={e => @@ -332,10 +326,10 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { e, returnTrue, emptyFunction, - action((e, doubleTap) => { + action((clickEv, doubleTap) => { (!doubleTap || !double) && script?.script.run({ this: this.Document, self: this.Document, value: !toggleStatus, _readOnly_: false }); doubleTap && double?.script.run({ this: this.Document, self: this.Document, value: !toggleStatus, _readOnly_: false }); - this._hackToRecompute = this._hackToRecompute + 1; + this._hackToRecompute += 1; }) ) } @@ -348,27 +342,22 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { */ @computed get defaultButton() { const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color); - const backgroundColor = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor); const tooltip: string = StrCast(this.Document.toolTip); return <IconButton tooltip={tooltip} icon={this.Icon(color)!} label={this.label} />; } @computed get editableText() { - // Script for running the toggle const script = ScriptCast(this.Document.script); - // Function to run the script const checkResult = script?.script.run({ this: this.Document, self: this.Document, value: '', _readOnly_: true }).result; - const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ this: this.Document, self: this.Document, value, _readOnly_: false }).result; - - return <EditableText editing={false} setEditing={(editing: boolean) => {}} />; + const setValue = (value: string): boolean => script?.script.run({ this: this.Document, self: this.Document, value, _readOnly_: false }).result; return ( <div className="menuButton editableText"> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} /> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon="lock" /> <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}> - <EditableView GetValue={() => script?.script.run({ this: this.Document, self: this.Document, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} /> + <EditableView GetValue={() => script?.script.run({ this: this.Document, self: this.Document, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine contents={checkResult} /> </div> </div> ); @@ -384,7 +373,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { case ButtonType.NumberDropdownButton: case ButtonType.NumberInlineButton: case ButtonType.NumberSliderButton: return this.numberDropdown; - case ButtonType.EditableText: return this.editableText; + case ButtonType.EditText: return this.editableText; case ButtonType.DropdownList: return this.dropdownListButton; case ButtonType.ColorButton: return this.colorButton; case ButtonType.MultiToggleButton: return this.multiToggleButton; @@ -395,6 +384,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { background={SettingsManager.userBackgroundColor} text={StrCast(this.dataDoc.buttonText)}/>; case ButtonType.MenuButton: return <IconButton {...btnProps} color={color} background={SettingsManager.userBackgroundColor} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; + default: } return this.defaultButton; }; |
