guestbell-forms 3.0.39 → 3.0.41

package/src/lib/components/select/Select.tsx

@@ -0,0 +1,335 @@
+// Libs
+import * as React from 'react';
+
+// Misc
+import InputGroup from '../inputGroup/InputGroup';
+import * as PlusIcon from 'material-design-icons/content/svg/production/ic_add_circle_outline_24px.svg';
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+  ValidationError,
+  defaultBaseTranslations,
+} from '../base/input/BaseInput';
+import { Button } from '../button/Button';
+import { withFormContext } from '../form/withFormContext';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+
+export interface SelectValue {
+  value: number | string;
+  label?: string;
+  forceSelected?: boolean;
+}
+
+export interface SelectProps extends BaseInputProps<HTMLSelectElement> {
+  values?: SelectValue[];
+  defaultEmpty?: boolean;
+  multiple?: boolean;
+  selectedValues?: SelectValue[];
+  onSelectedValuesChange?: (newValues: SelectValue[]) => void;
+  inputRef?: (input: HTMLSelectElement) => void;
+  readOnly?: boolean;
+  readonlyEmptyPlaceholder?: string;
+}
+
+export interface SelectState extends BaseInputState {}
+
+export class SelectRaw extends BaseInput<
+  SelectProps,
+  SelectState,
+  HTMLSelectElement
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    defaultEmpty: true,
+    multiple: false,
+    readOnly: false,
+    readonlyEmptyPlaceholder: 'N/A',
+  });
+
+  constructor(props: SelectProps) {
+    super(props);
+    const val = !props.value
+      ? props.defaultEmpty
+        ? ''
+        : props.values && props.values.length > 0
+        ? props.values[0]
+        : ''
+      : props.value;
+    this.state = Object.assign(this.state, { value: val });
+    this.handleChangeCustom = this.handleChangeCustom.bind(this);
+  }
+
+  public componentDidMount() {
+    this.props.multiple && this.handleValid(this.props.selectedValues);
+  }
+
+  public componentDidUpdate(oldProps: SelectProps) {
+    if (
+      oldProps.value !== this.props.value ||
+      oldProps.validators !== this.props.validators ||
+      oldProps.customValidators !== this.props.customValidators ||
+      oldProps.required !== this.props.required ||
+      oldProps.selectedValues !== this.props.selectedValues
+    ) {
+      if (this.props.multiple) {
+        this.handleValid(this.props.selectedValues);
+      } else {
+        this.handleValueChange(this.props.value, true, [], this.props);
+      }
+    }
+  }
+
+  public render() {
+    const finalValues = this.props.multiple
+      ? this.props.values.filter(
+          item =>
+            this.props.selectedValues.findIndex(t => t.value === item.value) < 0
+        )
+      : this.props.values;
+    return (
+      <InputGroup
+        title={this.props.title}
+        tooltip={this.props.tooltip}
+        className={this.props.inputGroupClassName}
+      >
+        <div
+          className={
+            'input__base select-input ' +
+            this.getValidationClass() +
+            ' ' +
+            (this.props.className ? this.props.className : '') +
+            ' ' +
+            (this.props.readOnly ? 'readonly' : '') +
+            ' ' +
+            (this.props.multiple ? 'multiple' : '')
+          }
+          ref={this.containerRef}
+        >
+          {this.renderSelectedValues()}
+          {finalValues.length > 0 &&
+            ((this.props.multiple && !this.props.readOnly) ||
+              !this.props.multiple) && (
+              <div className="select-input__select__wrapper">
+                {(!this.props.multiple && !this.props.readOnly) ||
+                this.props.multiple ? (
+                  <select
+                    {...(this.props.id && {
+                      id: this.props.id,
+                    })}
+                    ref={this.inputRef}
+                    disabled={this.getDisabled()}
+                    required={this.props.required}
+                    onChange={this.handleChangeCustom}
+                    value={this.state.value}
+                    className={
+                      'select-input__select ' +
+                      (this.state.value !== '' ||
+                      (this.props.selectedValues &&
+                        this.props.selectedValues.length > 0)
+                        ? 'filled'
+                        : '')
+                    }
+                    onBlur={this.handleBlur}
+                    onFocus={this.handleFocus}
+                    tabIndex={0}
+                  >
+                    {this.props.defaultEmpty && (
+                      <option
+                        key={-1}
+                        disabled={true}
+                        value=""
+                        style={{ display: 'none' }}
+                      />
+                    )}
+                    {finalValues.map((value, index) => (
+                      <option key={index} value={value.value}>
+                        {value.label ? value.label : value.value}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <span
+                    className={
+                      'select-input__select ' +
+                      (this.state.value !== '' ||
+                      (this.props.selectedValues &&
+                        this.props.selectedValues.length > 0)
+                        ? 'filled'
+                        : '')
+                    }
+                  >
+                    {this.renderReadonly()}
+                  </span>
+                )}
+                <span className="highlight" />
+                <span className="bar" />
+                {this.renderDefaultValidation()}
+                {this.props.label && finalValues.length > 0 && (
+                  <label>{this.renderLabel()}</label>
+                )}
+              </div>
+            )}
+        </div>
+      </InputGroup>
+    );
+  }
+
+  protected handleValueChange(
+    value: string,
+    isValid: boolean = true,
+    errors: ValidationError[] = [],
+    props: SelectProps = this.props,
+    initializing: boolean = false
+  ) {
+    if (!this.props.multiple) {
+      return super.handleValueChange(
+        value,
+        isValid,
+        errors,
+        props,
+        initializing
+      );
+    } else if (!initializing) {
+      this.handleValid(this.props.selectedValues);
+    }
+    return {
+      isValid: true,
+      errors: [],
+    };
+  }
+
+  protected handleBlur() {
+    this.props.onBlur && this.props.onBlur();
+    let state = { focused: false };
+    if (!this.state.touched && this.props.touchOn === 'blur') {
+      state = Object.assign(state, { touched: true });
+      if (!this.props.multiple) {
+        this.handleValueChange(this.state.value);
+      } else {
+        this.handleValid(this.props.selectedValues);
+      }
+    }
+    this.setState(state);
+  }
+
+  protected handleFocus() {
+    this.props.onFocus?.();
+    let state = { focused: true };
+    if (!this.state.touched && this.props.touchOn === 'focus') {
+      state = Object.assign(state, { touched: true });
+      if (!this.props.multiple) {
+        this.handleValueChange(this.state.value);
+      } else {
+        this.handleValid(this.props.selectedValues);
+      }
+    }
+    this.setState(state);
+  }
+
+  private handleChangeCustom(event: React.ChangeEvent<HTMLSelectElement>) {
+    if (this.props.multiple) {
+      let value = event.target.value;
+      let val = this.props.values.filter(item => item.value === value)[0];
+      if (!val) {
+        if (!isNaN(Number(value))) {
+          let valNumber = Number(value);
+          val = this.props.values.filter(item => item.value === valNumber)[0];
+        }
+      }
+      let newValues = this.props.selectedValues.concat(val);
+      if (val) {
+        this.props.onSelectedValuesChange &&
+          this.props.onSelectedValuesChange(newValues);
+        this.handleValid(newValues);
+        this.setState({ value: '' });
+      }
+    } else {
+      this.handleChange(event);
+    }
+  }
+
+  private handleValid(newValues: SelectValue[]) {
+    let isValid = true;
+    let errors: ValidationError[] = [];
+    if (this.props.required) {
+      if (newValues.length === 0) {
+        isValid = false;
+        errors.push(this.getTranslations(defaultBaseTranslations).required);
+      }
+    }
+    if (this.props.customValidators) {
+      this.props.customValidators.forEach(customValidator => {
+        let validInner = false;
+        validInner = customValidator.Validate(
+          this.state?.value,
+          this.props.required,
+          error => errors.push(error)
+        );
+        if (isValid && !validInner) {
+          isValid = validInner;
+        }
+      });
+    }
+    if (isValid) {
+      this.setValid();
+    } else {
+      this.setInvalid(errors);
+    }
+  }
+
+  private renderReadonly() {
+    const value = this.props.values.filter(
+      item => item.value.toString() === this.state.value
+    )[0];
+    return value ? (value.label ? value.label : value.value) : '';
+  }
+
+  private renderSelectedValues() {
+    return this.props.multiple ? (
+      this.props.selectedValues.length > 0 ? (
+        <div className="select-input__selectedValue__wrapper">
+          {this.props.selectedValues.map((item, index) => (
+            <div className="select-input__selectedValue" key={index}>
+              {item.label ? item.label : item.value}
+              {!this.props.readOnly && (
+                <Button
+                  disabled={item.forceSelected}
+                  circular={true}
+                  blank={true}
+                  onClick={this.removeItemClick(item)}
+                  className="ml-1 transform-rotate--45 line-height--0 p-0"
+                >
+                  <PlusIcon />
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      ) : (
+        this.props.readOnly && (
+          <div className="select-input__selectedValue__wrapper">
+            <div className="select-input__selectedValue">
+              {this.props.readonlyEmptyPlaceholder}
+            </div>
+          </div>
+        )
+      )
+    ) : null;
+  }
+
+  private removeItemClick = (item: SelectValue) => () => {
+    const newValues = this.props.selectedValues.filter(
+      sv => sv.value !== item.value
+    );
+    this.handleValid(newValues);
+    this.props.onSelectedValuesChange &&
+      this.props.onSelectedValuesChange(newValues);
+  };
+}
+
+export const Select = withThemeContext<
+  SelectProps,
+  InstanceType<typeof SelectRaw>
+>(withFormContext<SelectProps>(SelectRaw), 'select');
+
+export default Select;

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

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

package/src/lib/components/submit/Submit.tsx

@@ -0,0 +1,117 @@
+// Libs
+import * as React from 'react';
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+  defaultBaseTranslations,
+} from '../base/input/BaseInput';
+import { Button, ButtonProps } from '../button/Button';
+import { withFormContext } from '../form/withFormContext';
+import { FormValidationSummaryRaw } from './../form/FormValidationSummary';
+import SubmitValidationSummary from './subComponents/SubmitValidationSummary';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+
+// Misc
+export const defaultSubmitTranslations = {
+  ...defaultBaseTranslations,
+  hangOn: 'Hang on',
+  needsFixing: '... needs fixing',
+};
+
+export type SubmitTranslations = Partial<typeof defaultSubmitTranslations>;
+
+export type SubmitProps = BaseInputProps<never, SubmitTranslations> &
+  ButtonProps & {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    validateForm?: boolean;
+    disabledTitle?: string;
+    showValidationSummaryTooltip?: boolean;
+  };
+
+export interface SubmitState extends BaseInputState {}
+
+export class SubmitRaw extends BaseInput<
+  SubmitProps,
+  SubmitState,
+  never,
+  SubmitTranslations
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    validateForm: true,
+    ignoreContext: true,
+    reRendersWhenContextChanges: true,
+    showValidationSummaryTooltip: true,
+    preventsDefault: true,
+  });
+
+  constructor(props: SubmitProps) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  public render() {
+    const disabled = this.isDisabled();
+    const translations = this.getTranslations(defaultSubmitTranslations);
+    return (
+      <Button
+        {...this.props}
+        className={`${this.props.className ? this.props.className : ''}`}
+        onClick={this.handleClick}
+        disabled={disabled}
+        buttonProps={{
+          ...this.props.buttonProps,
+          type: 'submit',
+          title: disabled
+            ? this.props.disabledTitle
+            : this.props.buttonProps && this.props.buttonProps.title,
+        }}
+        tooltip={
+          this.props.tooltip
+            ? this.props.tooltip
+            : this.props.showValidationSummaryTooltip &&
+              !this.props.formContext.isFormValid && (
+                <FormValidationSummaryRaw
+                  title={translations.hangOn}
+                  footer={translations.needsFixing}
+                  containerClassName=""
+                  headerClassName="submitValidationSummary__header"
+                  footerClassName="submitValidationSummary__footer"
+                  Component={SubmitValidationSummary}
+                  formContext={this.props.formContext}
+                />
+              )
+        }
+        tooltipProps={{
+          theme: 'validation',
+          ...this.props.tooltipProps,
+        }}
+      >
+        {this.props.children}
+      </Button>
+    );
+  }
+
+  private handleClick(e: React.MouseEvent<HTMLButtonElement>) {
+    if (this.props.preventsDefault) {
+      e.preventDefault();
+    }
+    this.props.onClick && this.props.onClick(e);
+  }
+
+  private isDisabled() {
+    const disabled = this.getDisabled();
+    return disabled
+      ? disabled
+      : this.props.validateForm && this.props.formContext
+      ? !this.props.formContext.isFormValid
+      : false;
+  }
+}
+
+export const Submit = withThemeContext<
+  SubmitProps,
+  InstanceType<typeof SubmitRaw>
+>(withFormContext<SubmitProps>(SubmitRaw), 'submit');
+
+export default Submit;

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

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

package/src/lib/components/submit/subComponents/SubmitValidationSummary.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { FormValidationSummaryComponentProps } from './../../form/FormValidationSummary';
+import Button from '../../button';
+import * as ArrowIcon from 'material-design-icons/maps/svg/production/ic_my_location_24px.svg';
+
+export type SubmitValidationSummaryProps = {} & FormValidationSummaryComponentProps;
+
+const SubmitValidationSummary: React.FC<SubmitValidationSummaryProps> = props => {
+  return (
+    <React.Fragment>
+      {props.componentsWithErrors.map((component, index) => {
+        return (
+          <div key={index} className="submitValidationSummary__item">
+            <div className="submitValidationSummary__item__header">
+              {component.validation.name
+                ? component.validation.name
+                : 'unknown'}
+            </div>
+            {/*<div className="submitValidationSummary__item__errors">
+                            {component.validation.errors && component.validation.errors.map((err, errIndex) => (
+                                <span
+                                    className="submitValidationSummary__item__error"
+                                    key={errIndex}
+                                >
+                                    {err}
+                                </span>
+                            ))}
+                            </div>*/}
+            <div style={{ flex: 'auto' }} />
+            {component.componentApi &&
+              component.componentApi.focus &&
+              component.componentApi.scrollTo && (
+                <Button
+                  icon={true}
+                  className="submitValidationSummary__item__locate-button"
+                  circular={true}
+                  type="white"
+                  small={true}
+                  blank={true}
+                  onClick={() => {
+                    component.componentApi.scrollTo();
+                    component.componentApi.focus();
+                  }}
+                >
+                  <ArrowIcon />
+                </Button>
+              )}
+          </div>
+        );
+      })}
+    </React.Fragment>
+  );
+};
+
+export default SubmitValidationSummary;