From 82bb5b573b15c8cd3f1d76986b9a41a8ad04c3d6 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 22 Dec 2024 23:17:05 -0500 Subject: [PATCH] Added prop to cusomize tri-state order of dnn-checkbox This method can be implemented by consumers if they want a different oder when using useIntermediate. --- packages/stencil-library/custom-elements.json | 31 +++++++----------- packages/stencil-library/src/components.d.ts | 8 +++++ .../components/dnn-checkbox/dnn-checkbox.tsx | 32 +++++++++++-------- .../src/components/dnn-checkbox/readme.md | 13 ++++---- .../dnn-example-form/dnn-example-form.tsx | 24 ++++++++++++++ packages/stencil-library/vscode-data.json | 8 ----- 6 files changed, 70 insertions(+), 46 deletions(-) diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json index 0681df56..c065a352 100644 --- a/packages/stencil-library/custom-elements.json +++ b/packages/stencil-library/custom-elements.json @@ -383,7 +383,18 @@ "required": false } ], - "members": [], + "members": [ + { + "kind": "field", + "name": "nextStateHandler", + "type": { + "text": "(currentState: CheckedState) => CheckedState" + }, + "description": "A function that will be called when the checkbox changes its checked state.\nCan be used to customize the order of the states when the component is clicked.\nOnly called if you also use the tri-state feature (useIntermediate).", + "default": "this.defaultNextStateHandler", + "required": false + } + ], "events": [ { "name": "checkedchange", @@ -2424,24 +2435,6 @@ "cssParts": [] } ] - }, - { - "kind": "javascript-module", - "path": "src/components/test-form/test-form.tsx", - "declarations": [ - { - "kind": "class", - "name": "test-form.tsx", - "tagName": "test-form", - "description": "", - "attributes": [], - "members": [], - "events": [], - "slots": [], - "cssProperties": [], - "cssParts": [] - } - ] } ] } \ No newline at end of file diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts index 329615c9..2e7e3263 100644 --- a/packages/stencil-library/src/components.d.ts +++ b/packages/stencil-library/src/components.d.ts @@ -141,6 +141,10 @@ export namespace Components { * The name to show in the formData (if using forms). */ "name": string; + /** + * A function that will be called when the checkbox changes its checked state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate). + */ + "nextStateHandler": (currentState: CheckedState) => CheckedState; /** * Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */ @@ -1435,6 +1439,10 @@ declare namespace LocalJSX { * The name to show in the formData (if using forms). */ "name"?: string; + /** + * A function that will be called when the checkbox changes its checked state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate). + */ + "nextStateHandler"?: (currentState: CheckedState) => CheckedState; /** * Fires up when the checkbox checked property changes. */ diff --git a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx index 53acdf9e..26540393 100644 --- a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx +++ b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx @@ -28,6 +28,12 @@ export class DnnCheckbox { /** The name to show in the formData (if using forms). */ @Prop() name: string; + /** A function that will be called when the checkbox changes needs to change and returns the next state. + * Can be used to customize the order of the states when the component is clicked. + * Only called if you also use the tri-state feature (useIntermediate). + */ + @Prop() nextStateHandler: (currentState: CheckedState) => CheckedState = this.defaultNextStateHandler; + /** Fires up when the checkbox checked property changes. */ @Event() checkedchange: EventEmitter<"checked" | "unchecked" | "intermediate">; @@ -63,6 +69,17 @@ export class DnnCheckbox { this.checked = this.originalChecked; } + private defaultNextStateHandler(currentState: CheckedState): CheckedState { + switch (currentState) { + case "checked": + return "intermediate"; + case "intermediate": + return "unchecked"; + case "unchecked": + return "checked"; + } + } + private changeState(): void { if (!this.useIntermediate){ switch (this.checked) { @@ -79,19 +96,8 @@ export class DnnCheckbox { this.checkedchange.emit(this.checked); return; } - switch (this.checked) { - case "checked": - this.checked = "intermediate"; - break; - case "intermediate": - this.checked = "unchecked"; - break; - case "unchecked": - this.checked = "checked"; - break; - default: - break; - } + + this.checked = this.nextStateHandler(this.checked); this.checkedchange.emit(this.checked); } diff --git a/packages/stencil-library/src/components/dnn-checkbox/readme.md b/packages/stencil-library/src/components/dnn-checkbox/readme.md index e7d47d36..dd95bae3 100644 --- a/packages/stencil-library/src/components/dnn-checkbox/readme.md +++ b/packages/stencil-library/src/components/dnn-checkbox/readme.md @@ -36,12 +36,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------- | -| `checked` | `checked` | Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) | `"checked" \| "intermediate" \| "unchecked"` | `"unchecked"` | -| `name` | `name` | The name to show in the formData (if using forms). | `string` | `undefined` | -| `useIntermediate` | `use-intermediate` | Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) | `boolean` | `false` | -| `value` | `value` | The value for this checkbox (not to be confused with its checked state). | `string` | `"on"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------ | +| `checked` | `checked` | Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) | `"checked" \| "intermediate" \| "unchecked"` | `"unchecked"` | +| `name` | `name` | The name to show in the formData (if using forms). | `string` | `undefined` | +| `nextStateHandler` | -- | A function that will be called when the checkbox changes its checked state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate). | `(currentState: CheckedState) => CheckedState` | `this.defaultNextStateHandler` | +| `useIntermediate` | `use-intermediate` | Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) | `boolean` | `false` | +| `value` | `value` | The value for this checkbox (not to be confused with its checked state). | `string` | `"on"` | ## Events diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx index bd4396de..37e70860 100644 --- a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx +++ b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx @@ -249,6 +249,30 @@ export class DnnExampleForm { Remember me + + +