guestbell-forms 3.0.39 → 3.0.40

package/src/lib/components/tags/subComponents/TagsSuggestions.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Tag } from '..';
+import { Button } from '../../button';
+import Popper, { PopperProps } from '@mui/material/Popper';
+import classNames from 'classnames';
+
+export type RenderSuggestionTagProps<T extends Tag = Tag> = {
+  tag: T;
+  index: number;
+  id?: string;
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
+  isPreselected: boolean;
+};
+
+export type SuggestionsProps<T extends Tag = Tag> = {
+  className?: string;
+  innerRef: React.RefObject<HTMLDivElement>;
+  anchorEl: HTMLElement;
+  id?: string;
+  preselectedSuggestion?: number;
+  isVisible: boolean;
+  isWaitingForMoreInput: boolean;
+  tags: T[];
+  onSelected: (tag: T, lastSelected: boolean) => void;
+  value: string;
+  loading: boolean;
+  LoadingComponent?: string | JSX.Element;
+  EmptyComponent?: string | JSX.Element;
+  AddNewTagComponent?: JSX.Element;
+  WaitingForMoreInputComponent?: string | JSX.Element;
+  allowNew: boolean;
+  popperProps?: Partial<PopperProps>;
+  SuggestionTag?: React.ComponentType<RenderSuggestionTagProps<T>>;
+};
+
+type InjectedProps = {};
+
+const popperModifiers: PopperProps['modifiers'] = [
+  {
+    name: 'flip',
+    enabled: true,
+  },
+];
+
+function DefaultSuggestionTag<T extends Tag = Tag>({
+  index,
+  tag,
+  id,
+  onClick,
+  isPreselected,
+}: RenderSuggestionTagProps<T>) {
+  return (
+    <li key={index}>
+      <Button
+        {...(id && {
+          id: id + '-suggestion-' + index.toString(),
+        })}
+        className={
+          'w-100 tags-input__suggestion ' +
+          (isPreselected ? 'tags-input__suggestion--preselected' : '')
+        }
+        onClick={onClick}
+        dropdown={true}
+      >
+        {tag.name}
+      </Button>
+    </li>
+  );
+}
+
+function Suggestions<T extends Tag = Tag>(
+  props: SuggestionsProps<T> & InjectedProps
+) {
+  const { onSelected } = props;
+  const onSelectedFactory = React.useCallback(
+    (tag: T, lastSelected: boolean) => (e: React.MouseEvent) => {
+      onSelected(tag, lastSelected);
+    },
+    [onSelected]
+  );
+  const popperStyle = React.useMemo(
+    () => ({
+      width: props.anchorEl?.scrollWidth,
+      zIndex: 10000,
+    }),
+    [props.anchorEl?.scrollWidth]
+  );
+
+  const { SuggestionTag = DefaultSuggestionTag } = props;
+  return (
+    props.anchorEl && (
+      <Popper
+        open={props.isVisible}
+        anchorEl={props.anchorEl}
+        style={popperStyle}
+        placement="bottom-start"
+        modifiers={popperModifiers}
+        {...props.popperProps}
+      >
+        <div
+          {...(props.id && {
+            id: props.id,
+          })}
+          className={classNames('tags-input__suggestions', props.className, {
+            'tags-input__suggestions--loading': props.loading,
+          })}
+          ref={props.innerRef}
+        >
+          <ul>
+            {props.AddNewTagComponent}
+            {props.loading && props.LoadingComponent}
+            {props.isWaitingForMoreInput &&
+              props.WaitingForMoreInputComponent && (
+                <li className="w-100 text-center p-2">
+                  {props.WaitingForMoreInputComponent}
+                </li>
+              )}
+            {!props.isWaitingForMoreInput &&
+              props.tags.map((tag, index) => (
+                <SuggestionTag
+                  key={tag.id}
+                  index={index}
+                  tag={tag}
+                  onClick={onSelectedFactory(tag, props.tags.length === 1)}
+                  id={props.id}
+                  isPreselected={
+                    props.preselectedSuggestion !== undefined &&
+                    props.preselectedSuggestion === index
+                  }
+                />
+              ))}
+            {props.EmptyComponent &&
+              props.tags.length === 0 &&
+              !props.allowNew &&
+              !props.isWaitingForMoreInput &&
+              !props.loading && (
+                <li className="w-100 text-center p-2">
+                  {props.EmptyComponent}
+                </li>
+              )}
+          </ul>
+        </div>
+      </Popper>
+    )
+  );
+}
+
+const SuggestionsWrapped = Suggestions;
+
+export default SuggestionsWrapped;

package/src/lib/components/text/Text.tsx

@@ -0,0 +1,200 @@
+// Libs
+import * as React from 'react';
+
+// Misc
+import InputGroup from '../inputGroup/InputGroup';
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+} from '../base/input/BaseInput';
+import { withFormContext } from '../form/withFormContext';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+import Button from '../button';
+import * as PlusIcon from 'material-design-icons/content/svg/production/ic_add_24px.svg';
+import classNames from 'classnames';
+
+export interface TextProps extends BaseInputProps<HTMLInputElement> {
+  mask?: string;
+  reverse?: boolean;
+  placeholder?: string;
+  stopClickPropagation?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
+  readOnly?: boolean;
+  type?: 'number' | 'text';
+  maxLength?: number;
+  showClearButton?: boolean;
+  after?: React.ReactNode;
+  before?: React.ReactNode;
+  sizeFromValue?: boolean;
+  onNumberChange?: (number: number, isValid: boolean) => void;
+  number?: number;
+}
+
+export interface TextState extends BaseInputState {}
+
+export class TextRaw extends BaseInput<TextProps, TextState, HTMLInputElement> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    type: 'text',
+    stopClickPropagation: true,
+    readOnly: false,
+  }) as TextProps;
+
+  constructor(props: TextProps) {
+    super(props);
+    if (props.number !== undefined || props.onNumberChange) {
+      const value = props.number?.toString() ?? '';
+      const res = this.handleValueChange(value, true, [], props, true);
+      this.state = {
+        ...this.state,
+        isValid: res.isValid,
+        errors: res.errors,
+        value,
+      };
+      if (!this.props.ignoreContext) {
+        this.props.formContext &&
+          this.props.formContext.updateCallback(this.componentId, {
+            validation: {
+              isValid: res.isValid,
+              errors: res.errors,
+            },
+          });
+      }
+    }
+  }
+
+  public componentDidUpdate(prevProps: TextProps, prevState: TextState) {
+    if (
+      this.props.onNumberChange &&
+      (this.state.isValid !== prevState.isValid ||
+        this.state.value !== prevState.value) &&
+      this.props.number !== Number(this.state.value)
+    ) {
+      const num = Number(this.state.value);
+      if (this.state.value === '') {
+        this.props.onNumberChange(undefined, this.state.isValid);
+      } else if (!isNaN(num)) {
+        this.props.onNumberChange(num, this.state.isValid);
+      }
+    }
+    if (
+      (prevProps.number !== undefined || this.props.number !== undefined) &&
+      this.props.number !== prevProps.number
+    ) {
+      this.handleValueChange(this.props.number?.toString() ?? '');
+    }
+    if (
+      !this.props.onNumberChange &&
+      (prevProps.value !== this.props.value ||
+        prevProps.validators !== this.props.validators ||
+        prevProps.customValidators !== this.props.customValidators ||
+        prevProps.required !== this.props.required)
+    ) {
+      this.handleValueChange(this.props.value, true, [], this.props);
+    }
+  }
+
+  public render() {
+    const clearButtonHidden = !this.state.value?.length || this.props.disabled;
+    return (
+      <InputGroup
+        title={this.props.title}
+        tooltip={this.props.tooltip}
+        className={this.props.inputGroupClassName}
+      >
+        <div
+          className={`input__base text-input ${this.getValidationClass()} 
+                    ${this.props.readOnly ? 'text-input--readOnly' : ''} ${
+            this.props.className ? this.props.className : ''
+          }`}
+          onClick={this.containerClick}
+          ref={this.containerRef}
+        >
+          <div className="text-input__textWrapper">
+            {this.props.before}
+            <input
+              {...(this.props.id && {
+                id: this.props.id,
+              })}
+              ref={this.inputRef}
+              placeholder={this.props.placeholder}
+              disabled={this.getDisabled()}
+              required={this.props.required}
+              className={this.state.value ? 'filled' : ''}
+              onChange={this.handleChange}
+              value={this.state.value ?? ''}
+              onBlur={this.handleBlur}
+              onFocus={this.handleFocus}
+              readOnly={this.props.readOnly}
+              onKeyDown={this.onKeyDown}
+              type={this.props.type}
+              onClick={this.props.onClick}
+              maxLength={this.props.maxLength}
+              size={
+                this.props.sizeFromValue
+                  ? this.props.value?.length || 1
+                  : undefined
+              }
+            />
+            {this.props.after}
+            {!this.props.readOnly && this.props.showClearButton && (
+              <Button
+                {...(this.props.id && {
+                  id: this.props.id + '-clear-button',
+                })}
+                disabled={clearButtonHidden}
+                unobtrusive={true}
+                noShadow={true}
+                onClick={this.clearClick}
+                className={classNames(
+                  'text-input__clearButton line-height--0',
+                  {
+                    'text-input__clearButton--hidden': clearButtonHidden,
+                  }
+                )}
+              >
+                <PlusIcon className="transform-rotate--45 line-height--0" />
+              </Button>
+            )}
+            <span className="highlight" />
+            <span className="bar" />
+            {this.renderDefaultValidation()}
+            {this.props.label && (
+              <label className={this.props.readOnly ? 'label--focused' : ''}>
+                {this.renderLabel()}
+              </label>
+            )}
+          </div>
+        </div>
+      </InputGroup>
+    );
+  }
+
+  private clearClick = () => {
+    if (this.inputRef.current) {
+      var nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      if (nativeTextAreaValueSetter) {
+        nativeTextAreaValueSetter.call(this.inputRef.current, '');
+
+        const event = new Event('input', { bubbles: true });
+        this.inputRef.current.dispatchEvent(event);
+      }
+    }
+  };
+
+  private containerClick = (e: React.MouseEvent<HTMLDivElement>) =>
+    this.props.stopClickPropagation && e.stopPropagation();
+
+  private onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>
+    this.props.onKeyDown && this.props.onKeyDown(e);
+}
+
+export const Text = withThemeContext<TextProps, InstanceType<typeof TextRaw>>(
+  withFormContext<TextProps>(TextRaw),
+  'text'
+);
+
+export default Text;

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

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

package/src/lib/components/textArea/TextArea.tsx

@@ -0,0 +1,109 @@
+// Libs
+import * as React from 'react';
+
+// Misc
+import InputGroup from '../inputGroup/InputGroup';
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+} from '../base/input/BaseInput';
+import { withFormContext } from '../form/withFormContext';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+
+export interface TextAreaProps extends BaseInputProps<HTMLTextAreaElement> {
+  mask?: string;
+  reverse?: boolean;
+  placeholder?: string;
+  stopClickPropagation?: boolean;
+  inputRef?: (input: HTMLTextAreaElement) => void;
+  readOnly?: boolean;
+  type?: 'number' | 'text';
+  minRows?: number;
+  maxRows?: number;
+  maxLength?: number;
+}
+
+export interface TextAreaState extends BaseInputState {}
+
+export class TextAreaRaw extends BaseInput<
+  TextAreaProps,
+  TextAreaState,
+  HTMLTextAreaElement
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    type: 'text',
+    placeholder: '',
+    stopClickPropagation: true,
+    readOnly: false,
+  }) as unknown as TextAreaProps;
+  private elem: HTMLTextAreaElement;
+
+  constructor(props: TextAreaProps) {
+    super(props);
+  }
+
+  public render() {
+    return (
+      <InputGroup
+        title={this.props.title}
+        className={this.props.inputGroupClassName}
+        tooltip={this.props.tooltip}
+      >
+        <div
+          className={`input__base textArea-input ${this.getValidationClass()} 
+                    ${this.props.readOnly ? 'textArea-input--readOnly' : ''} 
+                    ${this.props.className ? this.props.className : ''}`}
+          onClick={this.onContainerClick}
+          ref={this.containerRef}
+        >
+          <TextareaAutosize
+            {...(this.props.id && {
+              id: this.props.id,
+            })}
+            ref={this.elemRef}
+            placeholder={this.props.placeholder}
+            disabled={this.getDisabled()}
+            required={this.props.required}
+            className={this.state.value ? 'filled' : ''}
+            onChange={this.handleChange}
+            value={this.state.value}
+            onBlur={this.handleBlur}
+            onFocus={this.handleFocus}
+            readOnly={this.props.readOnly}
+            onKeyDown={this.onKeyDown}
+            minRows={this.props.minRows}
+            maxRows={this.props.maxRows}
+            maxLength={this.props.maxLength}
+          />
+          <span className="highlight" />
+          <span className="bar" />
+          {this.renderDefaultValidation()}
+          {this.props.label && <label>{this.renderLabel()}</label>}
+        </div>
+      </InputGroup>
+    );
+  }
+
+  public focus() {
+    this.elem && this.elem.focus();
+  }
+
+  private onKeyDown = (e) => this.props.onKeyDown && this.props.onKeyDown(e);
+
+  private elemRef = (elem: HTMLTextAreaElement) => {
+    this.elem = elem;
+    this.props.inputRef && this.props.inputRef(elem);
+  };
+
+  private onContainerClick = (e) =>
+    this.props.stopClickPropagation && e.stopPropagation();
+}
+
+export const TextArea = withThemeContext<
+  TextAreaProps,
+  InstanceType<typeof TextAreaRaw>
+>(withFormContext<TextAreaProps>(TextAreaRaw), 'textArea');
+
+export default TextArea;

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

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

package/src/lib/components/themeProvider/ThemeContext.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PartialBy } from '../utils/Typescript';
+import { Theme } from '../../types/Theme';
+
+export type OmitThemeContext<P extends ThemeContextProps> = PartialBy<
+  P,
+  'theme'
+>;
+
+export interface ThemeContextProps {
+  theme?: Theme;
+}
+
+const ThemeContext = React.createContext<Theme | undefined>(undefined);
+export const ThemeContextProvider = ThemeContext.Provider;
+export const ThemeContextConsumer = ThemeContext.Consumer;

package/src/lib/components/themeProvider/ThemeProvider.tsx

@@ -0,0 +1,21 @@
+// Libs
+import * as React from 'react';
+import { Theme } from '../../types/Theme';
+
+// Misc
+import { ThemeContextProvider } from './ThemeContext';
+
+export interface ThemeProviderProps {
+  theme: Theme;
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = (props) => {
+  return (
+    <ThemeContextProvider value={props.theme}>
+      {props.children}
+    </ThemeContextProvider>
+  );
+};
+
+export default ThemeProvider;

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

@@ -0,0 +1,4 @@
+export * from './ThemeContext';
+export * from './withThemeContext';
+export * from './ThemeProvider';
+export { default } from './ThemeProvider';

package/src/lib/components/themeProvider/withThemeContext.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ThemeContextConsumer, ThemeContextProps } from './ThemeContext';
+import { ThemeOverrides } from '../../types/ThemeOverrides';
+import { Theme } from '../../types/Theme';
+
+const getOverrideProps = (theme: Theme, key: keyof ThemeOverrides) =>
+  key && theme?.overrides?.[key]?.props;
+
+export function withThemeContext<P extends ThemeContextProps, ComponentType>(
+  Component: React.ForwardRefExoticComponent<P> | React.ComponentType<P>,
+  componentName?: keyof ThemeOverrides
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<P> & React.RefAttributes<ComponentType>
+> {
+  const WithThemeContext = React.forwardRef<ComponentType, P>((props, ref) => {
+    return (
+      <ThemeContextConsumer>
+        {value => (
+          <Component
+            ref={ref}
+            {...getOverrideProps(value, componentName)}
+            {...props}
+            theme={value}
+          />
+        )}
+      </ThemeContextConsumer>
+    );
+  });
+  return WithThemeContext;
+}