guestbell-forms 3.0.103 → 3.0.105

package/src/lib/components/base/input/useBaseInput.tsx

@@ -0,0 +1,239 @@
+// experimental and unfinished and unused for now
+import { useState, useRef, useCallback, useEffect } from 'react';
+import {
+  AllowedHtmlElements,
+  BaseTranslations,
+  ValidationError,
+} from './BaseInput';
+import * as Validators from '../../../validators';
+import { FormContextState } from '../../form/FormContext';
+import guid from '../../utils/Guid';
+
+interface UseBaseInputProps<TranslationsT extends BaseTranslations> {
+  value?: string;
+  required?: boolean;
+  validators?: string[];
+  customValidators?: Validators.IBaseValidator[];
+  onTheFlightValidate?: (value: string) => boolean;
+  onChange?: (
+    event: React.ChangeEvent<AllowedHtmlElements>,
+    isValid: boolean
+  ) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  errors?: ValidationError[];
+  infoText?: string;
+  touchOn?: 'focus' | 'blur';
+  showValidation?: boolean;
+  disabled?: boolean;
+  ignoreContext?: boolean;
+  formContext?: FormContextState;
+  translations?: TranslationsT;
+  validationName?: string;
+  label?: string | JSX.Element;
+}
+
+export function useBaseInput<
+  TranslationsT extends BaseTranslations = BaseTranslations
+>(props: UseBaseInputProps<TranslationsT>) {
+  const {
+    value: initialValue = '',
+    required = false,
+    validators = [],
+    customValidators = [],
+    onTheFlightValidate,
+    onChange,
+    onBlur,
+    onFocus,
+    //errors: propErrors = [],
+    //infoText,
+    touchOn = 'focus',
+    //showValidation = true,
+    disabled = false,
+    ignoreContext = false,
+    formContext,
+    translations,
+    validationName,
+    label,
+  } = props;
+
+  const [value, setValue] = useState<string>(initialValue);
+  const [touched, setTouched] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean>(true);
+  const [errors, setErrors] = useState<ValidationError[]>([]);
+  const [focused, setFocused] = useState<boolean>(false);
+  const [componentDisabled, setComponentDisabled] = useState<boolean>(disabled);
+
+  const inputRef = useRef<AllowedHtmlElements>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const componentId = useRef(guid());
+
+  const handleValidation = useCallback(
+    (currentValue: string, initializing = false) => {
+      let validationErrors: ValidationError[] = [];
+      let validationStatus = true;
+
+      if (required && !currentValue) {
+        validationErrors.push(
+          translations?.required || 'This field is required'
+        );
+        validationStatus = false;
+      } else if (validators) {
+        validators.forEach((validator) => {
+          let isValidForValidator = false;
+          switch (validator) {
+            case 'email':
+              isValidForValidator = new Validators.EmailValidator().Validate(
+                currentValue,
+                required,
+                (error) => validationErrors.push(error)
+              );
+              break;
+            // Add other validators as needed
+            default:
+              throw new Error(`Validator ${validator} not implemented`);
+          }
+          if (!isValidForValidator) validationStatus = false;
+        });
+      }
+
+      customValidators.forEach((customValidator) => {
+        const isValidForCustomValidator = customValidator.Validate(
+          currentValue,
+          required,
+          (error) => validationErrors.push(error)
+        );
+        if (!isValidForCustomValidator) validationStatus = false;
+      });
+
+      setErrors(validationErrors);
+      setIsValid(validationStatus);
+
+      if (!initializing && !ignoreContext) {
+        formContext?.updateCallback(componentId.current, {
+          isValid: validationStatus,
+          errors: validationErrors,
+        });
+      }
+
+      return { isValid: validationStatus, errors: validationErrors };
+    },
+    [
+      required,
+      validators,
+      customValidators,
+      formContext,
+      translations,
+      ignoreContext,
+    ]
+  );
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (!onTheFlightValidate || onTheFlightValidate(newValue)) {
+        const result = handleValidation(newValue);
+        setValue(newValue);
+        onChange?.(
+          {
+            target: { value: newValue },
+          } as React.ChangeEvent<AllowedHtmlElements>,
+          result.isValid
+        );
+      }
+    },
+    [handleValidation, onTheFlightValidate, onChange]
+  );
+
+  const handleFocus = useCallback(() => {
+    if (!disabled) {
+      onFocus?.();
+      setFocused(true);
+      if (touchOn === 'focus') setTouched(true);
+    }
+  }, [disabled, onFocus, touchOn]);
+
+  const handleBlur = useCallback(() => {
+    onBlur?.();
+    setFocused(false);
+    if (touchOn === 'blur') setTouched(true);
+  }, [onBlur, touchOn]);
+
+  const scrollTo = useCallback(() => {
+    containerRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  const setValid = useCallback(() => {
+    setIsValid(true);
+    setErrors([]);
+    formContext?.updateCallback(componentId.current, {
+      isValid: true,
+      errors: [],
+    });
+  }, [formContext]);
+
+  const setInvalid = useCallback(
+    (validationErrors: ValidationError[] = []) => {
+      setIsValid(false);
+      setErrors(validationErrors);
+      formContext?.updateCallback(componentId.current, {
+        isValid: false,
+        errors: validationErrors,
+      });
+    },
+    [formContext]
+  );
+
+  const disableComponent = useCallback(() => {
+    setComponentDisabled(true);
+  }, []);
+
+  const enableComponent = useCallback(() => {
+    setComponentDisabled(false);
+  }, []);
+
+  useEffect(() => {
+    handleValidation(value, true);
+
+    if (!ignoreContext && formContext) {
+      formContext.subscribe(componentId.current, {
+        componentApi: {
+          disableComponent,
+          enableComponent,
+          focus: () => inputRef.current?.focus(),
+          scrollTo,
+          touch: () => setTouched(true),
+          unTouch: () => setTouched(false),
+        },
+        validation: {
+          isValid,
+          errors,
+          name: validationName || label,
+        },
+      });
+    }
+
+    return () => {
+      if (!ignoreContext) formContext?.unSubscribe(componentId.current);
+    };
+  }, [formContext, ignoreContext, handleValidation, value]);
+
+  return {
+    value,
+    setValue: handleValueChange,
+    isValid,
+    errors,
+    touched,
+    focused,
+    inputRef,
+    containerRef,
+    handleFocus,
+    handleBlur,
+    scrollTo,
+    setValid,
+    setInvalid,
+    disableComponent,
+    enableComponent,
+    setTouched,
+    componentDisabled,
+  };
+}

package/src/lib/components/tags/Tags.tsx

@@ -176,7 +176,10 @@ export class TagsRaw<
     }
   }
 
-  public componentDidUpdate(oldProps: TagsProps<IdT, T> & InjectedProps) {
+  public componentDidUpdate(
+    oldProps: TagsProps<IdT, T> & InjectedProps,
+    oldState: TagsState<IdT, T>
+  ) {
     if (
       oldProps.tags !== this.props.tags ||
       oldProps.validators !== this.props.validators ||
@@ -185,8 +188,14 @@ export class TagsRaw<
     ) {
       this.handleErrors(this.props.tags);
     }
-    if (oldProps.tags !== this.props.tags && this.state.suggestionsVisible) {
-      this.fetchExistingTags();
+    if (
+      this.state.suggestionsVisible &&
+      (oldProps.tags !== this.props.tags ||
+        oldProps.existingTags !== this.props.existingTags ||
+        this.state.value !== oldState.value ||
+        this.state.suggestionsVisible !== oldState.suggestionsVisible)
+    ) {
+      this.fetchExistingTags(this.state.value);
     }
   }
 
@@ -450,7 +459,6 @@ export class TagsRaw<
     if (!this.state.suggestionsVisible) {
       this.props.onSuggestionsOpened?.();
     }
-    this.fetchExistingTags(this.state.value);
     this.setState(
       () => ({ textIsFocused: true, suggestionsVisible: true, touched: true }),
       () => this.handleErrors()
@@ -493,13 +501,11 @@ export class TagsRaw<
           this.props.tags.concat(suggestions[this.state.preselectedSuggestion])
         );
         this.setState({ value: '', preselectedSuggestion: undefined }, () => {
-          this.fetchExistingTags();
           this.handleErrors();
         });
       } else if (existingTag) {
         this.props.onTagsChanged(this.props.tags.concat(existingTag));
         this.setState({ value: '' }, () => {
-          this.fetchExistingTags();
           this.handleErrors();
         });
       } else if (this.props.allowNew) {
@@ -537,13 +543,15 @@ export class TagsRaw<
         ? false
         : this.state.suggestionsVisible,
     });
+    const newTags = newTag
+      ? this.props.tags
+        ? this.props.tags.concat(newTag)
+        : [newTag]
+      : this.props.tags;
     if (newTag) {
-      this.props.onTagsChanged(
-        this.props.tags ? this.props.tags.concat(newTag) : [newTag]
-      );
+      this.props.onTagsChanged(newTags);
     }
     this.setState({ value: '', textErrors: [] }, () => {
-      this.fetchExistingTags();
       this.handleErrors();
     });
   };
@@ -602,7 +610,6 @@ export class TagsRaw<
       }),
       () => this.handleErrors()
     );
-    this.fetchExistingTags(e.target.value);
   };
 
   private handleErrors = (tags: T[] = this.props.tags) => {
@@ -653,15 +660,30 @@ export class TagsRaw<
         () => this.setState(() => ({ fetchingExistingTags: true })),
         this.props.loadingDelayMs
       );
-      this.props
-        .fetchExistingTags(startsWith, this.props.tags)
-        .then((fetchedExistingTags) => {
-          clearTimeout(timer);
-          this.setState(() => ({
-            fetchedExistingTags,
-            fetchingExistingTags: false,
-          }));
-        });
+      const prom = this.props.fetchExistingTags(startsWith, this.props.tags);
+      if (prom) {
+        prom
+          .then((fetchedExistingTags) => {
+            if (fetchedExistingTags) {
+              clearTimeout(timer);
+              this.setState(() => ({
+                fetchedExistingTags,
+                fetchingExistingTags: false,
+              }));
+            }
+          })
+          .catch(() => {
+            clearTimeout(timer);
+            this.setState(() => ({
+              fetchingExistingTags: false,
+            }));
+          });
+      } else {
+        clearTimeout(timer);
+        this.setState(() => ({
+          fetchingExistingTags: false,
+        }));
+      }
     }
   }
 
@@ -702,11 +724,11 @@ export class TagsRaw<
             circular={true}
             blank={true}
             onClick={this.tagRemoveClick(tag)}
-            className="ml-1 transform-rotate--45 line-height--0 p-0"
+            className="tags-input__tag__removeButton p-0"
             Component={TagButtonComponent}
             preventsDefault={false}
           >
-            <PlusIcon />
+            <PlusIcon className="transform-rotate--45" />
           </Button>
         )}
       </>
@@ -727,9 +749,9 @@ export class TagsRaw<
       );
     }
     return (
-      <div onClick={this.tagClick(tag)} className={className} key={index}>
+      <span onClick={this.tagClick(tag)} className={className} key={index}>
         {body}
-      </div>
+      </span>
     );
   }
 

package/src/lib/scss/components/tags/tags.scss

@@ -12,26 +12,27 @@
   }
   .tags-input__tag {
     position: relative;
-    display: inline-flex;
-    align-items: center;
-    padding-left: 0.25rem;
     margin-right: 0.25rem;
-    margin-bottom: 0.125rem;
-    margin-top: 0.125rem;
     &.tags-input__tag-chip {
       border: 1px solid;
       border-radius: 1.5rem;
     }
   }
+  .tags-input__tag__removeButton {
+    margin-left: 2px;
+    svg {
+      vertical-align: -0.4rem;
+    }
+  }
   .tags-input__tags__wrapper {
     display: flex;
     align-items: center;
+    line-height: 1.75;
   }
   .tags-input__tag__wrapper {
-    display: inline-flex;
-    flex-wrap: wrap;
     padding-top: 0.25rem;
-    padding-bottom: 0.125rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
   }
   &.tags-input--readOnly {
     border-bottom-color: transparent !important;

package/src/stories/TagsDemo.tsx

@@ -38,15 +38,19 @@ export function TagsDemo(props: TagsProps) {
     <Tags
       title="Tags suggestions"
       label="Choose or create tags"
-      fetchExistingTags={(startsWith) =>
-        new Promise<Tag[]>((resolve) =>
+      fetchExistingTags={(startsWith, tags) => {
+        return new Promise<Tag[]>((resolve) =>
           setTimeout(
             () =>
-              resolve(existingTags.filter((e) => e.name.includes(startsWith))),
+              resolve(
+                existingTags
+                  .filter((e) => e.name.includes(startsWith))
+                  .filter((e) => !tags.find((t) => t.id === e.id))
+              ),
             1000
           )
-        )
-      }
+        );
+      }}
       suggestionsEmptyComponent={'Not found'}
       tags={tags}
       onTagsChanged={setTags}