guestbell-forms 3.0.39 → 3.0.40

package/src/lib/components/checkbox/Checkbox.tsx

@@ -0,0 +1,178 @@
+// Libs
+import * as React from 'react';
+
+// Misc
+import InputGroup from '../inputGroup/InputGroup';
+import {
+  BaseInputProps,
+  BaseInput,
+  BaseInputState,
+  defaultBaseTranslations,
+} from '../base/input/BaseInput';
+import classNames from 'classnames';
+import { withFormContext } from '../form/withFormContext';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+
+export interface CheckboxProps extends BaseInputProps<HTMLInputElement> {
+  onChecked?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: never;
+  type?: string;
+  checked?: boolean;
+  supportsIndeterminate?: boolean;
+}
+
+export interface CheckboxState extends BaseInputState {
+  checked: boolean;
+}
+
+export class CheckboxRaw extends BaseInput<
+  CheckboxProps,
+  CheckboxState,
+  HTMLInputElement
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    // checked: false,
+  }) as CheckboxProps;
+
+  constructor(props: CheckboxProps) {
+    super(props, false);
+    this.state = Object.assign(this.state, {
+      checked: Boolean(props.checked),
+      isValid: props.required ? props.checked : true,
+      errors:
+        props.required && !props.checked
+          ? [this.getTranslations(defaultBaseTranslations).required]
+          : [],
+    });
+    this.handleChecked = this.handleChecked.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.subscribeSelf(props);
+  }
+
+  public componentDidMount() {
+    const finalIndeterminate = Boolean(
+      this.props.supportsIndeterminate &&
+        typeof this.props.checked !== 'boolean'
+    );
+    if (
+      typeof this.props.checked !== 'boolean' &&
+      this.inputRef.current &&
+      this.inputRef.current?.indeterminate !== finalIndeterminate
+    ) {
+      this.inputRef.current.indeterminate = finalIndeterminate;
+    }
+    super.componentDidMount?.();
+  }
+
+  public componentDidUpdate(oldProps: CheckboxProps) {
+    if (
+      this.props.checked !== undefined &&
+      this.props.checked !== this.state.checked
+    ) {
+      this.setState({ checked: this.props.checked });
+      if (this.props.checked) {
+        this.setValid();
+      } else {
+        if (this.props.required) {
+          this.setInvalid([
+            this.getTranslations(defaultBaseTranslations).required,
+          ]);
+        }
+      }
+    }
+    if (oldProps.required !== this.props.required) {
+      if (this.props.required && !this.props.checked) {
+        this.setInvalid([
+          this.getTranslations(defaultBaseTranslations).required,
+        ]);
+      } else {
+        this.setValid();
+      }
+    }
+    const finalIndeterminate = Boolean(
+      this.props.supportsIndeterminate &&
+        typeof this.props.checked !== 'boolean'
+    );
+    if (
+      this.props.supportsIndeterminate &&
+      this.inputRef.current?.indeterminate !== finalIndeterminate
+    ) {
+      this.inputRef.current.indeterminate = finalIndeterminate;
+    }
+  }
+
+  public render() {
+    const containerClassName = classNames([
+      'input__base checkbox-input',
+      this.getValidationClass(),
+      this.props.className,
+      { ['checkbox-input--with-label']: Boolean(this.props.label) },
+      { ['checkbox-input--disabled']: this.props.disabled },
+    ]);
+    const input = (
+      <input
+        {...(this.props.id && { id: this.props.id })}
+        ref={this.inputRef}
+        value={this.props.value || ''}
+        type="checkbox"
+        required={this.props.required}
+        checked={this.state.checked ?? false}
+        onChange={this.handleChecked}
+        onBlur={this.handleBlur}
+        onFocus={this.handleFocus}
+        onKeyDown={this.handleKeyDown}
+        tabIndex={this.props.disabled ? -1 : 0}
+      />
+    );
+    return (
+      <InputGroup
+        title={this.props.title}
+        tooltip={this.props.tooltip}
+        className={this.props.inputGroupClassName}
+      >
+        <div className={containerClassName} ref={this.containerRef}>
+          {this.props.title && !this.props.label && input}
+          {!this.props.title && !this.props.label && this.renderTooltip(input)}
+          {this.renderDefaultValidation()}
+          {this.props.label && (
+            <label className="checkbox-input__label">
+              {input}
+              {this.renderLabel()}
+            </label>
+          )}
+        </div>
+      </InputGroup>
+    );
+  }
+
+  private handleChecked(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!this.props.disabled) {
+      this.props.onChecked && this.props.onChecked(e);
+      this.setState({ checked: !this.state.checked });
+      if (!this.state.checked) {
+        this.setValid();
+      } else {
+        if (this.props.required) {
+          this.setInvalid([
+            this.getTranslations(defaultBaseTranslations).required,
+          ]);
+        }
+      }
+    }
+  }
+
+  protected handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (!this.props.disabled) {
+      if (e.key === 'Enter') {
+        this.inputRef.current?.click();
+      }
+    }
+  }
+}
+
+export const Checkbox = withThemeContext<
+  CheckboxProps,
+  InstanceType<typeof CheckboxRaw>
+>(withFormContext<CheckboxProps>(CheckboxRaw), 'checkbox');
+
+export default Checkbox;

package/src/lib/components/checkbox/index.tsx

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export { default } from './Checkbox';

package/src/lib/components/dropdown/Dropdown.tsx

@@ -0,0 +1,135 @@
+// Libs
+import * as React from 'react';
+import Collapse, { CollapseProps } from '@mui/material/Collapse';
+import { ThemeContextProps } from '../themeProvider/ThemeContext';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+import classNames from 'classnames';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+
+export type DropdownProps = React.PropsWithChildren<
+  ThemeContextProps & {
+    id?: string;
+    header?: JSX.Element | string;
+    className?: string;
+    submenuClassName?: string;
+    headerClassName?: string;
+    notificationCount?: number;
+    // tslint:disable-next-line:no-any
+    WrapperTag?: keyof JSX.IntrinsicElements;
+    shouldHandleClick?: boolean;
+    showArrow?: boolean;
+    onClick?: (e: React.MouseEvent, isVisible: boolean) => void;
+    onShow?: () => void;
+    onHide?: () => void;
+    disabled?: boolean;
+    inline?: boolean;
+    collapseProps?: Partial<CollapseProps>;
+  }
+>;
+
+export interface DropdownState {
+  isDropdownVisible: boolean;
+}
+
+export const Dropdown: React.FC<DropdownProps> = props => {
+  const {
+    shouldHandleClick = true,
+    WrapperTag = 'div',
+    notificationCount = 0,
+    showArrow = true,
+    inline = true,
+    onClick,
+    onShow,
+    onHide,
+    disabled,
+    className,
+    headerClassName,
+    header,
+    id,
+    collapseProps,
+    children,
+    submenuClassName,
+  } = props;
+
+  const [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
+
+  const hideNavigation = React.useCallback(() => {
+    setIsDropdownVisible(false);
+    onHide?.();
+  }, [onHide]);
+
+  const showNavigation = React.useCallback(() => {
+    setIsDropdownVisible(true);
+    onShow?.();
+  }, [onShow]);
+
+  const onClickAway = React.useCallback(
+    (e: MouseEvent) => {
+      hideNavigation();
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [hideNavigation]
+  );
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (shouldHandleClick && !disabled) {
+        if (!isDropdownVisible) {
+          showNavigation();
+        } else {
+          hideNavigation();
+        }
+        onClick?.(e, isDropdownVisible);
+      }
+    },
+    [isDropdownVisible, onClick]
+  );
+  const containerClassName = classNames(
+    'guestbell__dropdown',
+    !isDropdownVisible
+      ? 'guestbell__dropdown--closed'
+      : 'guestbell__dropdown--opened',
+    { ['guestbell__dropdown--disabled']: disabled },
+    { ['guestbell__dropdown--inline']: inline },
+    className
+  );
+  const headerClassNameAll = classNames([
+    'guestbell__dropdown-toggle',
+    { ['guestbell__dropdown-toggle__arrow--hidden']: !showArrow },
+    { ['guestbell__dropdown-toggle--disabled']: disabled },
+    headerClassName,
+  ]);
+  return (
+    <ClickAwayListener
+      onClickAway={onClickAway}
+      mouseEvent={isDropdownVisible ? 'onMouseDown' : false}
+      touchEvent={isDropdownVisible ? 'onTouchStart' : false}
+    >
+      <WrapperTag id={id ?? null} className={containerClassName}>
+        <div role="button" className={headerClassNameAll} onClick={handleClick}>
+          {header}
+          {notificationCount > 0 && (
+            <span className="guestbell__label-count">{notificationCount}</span>
+          )}
+        </div>
+        <div className={'guestbell__dropdown-menu__container'}>
+          <Collapse {...collapseProps} in={isDropdownVisible}>
+            <ul
+              className={classNames(
+                'guestbell__dropdown-menu',
+                submenuClassName
+              )}
+            >
+              {children}
+            </ul>
+          </Collapse>
+        </div>
+      </WrapperTag>
+    </ClickAwayListener>
+  );
+};
+
+export default withThemeContext<DropdownProps, React.FC<DropdownProps>>(
+  Dropdown
+);

package/src/lib/components/dropdown/index.tsx

@@ -0,0 +1,2 @@
+export * from './Dropdown';
+export { default } from './Dropdown';

package/src/lib/components/dynamicSubmit/DynamicSubmit.tsx

@@ -0,0 +1,153 @@
+// Libs
+import * as React from 'react';
+import classNames from 'classnames';
+import { withFormContext } from '../form/withFormContext';
+import { FormContextProps } from '../form/FormContext';
+import { SubmitProps } from '../submit';
+import { Omit } from '../utils/Typescript';
+import { SubmitRaw } from './../submit/Submit';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+
+// Misc
+
+export enum DynamicSubmitMode {
+  Normal,
+  Submitting,
+  Error,
+  Success,
+}
+
+export type DynamicSubmitProps = Omit<SubmitProps, 'onClick'> & {
+  onClick?: (
+    e: React.MouseEvent<HTMLButtonElement>,
+    submitting: () => void,
+    error: () => void,
+    success: () => void,
+    reset: () => void
+  ) => void;
+  submittingChildren?: JSX.Element | string;
+  errorChildren?: JSX.Element | string;
+  successChildren?: JSX.Element | string;
+
+  submittingClassName?: string;
+  errorClassName?: string;
+  successClassName?: string;
+  normalClassName?: string;
+
+  submitDisablesInputs?: boolean;
+  resetEnablesInputs?: boolean;
+} & FormContextProps;
+
+export interface DynamicSubmitState {
+  buttonState: DynamicSubmitMode;
+}
+
+export class DynamicSubmitRaw extends React.PureComponent<
+  DynamicSubmitProps,
+  DynamicSubmitState
+> {
+  public static defaultProps = Object.assign(
+    {},
+    { validateForm: true, submitDisablesInputs: true, resetEnablesInputs: true }
+  );
+
+  constructor(props: DynamicSubmitProps) {
+    super(props);
+    this.state = {
+      buttonState: DynamicSubmitMode.Normal,
+    };
+    this.handleClick = this.handleClick.bind(this);
+    this.submitting = this.submitting.bind(this);
+    this.error = this.error.bind(this);
+    this.success = this.success.bind(this);
+    this.reset = this.reset.bind(this);
+  }
+
+  public render() {
+    const buttonClassName = classNames(
+      this.props.className,
+      this.renderClassName()
+    );
+    return (
+      <SubmitRaw
+        {...this.props}
+        className={buttonClassName}
+        onClick={this.handleClick}
+      >
+        {this.renderChildren()}
+      </SubmitRaw>
+    );
+  }
+
+  private handleClick(e: React.MouseEvent<HTMLButtonElement>) {
+    e.preventDefault();
+    this.props.submitDisablesInputs &&
+      this.props.formContext.disableComponents();
+    this.props.onClick &&
+      this.props.onClick(
+        e,
+        this.submitting,
+        this.error,
+        this.success,
+        this.reset
+      );
+  }
+
+  private submitting() {
+    this.setState({ buttonState: DynamicSubmitMode.Submitting });
+  }
+
+  private error() {
+    this.setState({ buttonState: DynamicSubmitMode.Error });
+  }
+
+  private success() {
+    this.setState({ buttonState: DynamicSubmitMode.Success });
+  }
+
+  private reset() {
+    this.props.resetEnablesInputs && this.props.formContext.enableComponents();
+    this.setState({ buttonState: DynamicSubmitMode.Normal });
+  }
+
+  private renderChildren() {
+    switch (this.state.buttonState) {
+      case DynamicSubmitMode.Error:
+        return this.props.errorChildren
+          ? this.props.errorChildren
+          : this.props.children;
+      case DynamicSubmitMode.Submitting:
+        return this.props.submittingChildren
+          ? this.props.submittingChildren
+          : this.props.children;
+      case DynamicSubmitMode.Success:
+        return this.props.successChildren
+          ? this.props.successChildren
+          : this.props.children;
+      default:
+        return this.props.children;
+    }
+  }
+
+  private renderClassName() {
+    switch (this.state.buttonState) {
+      case DynamicSubmitMode.Error:
+        return this.props.errorClassName ? this.props.errorClassName : '';
+      case DynamicSubmitMode.Submitting:
+        return this.props.submittingClassName
+          ? this.props.submittingClassName
+          : '';
+      case DynamicSubmitMode.Success:
+        return this.props.successClassName ? this.props.successClassName : '';
+      default:
+        return this.props.normalClassName ? this.props.normalClassName : '';
+    }
+  }
+}
+
+export const DynamicSubmit = withThemeContext<
+  DynamicSubmitProps,
+  InstanceType<typeof DynamicSubmitRaw>
+>(withFormContext<DynamicSubmitProps>(DynamicSubmitRaw), 'dynamicSubmit');
+
+export default DynamicSubmit;

package/src/lib/components/dynamicSubmit/index.tsx

@@ -0,0 +1,2 @@
+export * from './DynamicSubmit';
+export { default } from './DynamicSubmit';

package/src/lib/components/externalValidationComponent/ExternalValidationComponent.tsx

@@ -0,0 +1,78 @@
+// Libs
+
+// Misc
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+} from '../base/input/BaseInput';
+import { withFormContext } from '../form/withFormContext';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+
+export interface ExternalValidationComponentProps
+  extends BaseInputProps<HTMLInputElement> {
+  isValid: boolean;
+}
+
+export interface ExternalValidationComponentState extends BaseInputState {}
+
+export class ExternalValidationComponentRaw extends BaseInput<
+  ExternalValidationComponentProps,
+  ExternalValidationComponentState,
+  HTMLInputElement
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    isValid: true,
+  }) as ExternalValidationComponentProps;
+
+  constructor(props: ExternalValidationComponentProps) {
+    super(props);
+    this.state = {
+      ...this.state,
+      handleValueChangeEnabled: false,
+    };
+    if (!this.props.ignoreContext && this.props.formContext) {
+      this.props.formContext.updateCallback(this.componentId, {
+        validation: {
+          isValid: props.isValid,
+          errors: props.errors,
+        },
+      });
+    }
+  }
+
+  public componentDidUpdate(
+    prevProps: ExternalValidationComponentProps,
+    prevState: ExternalValidationComponentState
+  ) {
+    if (
+      this.props.isValid !== prevProps.isValid ||
+      this.props.errors !== prevProps.errors
+    ) {
+      if (!this.props.ignoreContext && this.props.formContext) {
+        this.props.formContext.updateCallback(this.componentId, {
+          validation: {
+            isValid: this.props.isValid,
+            errors: this.props.errors,
+          },
+        });
+      }
+    }
+  }
+
+  public render() {
+    return null;
+  }
+}
+
+export const ExternalValidationComponent = withThemeContext<
+  ExternalValidationComponentProps,
+  InstanceType<typeof ExternalValidationComponentRaw>
+>(
+  withFormContext<ExternalValidationComponentProps>(
+    ExternalValidationComponentRaw
+  ),
+  'text'
+);
+
+export default ExternalValidationComponent;

package/src/lib/components/externalValidationComponent/index.tsx

@@ -0,0 +1,2 @@
+export * from './ExternalValidationComponent';
+export { default } from './ExternalValidationComponent';