x25 17.7.0 → 17.7.2

package/src/Inputs/DelayInputChange.tsx

@@ -1,104 +0,0 @@
-/* eslint-disable max-len */
-import React, { useState } from "react";
-
-type TypeInputPropTypes = {
-  readonly autoComplete?: string;
-  readonly autoFocus?: boolean;
-  readonly className?: string;
-  readonly delay?: number;
-  readonly id?: string;
-  readonly inputRef?: React.RefObject<HTMLInputElement>;
-  readonly name?: string;
-  readonly placeholder?: string;
-  readonly tabIndex?: number;
-  readonly value: any;
-  readonly change: (event: any) => void;
-};
-
-const delay = 700;
-
-export const
-  DelayInputChange = (props : TypeInputPropTypes) => {
-    const
-      [timeoutValue, setTimeoutValue] = useState(0 as any),
-      [isWaiting, setIsWaiting] = useState(false),
-      [value, setValue] = useState(props.value),
-
-      stopWaiting = (newValue: string) => {
-        clearTimeout(timeoutValue);
-
-        setIsWaiting(false);
-        setValue(newValue);
-
-        props.change({
-          target: {
-            value: newValue,
-          },
-        });
-      },
-      handleKeyPressed = (event: any) => {
-        if (event.key === "Enter") {
-          stopWaiting(value);
-        }
-      },
-      delayChange = ({ target: { value : newValue } } : any) => {
-        clearTimeout(timeoutValue);
-
-        if (value === "") {
-          stopWaiting(newValue);
-        } else {
-          setIsWaiting(true);
-          setValue(newValue);
-
-          const newTimeout = setTimeout(() => {
-            setIsWaiting(false);
-            props.change({
-              target: {
-                value: newValue,
-              },
-            });
-          }, props.delay || delay);
-
-          setTimeoutValue(newTimeout);
-        }
-      };
-
-    React.useEffect(() => {
-      if (props.value !== value) {
-        setValue(props.value);
-      }
-    }, [props.value]);
-
-    return (
-      <div className="delay-input">
-        <input
-          autoComplete={props.autoComplete}
-          autoFocus={props.autoFocus}
-          className={props.className}
-          id={props.id}
-          name={props.name}
-          onChange={delayChange}
-          onKeyPress={handleKeyPressed}
-          placeholder={props.placeholder}
-          ref={props.inputRef}
-          tabIndex={props.tabIndex}
-          value={value}
-        />
-        {isWaiting ? <div className="spinner-border spinner-border-sm text-primary  d-inline-block" /> : (
-          value === "" ? null : (
-            <i
-              className={`fa fa-times cursor-pointer
-               text-primary clear-value d-inline-block`}
-              onClick={() => {
-                props.change({
-                  target: {
-                    value: "",
-                  },
-                });
-              }} />
-          )
-        )}
-      </div>
-    );
-  };
-

package/src/Inputs/InputTemplate.tsx

@@ -1,68 +0,0 @@
-
-
-import classnames from "classnames";
-import React from "react";
-import { MetaProps } from "src/types";
-
-type InputTemplatePropTypes = {
-  readonly autoComplete?: string;
-  readonly autoFocus?: boolean;
-  readonly disabled?: boolean;
-  readonly divClass?: string;
-  readonly input: any;
-  readonly inputClass?: string;
-  readonly label: string;
-  readonly left?: string;
-  readonly meta: MetaProps;
-  readonly placeholder: string;
-  readonly right?: string;
-  readonly tabIndex?: string;
-  readonly theType?: "input" | "password";
-  readonly inputRef?: (callback: (node: any) => void) => void;
-};
-
-export const OldInputTemplate = (props: InputTemplatePropTypes) => {
-  const
-    {
-      input = {}, theType, label, inputRef, autoFocus, inputClass, divClass,
-      placeholder, left, tabIndex, right, autoComplete, disabled,
-      meta: { submitting, touched, error } = {},
-    } = props,
-    warningClass = `${touched && error ? " is-invalid" : ""}`,
-    customClass = `${inputClass ? ` ${inputClass}` : ""}`,
-    classForInput = `form-control ${warningClass}${customClass}`,
-    classForDiv = `form-group row mt-md-2 ${divClass ? divClass : ""}`;
-
-  return (
-    <div className={classnames(`${classForDiv} d-flex`, {
-      "is-invalid": touched && error,
-    })}>
-      <label
-        className={`${left ? left : "col-md-4 text-md-end"} form-control-label align-self-center`}
-        htmlFor={input.name}>
-        {label}
-      </label>
-      <div className={`${right ? right : "col-md-8"} align-self-center`}>
-        <input
-          {...input}
-          aria-label={label}
-          autoComplete={autoComplete}
-          autoFocus={autoFocus}
-          className={classForInput}
-          disabled={submitting || disabled}
-          id={input.name} placeholder={placeholder}
-          ref={inputRef ? inputRef : null}
-          tabIndex={tabIndex}
-          type={theType}
-        />
-        <div className="invalid-feedback">
-          {touched && error ? (
-            <span>
-              {error}
-            </span>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/Inputs/LabelTemplate.tsx

@@ -1,46 +0,0 @@
-
-import React from "react";
-import { MetaProps } from "src/types";
-
-type LabelTemplatePropTypes = {
-  readonly input: any;
-  readonly label: string;
-  readonly tabIndex?: string;
-  readonly offset?: string;
-  readonly meta: MetaProps;
-};
-
-export const OldLabelTemplate = (props: LabelTemplatePropTypes) => {
-  const {
-    input = {}, tabIndex, label, offset, meta: { submitting, touched, error } = {},
-  } = props;
-  
-  return (
-    <div className="container">
-      <div className="form-group mt-md-2 row mb-1">
-        <div className={`${offset || ""} col custom-control custom-checkbox`}>
-          <input
-            {...input}
-            aria-label={label}
-            className="custom-control-input"
-            disabled={submitting}
-            id={input.name}
-            tabIndex={tabIndex}
-            type="checkbox" />
-          <label
-            className="custom-control-label"
-            htmlFor={input.name}>
-            {label}
-          </label>
-          <div className="invalid-feedback">
-            {touched && error ? (
-              <span>
-                {error}
-              </span>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/Inputs/NumericInput.tsx

@@ -1,130 +0,0 @@
-
-
-
-import classnames from "classnames";
-import React from "react";
-import { formatZeroValue } from "../utility";
-import { clearFloatOnBlur, floatToEnglishComma, getFloatValueToStore, isFloat } from "./common";
-
-type NumericPropTypes = {
-  readonly autoFocus?: boolean;
-  readonly currency?: boolean;
-  readonly customClass?: any;
-  readonly disabled?: boolean;
-  readonly input: any;
-  readonly label?: string;
-  readonly meta: any;
-  readonly onRegisterRef?: any;
-  readonly optional?: boolean;
-  readonly placeholder?: string;
-  readonly precision?: number;
-  readonly size?: number;
-  readonly tabIndex?: number;
-  readonly value?: string;
-  readonly form: any;  readonly formatValue: (raw: any, optional?: boolean) => string;
-  readonly normalizeValue: (raw: any) => any;
-  readonly onBlur?: () => void;
-  readonly onChange: (event: any) => void;
-  readonly onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  readonly onKeyDown?: (event: any) => void;
-};
-
-export const
-  OldNumericInput = (props : NumericPropTypes) => {
-    const
-      {
-        precision = 2,
-        customClass, input, label, disabled, currency, tabIndex, onRegisterRef, formatValue = formatZeroValue,
-        size, placeholder, meta: { submitting, touched, error } = {},
-      } = props,
-
-      [value, setValue] = React.useState(input.value || ""),
-
-      noCurrency = (typeof currency === "undefined" || currency === false),
-      valueToShow = formatValue(value, props.optional),
-
-      updateValue = (targetValue : any) => {        
-        setValue(targetValue);
-
-        let valueToStore = targetValue;
-
-        if (isFloat(floatToEnglishComma(targetValue))) {
-          valueToStore = getFloatValueToStore(targetValue);
-        }
-
-        input.onChange(valueToStore);
-      },
-
-      handleBlur = ({ target: { value: targetValue } } : any) => {
-        const
-          newValue = clearFloatOnBlur(value, precision),
-          hasChanged = value !== newValue;
-
-        if (hasChanged) {
-          updateValue(newValue);
-        }
-
-        if (typeof input.onBlur === "function") {
-          input.onBlur(targetValue);
-        }
-      },
-
-      handleChange = ({ target: { value: targetValue } }: any) => {
-        updateValue(targetValue);
-      },
-
-      handleFocus = (event : React.FocusEvent<HTMLInputElement>) => {
-        if (typeof input.onFocus === "function") {
-          input.onFocus(event);
-        }
-
-        if (typeof props.onFocus === "function") {
-          props.onFocus(event);
-        }
-      },
-
-      inputComponent = (
-        <input
-          aria-label={label}
-          autoFocus={props.autoFocus}
-          className={classnames(`form-control ${customClass || ""}`, {
-            "is-invalid": touched && error,
-          })}
-          disabled={submitting || disabled}
-          id={input.name}
-          inputMode="decimal"
-          maxLength={size}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onKeyDown={props.onKeyDown}
-          placeholder={placeholder || label}
-          ref={onRegisterRef}
-          tabIndex={tabIndex}
-          type="text"
-          value={valueToShow}
-        />
-      );
-
-    React.useEffect(() => {
-      if (isFloat(input.value) || input.value === "") {
-        updateValue(input.value);
-      }
-    }, [input.value]);
-
-    if (noCurrency) {
-      return inputComponent;
-    }
-
-    return (
-      <div className="input-group">
-        {inputComponent}
-        <div className="input-group-append">
-          <span className="input-group-text">
-            {currency}
-          </span>
-        </div>
-      </div>
-    );
-  };
-

package/src/Inputs/NumericTemplate.tsx

@@ -1,126 +0,0 @@
-
-type NumericPropTypes = {
-  readonly autoFocus?: boolean;
-  readonly customClass?: any;
-  readonly disabled?: boolean;
-  readonly divClass?: any;
-  readonly input: any;
-  readonly inputClass?: string;
-  readonly label?: string;
-  readonly left?: string;
-  readonly meta: MetaProps;
-  readonly onRegisterRef?: any;
-  readonly optional?: boolean;
-  readonly placeholder?: string;
-  readonly precision?: number;
-  readonly right?: string;
-  readonly size?: number;
-  readonly tabIndex?: number;
-  readonly type: string;
-  readonly value?: string;
-  readonly formatValue: (raw: any, optional?: boolean) => string;
-  readonly normalizeValue: (raw: string | null) => any;
-  readonly onBlur?: () => void;
-  readonly onChange?: (event: any) => void;
-  readonly onKeyDown?: (event: any) => void;
-};
-
-import classnames from "classnames";
-import React from "react";
-import { formatZeroValue } from "../utility";
-import { clearFloatOnBlur, floatToEnglishComma, getFloatValueToStore, isFloat } from "./common";
-import { MetaProps } from "src/types";
-
-export const
-  OldNumericTemplate = (props : NumericPropTypes) => {
-    const
-      {
-        precision = 2,
-        input = {}, right, tabIndex, divClass, label,
-        onRegisterRef,
-        meta: { submitting, touched, error } = {}, formatValue = formatZeroValue,
-        type, autoFocus, inputClass, placeholder, left, size, disabled,
-      } = props,
-
-      [value, setValue] = React.useState(props.input.value || ""),
-
-      valueToShow = formatValue(value, props.optional),
-
-      updateValue = (targetValue: any) => {
-        setValue(targetValue);
-
-        let valueToStore = targetValue;
-
-        if (isFloat(floatToEnglishComma(targetValue))) {
-          valueToStore = getFloatValueToStore(targetValue);
-        }
-
-        input.onChange(valueToStore);
-      },
-
-      handleBlur = (event: any) => {
-        const
-          newValue = clearFloatOnBlur(value, precision),
-          hasChanged = value !== newValue;
-
-        if (hasChanged) {
-          updateValue(newValue);
-        }
-
-        input.onBlur(event);
-      },
-
-      handleChange = ({ target: { value : targetValue } }: any) => {
-        updateValue(targetValue);
-      },
-      warningClass = `${touched && error ? " is-invalid" : ""}`,
-      customClass = `${inputClass ? ` ${inputClass}` : ""}`,
-      classForInput = `form-control ${warningClass}${customClass}`,
-      classForDiv = `form-group mt-md-2 row ${divClass ? divClass : ""}`;
-
-
-    React.useEffect(() => {
-      if (isFloat(input.value) || input.value === "") {
-        updateValue(input.value);
-      }
-    }, [input.value]);
-
-    return (
-      <div className={classnames(`${classForDiv} d-flex`, {
-        "is-invalid": touched && error,
-      })}>
-        <label
-          className={`${left ? `${left} align-self-center` : "col-md-4 text-md-end"} form-control-label align-self-center`}
-          htmlFor={input.name}>
-          {label}
-        </label>
-        <div className={right ? `${right} align-self-center` : "col-md-8 align-self-center"}>
-          <input
-            aria-label={label}
-            autoFocus={autoFocus}
-            className={classForInput}
-            disabled={submitting || disabled}
-            id={input.name}
-            inputMode="decimal"
-            maxLength={size}
-            onBlur={handleBlur}
-            onChange={handleChange}
-            onKeyDown={props.onKeyDown}
-            placeholder={placeholder}
-            ref={onRegisterRef}
-            tabIndex={tabIndex}
-            type={type}
-            value={valueToShow}
-          />
-          <div className="invalid-feedback">
-            {touched && error ? (
-              <span>
-                {error}
-              </span>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  };
-

package/src/Inputs/Selects/Custom.tsx

@@ -1,49 +0,0 @@
-
-import React from "react";
-import Simple from "./Simple";
-import { MetaProps } from "src/types";
-
-type SelectMonthPropTypes = {
-  readonly disabled: boolean;
-  readonly input: any;
-  readonly valueKey?: string;
-  readonly nameKey?: string;
-  readonly label?: string;
-  readonly isImmutable?: boolean;
-  readonly showEmptyOption?: boolean;
-  readonly tabIndex?: string;
-  readonly left?: string;
-  readonly inputClass?: string;
-  readonly right?: string;
-  readonly id?: string;
-  readonly data: any;
-  readonly meta: MetaProps;
-};
-
-const OldCustomSelect = (props: SelectMonthPropTypes) => {
-  const
-    { input = {}, meta = {} as MetaProps, left, right, label, id } = props,
-    customID = `custom-select-${input.name}${id || ""}`;
-
-  return (
-    <div className="form-group row d-flex">
-      <label
-        className={`${left ? `${left} align-self-center` : "col-md-4 text-md-end"} form-control-label align-self-center`}
-        htmlFor={customID}>
-        {label}
-      </label>
-      <div className={right ? `${right} align-self-center` : "col-md-8 align-self-center"}>
-        <Simple {...props} />
-        <div className="invalid-feedback">
-          {meta.touched && meta.error ? (
-            <span>
-              {meta.error}
-            </span>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OldCustomSelect;

package/src/Inputs/Selects/Simple.tsx

@@ -1,63 +0,0 @@
-type SelectMonthPropTypes = {
-  readonly disabled: boolean;
-  readonly input: any;
-  readonly autoFocus?: boolean;
-  readonly valueKey?: string;
-  readonly nameKey?: string;
-  readonly isImmutable?: boolean;
-  readonly showEmptyOption?: boolean;
-  readonly tabIndex?: string;
-  readonly inputClass?: string;
-  readonly id?: string;
-  readonly data: any;
-  readonly meta: MetaProps;
-};
-import classnames from "classnames";
-import React from "react";
-import { words } from "../../utility";
-import { MetaProps } from "src/types";
-
-const OldSimpleCustomSelect = (props: SelectMonthPropTypes) => {
-  const
-    {
-      autoFocus, isImmutable, showEmptyOption, valueKey = "value", nameKey = "name",
-      data, tabIndex, input = {}, id, inputClass, disabled,
-      meta : { touched, error, submitting } = {},
-    } = props,
-    theClasses = classnames(`custom-select ${inputClass || ""}`, {
-      "is-invalid": touched && error,
-    }),
-    customID = `custom-select-${input.name}${id || ""}`;
-
-  return (
-    <select
-      {...input}
-      autoFocus={autoFocus}
-      className={theClasses}
-      disabled={submitting || disabled}
-      id={customID}
-      tabIndex={tabIndex}>
-      {showEmptyOption ? <option value="">{words.Select}</option> : null}
-      {isImmutable ? data.map((current : any) => {
-        const
-          value = current.get(valueKey),
-          name = current.get(nameKey);
-
-        return (
-          <option key={value} value={value}>
-            {name}
-          </option>
-        );
-      }) : data.map(({
-        [valueKey]: value,
-        [nameKey]: name,
-      } : any) => (
-        <option key={value} value={value}>
-          {name}
-        </option>
-      ))}
-    </select>
-  );
-};
-
-export default OldSimpleCustomSelect;

package/src/Inputs/Selects/index.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Field } from "react-final-form";
-import { normalize, words } from "../../";
-import OldCustomSelect from "./Custom";
-import OldSimpleCustomSelect from "./Simple";
-
-const
-  { normalizeSelectNumeric } = normalize,
-  { years, months  } = words,
-  SelectMonth = (props: any) => (
-    <Field
-      {...props}
-      component={props.simple ? OldSimpleCustomSelect : OldCustomSelect}
-      data={months} normalize={normalizeSelectNumeric}
-    />
-  ),
-  SelectYear = (props: any) => (
-    <Field
-      {...props}
-      component={props.simple ? OldSimpleCustomSelect : OldCustomSelect}
-      data={years}
-      normalize={normalizeSelectNumeric} />
-  );
-
-export { OldCustomSelect as CustomSelect, SelectMonth, SelectYear, OldSimpleCustomSelect as SimpleCustomSelect };
-

package/src/Inputs/SimpleInput.tsx

@@ -1,42 +0,0 @@
-
-import classnames from "classnames";
-import React from "react";
-import { MetaProps } from "src/types";
-
-export type SimpleInputPropTypes = {
-  readonly autoComplete?: string;
-  readonly autoFocus?: boolean;
-  readonly customClass?: any;
-  readonly disabled?: boolean;
-  readonly input: any;
-  readonly label?: string;
-  readonly meta: MetaProps;
-  readonly placeholder?: string;
-  readonly tabIndex?: string;
-  readonly theType?: "input" | "password";
-  readonly inputRef?: (callback: (node: any) => void) => void;
-};
-
-export const OldSimpleInput = (props : SimpleInputPropTypes) => {
-  const {
-    customClass, input = {}, label, autoFocus, tabIndex, placeholder, theType, inputRef,
-    autoComplete, disabled,
-    meta: { submitting, touched, error } = {},
-  } = props;
-
-  return (
-    <input
-      {...input}
-      aria-label={label}
-      autoComplete={autoComplete}
-      autoFocus={autoFocus}
-      className={classnames(`form-control ${customClass || ""}`, {
-        "is-invalid": touched && error,
-      })} disabled={submitting || disabled}
-      id={input.name}
-      placeholder={placeholder || label}
-      ref={inputRef ? inputRef : null}
-      tabIndex={tabIndex}
-      type={theType} />
-  );
-};

package/src/Inputs/SimpleTextarea.tsx

@@ -1,43 +0,0 @@
-
-import React from "react";
-import { MetaProps } from "src/types";
-
-type TextareaPropTypes = {
-  readonly autoFocus?: boolean;
-  readonly disabled?: boolean;
-  readonly input: any;
-  readonly inputClass?: string;
-  readonly label: string;
-  readonly meta: MetaProps;
-  readonly placeholder: string;
-  readonly rows?: string;
-  readonly tabIndex?: string;
-  readonly onRegisterRef?: (callback: (node: any) => void) => void;
-};
-
-export const OldSimpleTextarea = (props: TextareaPropTypes) => {
-  const
-    {
-      disabled,
-      input = {}, label, onRegisterRef, autoFocus, inputClass, placeholder, tabIndex, rows,
-      meta: { submitting, touched, error } = {},
-    } = props,
-    warningClass = `${touched && error ? " is-invalid" : ""}`,
-    customClass = `${inputClass ? ` ${inputClass}` : ""}`,
-    classForInput = `form-control ${warningClass}${customClass}`;
-
-  return (
-    <textarea
-      {...input}
-      aria-label={label}
-      autoFocus={autoFocus}
-      className={classForInput}
-      disabled={disabled || submitting}
-      id={input.name}
-      placeholder={placeholder}
-      ref={onRegisterRef ? onRegisterRef : null}
-      rows={rows}
-      tabIndex={tabIndex}
-    />
-  );
-};