@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/TimePicker/TimePicker.tsx

@@ -1,156 +1,156 @@
-import React, { useState, useEffect } from 'react';
-// md3: the two selects render via the MdSelect adapter (md3 Dropdown) instead of MUI MaterialSelect
-import MaterialSelect from '../MdSelect/MdSelect';
-import styles from './TimePicker.styl';
-
-interface ITimePickerProps {
-  onHandleTimestampChange: (value: number) => void;
-  onDayChange: (value: number) => void;
-  onTimeChange: (value: number) => void;
-  className: string;
-  lang: string;
-  time: number;
-  day: number;
-  t: (phrase: string) => string;
-  size?: string;
-}
-
-const TimePicker = ({
-  onHandleTimestampChange,
-  onDayChange,
-  onTimeChange,
-  day,
-  time,
-  className,
-  lang,
-  t,
-  size = 'custom'
- }: ITimePickerProps) => {
-  const date: any = new Date();
-  const [currentDay, setCurrentDay] = useState(date.getDay());
-  const onHandleDayChange = (value: number) => {
-    onDayChange(value);
-  };
-  const onHandleTimeChange = (value: number) => {
-    onTimeChange(value);
-  };
-  const format: { hour: 'numeric' | '2-digit', minute: 'numeric' | '2-digit' } = {
-    hour: 'numeric',
-    minute: 'numeric'
-  };
-
-  const endOfTheDayTime = currentDay > 5 || currentDay < 1 ? '17:30:00' : '19:30:00';
-  const startOfTheDayTime = currentDay > 5 || currentDay < 1 ? '09:00:00' : '08:30:00';
-  const setNewDay = new Date(`${date.toDateString()} ${endOfTheDayTime}`) > date ? 0 : 86400000;
-  const interval = 30 * 60 * 1000;
-  const roundedTime = new Date(Math.ceil(date / interval) * interval);
-  const nextWeekDays = [...Array(7).keys()].map((days, index) => (
-  {
-    value: index,
-    label: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { weekday: 'short', day: 'numeric', month: '2-digit' }).replace(',', ''),
-    day: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { weekday: 'short', day: 'numeric', month: '2-digit' }).replace(',', '')
-  }
-  ));
-  const nextWeekDaysFull = [...Array(7).keys()].map(days => new Date(Date.now() + setNewDay + 86400000 * days));
-  const currentDayFull = new Date(nextWeekDaysFull[0]).toDateString();
-
-  const currentTime = new Date(`${currentDayFull} ${new Date().toLocaleTimeString()}`);
-  const endOfTheDay = new Date(`${currentDayFull} ${endOfTheDayTime}`);
-  const startOfTheDay = new Date(`${currentDayFull} ${startOfTheDayTime}`);
-
-  const isWorkingHours = () => (endOfTheDay > currentTime) && (startOfTheDay <= currentTime) && currentDay === new Date().getDay();
-  const isAfterWorkingHours = () => endOfTheDay < currentTime;
-
-  const ranges = currentDay > 5 || currentDay < 1 ? 8 : 12;
-  const currentDayRanges: { value: number, label: string, time: string }[] = [];
-  const dayRanges: { value: number, label: string, time: string }[] = [];
-  const ammountRanges = currentDay > 5 || currentDay < 1 ? (ranges - (roundedTime.getHours() - 9)) : (ranges - (roundedTime.getHours() - 8));
-
-  const startTime = (currentDay > 5) || (currentDay < 1) ? 9 : 8;
-
-  const getTimeRanges = () => {
-    for (let minutes = roundedTime.getMinutes(); minutes < ammountRanges * 60; minutes = minutes + 30) {
-      date.setHours(roundedTime.getHours());
-      date.setMinutes(minutes);
-      const time = date.toLocaleTimeString('de', format);
-      const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
-      currentDayRanges.push({ time, value: currentDayRanges.length, label: `${time} - ${rangeTime}` });
-    } // time ranges for current day and from current time
-
-    const startOfTheDayMinutes = currentDay > 5 || currentDay < 1 ? 0 : 30; // from monday to friday we need to start from 08:30:00
-
-    for (let minutes = startOfTheDayMinutes; minutes < ranges * 60; minutes = minutes + 30) {
-      date.setHours(startTime);
-      date.setMinutes(minutes);
-      const time = date.toLocaleTimeString('de', format);
-      const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
-      dayRanges.push({ time, value: dayRanges.length, label: `${time} - ${rangeTime}` });
-    } // time ranges for full day
-
-    return currentDay === new Date().getDay() && isWorkingHours() ? currentDayRanges : dayRanges;
-  };
-
-  useEffect(
-    () => {
-      setCurrentDay(new Date(nextWeekDaysFull[day]).getDay());
-      if (isAfterWorkingHours() && date.getDay() === 0) {
-        setCurrentDay(1);
-      }
-      onHandleTimestampChange(+new Date(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`) / 1000);
-    },
-    [day, time]
-  );
-
-  useEffect(
-    () => {
-      onHandleTimestampChange(+new Date(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`) / 1000);
-    },
-    [currentDay]
-  );
-
-  const getHours = (time: string) => {
-    const date = new Date(`${new Date().toDateString()}, ${time}:00`);
-    return date;
-  };
-
-  const dayOnchange = (value: number) => {
-    onHandleDayChange(value);
-    onHandleTimeChange(0);
-  };
-
-  const timeChange = (value: number) => {
-    onHandleTimeChange(value);
-  };
-
-  return (
-    <div className={`${className} ${styles.wrapper}`}>
-      <MaterialSelect
-        onChange={(value: any) => dayOnchange(value)}
-        label={t('CheckoutPage:onlineCheckoutModal.date')}
-        value={day}
-        size={size}
-        icon='timetable'
-        className={styles.dayForm}
-        classNameIcon={styles.selectIcon}
-        items={nextWeekDays}
-        amountOfItems={6}
-        customDimensionsIcon
-      />
-      <MaterialSelect
-        onChange={(value: any) => timeChange(value)}
-        label={t('CheckoutPage:onlineCheckoutModal.time')}
-        value={time}
-        size={size}
-        icon='clock'
-        className={styles.timeForm}
-        selectClassName={styles.select}
-        classNameIcon={styles.selectIcon}
-        items={getTimeRanges()}
-        amountOfItems={6}
-        customDimensionsIcon
-      />
-    </div>
-  );
-};
-
-export default TimePicker;
+import React, { useState, useEffect } from 'react';
+// md3: the two selects render via the MdSelect adapter (md3 Dropdown) instead of MUI MaterialSelect
+import MaterialSelect from '../MdSelect/MdSelect';
+import styles from './TimePicker.styl';
+
+interface ITimePickerProps {
+  onHandleTimestampChange: (value: number) => void;
+  onDayChange: (value: number) => void;
+  onTimeChange: (value: number) => void;
+  className: string;
+  lang: string;
+  time: number;
+  day: number;
+  t: (phrase: string) => string;
+  size?: string;
+}
+
+const TimePicker = ({
+  onHandleTimestampChange,
+  onDayChange,
+  onTimeChange,
+  day,
+  time,
+  className,
+  lang,
+  t,
+  size = 'custom'
+ }: ITimePickerProps) => {
+  const date: any = new Date();
+  const [currentDay, setCurrentDay] = useState(date.getDay());
+  const onHandleDayChange = (value: number) => {
+    onDayChange(value);
+  };
+  const onHandleTimeChange = (value: number) => {
+    onTimeChange(value);
+  };
+  const format: { hour: 'numeric' | '2-digit', minute: 'numeric' | '2-digit' } = {
+    hour: 'numeric',
+    minute: 'numeric'
+  };
+
+  const endOfTheDayTime = currentDay > 5 || currentDay < 1 ? '17:30:00' : '19:30:00';
+  const startOfTheDayTime = currentDay > 5 || currentDay < 1 ? '09:00:00' : '08:30:00';
+  const setNewDay = new Date(`${date.toDateString()} ${endOfTheDayTime}`) > date ? 0 : 86400000;
+  const interval = 30 * 60 * 1000;
+  const roundedTime = new Date(Math.ceil(date / interval) * interval);
+  const nextWeekDays = [...Array(7).keys()].map((days, index) => (
+  {
+    value: index,
+    label: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { weekday: 'short', day: 'numeric', month: '2-digit' }).replace(',', ''),
+    day: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { weekday: 'short', day: 'numeric', month: '2-digit' }).replace(',', '')
+  }
+  ));
+  const nextWeekDaysFull = [...Array(7).keys()].map(days => new Date(Date.now() + setNewDay + 86400000 * days));
+  const currentDayFull = new Date(nextWeekDaysFull[0]).toDateString();
+
+  const currentTime = new Date(`${currentDayFull} ${new Date().toLocaleTimeString()}`);
+  const endOfTheDay = new Date(`${currentDayFull} ${endOfTheDayTime}`);
+  const startOfTheDay = new Date(`${currentDayFull} ${startOfTheDayTime}`);
+
+  const isWorkingHours = () => (endOfTheDay > currentTime) && (startOfTheDay <= currentTime) && currentDay === new Date().getDay();
+  const isAfterWorkingHours = () => endOfTheDay < currentTime;
+
+  const ranges = currentDay > 5 || currentDay < 1 ? 8 : 12;
+  const currentDayRanges: { value: number, label: string, time: string }[] = [];
+  const dayRanges: { value: number, label: string, time: string }[] = [];
+  const ammountRanges = currentDay > 5 || currentDay < 1 ? (ranges - (roundedTime.getHours() - 9)) : (ranges - (roundedTime.getHours() - 8));
+
+  const startTime = (currentDay > 5) || (currentDay < 1) ? 9 : 8;
+
+  const getTimeRanges = () => {
+    for (let minutes = roundedTime.getMinutes(); minutes < ammountRanges * 60; minutes = minutes + 30) {
+      date.setHours(roundedTime.getHours());
+      date.setMinutes(minutes);
+      const time = date.toLocaleTimeString('de', format);
+      const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
+      currentDayRanges.push({ time, value: currentDayRanges.length, label: `${time} - ${rangeTime}` });
+    } // time ranges for current day and from current time
+
+    const startOfTheDayMinutes = currentDay > 5 || currentDay < 1 ? 0 : 30; // from monday to friday we need to start from 08:30:00
+
+    for (let minutes = startOfTheDayMinutes; minutes < ranges * 60; minutes = minutes + 30) {
+      date.setHours(startTime);
+      date.setMinutes(minutes);
+      const time = date.toLocaleTimeString('de', format);
+      const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
+      dayRanges.push({ time, value: dayRanges.length, label: `${time} - ${rangeTime}` });
+    } // time ranges for full day
+
+    return currentDay === new Date().getDay() && isWorkingHours() ? currentDayRanges : dayRanges;
+  };
+
+  useEffect(
+    () => {
+      setCurrentDay(new Date(nextWeekDaysFull[day]).getDay());
+      if (isAfterWorkingHours() && date.getDay() === 0) {
+        setCurrentDay(1);
+      }
+      onHandleTimestampChange(+new Date(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`) / 1000);
+    },
+    [day, time]
+  );
+
+  useEffect(
+    () => {
+      onHandleTimestampChange(+new Date(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`) / 1000);
+    },
+    [currentDay]
+  );
+
+  const getHours = (time: string) => {
+    const date = new Date(`${new Date().toDateString()}, ${time}:00`);
+    return date;
+  };
+
+  const dayOnchange = (value: number) => {
+    onHandleDayChange(value);
+    onHandleTimeChange(0);
+  };
+
+  const timeChange = (value: number) => {
+    onHandleTimeChange(value);
+  };
+
+  return (
+    <div className={`${className} ${styles.wrapper}`}>
+      <MaterialSelect
+        onChange={(value: any) => dayOnchange(value)}
+        label={t('CheckoutPage:onlineCheckoutModal.date')}
+        value={day}
+        size={size}
+        icon='timetable'
+        className={styles.dayForm}
+        classNameIcon={styles.selectIcon}
+        items={nextWeekDays}
+        amountOfItems={6}
+        customDimensionsIcon
+      />
+      <MaterialSelect
+        onChange={(value: any) => timeChange(value)}
+        label={t('CheckoutPage:onlineCheckoutModal.time')}
+        value={time}
+        size={size}
+        icon='clock'
+        className={styles.timeForm}
+        selectClassName={styles.select}
+        classNameIcon={styles.selectIcon}
+        items={getTimeRanges()}
+        amountOfItems={6}
+        customDimensionsIcon
+      />
+    </div>
+  );
+};
+
+export default TimePicker;

package/compat/Tooltip/Tooltip.styl

@@ -1,117 +1,117 @@
-@import '../legacy-theme/mixins.styl'
-
-// tooltip
-.tooltipWrap
-  position relative;
-  transform: translateY(-4px);
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-  background-color: transparent;
-  text-align: left;
-  z-index: 2;
-
-  &:hover
-    [class*='Tooltip__tooltipWrap__icon']
-      path
-        fill: #005ccb;
-        fill-opacity: 1
-
-  &.tooltipWrapIndex
-    z-index: 3;
-
-  &:focus
-    outline: 0;
-
-  &__icon
-    pointer-events: none;
-    max-width: 11px;
-
-    path
-      fill: #4C4E64;
-      fill-opacity: 0.54
-
-  &__block
-    position absolute;
-    width: 190px;
-    box-sizing: border-box;
-    padding 8px 10px;
-    background-color #fff;
-    border-radius: 3px;
-    font-size: 10.5px;
-    white-space: normal;
-    font-weight: normal;
-    border: 2px solid $skyBlue;
-
-    &_right
-      right: -38px;
-
-      &::before, &::after
-        right: 35px;
-
-      &:after
-        transform: translateX(-3px);
-
-    &_left
-      left: -38px;
-
-      &::before, &::after
-        left: 35px;
-
-      &:after
-        transform: translateX(3px);
-
-    &_center
-      left: 50%;
-      transform: translateX(-50%);
-
-      &::before, &::after
-        left: inherit;
-        transform: inherit;
-
-    &_top
-      bottom: 20px;
-
-      &::before, &::after
-        top: 100%;
-        transform: rotate(180deg);
-
-      &.tooltipWrap__block_left
-        &:after
-          transform: rotate(180deg) translateX(-3px);
-
-      &.tooltipWrap__block_center
-        &::before, &::after
-          transform: rotate(180deg) translateX(50%);
-
-      &.tooltipWrap__block_right
-        &:after
-          transform: rotate(180deg) translateX(3px);
-
-    &_bottom
-      top: 20px;
-
-      &::before, &::after
-        bottom: 100%;
-
-    &::before, &::after
-      border: solid transparent;
-      content: '';
-      height: 0;
-      width: 0;
-      position: absolute;
-      pointer-events: none;
-
-    &::before
-      border-bottom-color: $skyBlue;
-      border-top-width: 10px;
-      border-left-width: 6px;
-      border-right-width: 6px;
-      border-bottom-width: 10px;
-
-    &::after
-      border-bottom-color: #fff;
-      border-top-width: 7px;
-      border-left-width: 3px;
-      border-right-width: 3px;
-      border-bottom-width: 7px;
+@import '../legacy-theme/mixins.styl'
+
+// tooltip
+.tooltipWrap
+  position relative;
+  transform: translateY(-4px);
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  text-align: left;
+  z-index: 2;
+
+  &:hover
+    [class*='Tooltip__tooltipWrap__icon']
+      path
+        fill: #005ccb;
+        fill-opacity: 1
+
+  &.tooltipWrapIndex
+    z-index: 3;
+
+  &:focus
+    outline: 0;
+
+  &__icon
+    pointer-events: none;
+    max-width: 11px;
+
+    path
+      fill: #4C4E64;
+      fill-opacity: 0.54
+
+  &__block
+    position absolute;
+    width: 190px;
+    box-sizing: border-box;
+    padding 8px 10px;
+    background-color #fff;
+    border-radius: 3px;
+    font-size: 10.5px;
+    white-space: normal;
+    font-weight: normal;
+    border: 2px solid $skyBlue;
+
+    &_right
+      right: -38px;
+
+      &::before, &::after
+        right: 35px;
+
+      &:after
+        transform: translateX(-3px);
+
+    &_left
+      left: -38px;
+
+      &::before, &::after
+        left: 35px;
+
+      &:after
+        transform: translateX(3px);
+
+    &_center
+      left: 50%;
+      transform: translateX(-50%);
+
+      &::before, &::after
+        left: inherit;
+        transform: inherit;
+
+    &_top
+      bottom: 20px;
+
+      &::before, &::after
+        top: 100%;
+        transform: rotate(180deg);
+
+      &.tooltipWrap__block_left
+        &:after
+          transform: rotate(180deg) translateX(-3px);
+
+      &.tooltipWrap__block_center
+        &::before, &::after
+          transform: rotate(180deg) translateX(50%);
+
+      &.tooltipWrap__block_right
+        &:after
+          transform: rotate(180deg) translateX(3px);
+
+    &_bottom
+      top: 20px;
+
+      &::before, &::after
+        bottom: 100%;
+
+    &::before, &::after
+      border: solid transparent;
+      content: '';
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+
+    &::before
+      border-bottom-color: $skyBlue;
+      border-top-width: 10px;
+      border-left-width: 6px;
+      border-right-width: 6px;
+      border-bottom-width: 10px;
+
+    &::after
+      border-bottom-color: #fff;
+      border-top-width: 7px;
+      border-left-width: 3px;
+      border-right-width: 3px;
+      border-bottom-width: 7px;

package/compat/Tooltip/Tooltip.tsx

@@ -1,63 +1,63 @@
-import React, { useState } from 'react';
-import styles from './Tooltip.styl';
-import classnames from 'classnames';
-import IconSVG from '../../iconsvg/IconSVG';
-
-export interface ITooltipProps {
-  // widened from string: MdTooltip (ex-MaterialTooltip) forwards ReactNode text
-  description?: React.ReactNode;
-  tooltipClassName?: string;
-  iconName?: string;
-  positionX?: 'left' | 'right' | 'center' | any;
-  positionY?: 'top' | 'bottom' | any;
-}
-
-const Tooltip: React.FC<ITooltipProps> = ({ description, positionX, positionY, tooltipClassName, iconName }: ITooltipProps) => {
-  const [tooltip, setTooltip] = useState<boolean>(false);
-
-  const showTooltip = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    setTooltip(prevTooltip => !prevTooltip);
-  };
-
-  const onMouseEnterTooltip = () => setTooltip(true);
-  const onMouseLeaveTooltip = () => setTooltip(false);
-
-  const tooltipClasses = classnames(
-    styles.tooltipWrap,
-    tooltipClassName,
-    { [styles.tooltipWrapIndex]: tooltip }
-  );
-
-  const stylesTooltipWrap = `
-      ${styles.tooltipWrap__block}
-      ${positionX === 'left' ? styles.tooltipWrap__block_left : positionX === 'center' ? styles.tooltipWrap__block_center : styles.tooltipWrap__block_right}
-      ${positionY === 'bottom' ? styles.tooltipWrap__block_bottom : styles.tooltipWrap__block_top}
-  `;
-  return (
-    <button
-      className={tooltipClasses}
-      onClick={showTooltip}
-      onMouseEnter={onMouseEnterTooltip}
-      onMouseLeave={onMouseLeaveTooltip}
-    >
-      <IconSVG className={styles.tooltipWrap__icon} name={iconName ? iconName : 'info'} />
-      {tooltip && (
-        <div className={stylesTooltipWrap}>
-          <span>{description}</span>
-        </div>
-      )}
-    </button>
-  );
-};
-
-Tooltip.defaultProps = {
-  description: '',
-  tooltipClassName: '',
-  positionX: 'right',
-  positionY: 'bottom'
-};
-
-export default Tooltip;
+import React, { useState } from 'react';
+import styles from './Tooltip.styl';
+import classnames from 'classnames';
+import IconSVG from '../../iconsvg/IconSVG';
+
+export interface ITooltipProps {
+  // widened from string: MdTooltip (ex-MaterialTooltip) forwards ReactNode text
+  description?: React.ReactNode;
+  tooltipClassName?: string;
+  iconName?: string;
+  positionX?: 'left' | 'right' | 'center' | any;
+  positionY?: 'top' | 'bottom' | any;
+}
+
+const Tooltip: React.FC<ITooltipProps> = ({ description, positionX, positionY, tooltipClassName, iconName }: ITooltipProps) => {
+  const [tooltip, setTooltip] = useState<boolean>(false);
+
+  const showTooltip = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    setTooltip(prevTooltip => !prevTooltip);
+  };
+
+  const onMouseEnterTooltip = () => setTooltip(true);
+  const onMouseLeaveTooltip = () => setTooltip(false);
+
+  const tooltipClasses = classnames(
+    styles.tooltipWrap,
+    tooltipClassName,
+    { [styles.tooltipWrapIndex]: tooltip }
+  );
+
+  const stylesTooltipWrap = `
+      ${styles.tooltipWrap__block}
+      ${positionX === 'left' ? styles.tooltipWrap__block_left : positionX === 'center' ? styles.tooltipWrap__block_center : styles.tooltipWrap__block_right}
+      ${positionY === 'bottom' ? styles.tooltipWrap__block_bottom : styles.tooltipWrap__block_top}
+  `;
+  return (
+    <button
+      className={tooltipClasses}
+      onClick={showTooltip}
+      onMouseEnter={onMouseEnterTooltip}
+      onMouseLeave={onMouseLeaveTooltip}
+    >
+      <IconSVG className={styles.tooltipWrap__icon} name={iconName ? iconName : 'info'} />
+      {tooltip && (
+        <div className={stylesTooltipWrap}>
+          <span>{description}</span>
+        </div>
+      )}
+    </button>
+  );
+};
+
+Tooltip.defaultProps = {
+  description: '',
+  tooltipClassName: '',
+  positionX: 'right',
+  positionY: 'bottom'
+};
+
+export default Tooltip;