-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat/SFINT-3327: Add DisableableToggleActionButton (#85)
* feat(SFINT-3327): Add enable and disable support for ActionButton. * Add enable method override. UT [x] * Add disable method override. UT [x] * Modify click event listener behavior to process the click only if enabled. * feat(SFINT-3327): Add disable styling. - [A] Section for disabled button in dev pages - [A] Styling for disabled buttons - [M] Disable/Enable now affect the disabled attributes of the element directly too * feat(SFINT-3327): Biggo refacto * feat(SFINT-3327): clean html * feat(SFINT-3327): finish cleanup of actionbutton * chore(SFINT-3327): Buncho o' doc and small refacto * chore(SFINT-3327): Simplify * feat(SFINT-3327): Improve typings * test(SFINT-3327): UT * feat(SFINT-3327): Add loggingName for states * feat(SFINT-3327): More logs and checks * review * review * review * empty commit for CI unstuck * empty commit for CI unstuck-lint * feat(SFINT-3327): DisableableToggleActionButton * feat(SFINT-3327): Adapt logging name and new interfaces * ongoin' * cleaning + specs * test states * test(SFINT-3327): Complete UT * feat(SFINT-3327): Ensure button is exported properly + page for test * unactivated->deactivated
- Loading branch information
1 parent
39410b2
commit 3c3a73c
Showing
13 changed files
with
763 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| @import './ActionButton.scss'; | ||
| @import '../../sass/Variables.scss'; | ||
|
|
||
| $disable-color: $primary-color-light; | ||
|
|
||
| button.CoveoActionButton.coveo-actionbutton.coveo-actionbutton-disabled { | ||
| background-color: $primary-color-lightest; | ||
| border-color: $disable-color; | ||
|
|
||
| .coveo-actionbutton_icon { | ||
| svg { | ||
| fill: $disable-color; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { StatefulActionButton, IStatefulActionButtonOptionsWithIcon } from './StatefulActionButton'; | ||
|
|
||
| export interface IDisableableButtonOptions { | ||
| disabledIcon: string; | ||
| disabledTooltip: string; | ||
| } | ||
|
|
||
| export interface IDisableableButton { | ||
| options: IDisableableButtonOptions; | ||
| } | ||
|
|
||
| export class DisabledState implements IStatefulActionButtonOptionsWithIcon { | ||
| static DISABLED_CLASS_NAME = 'coveo-actionbutton-disabled'; | ||
| public readonly onStateEntry: (this: StatefulActionButton) => void; | ||
| public readonly onStateExit: (this: StatefulActionButton) => void; | ||
| public readonly click: () => void; | ||
| public readonly icon: string; | ||
| public readonly tooltip: string; | ||
| public readonly name = 'DisabledState'; | ||
|
|
||
| constructor(disabledButton: IDisableableButton) { | ||
| this.onStateEntry = function () { | ||
| this.element.classList.add(DisabledState.DISABLED_CLASS_NAME); | ||
| this.element.setAttribute('disabled', ''); | ||
| }; | ||
| this.onStateExit = function () { | ||
| this.element.classList.remove(DisabledState.DISABLED_CLASS_NAME); | ||
| this.element.removeAttribute('disabled'); | ||
| }; | ||
| this.click = () => {}; | ||
| this.icon = disabledButton.options.disabledIcon; | ||
| this.tooltip = disabledButton.options.disabledTooltip; | ||
| } | ||
| } |
120 changes: 120 additions & 0 deletions
120
src/components/ActionButton/DisableableToggleActionButton.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import { ComponentOptions, IResultsComponentBindings, Component, Initialization } from 'coveo-search-ui'; | ||
| import { StatefulActionButton } from './StatefulActionButton'; | ||
| import { | ||
| ToggleActivatedState as ActivatedState, | ||
| ToggleDeactivatedState as DeactivatedState, | ||
| IToggleableButton, | ||
| IToggleableButtonOptions, | ||
| } from './ToggleableButton'; | ||
| import { IDisableableButton, IDisableableButtonOptions, DisabledState } from './DisableableButton'; | ||
| import { ToggleActionButton } from './ToggleActionButton'; | ||
|
|
||
| export interface IDisableableToggleActionButtonOptions extends IToggleableButtonOptions, IDisableableButtonOptions {} | ||
|
|
||
| export class DisableableToggleActionButton extends Component implements IToggleableButton, IDisableableButton { | ||
| static ID = 'DisableableToggleActionButton'; | ||
| static ACTIVATED_CLASS_NAME = 'coveo-toggleactionbutton-activated'; | ||
|
|
||
| private innerStatefulActionButton: StatefulActionButton; | ||
| private activatedState: ActivatedState; | ||
| private deactivatedState: DeactivatedState; | ||
| private disabledState: DisabledState; | ||
|
|
||
| static options: IDisableableToggleActionButtonOptions = { | ||
| ...ToggleActionButton.options, | ||
| disabledTooltip: ComponentOptions.buildStringOption(), | ||
| disabledIcon: ComponentOptions.buildStringOption(), | ||
| }; | ||
|
|
||
| constructor(public element: HTMLElement, public options: IDisableableToggleActionButtonOptions, public bindings?: IResultsComponentBindings) { | ||
| super(element, DisableableToggleActionButton.ID, bindings); | ||
| this.options = ComponentOptions.initComponentOptions(element, DisableableToggleActionButton, options); | ||
|
|
||
| this.createInnerButton(bindings); | ||
| } | ||
|
|
||
| /** | ||
| * Indicates whether the toggle button is in the activated state. | ||
| */ | ||
| public isActivated(): boolean { | ||
| return this.innerStatefulActionButton.getCurrentState() === this.activatedState; | ||
| } | ||
|
|
||
| /** | ||
| * Indicates whether the disableable toggle button is in the disable state. | ||
| */ | ||
| public isDisabled(): boolean { | ||
| return this.innerStatefulActionButton.getCurrentState() === this.disabledState; | ||
| } | ||
|
|
||
| /** | ||
| * Sets the toggle button to the specified state. | ||
| * @param activated Whether the button is activated. | ||
| */ | ||
| public setActivated(activated: boolean): void { | ||
| if (this.isDisabled() && !activated) { | ||
| this.innerStatefulActionButton.switchTo(this.deactivatedState); | ||
| } | ||
| if (!this.isDisabled() && activated !== this.isActivated()) { | ||
| this.innerStatefulActionButton.switchTo(activated ? this.activatedState : this.deactivatedState); | ||
| } | ||
| } | ||
|
|
||
| public setEnabled(enabled: boolean): void { | ||
| if (enabled) { | ||
| this.enable(); | ||
| } else { | ||
| this.disable(); | ||
| } | ||
| } | ||
|
|
||
| public disable(): void { | ||
| if (this.isDisabled()) { | ||
| return; | ||
| } | ||
| if (this.isActivated()) { | ||
| this.innerStatefulActionButton.switchTo(this.deactivatedState); | ||
| } | ||
| this.innerStatefulActionButton.switchTo(this.disabledState); | ||
| } | ||
|
|
||
| public enable(): void { | ||
| if (this.isDisabled()) { | ||
| this.innerStatefulActionButton.switchTo(this.deactivatedState); | ||
| } | ||
| } | ||
|
|
||
| public onClick(): void { | ||
| if (this.isDisabled()) { | ||
| return; | ||
| } | ||
| this.setActivated(!this.isActivated()); | ||
|
|
||
| if (this.options.click) { | ||
| this.options.click(); | ||
| } | ||
| } | ||
|
|
||
| private createInnerButton(bindings?: IResultsComponentBindings): void { | ||
| this.deactivatedState = new DeactivatedState(this); | ||
| this.disabledState = new DisabledState(this); | ||
| this.activatedState = new ActivatedState(this); | ||
|
|
||
| this.innerStatefulActionButton = new StatefulActionButton( | ||
| this.element, | ||
| { | ||
| initialState: this.deactivatedState, | ||
| states: [this.deactivatedState, this.activatedState, this.disabledState], | ||
| allowedTransitions: [ | ||
| { from: this.deactivatedState, to: this.disabledState }, | ||
| { from: this.disabledState, to: this.deactivatedState }, | ||
| { from: this.deactivatedState, to: this.activatedState }, | ||
| { from: this.activatedState, to: this.deactivatedState }, | ||
| ], | ||
| }, | ||
| bindings | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| Initialization.registerAutoCreateComponent(DisableableToggleActionButton); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { StatefulActionButton, IStatefulActionButtonOptionsWithIcon } from './StatefulActionButton'; | ||
|
|
||
| export interface IToggleableButtonOptions { | ||
| activateIcon: string; | ||
| activateTooltip: string; | ||
| deactivateIcon: string; | ||
| deactivateTooltip: string; | ||
| click?: () => void; | ||
| activate?: () => void; | ||
| deactivate?: () => void; | ||
| } | ||
|
|
||
| export interface IToggleableButton { | ||
| options: IToggleableButtonOptions; | ||
| onClick: () => void; | ||
| } | ||
|
|
||
| export class ToggleDeactivatedState implements IStatefulActionButtonOptionsWithIcon { | ||
| public readonly name = 'ToggleDeactivatedState'; | ||
| public readonly icon: string; | ||
| public readonly tooltip: string; | ||
| public readonly click: { (): void; (): void; (): void }; | ||
| constructor(toggleableButton: IToggleableButton) { | ||
| this.icon = toggleableButton.options.activateIcon; | ||
| this.tooltip = toggleableButton.options.activateTooltip; | ||
| this.click = () => toggleableButton.onClick(); | ||
| } | ||
| } | ||
|
|
||
| export class ToggleActivatedState implements IStatefulActionButtonOptionsWithIcon { | ||
| static ACTIVATED_CLASS_NAME = 'coveo-toggleactionbutton-activated'; | ||
| public readonly name = 'ToggleActivatedState'; | ||
| public readonly onStateEntry: (this: StatefulActionButton) => void; | ||
| public readonly onStateExit: (this: StatefulActionButton) => void; | ||
| public readonly click: () => void; | ||
| public readonly icon: string; | ||
| public readonly tooltip: string; | ||
| constructor(toggleableButton: IToggleableButton) { | ||
| this.onStateEntry = function () { | ||
| this.element.classList.add(ToggleActivatedState.ACTIVATED_CLASS_NAME); | ||
| this.element.setAttribute('aria-pressed', 'true'); | ||
| toggleableButton.options.activate?.apply(toggleableButton); | ||
| }; | ||
| this.onStateExit = function () { | ||
| this.element.classList.remove(ToggleActivatedState.ACTIVATED_CLASS_NAME); | ||
| this.element.setAttribute('aria-pressed', 'false'); | ||
| toggleableButton.options.deactivate?.apply(toggleableButton); | ||
| }; | ||
| this.click = () => toggleableButton.onClick(); | ||
| this.icon = toggleableButton.options.deactivateIcon; | ||
| this.tooltip = toggleableButton.options.deactivateTooltip; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.