@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/_common/DropDown/DropDown.tsx

@@ -1,111 +1,111 @@
-import React, { FocusEventHandler } from 'react';
-import classnames from 'classnames';
-import Select from 'react-select';
-import Creatable, { CreatableProps } from 'react-select/creatable';
-// import { Props as SelectProps } from 'react-select/base';
-import { SelectComponentsConfig } from 'react-select/src/components';
-import { ActionMeta, ValueType, OptionsType } from 'react-select/src/types';
-
-import styles from './DropDown.styl';
-import { ClearIndicatorDefault } from './DropDownComponents';
-// import { SelectProps } from '@mui/material';
-
-export interface IDropDownProps {
-  ref?: (el: Creatable<any>) => void;
-  className?: string;
-  placeholder?: string;
-  value?: any;
-  name?: any;
-  isClearable?: boolean;
-  components?: SelectComponentsConfig<any>;
-  onChange?: (value: ValueType<any>, action: ActionMeta) => void;
-  onFocus?: ((event: FocusEventHandler<Element>) => void);
-  onBlur?: (event: React.FocusEvent<HTMLElement, Element>, inputValue?: any) => void;
-  styles?: any;
-  isDisabled?: boolean;
-  isLoading?: boolean;
-  error?: boolean;
-  options?: any;
-  scrollToInputOnFocus?: boolean;
-  blurInputOnSelect?: boolean;
-  createOptionPosition?: 'first' | 'last';
-  classNamePrefix?: string;
-
-  // pass this props if you need dropdown with creatable options
-  isCreatable?: boolean;
-  isValidNewOption?: (inputValue: string, value: ValueType<any>, options?: OptionsType<any>) => boolean;
-  formatCreateLabel?: (inputValue: string) => React.ReactNode;
-}
-
-class DropDown extends React.PureComponent<IDropDownProps, {}> {
-  static readonly defaultProps = {
-    createOptionPosition: 'first',
-    blurInputOnSelect: false
-  };
-
-  private inputRef: any;
-
-  // inject inputValue to onBlur to make it useful
-  onBlur = (event: React.FocusEvent<HTMLElement, Element>) => {
-    const { onBlur } = this.props;
-    const inputValue = this.inputRef === null ? null : this.inputRef.value;
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (onBlur) {
-      onBlur(event, inputValue);
-    }
-  };
-
-  onFocus = (event: FocusEventHandler<Element>) => {
-    const { onFocus, scrollToInputOnFocus } = this.props;
-
-    if (window && scrollToInputOnFocus && this.inputRef !== null) {
-      const headerOffset: number = 100;
-      const bodyPos: number = document.body.getBoundingClientRect().top;
-      const elementPos: number = this.inputRef.getBoundingClientRect().top;
-      const offsetTop: number = elementPos - bodyPos - headerOffset;
-
-      window.scrollTo({
-        top: offsetTop,
-        behavior: 'smooth'
-      });
-    }
-
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-
-  render(): React.ReactNode {
-    const { error, isCreatable, isClearable } = this.props;
-
-    const className: string = classnames(styles.field, this.props.className, { [styles.error]: error });
-
-    const props: IDropDownProps & CreatableProps<any> & any = {
-      ...this.props,
-      className,
-      components: isClearable ?
-        { ...this.props.components, ClearIndicator: ClearIndicatorDefault() } : this.props.components,
-      onBlur: this.onBlur,
-      onFocus: this.onFocus,
-      classNamePrefix: 'react-select'
-    };
-
-    return isCreatable
-      ? <Creatable {...props} ref={(el) => {
-        if (el === null) {
-          this.inputRef = null;
-        } else {
-          const select: any = el.select;
-          this.inputRef = select.select.inputRef;
-        }
-      }} />
-      : <Select {...props} ref={(el) => {
-        this.inputRef = el === null ? null : el.select.inputRef;
-      }}/>;
-  }
-}
-
-export default DropDown;
+import React, { FocusEventHandler } from 'react';
+import classnames from 'classnames';
+import Select from 'react-select';
+import Creatable, { CreatableProps } from 'react-select/creatable';
+// import { Props as SelectProps } from 'react-select/base';
+import { SelectComponentsConfig } from 'react-select/src/components';
+import { ActionMeta, ValueType, OptionsType } from 'react-select/src/types';
+
+import styles from './DropDown.styl';
+import { ClearIndicatorDefault } from './DropDownComponents';
+// import { SelectProps } from '@mui/material';
+
+export interface IDropDownProps {
+  ref?: (el: Creatable<any>) => void;
+  className?: string;
+  placeholder?: string;
+  value?: any;
+  name?: any;
+  isClearable?: boolean;
+  components?: SelectComponentsConfig<any>;
+  onChange?: (value: ValueType<any>, action: ActionMeta) => void;
+  onFocus?: ((event: FocusEventHandler<Element>) => void);
+  onBlur?: (event: React.FocusEvent<HTMLElement, Element>, inputValue?: any) => void;
+  styles?: any;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  error?: boolean;
+  options?: any;
+  scrollToInputOnFocus?: boolean;
+  blurInputOnSelect?: boolean;
+  createOptionPosition?: 'first' | 'last';
+  classNamePrefix?: string;
+
+  // pass this props if you need dropdown with creatable options
+  isCreatable?: boolean;
+  isValidNewOption?: (inputValue: string, value: ValueType<any>, options?: OptionsType<any>) => boolean;
+  formatCreateLabel?: (inputValue: string) => React.ReactNode;
+}
+
+class DropDown extends React.PureComponent<IDropDownProps, {}> {
+  static readonly defaultProps = {
+    createOptionPosition: 'first',
+    blurInputOnSelect: false
+  };
+
+  private inputRef: any;
+
+  // inject inputValue to onBlur to make it useful
+  onBlur = (event: React.FocusEvent<HTMLElement, Element>) => {
+    const { onBlur } = this.props;
+    const inputValue = this.inputRef === null ? null : this.inputRef.value;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (onBlur) {
+      onBlur(event, inputValue);
+    }
+  };
+
+  onFocus = (event: FocusEventHandler<Element>) => {
+    const { onFocus, scrollToInputOnFocus } = this.props;
+
+    if (window && scrollToInputOnFocus && this.inputRef !== null) {
+      const headerOffset: number = 100;
+      const bodyPos: number = document.body.getBoundingClientRect().top;
+      const elementPos: number = this.inputRef.getBoundingClientRect().top;
+      const offsetTop: number = elementPos - bodyPos - headerOffset;
+
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      });
+    }
+
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+
+  render(): React.ReactNode {
+    const { error, isCreatable, isClearable } = this.props;
+
+    const className: string = classnames(styles.field, this.props.className, { [styles.error]: error });
+
+    const props: IDropDownProps & CreatableProps<any> & any = {
+      ...this.props,
+      className,
+      components: isClearable ?
+        { ...this.props.components, ClearIndicator: ClearIndicatorDefault() } : this.props.components,
+      onBlur: this.onBlur,
+      onFocus: this.onFocus,
+      classNamePrefix: 'react-select'
+    };
+
+    return isCreatable
+      ? <Creatable {...props} ref={(el) => {
+        if (el === null) {
+          this.inputRef = null;
+        } else {
+          const select: any = el.select;
+          this.inputRef = select.select.inputRef;
+        }
+      }} />
+      : <Select {...props} ref={(el) => {
+        this.inputRef = el === null ? null : el.select.inputRef;
+      }}/>;
+  }
+}
+
+export default DropDown;

package/source/components/_common/DropDown/DropDownComponents.tsx

@@ -1,53 +1,53 @@
-import * as React from 'react';
-import { components } from 'react-select';
-import { SingleValueProps } from 'react-select/src/components/SingleValue';
-import { PlaceholderProps } from 'react-select/src/components/Placeholder';
-import { MultiValueProps } from 'react-select/src/components/MultiValue';
-import { IndicatorProps } from 'react-select/src/components/indicators';
-
-import styles from './DropDown.styl';
-
-export interface IMultiValueIcons {
-  [key: string]: React.ReactNode;
-}
-
-export const SingleValueWithIcon = (iconLabel: string, Icon?: any): React.FunctionComponent<SingleValueProps<any>> => props => (
-  <>
-    {Icon ? <Icon key={`${iconLabel}-icon`} className={styles.placeholderIcon} name={iconLabel} /> : null}
-    <components.SingleValue key={`${iconLabel}-sv`} {...props} />
-  </>
-);
-
-export const PlaceholderWithIcon = (iconLabel: string, Icon?: any): React.FunctionComponent<PlaceholderProps<any>> => props => (
-  <>
-    {Icon ? <Icon key={`${iconLabel}-icon`} className={styles.placeholderIcon} /> : null}
-    <components.Placeholder key={`${iconLabel}-ph`} {...props} />
-  </>
-);
-
-export const MultiValueWithBodyType = (Icons: IMultiValueIcons): React.FunctionComponent<MultiValueProps<any>> => (props) => {
-  const Icon: any = Icons[props.data.value];
-  return (
-    <div key={`${props.data.value}`} className={styles.multiValueWithBodyType}>
-      <Icon width='22' height='22' className={styles.multiValueIcon}/>
-      <components.MultiValue {...props} />
-    </div>
-  );
-};
-
-export const ClearIndicatorWithCondition = (isVisible: boolean): React.FunctionComponent<IndicatorProps<any>> => (props) => {
-  return isVisible
-    ? <components.ClearIndicator {...props} />
-    : null;
-};
-
-export const ClearIndicatorDefault = (): React.FunctionComponent<IndicatorProps<any>> => (props) => {
-  const innerProps = Object.assign(props.innerProps, {
-    onMouseDown: (event: any) => {
-      props.selectProps.onChange(false, { action: 'clear' });
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  });
-  return <components.ClearIndicator {...props} innerProps={innerProps}/>;
-};
+import * as React from 'react';
+import { components } from 'react-select';
+import { SingleValueProps } from 'react-select/src/components/SingleValue';
+import { PlaceholderProps } from 'react-select/src/components/Placeholder';
+import { MultiValueProps } from 'react-select/src/components/MultiValue';
+import { IndicatorProps } from 'react-select/src/components/indicators';
+
+import styles from './DropDown.styl';
+
+export interface IMultiValueIcons {
+  [key: string]: React.ReactNode;
+}
+
+export const SingleValueWithIcon = (iconLabel: string, Icon?: any): React.FunctionComponent<SingleValueProps<any>> => props => (
+  <>
+    {Icon ? <Icon key={`${iconLabel}-icon`} className={styles.placeholderIcon} name={iconLabel} /> : null}
+    <components.SingleValue key={`${iconLabel}-sv`} {...props} />
+  </>
+);
+
+export const PlaceholderWithIcon = (iconLabel: string, Icon?: any): React.FunctionComponent<PlaceholderProps<any>> => props => (
+  <>
+    {Icon ? <Icon key={`${iconLabel}-icon`} className={styles.placeholderIcon} /> : null}
+    <components.Placeholder key={`${iconLabel}-ph`} {...props} />
+  </>
+);
+
+export const MultiValueWithBodyType = (Icons: IMultiValueIcons): React.FunctionComponent<MultiValueProps<any>> => (props) => {
+  const Icon: any = Icons[props.data.value];
+  return (
+    <div key={`${props.data.value}`} className={styles.multiValueWithBodyType}>
+      <Icon width='22' height='22' className={styles.multiValueIcon}/>
+      <components.MultiValue {...props} />
+    </div>
+  );
+};
+
+export const ClearIndicatorWithCondition = (isVisible: boolean): React.FunctionComponent<IndicatorProps<any>> => (props) => {
+  return isVisible
+    ? <components.ClearIndicator {...props} />
+    : null;
+};
+
+export const ClearIndicatorDefault = (): React.FunctionComponent<IndicatorProps<any>> => (props) => {
+  const innerProps = Object.assign(props.innerProps, {
+    onMouseDown: (event: any) => {
+      props.selectProps.onChange(false, { action: 'clear' });
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  });
+  return <components.ClearIndicator {...props} innerProps={innerProps}/>;
+};

package/source/components/_common/DropDown/DropDownGroup.styl

@@ -1,20 +1,20 @@
-@import '../../../theme/theme.styl'
-
-.dropDownGroup
-  position: relative
-  grid-area: rateSearchValue
-
-.selectGroup
-  display: flex
-  flex-direction: row
-  justify-content: space-between
-
-  .selectLeft
-    margin-right: 5px
-
-  .selectRight
-    margin-left: 5px
-
-.select
-  width: 100%
-  color: $grey-1e
+@import '../../../theme/theme.styl'
+
+.dropDownGroup
+  position: relative
+  grid-area: rateSearchValue
+
+.selectGroup
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+
+  .selectLeft
+    margin-right: 5px
+
+  .selectRight
+    margin-left: 5px
+
+.select
+  width: 100%
+  color: $grey-1e

package/source/components/_common/DropDown/DropDownGroup.tsx

@@ -1,136 +1,136 @@
-import * as React from 'react';
-import _get from 'lodash/get';
-import classNames from 'classnames';
-import { SelectComponentsConfig } from 'react-select/src/components';
-
-import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-import { sliceLessThan, sliceMoreThan } from '../../../framework/utils/CommonUtils';
-import { PRICE_DEFAULT, FROM_KEY, TO_KEY } from '../../../framework/constants/SearchWidget';
-
-import DropDown from './DropDown';
-import styles from './DropDownGroup.styl';
-
-const colourStyles = {
-  option: (styles: any, props: any) => {
-    const { data, isDisabled, isSelected, isFocused } = props;
-    const { isSeries = false } = data;
-
-    return {
-      ...styles,
-      fontSize: isDisabled || isSeries ? '13px' : '14px',
-      fontWeight: isDisabled || isSeries ? 'bold' : 'normal',
-      color: isDisabled || isSeries ? '#1f1f1f' : isSelected || isFocused ? '#ffffff' : '#33333',
-      textTransform: isDisabled || isSeries ? 'uppercase' : 'none',
-      backgroundColor: isDisabled || isSeries ? '#e8e8e8' : isFocused ? '#005CCB' : '#fff',
-      pointerEvents: isDisabled || data.value === 'default' ? 'none' : isSeries ? 'auto' : 'auto'
-    };
-  }
-};
-
-interface IValue {
-  [key: string]: string;
-}
-
-export interface IRangeGroupProps {
-  name: string;
-  value: IValue;
-  options: any;
-  unit?: string;
-  pushable?: boolean;
-  isClearable?: boolean;
-  isCreatable?: boolean;
-  placeholders?: string[];
-  components?: SelectComponentsConfig<any>[];
-  styles?: any;
-  className?: string;
-  dropdownClassName?: string;
-  fromProps?: any;
-  toProps?: any;
-  onChange: (value: IValue, name: string) => void;
-}
-
-class DropDownGroup extends React.Component<IRangeGroupProps, {}> {
-  static readonly defaultProps: Partial<IRangeGroupProps> = {
-    name: '',
-    value: PRICE_DEFAULT,
-    placeholders: ['', ''],
-    components: [null, null],
-    pushable: true
-  };
-
-  onDropDownChange = (newValue: any, title: string) => {
-    const { value, name, onChange } = this.props;
-
-    value[title] = _get(newValue, 'value', null);
-
-    onChange(value, name);
-  };
-
-  getValue = (value: number|string, unit?: string) => ({
-    value,
-    label: unit ? this.getLabel(value, unit) : value
-  });
-
-  getLabel = (value: number|string, unit: string) => (
-    <span>
-      <FormattedNumber value={+value} numbersAfterDot={0} />
-      {` ${unit}`}
-    </span>
-  );
-
-  getOptions = (options: any, unit?: string) =>
-    options.map((option: any) => ({
-      value: option,
-      label: unit ? this.getLabel(option, unit) : option
-    }));
-
-  render() {
-    const {
-      value, options, unit, placeholders, className,
-      dropdownClassName, isClearable, isCreatable,
-      components, fromProps,
-      toProps
-    } = this.props;
-
-    const fromDropdownProps = {
-      isClearable,
-      isCreatable,
-      className: classNames(dropdownClassName),
-      value: value[FROM_KEY] ? this.getValue(value[FROM_KEY], unit) : '',
-      options: this.getOptions(sliceLessThan(options, value[TO_KEY]), unit),
-      onChange: (value: any) => this.onDropDownChange(value, FROM_KEY),
-      placeholder: placeholders[0],
-      components: components[0],
-      styles: colourStyles,
-      ...fromProps
-    };
-
-    const toDropdownProps = {
-      isClearable,
-      isCreatable,
-      className: classNames(dropdownClassName),
-      value: value[TO_KEY] ? this.getValue(value[TO_KEY], unit) : '',
-      options: this.getOptions(sliceMoreThan(options, value[FROM_KEY]), unit),
-      onChange: (value: any) => this.onDropDownChange(value, TO_KEY),
-      placeholder: placeholders[1],
-      components: components[1],
-      styles: colourStyles,
-      ...toProps
-    };
-
-    return (
-      <div className={classNames(styles.dropDownGroup, className)}>
-        <div className={styles.selectGroup}>
-          <div className={classNames(styles.select, styles.selectLeft)}>
-            <DropDown {...fromDropdownProps} />
-          </div>
-          <div className={classNames(styles.select, styles.selectRight)}>
-            <DropDown {...toDropdownProps} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default DropDownGroup;
+import * as React from 'react';
+import _get from 'lodash/get';
+import classNames from 'classnames';
+import { SelectComponentsConfig } from 'react-select/src/components';
+
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+import { sliceLessThan, sliceMoreThan } from '../../../framework/utils/CommonUtils';
+import { PRICE_DEFAULT, FROM_KEY, TO_KEY } from '../../../framework/constants/SearchWidget';
+
+import DropDown from './DropDown';
+import styles from './DropDownGroup.styl';
+
+const colourStyles = {
+  option: (styles: any, props: any) => {
+    const { data, isDisabled, isSelected, isFocused } = props;
+    const { isSeries = false } = data;
+
+    return {
+      ...styles,
+      fontSize: isDisabled || isSeries ? '13px' : '14px',
+      fontWeight: isDisabled || isSeries ? 'bold' : 'normal',
+      color: isDisabled || isSeries ? '#1f1f1f' : isSelected || isFocused ? '#ffffff' : '#33333',
+      textTransform: isDisabled || isSeries ? 'uppercase' : 'none',
+      backgroundColor: isDisabled || isSeries ? '#e8e8e8' : isFocused ? '#005CCB' : '#fff',
+      pointerEvents: isDisabled || data.value === 'default' ? 'none' : isSeries ? 'auto' : 'auto'
+    };
+  }
+};
+
+interface IValue {
+  [key: string]: string;
+}
+
+export interface IRangeGroupProps {
+  name: string;
+  value: IValue;
+  options: any;
+  unit?: string;
+  pushable?: boolean;
+  isClearable?: boolean;
+  isCreatable?: boolean;
+  placeholders?: string[];
+  components?: SelectComponentsConfig<any>[];
+  styles?: any;
+  className?: string;
+  dropdownClassName?: string;
+  fromProps?: any;
+  toProps?: any;
+  onChange: (value: IValue, name: string) => void;
+}
+
+class DropDownGroup extends React.Component<IRangeGroupProps, {}> {
+  static readonly defaultProps: Partial<IRangeGroupProps> = {
+    name: '',
+    value: PRICE_DEFAULT,
+    placeholders: ['', ''],
+    components: [null, null],
+    pushable: true
+  };
+
+  onDropDownChange = (newValue: any, title: string) => {
+    const { value, name, onChange } = this.props;
+
+    value[title] = _get(newValue, 'value', null);
+
+    onChange(value, name);
+  };
+
+  getValue = (value: number|string, unit?: string) => ({
+    value,
+    label: unit ? this.getLabel(value, unit) : value
+  });
+
+  getLabel = (value: number|string, unit: string) => (
+    <span>
+      <FormattedNumber value={+value} numbersAfterDot={0} />
+      {` ${unit}`}
+    </span>
+  );
+
+  getOptions = (options: any, unit?: string) =>
+    options.map((option: any) => ({
+      value: option,
+      label: unit ? this.getLabel(option, unit) : option
+    }));
+
+  render() {
+    const {
+      value, options, unit, placeholders, className,
+      dropdownClassName, isClearable, isCreatable,
+      components, fromProps,
+      toProps
+    } = this.props;
+
+    const fromDropdownProps = {
+      isClearable,
+      isCreatable,
+      className: classNames(dropdownClassName),
+      value: value[FROM_KEY] ? this.getValue(value[FROM_KEY], unit) : '',
+      options: this.getOptions(sliceLessThan(options, value[TO_KEY]), unit),
+      onChange: (value: any) => this.onDropDownChange(value, FROM_KEY),
+      placeholder: placeholders[0],
+      components: components[0],
+      styles: colourStyles,
+      ...fromProps
+    };
+
+    const toDropdownProps = {
+      isClearable,
+      isCreatable,
+      className: classNames(dropdownClassName),
+      value: value[TO_KEY] ? this.getValue(value[TO_KEY], unit) : '',
+      options: this.getOptions(sliceMoreThan(options, value[FROM_KEY]), unit),
+      onChange: (value: any) => this.onDropDownChange(value, TO_KEY),
+      placeholder: placeholders[1],
+      components: components[1],
+      styles: colourStyles,
+      ...toProps
+    };
+
+    return (
+      <div className={classNames(styles.dropDownGroup, className)}>
+        <div className={styles.selectGroup}>
+          <div className={classNames(styles.select, styles.selectLeft)}>
+            <DropDown {...fromDropdownProps} />
+          </div>
+          <div className={classNames(styles.select, styles.selectRight)}>
+            <DropDown {...toDropdownProps} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DropDownGroup;