guestbell-forms 3.0.38 → 3.0.40

package/src/lib/components/openingHours/openingHoursWeek/OpeningHoursWeek.tsx

@@ -0,0 +1,283 @@
+// Libs
+import * as React from 'react';
+
+// Misc
+import OpeningHoursUtil, {
+  defaultTranslations as defaultLabelTranslations,
+} from '../utils/OpeningHoursUtil';
+import {
+  OpeningHoursDayObj,
+  OpeningHoursDay,
+  defaultDayTranslations,
+} from '../openingHoursDay/OpeningHoursDay';
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+  defaultBaseTranslations,
+} from '../../base/input/BaseInput';
+import { Checkbox } from '../../checkbox/Checkbox';
+import { withFormContext } from '../../form/withFormContext';
+import { withThemeContext } from '../../themeProvider/withThemeContext';
+
+export enum Weekday {
+  Monday = 1,
+  Tuesday = 2,
+  Wednesday = 3,
+  Thursday = 4,
+  Friday = 5,
+  Saturday = 6,
+  Sunday = 0,
+}
+
+export interface OpeningHoursWeekDayObj extends OpeningHoursDayObj {
+  isStandardDay?: boolean;
+  day: Weekday;
+}
+
+export interface OpeningHoursWeekProps
+  extends BaseInputProps<never, OpeningHoursWeekTranslations> {
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  days: OpeningHoursWeekDayObj[];
+  onDaysChange: (days: OpeningHoursWeekDayObj[]) => void;
+  standardDay?: OpeningHoursDayObj;
+  onStandardDayChange?: (day: OpeningHoursDayObj) => void;
+  useCapacity?: boolean;
+}
+
+export interface OpeningHoursWeekState extends BaseInputState {}
+
+export const defaultWeekTranslations = {
+  standardDay: 'Standard day',
+  standardDayTooltip: (
+    <>
+      We recommend to use <b>Standard day</b> if multiple days share the same
+      opening hours. Check "Standard day?" checkbox for each of these days to
+      make them share standard opening hours.
+    </>
+  ),
+  standardDayAll: 'Apply to all days?',
+  standardDayCheckBox: 'Standard day?',
+  monday: 'Monday',
+  tuesday: 'Tuesday',
+  wednesday: 'Wednesday',
+  thursday: 'Thursday',
+  friday: 'Friday',
+  saturday: 'Saturday',
+  sunday: 'Sunday',
+  ...defaultBaseTranslations,
+  ...defaultDayTranslations,
+  ...defaultLabelTranslations,
+};
+
+export type OpeningHoursWeekTranslations = Partial<
+  typeof defaultWeekTranslations
+>;
+
+export class OpeningHoursWeekRaw extends BaseInput<
+  OpeningHoursWeekProps,
+  OpeningHoursWeekState,
+  never,
+  OpeningHoursWeekTranslations
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    onChange: undefined,
+    type: 'openingHoursWeek',
+    placeholder: '',
+    collapsible: false,
+  });
+
+  constructor(props: OpeningHoursWeekProps) {
+    super(props);
+    this.state = { ...this.state };
+    this.toggleStandardForAll = this.toggleStandardForAll.bind(this);
+  }
+
+  public componentDidMount() {
+    if (!this.props.days || !this.props.days.length) {
+      this.props.onDaysChange(this.getInitialState());
+    }
+  }
+
+  public componentDidUpdate() {
+    if (!this.props.days || !this.props.days.length) {
+      this.props.onDaysChange(this.getInitialState());
+    }
+  }
+
+  public render() {
+    return (
+      <div
+        className={
+          'openingHoursWeek-input ' +
+          this.getValidationClass() +
+          ' ' +
+          (this.props.className ? this.props.className : '')
+        }
+        ref={this.containerRef}
+      >
+        {this.renderContent()}
+      </div>
+    );
+  }
+
+  private toggleStandardForAll() {
+    const allDaysStandard = this.props.days.every(d => d.isStandardDay);
+    let days = this.props.days.map(d => ({
+      ...d,
+      isStandardDay: !allDaysStandard,
+    }));
+    this.props.onDaysChange(days);
+  }
+
+  private getInitialState() {
+    return [
+      { day: Weekday.Monday, times: [] },
+      { day: Weekday.Tuesday, times: [] },
+      { day: Weekday.Wednesday, times: [] },
+      { day: Weekday.Thursday, times: [] },
+      { day: Weekday.Friday, times: [] },
+      { day: Weekday.Saturday, times: [] },
+      { day: Weekday.Sunday, times: [] },
+    ];
+  }
+
+  private renderContent() {
+    const allDaysStandard = this.props.days.every(d => d.isStandardDay);
+    const weekTranslations = this.getTranslations(defaultWeekTranslations);
+    return (
+      <div className={``}>
+        {this.props.standardDay && (
+          <OpeningHoursDay
+            useCapacity={this.props.useCapacity}
+            {...(this.props.id && {
+              id: this.props.id + '-standard-day',
+            })}
+            className="openingHoursWeek__standard-day"
+            label={
+              <span>
+                {OpeningHoursUtil.getLabelSuffix(
+                  this.props.standardDay,
+                  this.props.translations
+                )}
+                <span className="float-right openingHoursWeek__is-standard-day">
+                  {weekTranslations.standardDayAll}
+                  <Checkbox
+                    className="label__checkbox"
+                    checked={allDaysStandard}
+                    onChecked={this.toggleStandardForAll}
+                  />
+                </span>
+              </span>
+            }
+            openingHours={{
+              times: this.props.standardDay.times,
+            }}
+            onOpeningHoursChange={this.standardDayChanged}
+            title={weekTranslations.standardDay}
+            tooltip={weekTranslations.standardDayTooltip}
+            translations={this.props.translations}
+          />
+        )}
+        {this.props.days.map((day, index) => (
+          <OpeningHoursDay
+            useCapacity={this.props.useCapacity}
+            {...(this.props.id && {
+              id: this.props.id + '-opening-hours-day-' + index.toString(),
+            })}
+            className={''}
+            key={index}
+            label={
+              this.props.standardDay ? (
+                <span>
+                  {OpeningHoursUtil.getLabelSuffix(
+                    this.props.standardDay && day.isStandardDay
+                      ? this.props.standardDay
+                      : day,
+                    this.props.translations
+                  )}
+                  <span className="float-right openingHoursWeek__is-standard-day">
+                    {weekTranslations.standardDayCheckBox}
+                    <Checkbox
+                      className="label__checkbox"
+                      checked={day.isStandardDay}
+                      onChecked={this.isStandardDayChecked(index, day)}
+                    />
+                  </span>
+                </span>
+              ) : (
+                this.getDayLabel(day.day, weekTranslations)
+              )
+            }
+            openingHours={{
+              times:
+                this.props.standardDay && day.isStandardDay
+                  ? this.props.standardDay.times
+                  : day.times,
+            }}
+            onOpeningHoursChange={this.onOpeningHoursChange(index, day)}
+            title={this.getDayLabel(day.day, weekTranslations)}
+            translations={this.props.translations}
+          />
+        ))}
+        <span className="bar" />
+        {this.renderDefaultValidation()}
+      </div>
+    );
+  }
+
+  private getDayLabel(
+    day: Weekday,
+    translations: OpeningHoursWeekTranslations
+  ) {
+    switch (day) {
+      case Weekday.Monday:
+        return translations.monday;
+      case Weekday.Tuesday:
+        return translations.tuesday;
+      case Weekday.Wednesday:
+        return translations.wednesday;
+      case Weekday.Thursday:
+        return translations.thursday;
+      case Weekday.Friday:
+        return translations.friday;
+      case Weekday.Saturday:
+        return translations.saturday;
+      case Weekday.Sunday:
+        return translations.sunday;
+      default:
+        return '';
+    }
+  }
+
+  private onOpeningHoursChange = (index: number, day: OpeningHoursDayObj) => (
+    openingHours: OpeningHoursWeekDayObj
+  ) => {
+    let days = this.props.days.slice(0);
+    days[index] = { ...day, ...openingHours, isStandardDay: false };
+    this.props.onDaysChange(days);
+  };
+
+  private isStandardDayChecked = (
+    index: number,
+    day: OpeningHoursWeekDayObj
+  ) => checked => {
+    let days = this.props.days.slice(0);
+    days[index] = { ...day, isStandardDay: checked.target.checked };
+    this.props.onDaysChange(days);
+  };
+
+  private standardDayChanged = (openingHours: OpeningHoursDayObj) => {
+    this.props.onStandardDayChange(openingHours);
+  };
+}
+
+export const OpeningHoursWeek = withThemeContext<
+  OpeningHoursWeekProps,
+  typeof OpeningHoursWeekRaw
+>(
+  withFormContext<OpeningHoursWeekProps>(OpeningHoursWeekRaw),
+  'openingHoursWeek'
+);
+
+export default OpeningHoursWeek;

package/src/lib/components/openingHours/openingHoursWeek/index.tsx

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

package/src/lib/components/openingHours/utils/OpeningHoursUtil.tsx

@@ -0,0 +1,111 @@
+// Libs
+import * as React from 'react';
+import { Duration } from 'moment';
+import { OpeningHoursDayObj } from '../openingHoursDay';
+
+export const defaultTranslations = {
+  open: 'Open',
+  closed: 'Closed',
+  and: 'and',
+  hour: 'hour',
+  hours: 'hours',
+  minute: 'minute',
+  minutes: 'minutes',
+};
+
+export type OpeningHoursLabelTranslations = Partial<typeof defaultTranslations>;
+
+export class OpeningHoursUtil {
+  public getTimeFromMidnight(time: Duration, midnight: Duration = time) {
+    midnight = midnight
+      .clone()
+      .subtract(midnight.hours(), 'hours')
+      .subtract(midnight.minutes(), 'minutes')
+      .subtract(midnight.seconds(), 'seconds')
+      .subtract(midnight.milliseconds(), 'milliseconds');
+    const diff = time.asMilliseconds() - midnight.asMilliseconds();
+    return diff;
+  }
+
+  public getTotalTimeString(
+    times: Duration[],
+    translations?: OpeningHoursLabelTranslations
+  ) {
+    translations = this.getTranslations(translations);
+    let totalTime = 0;
+    let newTimes = times
+      .slice(0)
+      .map(item => this.getTimeFromMidnight(item, times[0]));
+    if (times.length % 2 === 1) {
+      newTimes = newTimes.concat([86400000 + 60 * 1000]);
+    }
+    for (let index = 0; index < newTimes.length - 1; index++) {
+      if (index % 2 === 0) {
+        let time = newTimes[index];
+        let nextTime = newTimes[index + 1];
+        totalTime += nextTime - time;
+      }
+    }
+    const hours = Math.floor(totalTime / 3600000);
+    const minutes = Math.floor(totalTime / (60 * 1000)) % 60;
+    const hoursFormatted = hours
+      ? hours.toFixed(0) +
+        ' ' +
+        (hours > 1 ? translations.hours : translations.hour)
+      : '';
+    const minutesFormatted = minutes
+      ? minutes.toFixed(0) +
+        ' ' +
+        (minutes > 1 ? translations.minutes : translations.minute)
+      : '';
+    if (hoursFormatted && minutesFormatted) {
+      return (
+        <span>
+          {translations.open} {hoursFormatted} {translations.and}{' '}
+          {minutesFormatted}
+        </span>
+      );
+    }
+    if (hoursFormatted) {
+      return (
+        <span>
+          {translations.open} {hoursFormatted}
+        </span>
+      );
+    }
+    if (minutesFormatted) {
+      return (
+        <span>
+          {translations.open} {minutesFormatted}
+        </span>
+      );
+    }
+    return <span>{translations.closed}</span>;
+  }
+
+  public getLabelSuffix(
+    day: OpeningHoursDayObj,
+    translations?: OpeningHoursLabelTranslations
+  ) {
+    translations = this.getTranslations(translations);
+    return day && day.times && day.times.length === 0
+      ? translations.closed
+      : this.getTotalTimeString(
+          (day.times || []).reduce<Duration[]>(
+            (a, b) => a.concat([b.opens, b.closes]),
+            []
+          ),
+          translations
+        );
+  }
+
+  private getTranslations(translations?: OpeningHoursLabelTranslations) {
+    return {
+      ...defaultTranslations,
+      ...translations,
+    };
+  }
+}
+
+const util = new OpeningHoursUtil();
+export default util;

package/src/lib/components/radio/Radio.tsx

@@ -0,0 +1,87 @@
+// Libs
+import * as React from 'react';
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+} from '../base/input/BaseInput';
+import { withFormContext } from '../form/withFormContext';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+
+// Misc
+
+export interface RadioProps extends BaseInputProps<HTMLInputElement> {
+  onChange?: never;
+  onChecked: (value: string) => void;
+  result: string;
+  value: string;
+  name: string;
+}
+
+export interface RadioState extends BaseInputState {}
+
+export class RadioRaw extends BaseInput<
+  RadioProps,
+  RadioState,
+  HTMLInputElement
+> {
+  public static defaultProps = (Object.assign({}, BaseInput.defaultProps, {
+    onChange: undefined,
+  }) as unknown) as RadioProps;
+
+  constructor(props: RadioProps) {
+    super(props);
+    this.onChecked = this.onChecked.bind(this);
+  }
+
+  public render() {
+    return (
+      <div
+        className={`radio-input ${this.getValidationClass()} ${
+          this.props.className ? this.props.className : ''
+        }`}
+        ref={this.containerRef}
+      >
+        {!this.props.label && this.renderInput()}
+        {this.props.label && (
+          <label>
+            {this.renderInput()}
+            {this.props.label}
+          </label>
+        )}
+      </div>
+    );
+  }
+
+  private renderInput() {
+    return (
+      <input
+        {...(this.props.id && {
+          id: this.props.id,
+        })}
+        disabled={this.getDisabled()}
+        name={this.props.name}
+        value={this.props.value}
+        type="radio"
+        required={this.props.required}
+        checked={this.props.value === this.props.result}
+        onChange={this.onChecked}
+        onBlur={this.handleBlur}
+        onFocus={this.handleFocus}
+        tabIndex={0}
+      />
+    );
+  }
+
+  private onChecked(e: React.ChangeEvent<HTMLInputElement>) {
+    // e.preventDefault();
+    this.props.onChecked && this.props.onChecked(e.target.value);
+  }
+}
+
+export const Radio = withThemeContext<
+  RadioProps,
+  InstanceType<typeof RadioRaw>
+>(withFormContext<RadioProps>(RadioRaw), 'radio');
+
+export default Radio;

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

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

package/src/lib/components/radioContainer/RadioContainer.tsx

@@ -0,0 +1,50 @@
+// Libs
+import * as React from 'react';
+import InputGroup from '../inputGroup/InputGroup';
+import { withThemeContext } from '../themeProvider/withThemeContext';
+import { ThemeContextProps } from '../themeProvider/ThemeContext';
+
+// Misc
+
+export interface RadioContainerProps extends ThemeContextProps {
+  id?: string;
+  className?: string;
+  title?: string;
+  horizontal?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface RadioContainerState {}
+
+export class RadioContainer extends React.PureComponent<
+  RadioContainerProps,
+  RadioContainerState
+> {
+  constructor(props: RadioContainerProps) {
+    super(props);
+  }
+
+  public render() {
+    return (
+      <InputGroup title={this.props.title}>
+        <div
+          {...(this.props.id && {
+            id: this.props.id,
+          })}
+          className={`input__base radio-input__container 
+                    ${
+                      this.props.horizontal
+                        ? 'radio-input__container--horizontal'
+                        : ''
+                    } 
+                    ${this.props.className ? this.props.className : ''}`}
+          children={this.props.children}
+        />
+      </InputGroup>
+    );
+  }
+}
+export default withThemeContext<
+  RadioContainerProps,
+  InstanceType<typeof RadioContainer>
+>(RadioContainer, 'radioContainer');

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

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