@bytebrand/fe-ui-core 4.8.25 → 4.8.27

package/source/components/_common/Slider/Slider.tsx

@@ -1,130 +1,130 @@
-import * as React from 'react';
-import HistoSlider from '@bytebrand/fe-histoslider';
-import styles from './Slider.styl';
-import _get from 'lodash/get';
-
-import { RANGE_SLIDER_CONFIG, THROTTLE_DELAY } from '../../../framework/constants/Search';
-import { checkRangeValuesOnEqual } from '../../../framework/utils/CommonUtils';
-
-interface ISliderProps {
-  values: any;
-  options: any;
-  name: string;
-  sliderHeight?: number;
-  handleLabelFormat?: string;
-  disableHistogram?: boolean;
-  onChange?: (value: any, name: string) => void;
-}
-
-interface ISliderState {
-  selection: any[];
-  containerWidth: any;
-}
-
-let timeout: NodeJS.Timeout = null;
-
-class Slider extends React.Component<ISliderProps, ISliderState> {
-  private ref: React.RefObject<HTMLDivElement> = React.createRef();
-
-  constructor(props: ISliderProps) {
-    super(props);
-
-    this.state = {
-      selection: props.values,
-      containerWidth: RANGE_SLIDER_CONFIG.width
-    };
-  }
-
-  static defaultProps = {
-    disableHistogram: true,
-    handleLabelFormat: '',
-    onChange: () => { }
-  };
-
-  componentDidMount() {
-    this.onResize();
-    window.addEventListener('resize', this.onResize);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onResize);
-  }
-
-  componentWillReceiveProps(nextProps: ISliderProps) {
-    const { values } = nextProps;
-    const { selection } = this.state;
-    const isEqual = checkRangeValuesOnEqual(selection, values);
-
-    if (!isEqual) {
-      this.setState(() => ({
-        selection: values
-      }));
-    }
-  }
-
-  onSelection = (selection: any) => {
-    const { name } = this.props;
-    const { structureScheme } = RANGE_SLIDER_CONFIG;
-    const value: any = {};
-
-    // prevent selection = null on double click
-    if (!selection) return;
-
-    const roundSelection = selection.map((num: number) => Math.round(num));
-    roundSelection.forEach((period: any, index: number) => {
-      const key: string = structureScheme[index];
-      value[key] = period;
-    });
-
-    this.setState(() => ({
-      selection: roundSelection
-    }));
-
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      this.props.onChange(value, name);
-    }, THROTTLE_DELAY); // tslint:disable-line
-  };
-
-  transformData = (data: any) => data.length ? data.map((section: any) => ({
-    x0: section.from,
-    x: section.to,
-    ...(section.count >= 0 && { y: section.count })
-  })) : [];
-
-  onResize = () => {
-    const oldWidth = this.state.containerWidth;
-    setTimeout(() => {
-      const containerWidth = _get(this.ref.current, 'offsetWidth', oldWidth);
-      this.setState({ containerWidth });
-    }, 100); // tslint:disable-line
-  };
-
-  render() {
-    const { sliderHeight, handleLabelFormat, options, disableHistogram } = this.props;
-    const { selection } = this.state;
-    const { height, padding, selectedColor, unselectedColor, histogramStyle } = RANGE_SLIDER_CONFIG;
-
-    const props = {
-      handleLabelFormat,
-      disableHistogram,
-      selection,
-      padding,
-      selectedColor,
-      unselectedColor,
-      histogramStyle,
-      width: this.state.containerWidth,
-      height: sliderHeight || height,
-      data: this.transformData(options),
-      onChange: this.onSelection
-    };
-
-    return (
-      <div className={styles.slider} ref={this.ref}>
-        <HistoSlider {...props} />
-      </div>
-    );
-  }
-}
-
-export default Slider;
+import * as React from 'react';
+import HistoSlider from '@bytebrand/fe-histoslider';
+import styles from './Slider.styl';
+import _get from 'lodash/get';
+
+import { RANGE_SLIDER_CONFIG, THROTTLE_DELAY } from '../../../framework/constants/Search';
+import { checkRangeValuesOnEqual } from '../../../framework/utils/CommonUtils';
+
+interface ISliderProps {
+  values: any;
+  options: any;
+  name: string;
+  sliderHeight?: number;
+  handleLabelFormat?: string;
+  disableHistogram?: boolean;
+  onChange?: (value: any, name: string) => void;
+}
+
+interface ISliderState {
+  selection: any[];
+  containerWidth: any;
+}
+
+let timeout: NodeJS.Timeout = null;
+
+class Slider extends React.Component<ISliderProps, ISliderState> {
+  private ref: React.RefObject<HTMLDivElement> = React.createRef();
+
+  constructor(props: ISliderProps) {
+    super(props);
+
+    this.state = {
+      selection: props.values,
+      containerWidth: RANGE_SLIDER_CONFIG.width
+    };
+  }
+
+  static defaultProps = {
+    disableHistogram: true,
+    handleLabelFormat: '',
+    onChange: () => { }
+  };
+
+  componentDidMount() {
+    this.onResize();
+    window.addEventListener('resize', this.onResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  }
+
+  componentWillReceiveProps(nextProps: ISliderProps) {
+    const { values } = nextProps;
+    const { selection } = this.state;
+    const isEqual = checkRangeValuesOnEqual(selection, values);
+
+    if (!isEqual) {
+      this.setState(() => ({
+        selection: values
+      }));
+    }
+  }
+
+  onSelection = (selection: any) => {
+    const { name } = this.props;
+    const { structureScheme } = RANGE_SLIDER_CONFIG;
+    const value: any = {};
+
+    // prevent selection = null on double click
+    if (!selection) return;
+
+    const roundSelection = selection.map((num: number) => Math.round(num));
+    roundSelection.forEach((period: any, index: number) => {
+      const key: string = structureScheme[index];
+      value[key] = period;
+    });
+
+    this.setState(() => ({
+      selection: roundSelection
+    }));
+
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      this.props.onChange(value, name);
+    }, THROTTLE_DELAY); // tslint:disable-line
+  };
+
+  transformData = (data: any) => data.length ? data.map((section: any) => ({
+    x0: section.from,
+    x: section.to,
+    ...(section.count >= 0 && { y: section.count })
+  })) : [];
+
+  onResize = () => {
+    const oldWidth = this.state.containerWidth;
+    setTimeout(() => {
+      const containerWidth = _get(this.ref.current, 'offsetWidth', oldWidth);
+      this.setState({ containerWidth });
+    }, 100); // tslint:disable-line
+  };
+
+  render() {
+    const { sliderHeight, handleLabelFormat, options, disableHistogram } = this.props;
+    const { selection } = this.state;
+    const { height, padding, selectedColor, unselectedColor, histogramStyle } = RANGE_SLIDER_CONFIG;
+
+    const props = {
+      handleLabelFormat,
+      disableHistogram,
+      selection,
+      padding,
+      selectedColor,
+      unselectedColor,
+      histogramStyle,
+      width: this.state.containerWidth,
+      height: sliderHeight || height,
+      data: this.transformData(options),
+      onChange: this.onSelection
+    };
+
+    return (
+      <div className={styles.slider} ref={this.ref}>
+        <HistoSlider {...props} />
+      </div>
+    );
+  }
+}
+
+export default Slider;

package/source/components/_common/SliderArrow/SliderArrow.story.js

@@ -1,18 +1,18 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import SliderArrow from './SliderArrow';
-
-
-const props = {
-  direction: 'left',
-  onClick: action('slider arrow clicked')
-};
-
-storiesOf('_Common_UI', module)
-  .add('SliderArrow', () => (
-    <div>
-      <SliderArrow {...props} />
-    </div>
-  ));
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import SliderArrow from './SliderArrow';
+
+
+const props = {
+  direction: 'left',
+  onClick: action('slider arrow clicked')
+};
+
+storiesOf('_Common_UI', module)
+  .add('SliderArrow', () => (
+    <div>
+      <SliderArrow {...props} />
+    </div>
+  ));

package/source/components/_common/SliderArrow/SliderArrow.styl

@@ -1,32 +1,32 @@
-@import '../../../theme/mixins.styl'
-
-.sliderArrow
-  height: 56px !important
-  width: 56px !important
-  background-size: cover !important
-  z-index: $zIndex-sticky
-
-  +media-tablet-landscape-up()
-    fill: white
-
-  &.sliderArrowNext
-    right: 0 !important
-
-    +media-tablet-landscape-down()
-      right: 5px !important
-
-  &.sliderArrowPrev
-    transform: rotate(180deg)
-    left: 0 !important
-    top: 45% // temprorary hack for react-slick bug of uneven arrows positions
-
-    +media-tablet-landscape-down()
-      left: 5px !important
-
-  +media-tablet-landscape-down()
-    height: 36px !important
-    width: 18px !important
-    fill: $grey-9
-
-  &:before
-    content: none !important
+@import '../../../theme/mixins.styl'
+
+.sliderArrow
+  height: 56px !important
+  width: 56px !important
+  background-size: cover !important
+  z-index: $zIndex-sticky
+
+  +media-tablet-landscape-up()
+    fill: white
+
+  &.sliderArrowNext
+    right: 0 !important
+
+    +media-tablet-landscape-down()
+      right: 5px !important
+
+  &.sliderArrowPrev
+    transform: rotate(180deg)
+    left: 0 !important
+    top: 45% // temprorary hack for react-slick bug of uneven arrows positions
+
+    +media-tablet-landscape-down()
+      left: 5px !important
+
+  +media-tablet-landscape-down()
+    height: 36px !important
+    width: 18px !important
+    fill: $grey-9
+
+  &:before
+    content: none !important

package/source/components/_common/SliderArrow/SliderArrow.tsx

@@ -1,36 +1,36 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-import styles from './SliderArrow.styl';
-import IconSVG from '../IconSVG/IconSVG';
-
-export interface ISliderArrowProps {
-  direction: 'left' | 'right';
-  style?: object;
-  className?: string;
-  onClick?: () => void;
-}
-
-// tailored to work as nextArrow and prevArrow prop in react-slick slider settings
-// nextArrow: <SliderArrow direction='right' />
-// prevArrow: <SliderArrow direction='left' />
-const SliderArrow: React.FunctionComponent<ISliderArrowProps> = ({
-  direction,
-  className,
-  style,
-  onClick
-}) => (
-  <IconSVG
-    name='common_SliderArrow'
-    customDimensions
-    style={style}
-    className={classNames(
-      className,
-      styles.sliderArrow,
-      direction === 'right' ? styles.sliderArrowNext : styles.sliderArrowPrev
-    )}
-    onClick={onClick}
-  />
-);
-
-export default SliderArrow;
+import * as React from 'react';
+import classNames from 'classnames';
+
+import styles from './SliderArrow.styl';
+import IconSVG from '../IconSVG/IconSVG';
+
+export interface ISliderArrowProps {
+  direction: 'left' | 'right';
+  style?: object;
+  className?: string;
+  onClick?: () => void;
+}
+
+// tailored to work as nextArrow and prevArrow prop in react-slick slider settings
+// nextArrow: <SliderArrow direction='right' />
+// prevArrow: <SliderArrow direction='left' />
+const SliderArrow: React.FunctionComponent<ISliderArrowProps> = ({
+  direction,
+  className,
+  style,
+  onClick
+}) => (
+  <IconSVG
+    name='common_SliderArrow'
+    customDimensions
+    style={style}
+    className={classNames(
+      className,
+      styles.sliderArrow,
+      direction === 'right' ? styles.sliderArrowNext : styles.sliderArrowPrev
+    )}
+    onClick={onClick}
+  />
+);
+
+export default SliderArrow;

package/source/components/_common/StarButton/StarButton.styl

@@ -1,39 +1,39 @@
-@import '../../../theme/mixins.styl'
-
-.parking
-  position: relative
-  display: flex
-  justify-content: center
-  align-items: center
-  height: 28px
-  width: 28px
-  padding: 10px
-
-.userButton
-  display: inline-block
-  font-size: 22px
-  cursor: pointer
-  background-size: cover
-
-.userButton.favorite
-  fill: white
-  stroke: $skyBlue
-  stroke-width: 5px
-  &.active
-    fill: $skyBlue
-
-.userButton.favorite:hover
-  fill: $skyBlue
-
-.count
-  position: absolute
-  top: 3px
-  left: 30px
-  z-index: $zIndex-fixed
-  padding: 3px 6px
-  border-radius: 50%
-  background-color: $primary
-  font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial'
-  font-weight: 700
-  font-size: 10px
-  color: white
+@import '../../../theme/mixins.styl'
+
+.parking
+  position: relative
+  display: flex
+  justify-content: center
+  align-items: center
+  height: 28px
+  width: 28px
+  padding: 10px
+
+.userButton
+  display: inline-block
+  font-size: 22px
+  cursor: pointer
+  background-size: cover
+
+.userButton.favorite
+  fill: white
+  stroke: $skyBlue
+  stroke-width: 5px
+  &.active
+    fill: $skyBlue
+
+.userButton.favorite:hover
+  fill: $skyBlue
+
+.count
+  position: absolute
+  top: 3px
+  left: 30px
+  z-index: $zIndex-fixed
+  padding: 3px 6px
+  border-radius: 50%
+  background-color: $primary
+  font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial'
+  font-weight: 700
+  font-size: 10px
+  color: white

package/source/components/_common/StarButton/StarButton.tsx

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import IconSVG from '../IconSVG/IconSVG';
-
-import styles from './StarButton.styl';
-
-interface IStarButton {
-  className?: string;
-  amountOfFavorite?: number;
-  isFavorite?: boolean;
-  customContainer?: string;
-
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-}
-
-const StarButton: React.FunctionComponent<IStarButton> = ({ onClick, amountOfFavorite, className, isFavorite, customContainer }) => {
-  const classContainer = classnames(className, { [styles.parking]: amountOfFavorite });
-
-  return (
-    <div className={customContainer ? customContainer : classContainer }>
-      <IconSVG name='star'
-               className={classnames(styles.userButton, styles.favorite, { [styles.active]: isFavorite })}
-               onClick={onClick}
-               customDimensions />
-      {amountOfFavorite ? <span className={styles.count}>{amountOfFavorite}</span> : false}
-    </div>
-  );
-};
-
-export default StarButton;
+import * as React from 'react';
+import classnames from 'classnames';
+
+import IconSVG from '../IconSVG/IconSVG';
+
+import styles from './StarButton.styl';
+
+interface IStarButton {
+  className?: string;
+  amountOfFavorite?: number;
+  isFavorite?: boolean;
+  customContainer?: string;
+
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+const StarButton: React.FunctionComponent<IStarButton> = ({ onClick, amountOfFavorite, className, isFavorite, customContainer }) => {
+  const classContainer = classnames(className, { [styles.parking]: amountOfFavorite });
+
+  return (
+    <div className={customContainer ? customContainer : classContainer }>
+      <IconSVG name='star'
+               className={classnames(styles.userButton, styles.favorite, { [styles.active]: isFavorite })}
+               onClick={onClick}
+               customDimensions />
+      {amountOfFavorite ? <span className={styles.count}>{amountOfFavorite}</span> : false}
+    </div>
+  );
+};
+
+export default StarButton;

package/source/components/_common/Tabs/TabPanel.tsx

@@ -1,29 +1,29 @@
-import * as React from 'react';
-
-interface ITabPanelProps {
-  children?: React.ReactNode;
-  className?: string;
-  index: any;
-  value: any;
-}
-/* tslint:disable */
-export default function TabPanel(props: ITabPanelProps) {
-  const { children, value, index, className,  ...other } = props;
-
-  return (
-    <div
-      role='tabpanel'
-      className={className}
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <>
-            {children}
-        </>
-      )}
-    </div>
-  );
+import * as React from 'react';
+
+interface ITabPanelProps {
+  children?: React.ReactNode;
+  className?: string;
+  index: any;
+  value: any;
+}
+/* tslint:disable */
+export default function TabPanel(props: ITabPanelProps) {
+  const { children, value, index, className,  ...other } = props;
+
+  return (
+    <div
+      role='tabpanel'
+      className={className}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <>
+            {children}
+        </>
+      )}
+    </div>
+  );
 };