aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/FontIconBox/FontIconBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/FontIconBox/FontIconBox.tsx')
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBox.tsx60
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;
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-25 11:24:38 +0000