Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added prop to cusomize tri-state order of dnn-checkbox #1239

Merged
merged 1 commit into from
Dec 23, 2024
Merged

Added prop to cusomize tri-state order of dnn-checkbox #1239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 12 additions & 19 deletions packages/stencil-library/custom-elements.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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": []
}
]
}
Loading