Merge pull request #1241 from valadas/issue/1240

DNNCommunity · Dec 23, 2024 · 388eed2 · 388eed2
2 parents 83b00b7 + ace991b
commit 388eed2
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 19 deletions.
diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json
@@ -390,7 +390,7 @@
               "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).",
+              "description": "A function that will be called when the checkbox needs to change state and returns the next 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
             }

diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts
@@ -142,7 +142,7 @@ export namespace Components {
          */
         "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).
+          * A function that will be called when the checkbox needs to change state 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).
          */
         "nextStateHandler": (currentState: CheckedState) => CheckedState;
         /**
@@ -1440,7 +1440,7 @@ declare namespace LocalJSX {
          */
         "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).
+          * A function that will be called when the checkbox needs to change state 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).
          */
         "nextStateHandler"?: (currentState: CheckedState) => CheckedState;
         /**

diff --git a/packages/stencil-library/src/components/dnn-button/readme.md b/packages/stencil-library/src/components/dnn-button/readme.md
@@ -87,7 +87,6 @@
  - [dnn-color-input](../dnn-color-input)
  - [dnn-example-form](../examples/dnn-example-form)
  - [dnn-permissions-grid](../dnn-permissions-grid)
- - [test-form](../test-form)
 
 ### Depends on
 
@@ -101,7 +100,6 @@ graph TD;
   dnn-color-input --> dnn-button
   dnn-example-form --> dnn-button
   dnn-permissions-grid --> dnn-button
-  test-form --> dnn-button
   style dnn-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx
@@ -28,7 +28,7 @@ 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.
+  /** A function that will be called when the checkbox needs to change state 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).
    */

diff --git a/packages/stencil-library/src/components/dnn-checkbox/readme.md b/packages/stencil-library/src/components/dnn-checkbox/readme.md
@@ -36,13 +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`                    |
-| `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"`                         |
+| 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 needs to change state 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). | `(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/dnn-permissions-grid/dnn-permissions-grid.tsx b/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx
@@ -4,6 +4,7 @@ import { IPermissionDefinition, IPermissions, IRolePermission, IUserPermission }
 import { IRoleGroup } from './role-group-interface';
 import { IRole } from './role-interface';
 import { ISearchedUser } from './searched-user-interface';
+import { CheckedState } from '../dnn-checkbox/types';
 
 @Component({
   tag: 'dnn-permissions-grid',
@@ -39,7 +40,6 @@ export class DnnPermissionsGrid {
   @State() localResx: ILocalization;
   @State() focused = false;
 
-
   @Watch("foundUsers")
   handleFoundUsersChanged(newValue: ISearchedUser[]){
     if (newValue?.length > 0){
@@ -166,7 +166,8 @@ export class DnnPermissionsGrid {
       <label>
         <span class="hidden">{permissionDefinition.permissionName}</span>
         <dnn-checkbox
-          use-intermediate
+          useIntermediate
+          nextStateHandler={state => this.handleNextState(state)}
           checked={checked}
           onCheckedchange={e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition)}
         >
@@ -189,7 +190,8 @@ export class DnnPermissionsGrid {
       <label>
         <span class="hidden">{permissionDefinition.permissionName}</span>
         <dnn-checkbox
-          use-intermediate
+          useIntermediate
+          nextStateHandler={state => this.handleNextState(state)}
           checked={checked}
           onCheckedchange={e => this.handleUserChanged(e.detail, userPermission, permissionDefinition)}
         >
@@ -204,6 +206,17 @@ export class DnnPermissionsGrid {
     )
   }
 
+  private handleNextState(state: string): CheckedState {
+    switch (state) {
+      case "checked":
+        return "unchecked";
+      case "unchecked":
+        return "intermediate";
+      default:
+        return "checked";
+    }
+  }
+
   private handleRoleChanged(
     checked: "checked" | "unchecked" | "intermediate",
     rolePermission: IRolePermission,
@@ -289,7 +302,7 @@ export class DnnPermissionsGrid {
   }
 
   private handleUserChanged(
-    checked: "checked" | "unchecked" | "intermediate",
+    checked: CheckedState,
     userPermission: IUserPermission,
     permissionDefinition: IPermissionDefinition
   ): void {

diff --git a/packages/stencil-library/src/components/dnn-select/readme.md b/packages/stencil-library/src/components/dnn-select/readme.md
@@ -56,7 +56,6 @@ Type: `Promise<ValidityState>`
 ### Used by
 
  - [dnn-example-form](../examples/dnn-example-form)
- - [test-form](../test-form)
 
 ### Depends on
 
@@ -67,7 +66,6 @@ Type: `Promise<ValidityState>`
 graph TD;
   dnn-select --> dnn-fieldset
   dnn-example-form --> dnn-select
-  test-form --> dnn-select
   style dnn-select fill:#f9f,stroke:#333,stroke-width:4px
 ```