feat(validity): allow to override css classes per use:validity

kenoxa · Jul 2, 2020 · c0f7dd5 · c0f7dd5
1 parent fa1671c
commit c0f7dd5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 28 deletions.
diff --git a/src/internal/validity.ts b/src/internal/validity.ts
@@ -164,34 +164,34 @@ export default function validity<Values, State>(
 
     const { at: path = findSchemaPathForElement(node) } = options
 
+    const classes = { ...context.classes, ...options.classes }
+
     if (path) {
       // Update classes on this node based on this node validity
       dispose = [
-        subscribeTo(node, context.classes, context.errors, updateStoreValidity),
-        subscribeTo(node, context.classes, context.dirty, updateStoreDirty),
-        subscribeTo(node, context.classes, context.validating, updateStoreValidating),
+        subscribeTo(node, classes, context.errors, updateStoreValidity),
+        subscribeTo(node, classes, context.dirty, updateStoreDirty),
+        subscribeTo(node, classes, context.validating, updateStoreValidating),
       ]
     } else if (isHTMLFormElement(node)) {
       // Update classes on the form based on validity of the whole form
       dispose = [
-        subscribe(context.isInvalid, (invalid: boolean) =>
-          updateValidity(node, context.classes, invalid),
-        ),
-        subscribe(context.isDirty, (dirty: boolean) => updateDirty(node, context.classes, dirty)),
+        subscribe(context.isInvalid, (invalid: boolean) => updateValidity(node, classes, invalid)),
+        subscribe(context.isDirty, (dirty: boolean) => updateDirty(node, classes, dirty)),
         subscribe(context.isValidating, (validating: boolean) =>
-          updateValidating(node, context.classes, validating),
+          updateValidating(node, classes, validating),
         ),
         subscribe(context.isSubmitting, (submitting: boolean) =>
-          toogleClass(node, context.classes, submitting, 'is-submitting'),
+          toogleClass(node, classes, submitting, 'is-submitting'),
         ),
         subscribe(context.isSubmitted, (submitted: boolean) =>
-          toogleClass(node, context.classes, submitted, 'is-submitted'),
+          toogleClass(node, classes, submitted, 'is-submitted'),
         ),
 
         // To update the custom validitiy we need the first error message
         subscribeToElements(
           node,
-          context.classes,
+          classes,
           context.errors,
           updateStoreCustomValidity,
           withFirstError,
@@ -200,23 +200,11 @@ export default function validity<Values, State>(
     } else {
       // Update classes on this node based on the validity of its contained elements
       dispose = [
+        subscribeToElements(node, classes, context.errors, updateStoreValidity, withFirstError),
+        subscribeToElements(node, classes, context.dirty, updateStoreDirty, withSome(updateDirty)),
         subscribeToElements(
           node,
-          context.classes,
-          context.errors,
-          updateStoreValidity,
-          withFirstError,
-        ),
-        subscribeToElements(
-          node,
-          context.classes,
-          context.dirty,
-          updateStoreDirty,
-          withSome(updateDirty),
-        ),
-        subscribeToElements(
-          node,
-          context.classes,
+          classes,
           context.validating,
           updateStoreValidating,
           withSome(updateValidating),

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -154,7 +154,8 @@ export interface FormupSchema<Values = Record<string, unknown>, State = Record<s
 /**
  * CSS class name mapping used {@link FormupContext.validity}.
  *
- * These can be overriden using {@link FormupOptions.classes} when invoking {@link formup}.
+ * These can be overriden using {@link FormupOptions.classes} when invoking {@link formup}
+ * or {@link FormupContext.validity}.
  */
 export interface ValidityCSSClasses {
   /**
@@ -452,7 +453,7 @@ export interface FormupContext<Values = Record<string, unknown>, State = Record<
   readonly debounce: number
 
   /**
-   * Allow to override the used CSS classes.
+   * The used CSS class overrides.
    */
   readonly classes: ValidityCSSClasses
 }
@@ -557,6 +558,11 @@ export interface ValiditiyActionOptions {
    * If no field has been found it updates the validity for itself and all its children.
    */
   at?: string
+
+  /**
+   * Allow to override the used CSS classes.
+   */
+  classes?: Partial<ValidityCSSClasses>
 }
 
 /**