chore(checkbox): fixed onchanges

radix-ng · Jun 20, 2024 · 0ab2d3f · 0ab2d3f
1 parent 6a2ed10
commit 0ab2d3f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/packages/primitives/checkbox/src/checkbox.directive.ts b/packages/primitives/checkbox/src/checkbox.directive.ts
@@ -4,7 +4,9 @@ import {
  EventEmitter,
  HostListener,
  Input,
- Output
+ OnChanges,
+ Output,
+ SimpleChanges
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -28,7 +30,7 @@ export type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';
  '[attr.data-state]': 'state'
  }
 })
-export class RdxCheckboxDirective implements ControlValueAccessor {
+export class RdxCheckboxDirective implements ControlValueAccessor, OnChanges {
  /**
  * Defines whether the checkbox is checked.
  */
@@ -37,8 +39,7 @@ export class RdxCheckboxDirective implements ControlValueAccessor {
  /**
  * Defines whether the checkbox is indeterminate.
  */
- @Input({ transform: booleanAttribute })
- indeterminate = false;
+ @Input({ transform: booleanAttribute }) indeterminate = false;
 
  /**
  * Defines whether the checkbox is disabled.
@@ -87,11 +88,14 @@ export class RdxCheckboxDirective implements ControlValueAccessor {
 
  @HostListener('click')
  onClick(): void {
+ if (this.disabled) {
+ return;
+ }
+
  this.checked = this.indeterminate ? true : !this.checked;
  this.checkedChange.emit(this.checked);
  this.onChange?.(this.checked);
 
- // if the checkbox was indeterminate, it isn't anymore
  if (this.indeterminate) {
  this.indeterminate = false;
  this.indeterminateChange.emit(this.indeterminate);
@@ -103,6 +107,15 @@ export class RdxCheckboxDirective implements ControlValueAccessor {
  this.onTouched?.();
  }
 
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['checked'] && !changes['checked'].isFirstChange()) {
+ this.checkedChange.emit(this.checked);
+ }
+ if (changes['indeterminate'] && !changes['indeterminate'].isFirstChange()) {
+ this.indeterminateChange.emit(this.indeterminate);
+ }
+ }
+
  /**
  * Sets the checked state of the checkbox.
  * @param checked The checked state of the checkbox.

diff --git a/packages/primitives/checkbox/stories/checkbox-group.component.ts b/packages/primitives/checkbox/stories/checkbox-group.component.ts
@@ -99,7 +99,7 @@ import { RdxCheckboxDirective } from '../src/checkbox.directive';
  ],
  providers: [provideIcons({ radixCheck })]
 })
-export class CheckboxReactiveFormsExample {
+export class CheckboxReactiveFormsExampleComponent {
  personality = this.formBuilder.group({
  fun: false,
  serious: false,

diff --git a/packages/primitives/checkbox/stories/checkbox.stories.ts b/packages/primitives/checkbox/stories/checkbox.stories.ts
@@ -5,7 +5,7 @@ import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@stor
 import { RdxLabelRootDirective } from '../../label';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator.directive';
 import { RdxCheckboxDirective } from '../src/checkbox.directive';
-import { CheckboxReactiveFormsExample } from './checkbox-group.component';
+import { CheckboxReactiveFormsExampleComponent } from './checkbox-group.component';
 
 export default {
  title: 'Primitives/Checkbox',
@@ -16,7 +16,7 @@ export default {
  RdxCheckboxDirective,
  RdxCheckboxIndicatorDirective,
  NgIconComponent,
- CheckboxReactiveFormsExample
+ CheckboxReactiveFormsExampleComponent
  ],
  providers: [provideIcons({ radixCheck })]
  }),
@@ -35,16 +35,17 @@ type Story = StoryObj;
 export const Default: Story = {
  render: () => ({
  template: `
- <form>
- <div style="display: flex; align-items: center;">
- <button class="CheckboxRoot" rdxCheckbox id="r1" [(checked)]="checked">
- <ng-icon rdxCheckboxIndicator class="CheckboxIndicator" name="radixCheck"></ng-icon>
- <input type="checkbox" aria-hidden="true" tabindex="-1" value="on" rdxCheckboxIndicator
- style="transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0; width: 25px; height: 25px;"/>
- </button>
- <label LabelRoot htmlFor="r1" class="Label">Check Item</label>
- </div>
- </form>
+<form>
+ <div style="display: flex; align-items: center;">
+ <button class="CheckboxRoot" rdxCheckbox id="r1" [(checked)]="checked">
+ <ng-icon rdxCheckboxIndicator class="CheckboxIndicator" name="radixCheck"></ng-icon>
+ <input type="checkbox" aria-hidden="true" tabindex="-1" value="on" rdxCheckboxIndicator
+ style="transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0; width: 25px; height: 25px;"/>
+ </button>
+ <label LabelRoot htmlFor="r1" class="Label">Check Item</label>
+ </div>
+</form>
+
 <style>
 button {
  all: unset;