Skip to content

Commit

Permalink
Added prop to cusomize tri-state order of dnn-checkbox
Browse files Browse the repository at this point in the history 
This method can be implemented by consumers if they want a different oder when using useIntermediate.
  • Loading branch information
@valadas
valadas committed Dec 23, 2024
1 parent 7c941bc commit 82bb5b5
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 46 deletions.
31 changes: 12 additions & 19 deletions packages/stencil-library/custom-elements.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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": []
}
]
}
]
}
8 changes: 8 additions & 0 deletions packages/stencil-library/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*/
Expand Down Expand Up @@ -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.
*/
Expand Down
32 changes: 19 additions & 13 deletions packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">;

Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}

Expand Down
13 changes: 7 additions & 6 deletions packages/stencil-library/src/components/dnn-checkbox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
24 changes: 24 additions & 0 deletions packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,30 @@ export class DnnExampleForm {
<dnn-checkbox name="rememberMe" value="true" />
Remember me
</label>
<label></label>
<label>
<dnn-checkbox
useIntermediate
name="read"
/>
Allow read?
</label>
<label>
<dnn-checkbox
useIntermediate
name="write"
nextStateHandler={currentState => {
if (currentState == "checked") {
return "unchecked";
}
if (currentState == "intermediate") {
return "checked";
}
return "intermediate";
}}
/>
Allow write?
</label>
<dnn-color-input
label="Favorite Color"
name="favoriteColor"
Expand Down
8 changes: 0 additions & 8 deletions packages/stencil-library/vscode-data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1013,14 +1013,6 @@
"description": "The width of the splitter area."
}
]
},
{
"name": "test-form",
"description": {
"kind": "markdown",
"value": ""
},
"attributes": []
}
]
}

0 comments on commit 82bb5b5

Please sign in to comment.