@bytebrand/fe-ui-core 4.2.144 → 4.2.145

package/source/components/_common/TimePicker/TimePicker.tsx

@@ -1,155 +1,155 @@
-import React, { useState, useEffect } from 'react';
-import MaterialSelect from '../MaterialSelect/MaterialSelect';
-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';
+import MaterialSelect from '../MaterialSelect/MaterialSelect';
+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/source/components/_common/Tooltip/Tooltip.story.js

@@ -1,28 +1,28 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import Tooltip from './Tooltip';
-
-
-const description = {
-    financing: `Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.`,
-    leasing: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
-    abo: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil-und Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen. Sie zahlen also nur Ihre Rate und Kraftstoff.`,
-    kaufen: `Nach Kaufabschluss haben Sie die sofortigen Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zueigenen Konditionen weiter verkaufen und Änderungen vornehmen.`,
-};
-
-storiesOf('_Common_UI', module).add('Tooltip', () => (
-    <div>
-      <Tooltip description={description.financing} />
-      <br />
-      <Tooltip description={description.leasing} positionX='left' />
-      <br />
-      <Tooltip description={description.abo} positionX='center' />
-      <br />
-      <Tooltip description={description.kaufen} positionY='top' positionX='right' />
-      <br />
-      <Tooltip description={description.kaufen} positionY='top' positionX='center' />
-      <br />
-      <Tooltip description={description.kaufen} positionY='top' positionX='left' />
-    </div>
-));
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import Tooltip from './Tooltip';
+
+
+const description = {
+    financing: `Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.`,
+    leasing: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
+    abo: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil-und Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen. Sie zahlen also nur Ihre Rate und Kraftstoff.`,
+    kaufen: `Nach Kaufabschluss haben Sie die sofortigen Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zueigenen Konditionen weiter verkaufen und Änderungen vornehmen.`,
+};
+
+storiesOf('_Common_UI', module).add('Tooltip', () => (
+    <div>
+      <Tooltip description={description.financing} />
+      <br />
+      <Tooltip description={description.leasing} positionX='left' />
+      <br />
+      <Tooltip description={description.abo} positionX='center' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='right' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='center' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='left' />
+    </div>
+));

package/source/components/_common/Tooltip/Tooltip.styl

@@ -1,117 +1,117 @@
-@import '../../../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 '../../../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;