guestbell-forms 3.0.39 → 3.0.41

package/src/lib/components/openingHours/openingHoursDay/OpeningHoursDay.tsx

@@ -0,0 +1,394 @@
+import * as PlusIcon from 'material-design-icons/content/svg/production/ic_add_circle_outline_24px.svg';
+
+// Libs
+import * as React from 'react';
+
+// Misc
+import { Time } from '../../time/Time';
+import OpeningHoursUtil from '../utils/OpeningHoursUtil';
+import TimeUtil from '../../utils/TimeUtil';
+import InputGroup from '../../inputGroup/InputGroup';
+import {
+  BaseInputProps,
+  BaseInputState,
+  BaseInput,
+  defaultBaseTranslations,
+} from '../../base/input/BaseInput';
+import { Button } from '../../button/Button';
+import { withFormContext } from '../../form/withFormContext';
+import classNames from 'classnames';
+import moment, { Duration } from 'moment';
+import NumberInput from '../../numberInput/NumberInput';
+import { withThemeContext } from '../../themeProvider/withThemeContext';
+
+export interface OpeningHoursPeriodObj {
+  opens: Duration;
+  closes: Duration;
+  capacity?: number;
+}
+
+export interface OpeningHoursDayObj {
+  times: OpeningHoursPeriodObj[];
+}
+
+export const defaultDayTranslations = {
+  opens: 'Opens',
+  closes: 'Closes',
+  capacity: 'Capacity',
+  add: 'Add new time range',
+  midnight: 'Midnight',
+  ...defaultBaseTranslations,
+};
+
+export type OpeningHoursDayTranslations = Partial<
+  typeof defaultDayTranslations
+>;
+
+export interface OpeningHoursDayProps
+  extends BaseInputProps<never, OpeningHoursDayTranslations> {
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onOpeningHoursChange: (openingHours: OpeningHoursDayObj) => void;
+  openingHours: OpeningHoursDayObj;
+  label?: JSX.Element | string;
+  maxOpenCloseTimes?: number;
+  useCapacity?: boolean;
+}
+
+export interface OpeningHoursState extends BaseInputState {}
+
+export class OpeningHoursDayRaw extends BaseInput<
+  OpeningHoursDayProps,
+  OpeningHoursState,
+  never,
+  OpeningHoursDayTranslations
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    onChange: undefined,
+    type: 'openingHours',
+    allowMultiple: false,
+    maxOpenCloseTimes: 10,
+  });
+  private fullDayMilliseconds: number = 24 * 60 * 60 * 1000;
+
+  constructor(props: OpeningHoursDayProps) {
+    super(props);
+  }
+
+  public render() {
+    const translations = this.getTranslations(defaultDayTranslations);
+    return (
+      <InputGroup
+        title={this.props.title}
+        className={classNames(
+          'input__group__openingHoursDay',
+          this.props.className,
+          {
+            'input__group__openingHoursDay--closed':
+              this.props.openingHours &&
+              this.props.openingHours.times &&
+              this.props.openingHours.times.length === 0,
+          }
+        )}
+        tooltip={this.props.tooltip}
+      >
+        <div
+          {...(this.props.id && {
+            id: this.props.id,
+          })}
+          className={classNames(
+            'input__base openingHoursDay-input',
+            {
+              'openingHoursDay-input--closed':
+                this.props.openingHours &&
+                this.props.openingHours.times &&
+                this.props.openingHours.times.length === 0,
+            },
+            this.getValidationClass()
+          )}
+          ref={this.containerRef}
+        >
+          <div className="openingHoursDay-input__container">
+            {this.props.openingHours &&
+              this.props.openingHours.times &&
+              this.props.openingHours.times.map((item, index) => {
+                const times = [item.opens, item.closes];
+                return (
+                  <div
+                    className="openingHoursDay-input__time__container"
+                    key={index}
+                  >
+                    {times.map((time, indexJ) => {
+                      const localIndex = index * 2 + indexJ;
+                      const previousTime =
+                        indexJ > 0
+                          ? times[indexJ - 1].clone()
+                          : index === 0
+                          ? this.getTime(0, 0)
+                          : this.props.openingHours.times[
+                              index - 1
+                            ].closes.clone();
+                      let nextTime =
+                        indexJ === 0
+                          ? times[1]
+                          : this.props.openingHours.times.length - 1 > index
+                          ? this.props.openingHours.times[
+                              index + 1
+                            ].opens.clone()
+                          : this.getTime(23, 59, true);
+                      if (localIndex % 2 === 0) {
+                        nextTime = moment.duration(
+                          Math.min.apply(null, [
+                            this.getTime(23, 59, false).asMilliseconds(),
+                            nextTime.asMilliseconds(),
+                          ]),
+                          'millisecond'
+                        );
+                      }
+                      return (
+                        <Time
+                          key={`${index}-${indexJ}`}
+                          {...(this.props.id && {
+                            id: `${
+                              this.props.id
+                            }-time-${index.toString()}-${indexJ.toString()}`,
+                          })}
+                          className={'openingHoursDay-input__time'}
+                          timeChange={this.timeChanged(index, indexJ)}
+                          time={time}
+                          min={previousTime}
+                          max={nextTime}
+                          showDateDiff={true}
+                          label={
+                            indexJ % 2 === 0
+                              ? translations.opens
+                              : translations.closes
+                          }
+                        />
+                      );
+                    })}
+                    {this.props.useCapacity && (
+                      <NumberInput
+                        label={translations.capacity}
+                        min={0}
+                        number={item.capacity}
+                        onNumberChange={(num) =>
+                          this.props.onOpeningHoursChange({
+                            ...this.props.openingHours,
+                            times: this.props.openingHours.times.map((t, i) =>
+                              i === index ? { ...t, capacity: num } : t
+                            ),
+                          })
+                        }
+                      />
+                    )}
+                    <Button
+                      {...(this.props.id && {
+                        id:
+                          this.props.id +
+                          '-remove-button-' +
+                          ((index - 1) / 2).toString(),
+                      })}
+                      onClick={this.removeTimeClick(index)}
+                      className="openingHoursDay-input__button--remove mr-3 line-height--0"
+                      circular={true}
+                      blank={true}
+                      type="error"
+                    >
+                      <PlusIcon />
+                    </Button>
+                  </div>
+                );
+              })}
+            {this.props.maxOpenCloseTimes >
+              this.props.openingHours.times.length && (
+              <Button
+                {...(this.props.id && {
+                  id: this.props.id + '-add-button',
+                })}
+                className="openingHoursDay-input__button-open-close"
+                onClick={this.addTimeClick}
+                disabled={this.isAddTimeClickDisabled()}
+                type={'primary'}
+                hero={true}
+              >
+                {translations.add}
+              </Button>
+            )}
+          </div>
+          {this.renderDefaultValidation()}
+          {this.props.openingHours && this.props.label && (
+            <span
+              className={
+                'label-classname ' +
+                (this.props.openingHours &&
+                this.props.openingHours.times &&
+                this.props.openingHours.times.length
+                  ? 'label--focused'
+                  : 'label--focused label--closed')
+              }
+            >
+              {this.renderLabel(true)}
+            </span>
+          )}
+        </div>
+        {this.getBottomBorder(translations)}
+      </InputGroup>
+    );
+  }
+
+  private isAddTimeClickDisabled() {
+    if (
+      this.props.openingHours &&
+      this.props.openingHours.times &&
+      this.props.openingHours.times.length
+    ) {
+      const dayDiff = TimeUtil.dayDiff(
+        this.props.openingHours.times[0].opens,
+        this.props.openingHours.times[this.props.openingHours.times.length - 1]
+          .closes
+      );
+      if (dayDiff > 0) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private addTimeClick = () => {
+    let newTime =
+      this.props.openingHours &&
+      this.props.openingHours.times &&
+      this.props.openingHours.times.length
+        ? this.props.openingHours.times[
+            this.props.openingHours.times.length - 1
+          ].closes.clone()
+        : this.getTime(8, 0);
+    if (newTime.hours() < 23) {
+      newTime = newTime.add(1, 'hour');
+    }
+    let closeTime = newTime.clone().add(1, 'hour');
+    this.props.onOpeningHoursChange({
+      ...this.props.openingHours,
+      times: this.props.openingHours.times.concat({
+        opens: newTime,
+        closes: closeTime,
+        capacity: this.props.useCapacity ? 1 : undefined,
+      }),
+    });
+  };
+
+  private removeTimeClick = (index: number) => () =>
+    this.props.onOpeningHoursChange({
+      ...this.props.openingHours,
+      times: this.props.openingHours.times.filter(
+        (time, itemIndex) => itemIndex < index || itemIndex > index + 1
+      ),
+    });
+
+  private timeChanged = (index: number, indexJ: number) => (time: Duration) => {
+    let newOpeningHours: OpeningHoursDayObj = {
+      ...this.props.openingHours,
+      times: this.props.openingHours.times.slice(0),
+    };
+    if (indexJ === 0) {
+      newOpeningHours.times[index] = {
+        ...newOpeningHours.times[index],
+        opens: time,
+      };
+    } else {
+      newOpeningHours.times[index] = {
+        ...newOpeningHours.times[index],
+        closes: time,
+      };
+    }
+    this.props.onOpeningHoursChange(newOpeningHours);
+  };
+
+  private getBottomBorder(translations: OpeningHoursDayTranslations) {
+    const times = (
+      (this.props.openingHours && this.props.openingHours.times) ||
+      []
+    ).reduce<Duration[]>((a, b) => a.concat([b.opens, b.closes]), []);
+    let parts = [];
+    let totalTime = this.fullDayMilliseconds;
+    if (!times.length) {
+      parts = parts.concat([1]);
+    } else {
+      totalTime = Math.max(
+        this.fullDayMilliseconds,
+        OpeningHoursUtil.getTimeFromMidnight(times[times.length - 1], times[0])
+      );
+      parts = parts.concat([
+        OpeningHoursUtil.getTimeFromMidnight(times[0]) / totalTime,
+      ]);
+      for (var index = 0; index < times.length - 1; index++) {
+        let start = OpeningHoursUtil.getTimeFromMidnight(
+          times[index],
+          times[0]
+        );
+        let end = OpeningHoursUtil.getTimeFromMidnight(
+          times[index + 1],
+          times[0]
+        );
+        let diff = (end - start) / totalTime;
+        parts = parts.concat([diff]);
+      }
+      parts = parts.concat([
+        (totalTime -
+          OpeningHoursUtil.getTimeFromMidnight(
+            times[times.length - 1],
+            times[0]
+          )) /
+          totalTime,
+      ]);
+    }
+    return (
+      <div className="openingHoursDay-input__bottom-border__container">
+        {parts.map((part, i) => (
+          <div
+            key={i}
+            className={
+              'openingHoursDay-input__bottom-border ' +
+              (i % 2 === 0
+                ? 'openingHoursDay-input__bottom-border--closed'
+                : 'openingHoursDay-input__bottom-border--open')
+            }
+            style={{ width: part ? (part * 100).toFixed(2) + '%' : '0' }}
+          />
+        ))}
+        {totalTime > this.fullDayMilliseconds && (
+          <div
+            className="openingHoursDay-input__bottom-border--midnight"
+            style={{
+              left:
+                ((this.fullDayMilliseconds * 100) / totalTime).toString() + '%',
+            }}
+            title={translations.midnight}
+          />
+        )}
+      </div>
+    );
+  }
+
+  private getTime(
+    hours: number,
+    minutes: number,
+    nextDay: boolean = false
+  ): Duration {
+    let time = moment
+      .duration(0, 'millisecond')
+      .add(hours, 'hours')
+      .add(minutes, 'minutes');
+    if (nextDay) {
+      time = time.add(1, 'day');
+    }
+    return time;
+  }
+}
+
+export const OpeningHoursDay = withThemeContext<
+  OpeningHoursDayProps,
+  InstanceType<typeof OpeningHoursDayRaw>
+>(withFormContext<OpeningHoursDayProps>(OpeningHoursDayRaw), 'openingHoursDay');
+
+export default OpeningHoursDay;

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

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

package/src/lib/components/openingHours/openingHoursSpecial/OpeningHoursSpecial.tsx

@@ -0,0 +1,227 @@
+import * as PlusIcon from 'material-design-icons/content/svg/production/ic_add_circle_outline_24px.svg';
+import * as DateIcon from 'material-design-icons/action/svg/production/ic_event_24px.svg';
+
+// Libs
+import * as React from 'react';
+/*try {
+  var DatePicker = require('react-datepicker').default;
+} catch {
+  DatePicker = undefined;
+}*/
+import DatePicker from 'react-datepicker';
+
+// 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 { Button } from '../../button/Button';
+import { withFormContext } from '../../form/withFormContext';
+import { withThemeContext } from '../../themeProvider/withThemeContext';
+
+export interface OpeningHoursSpecialDayObj extends OpeningHoursDayObj {
+  date?: Date;
+  children?: React.ReactNode;
+}
+
+export interface OpeningHoursSpecialProps
+  extends BaseInputProps<never, OpeningHoursSpecialTranslations> {
+  days: OpeningHoursSpecialDayObj[];
+  onDaysChange: (days: OpeningHoursSpecialDayObj[]) => void;
+  placeholder?: string;
+  useCapacity?: boolean;
+}
+
+export interface OpeningHoursSpecialState extends BaseInputState {}
+
+const DAY_FORMAT = 'dd/M/yyyy';
+
+export class DateInput extends React.PureComponent<{
+  value?: string;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}> {
+  public render() {
+    return (
+      <Button blank={true} type="primary" onClick={this.props.onClick}>
+        <div style={{ display: 'flex' }}>
+          <DateIcon style={{ marginRight: 4 }} />
+          {this.props.children ? this.props.children : this.props.value}
+        </div>
+      </Button>
+    );
+  }
+}
+
+const defaultSpecialTranslations = {
+  chooseDateError: 'Date not selected',
+  chooseDate: 'Choose date',
+  ...defaultBaseTranslations,
+  ...defaultDayTranslations,
+  ...defaultLabelTranslations,
+};
+
+export type OpeningHoursSpecialTranslations = Partial<
+  typeof defaultSpecialTranslations
+>;
+
+export class OpeningHoursSpecialRaw extends BaseInput<
+  OpeningHoursSpecialProps,
+  OpeningHoursSpecialState,
+  never,
+  OpeningHoursSpecialTranslations
+> {
+  public static defaultProps = Object.assign({}, BaseInput.defaultProps, {
+    type: 'openingHoursSpecial',
+    placeholder: DAY_FORMAT,
+  });
+
+  constructor(props: OpeningHoursSpecialProps) {
+    super(props);
+    this.state = { ...this.state, ...{ touched: true } };
+  }
+
+  public componentDidMount() {
+    if (this.props.days) {
+      this.handleDates();
+    }
+  }
+
+  public componentDidUpdate(oldProps: OpeningHoursSpecialProps) {
+    if (this.props.days !== oldProps.days) {
+      this.handleDates();
+    }
+  }
+
+  public touch() {
+    return;
+  }
+
+  public render() {
+    if (!DatePicker) {
+      throw new Error(
+        'You need to install react-datepicker in order to use special day picker'
+      );
+    }
+    const translations = this.getTranslations(defaultSpecialTranslations);
+    return (
+      <div
+        {...(this.props.id && {
+          id: this.props.id,
+        })}
+        className={
+          'input__base openingHoursSpecial-input ' +
+          this.getValidationClass() +
+          ' ' +
+          (this.props.className ? this.props.className : '')
+        }
+        ref={this.containerRef}
+      >
+        {this.props.days.map((day, index) => (
+          <OpeningHoursDay
+            useCapacity={this.props.useCapacity}
+            {...(this.props.id && {
+              id: this.props.id + '-opening-hours-day-' + index.toString(),
+            })}
+            key={index}
+            label={
+              <span>
+                {OpeningHoursUtil.getLabelSuffix(day, this.props.translations)}
+                <span className="float-right">
+                  <Button
+                    {...(this.props.id && {
+                      id: this.props.id + '-remove-button-' + index.toString(),
+                    })}
+                    className="openingHoursDay-input__button--remove line-height--0"
+                    circular={true}
+                    blank={true}
+                    type="error"
+                    onClick={this.removeDayClick(index)}
+                  >
+                    <PlusIcon />
+                  </Button>
+                </span>
+              </span>
+            }
+            openingHours={{
+              times: day.times,
+            }}
+            onOpeningHoursChange={this.openingHoursChanged(index, day)}
+            title={
+              <DatePicker
+                {...(this.props.id && {
+                  id: this.props.id + '-date-picker-' + index.toString(),
+                })}
+                customInput={
+                  <DateInput>{!day.date && translations.chooseDate}</DateInput>
+                }
+                // placeholder={this.props.placeholder}
+                selected={day.date}
+                dateFormat={DAY_FORMAT}
+                onChange={this.dateChanged(index, day)}
+                excludeDates={this.props.days
+                  .filter((d) => d.date)
+                  .map((a) => a.date)}
+                withPortal={true}
+                minDate={new Date()}
+              />
+            }
+            translations={this.props.translations}
+          />
+        ))}
+        <span className="bar" />
+        {this.renderDefaultValidation()}
+      </div>
+    );
+  }
+
+  private handleDates() {
+    const translations = this.getTranslations(defaultSpecialTranslations);
+    const allDaysHaveDates =
+      !this.props.days || this.props.days.every((d) => Boolean(d.date));
+    if (allDaysHaveDates) {
+      this.setValid();
+    } else {
+      this.setInvalid([translations.chooseDateError]);
+    }
+  }
+
+  private removeDayClick = (index: number) => () =>
+    this.props.onDaysChange(
+      this.props.days.filter((d, indexInner) => indexInner !== index)
+    );
+
+  private dateChanged =
+    (index: number, day: OpeningHoursDayObj) => (date: Date) => {
+      let days = this.props.days.slice(0);
+      days[index] = { ...day, date };
+      this.props.onDaysChange(days);
+    };
+
+  private openingHoursChanged =
+    (index: number, day: OpeningHoursDayObj) => (openingHours) => {
+      let days = this.props.days.slice(0);
+      days[index] = { ...day, ...openingHours };
+      this.props.onDaysChange(days);
+    };
+}
+
+export const OpeningHoursSpecial = withThemeContext<
+  OpeningHoursSpecialProps,
+  InstanceType<typeof OpeningHoursSpecialRaw>
+>(
+  withFormContext<OpeningHoursSpecialProps>(OpeningHoursSpecialRaw),
+  'openingHoursSpecial'
+);
+
+export default OpeningHoursSpecial;

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

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