guestbell-forms 3.0.38 → 3.0.40

package/src/lib/components/time/Time.tsx

@@ -0,0 +1,296 @@
+import * as ArrowIcon from 'material-design-icons/hardware/svg/production/ic_keyboard_arrow_down_24px.svg';
+
+// 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 TimeUtil from '../utils/TimeUtil';
+import moment, { Duration } from 'moment';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+import classNames from 'classnames';
+
+export interface TimeProps extends BaseInputProps<HTMLInputElement> {
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  timeChange: (time: Duration) => void;
+  time: Duration;
+  min?: Duration;
+  max?: Duration;
+  showDateDiff?: boolean;
+}
+
+export interface TimeState extends BaseInputState {
+  hoursText?: string;
+  minutesText?: string;
+}
+
+export class TimeRaw extends BaseInput<TimeProps, TimeState, HTMLInputElement> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    type: 'time',
+    placeholder: '',
+  }) as unknown as TimeProps;
+
+  constructor(props: TimeProps) {
+    super(props);
+    this.handleHoursChange = this.handleHoursChange.bind(this);
+    this.handleMinutesChange = this.handleMinutesChange.bind(this);
+  }
+
+  public render() {
+    let hours = this.props.time?.hours?.() ?? 0;
+    let minutes = this.props.time?.minutes?.() ?? 0;
+    if (minutes < 0) {
+      hours--;
+    }
+    minutes = (minutes + 60) % 60;
+    hours = (hours + 24) % 24;
+    var mid = 'AM';
+    if (hours % 24 >= 12) {
+      hours = hours % 12;
+      mid = 'PM';
+    }
+    if (hours % 12 === 0) {
+      // At 00 hours we need to show 12 am
+      hours = 12;
+    }
+    if (this.props.showDateDiff && this.props.min) {
+      const diffDays = TimeUtil.dayDiff(this.props.min, this.props.time);
+      if (diffDays > 0) {
+        mid += ' +' + diffDays.toString();
+      }
+    }
+    return (
+      <InputGroup
+        title={this.props.title}
+        tooltip={this.props.tooltip}
+        className={this.props.inputGroupClassName}
+      >
+        <div
+          {...(this.props.id && {
+            id: this.props.id,
+          })}
+          className={classNames(
+            'input__base time-input',
+            this.getValidationClass(),
+            this.props.className
+          )}
+          ref={this.containerRef}
+        >
+          <div className="">
+            <div className="time-input__arrows__container">
+              <button
+                className="plus"
+                onClick={this.addHourClick}
+                {...(this.props.id && {
+                  id: this.props.id + '-add-hours-button',
+                })}
+                tabIndex={0}
+              >
+                <ArrowIcon />
+              </button>
+              <div className="input-padding">
+                <input
+                  {...(this.props.id && {
+                    id: this.props.id + '-hours-input',
+                  })}
+                  disabled={this.getDisabled()}
+                  required={this.props.required}
+                  className={
+                    'time-input__time ' + (this.state.value ? 'filled' : '')
+                  }
+                  onChange={this.onHoursChanged}
+                  value={
+                    this.state.hoursText !== undefined
+                      ? this.state.hoursText
+                      : hours
+                  }
+                  onBlur={this.onBlur}
+                  onFocus={this.handleFocus}
+                  type="number"
+                />
+                <span className="highlight" />
+              </div>
+              <button
+                className="minus"
+                onClick={this.removeHourClick}
+                {...(this.props.id && {
+                  id: this.props.id + '-subtract-hours-button',
+                })}
+                tabIndex={0}
+              >
+                <ArrowIcon />
+              </button>
+            </div>
+          </div>
+          <span className="">:</span>
+          <div className="">
+            <div className="time-input__arrows__container">
+              <button
+                className="plus"
+                onClick={this.addMinuteClick}
+                {...(this.props.id && {
+                  id: this.props.id + '-add-minutes-button',
+                })}
+                tabIndex={0}
+              >
+                <ArrowIcon />
+              </button>
+              <div className="input-padding">
+                <input
+                  {...(this.props.id && {
+                    id: this.props.id + '-minutes-input',
+                  })}
+                  disabled={this.getDisabled()}
+                  required={this.props.required}
+                  className={
+                    'time-input__time ' + (this.state.value ? 'filled' : '')
+                  }
+                  onChange={this.onMinutesChanged}
+                  value={
+                    this.state.minutesText !== undefined
+                      ? this.state.minutesText
+                      : minutes < 10
+                      ? '0' + minutes.toString()
+                      : minutes.toString()
+                  }
+                  onBlur={this.onBlur}
+                  onFocus={this.handleFocus}
+                  type="number"
+                />
+                <span className="highlight" />
+              </div>
+              <button
+                className="minus"
+                onClick={this.removeMinuteClick}
+                {...(this.props.id && {
+                  id: this.props.id + '-subtract-minutes-button',
+                })}
+                tabIndex={0}
+              >
+                <ArrowIcon />
+              </button>
+            </div>
+          </div>
+          {this.renderDefaultValidation()}
+          <span className="time-input__am-pm">{mid}</span>
+          <span className="highlight" />
+          <span className={'bar ' + (this.state.focused ? 'focused' : '')} />
+          {this.props.label && (
+            <label className={classNames('time-input__label label--focused')}>
+              {this.renderLabel()}
+            </label>
+          )}
+        </div>
+      </InputGroup>
+    );
+  }
+
+  private onBlur = () => {
+    if (this.state.hoursText) {
+      this.handleHoursChange(this.state.hoursText);
+    }
+    if (this.state.minutesText) {
+      this.handleMinutesChange(this.state.minutesText);
+    }
+    this.setState({ minutesText: undefined, hoursText: undefined }, () =>
+      this.handleBlur()
+    );
+  };
+
+  private onMinutesChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // this.handleMinutesChange(e.target.value);
+    this.setState({ minutesText: e.target.value });
+  };
+
+  private removeMinuteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    this.handleMinutesChange(
+      ((this.props.time?.minutes?.() ?? 0) - 1).toString()
+    );
+  };
+
+  private addMinuteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    this.handleMinutesChange(
+      ((this.props.time?.minutes?.() ?? 0) + 1).toString()
+    );
+  };
+
+  private removeHourClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    this.handleHoursChange(((this.props.time?.hours?.() ?? 0) - 1).toString());
+  };
+
+  private onHoursChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // this.handleHoursChange(e.target.value);
+    this.setState({ hoursText: e.target.value });
+  };
+
+  private addHourClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    this.handleHoursChange(((this.props.time?.hours?.() ?? 0) + 1).toString());
+  };
+
+  private handleLimits(time: Duration) {
+    if (this.props.min) {
+      if (
+        (time?.asMilliseconds?.() ?? 0) - this.props.min.asMilliseconds() <=
+        0
+      ) {
+        this.props.timeChange(this.props.min.clone());
+        return;
+      }
+    }
+    if (this.props.max) {
+      if (
+        this.props.max.asMilliseconds() - (time?.asMilliseconds?.() ?? 0) <=
+        0
+      ) {
+        this.props.timeChange(this.props.max.clone());
+        return;
+      }
+    }
+    this.props.timeChange(time);
+  }
+
+  private handleHoursChange(hoursString: string) {
+    let num = Number(hoursString);
+    if (hoursString === '') {
+      num = 0;
+    }
+    if (!isNaN(num)) {
+      let newTime: Duration = moment
+        .duration(this.props.time?.asMilliseconds?.() ?? 0, 'milliseconds')
+        .subtract(this.props.time?.hours?.() ?? 0, 'hours')
+        .add(num, 'hours');
+      this.handleLimits(newTime);
+    }
+  }
+
+  private handleMinutesChange(minutesString: string) {
+    let num = Number(minutesString);
+    if (minutesString === '') {
+      num = 0;
+    }
+    if (!isNaN(num)) {
+      let newTime: Duration = moment
+        .duration(this.props.time?.asMilliseconds?.() ?? 0, 'milliseconds')
+        .subtract(this.props.time?.minutes?.() ?? 0, 'minutes')
+        .add(num, 'minutes');
+      this.handleLimits(newTime);
+    }
+  }
+}
+
+export const Time = withThemeContext<TimeProps, InstanceType<typeof TimeRaw>>(
+  withFormContext<TimeProps>(TimeRaw),
+  'time'
+);
+
+export default Time;

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

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

package/src/lib/components/timeSpan/TimeSpan.tsx

@@ -0,0 +1,378 @@
+import * as ArrowIcon from 'material-design-icons/hardware/svg/production/ic_keyboard_arrow_down_24px.svg';
+
+// 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 moment, { Duration } from 'moment';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+import classNames from 'classnames';
+
+export enum TimeSpanUnit {
+  Dynamic = 0,
+  Millisecond = 1,
+  Second = 2,
+  Minute = 4,
+  Hour = 8,
+  Day = 16,
+  Year = 32,
+}
+
+export const allTimeSpanUnits: TimeSpanUnit =
+  TimeSpanUnit.Day |
+  TimeSpanUnit.Hour |
+  TimeSpanUnit.Millisecond |
+  TimeSpanUnit.Minute |
+  TimeSpanUnit.Second |
+  TimeSpanUnit.Year;
+
+function getValues<T>(enumeration: T): T[keyof T][] {
+  var values: T[keyof T][] = [];
+  for (var value in enumeration) {
+    if (isNaN(Number(value))) {
+      values.push(enumeration[value]);
+    }
+  }
+  return values;
+}
+
+const allUnits = getValues(TimeSpanUnit);
+
+export interface TimeSpanProps extends BaseInputProps<HTMLInputElement> {
+  onChange?: never;
+  timeSpanChange: (time: Duration) => void;
+  timeSpan: Duration;
+  min?: Duration;
+  max?: Duration;
+  initialUnits?: TimeSpanUnit;
+  units?: TimeSpanUnit;
+  validUnits?: TimeSpanUnit;
+  unitToString?: (unit: TimeSpanUnit) => string;
+}
+
+export interface TimeSpanState extends BaseInputState {
+  currentUnitText: string;
+  currentUnit: TimeSpanUnit | undefined;
+}
+
+export class TimeSpanRaw extends BaseInput<
+  TimeSpanProps,
+  TimeSpanState,
+  HTMLInputElement
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    type: 'time',
+    placeholder: '',
+    validUnits: allTimeSpanUnits,
+    initialUnits: allTimeSpanUnits,
+    units: TimeSpanUnit.Dynamic,
+    unitToString: (unit: TimeSpanUnit) => {
+      switch (unit) {
+        case TimeSpanUnit.Millisecond:
+          return 'ms';
+        case TimeSpanUnit.Second:
+          return 's';
+        case TimeSpanUnit.Minute:
+          return 'm';
+        case TimeSpanUnit.Hour:
+          return 'h';
+        case TimeSpanUnit.Day:
+          return 'd';
+        case TimeSpanUnit.Year:
+          return 'y';
+        default:
+          return '';
+      }
+    },
+    min: moment.duration(0),
+  }) as unknown as TimeSpanProps;
+
+  constructor(props: TimeSpanProps) {
+    super(props);
+    this.removeUnitClick = this.removeUnitClick.bind(this);
+    this.addUnitClick = this.addUnitClick.bind(this);
+    this.onUnitChanged = this.onUnitChanged.bind(this);
+  }
+
+  public render() {
+    const { timeSpan, validUnits, initialUnits, units: _units } = this.props;
+    const units = _units || this.getUnits(timeSpan, validUnits, initialUnits);
+    const unitsArr = allUnits.filter((u) => (units & u) !== 0).reverse();
+    return (
+      <InputGroup
+        title={this.props.title}
+        tooltip={this.props.tooltip}
+        className={this.props.inputGroupClassName}
+      >
+        <div
+          {...(this.props.id && {
+            id: this.props.id,
+          })}
+          className={
+            'input__base timeSpan-input ' +
+            this.getValidationClass() +
+            ' ' +
+            (this.props.className ? this.props.className : '')
+          }
+          ref={this.containerRef}
+        >
+          {unitsArr.map((unit) => (
+            <div className="" key={unit}>
+              <div className="timeSpan-input__arrows__container">
+                <button
+                  className="plus"
+                  onClick={this.addUnitClick}
+                  {...(this.props.id && {
+                    id: this.props.id + '-add-hours-button',
+                  })}
+                  data-unit={unit}
+                  tabIndex={0}
+                >
+                  <ArrowIcon />
+                </button>
+                <div className="input-padding">
+                  <input
+                    {...(this.props.id && {
+                      id: this.props.id + '-' + unit + '-input',
+                    })}
+                    disabled={this.getDisabled()}
+                    required={this.props.required}
+                    className={classNames('timeSpan-input__time', {
+                      filled: this.state.value,
+                      'timeSpan-input__time--ms':
+                        unit === TimeSpanUnit.Millisecond,
+                    })}
+                    onChange={this.onUnitChanged}
+                    value={
+                      this.state.currentUnit === unit
+                        ? this.state.currentUnitText
+                        : this.getValue(timeSpan, unit)
+                    }
+                    onBlur={this.onBlur}
+                    onFocus={this.handleFocus}
+                    type="number"
+                    data-unit={unit}
+                    onKeyDown={this.onKeyDown}
+                  />
+                  <span className="highlight" />
+                </div>
+                <button
+                  className="minus"
+                  onClick={this.removeUnitClick}
+                  {...(this.props.id && {
+                    id: this.props.id + '-subtract-hours-button',
+                  })}
+                  data-unit={unit}
+                  tabIndex={0}
+                >
+                  <ArrowIcon />
+                </button>
+              </div>
+              {this.props.unitToString(unit)}
+            </div>
+          ))}
+          {this.renderDefaultValidation()}
+          <span className="highlight" />
+          <span className={'bar ' + (this.state.focused ? 'focused' : '')} />
+          {this.props.label && (
+            <label
+              className={classNames('timeSpan-input__label label--focused')}
+            >
+              {this.renderLabel()}
+            </label>
+          )}
+        </div>
+      </InputGroup>
+    );
+  }
+
+  private getUnits(
+    time: Duration,
+    validUnits: TimeSpanUnit,
+    initialUnits: TimeSpanUnit
+  ) {
+    if (time === null || time === undefined) {
+      return initialUnits;
+    }
+    const ms = time.asMilliseconds();
+    let units: TimeSpanUnit = TimeSpanUnit.Millisecond | TimeSpanUnit.Second;
+    if (ms >= 1000) {
+      units += TimeSpanUnit.Minute;
+    }
+    if (ms >= 60000) {
+      units += TimeSpanUnit.Hour;
+    }
+    if (ms >= 60 * 60000) {
+      units += TimeSpanUnit.Day;
+    }
+    if (ms >= 24 * 60 * 60000) {
+      units += TimeSpanUnit.Year;
+    }
+    const tagMask = allTimeSpanUnits & ~validUnits;
+    units &= ~tagMask;
+    return units || initialUnits;
+  }
+
+  private getValue(time: Duration, unit: TimeSpanUnit) {
+    if (!time || !unit) {
+      return 0;
+    }
+    switch (unit) {
+      case TimeSpanUnit.Millisecond:
+        return Math.floor(time.get('millisecond'));
+      case TimeSpanUnit.Second:
+        return Math.floor(time.get('second'));
+      case TimeSpanUnit.Minute:
+        return Math.floor(time.get('minute'));
+      case TimeSpanUnit.Hour:
+        return Math.floor(time.get('hour'));
+      case TimeSpanUnit.Day:
+        return Math.floor(time.get('day'));
+      case TimeSpanUnit.Year:
+        return Math.floor(time.get('year'));
+      default:
+        return 0;
+    }
+  }
+
+  private oneUnitInMs(unit: TimeSpanUnit) {
+    if (!unit) {
+      return 0;
+    }
+    switch (unit) {
+      case TimeSpanUnit.Millisecond:
+        return 1;
+      case TimeSpanUnit.Second:
+        return 1000;
+      case TimeSpanUnit.Minute:
+        return 60000;
+      case TimeSpanUnit.Hour:
+        return 3600000;
+      case TimeSpanUnit.Day:
+        return 24 * 3600000;
+      case TimeSpanUnit.Year:
+        return 24 * 365 * 3600000;
+      default:
+        return 0;
+    }
+  }
+
+  private maxOfUnit(unit: TimeSpanUnit) {
+    if (!unit) {
+      return 0;
+    }
+    switch (unit) {
+      case TimeSpanUnit.Millisecond:
+        return 1000;
+      case TimeSpanUnit.Second:
+        return 60;
+      case TimeSpanUnit.Minute:
+        return 60;
+      case TimeSpanUnit.Hour:
+        return 24;
+      case TimeSpanUnit.Day:
+        return 365;
+      case TimeSpanUnit.Year:
+        return 9999;
+      default:
+        return 0;
+    }
+  }
+
+  private commitState() {
+    if (this.state.currentUnit) {
+      var num = Number(this.state.currentUnitText);
+      if (!isNaN(num)) {
+        const newOfUnitMs = num * this.oneUnitInMs(this.state.currentUnit);
+        const oldOfUnitMs =
+          this.getValue(this.props.timeSpan, this.state.currentUnit) *
+          this.oneUnitInMs(this.state.currentUnit);
+        const maxOfUnitMs =
+          this.maxOfUnit(this.state.currentUnit) *
+          this.oneUnitInMs(this.state.currentUnit);
+        const moreThanMax = maxOfUnitMs < newOfUnitMs;
+        const diff = newOfUnitMs - oldOfUnitMs;
+        if (moreThanMax) {
+          this.handleLimits(moment.duration(newOfUnitMs, 'millisecond'));
+        } else {
+          this.handleLimits(
+            moment.duration(
+              (this.props.timeSpan?.asMilliseconds() || 0) + diff,
+              'millisecond'
+            )
+          );
+        }
+      }
+      this.setState({ currentUnit: undefined, currentUnitText: undefined });
+    }
+  }
+
+  private onBlur = () => {
+    this.commitState();
+    this.handleBlur();
+  };
+
+  private removeUnitClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const unit: TimeSpanUnit = Number(e.currentTarget.dataset.unit);
+    const diff = -1 * this.oneUnitInMs(unit);
+    const newDate = moment.duration(
+      (this.props.timeSpan?.asMilliseconds() || 0) + diff,
+      'millisecond'
+    );
+    this.handleLimits(newDate);
+  };
+
+  private onUnitChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // this.handleHoursChange(e.target.value);
+    const unit: TimeSpanUnit = Number(e.currentTarget.dataset.unit);
+    this.setState({ currentUnitText: e.target.value, currentUnit: unit });
+  };
+
+  private onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      this.commitState();
+    }
+  };
+
+  private addUnitClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const unit: TimeSpanUnit = Number(e.currentTarget.dataset.unit);
+    const diff = this.oneUnitInMs(unit);
+    const newDate = moment.duration(
+      (this.props.timeSpan?.asMilliseconds() || 0) + diff,
+      'milliseconds'
+    );
+    this.handleLimits(newDate);
+  };
+
+  private handleLimits(time: Duration) {
+    if (this.props.min) {
+      if (time.asMilliseconds() - this.props.min.asMilliseconds() <= 0) {
+        this.props.timeSpanChange(this.props.min.clone());
+        return;
+      }
+    }
+    if (this.props.max) {
+      if (this.props.max.asMilliseconds() - time.asMilliseconds() <= 0) {
+        this.props.timeSpanChange(this.props.max.clone());
+        return;
+      }
+    }
+    this.props.timeSpanChange(time);
+  }
+}
+
+export const TimeSpan = withThemeContext<
+  TimeSpanProps,
+  InstanceType<typeof TimeSpanRaw>
+>(withFormContext<TimeSpanProps>(TimeSpanRaw), 'timeSpan');
+
+export default TimeSpan;

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

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

package/src/lib/components/utils/Guid.ts

@@ -0,0 +1,9 @@
+const guid = () => {
+  const s4 = () =>
+    Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4() + s4() + s4()}`;
+};
+
+export default guid;