@geneui/components/Range/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { c as createSliderWithTooltip, R as Range } from '../rangeAndSlider-693a3d41.js';
import useWidth from '../hooks/useWidth.js';
import '../dateValidation-67caec66.js';
import 'react-dom';
import useToggle from '../hooks/useToggle.js';
import '../configs-00612ce0.js';
import '../_commonjsHelpers-24198af3.js';
import '../index-45eafea6.js';
import '../react-lifecycles-compat.es-6e1f3768.js';
import '../style-inject.es-746bb8ed.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';

function formatter(value, tooltipType) {
  switch (tooltipType) {
    case 'percentage':
      return "".concat(value, "%");
    case 'currency':
      return "$".concat(value);
    case 'pixel':
      return "".concat(value, "px");
    default:
      return value;
  }
}
const rangeCircleTypes = ['c-type-1', 'c-type-2', 'c-type-3'];
const RangeWithTooltip = createSliderWithTooltip(Range);
const isMiddle = (value, max) => value > max / 3;
const isMax = (value, max) => value >= max * 2 / 3;
function RangeMolecule(props) {
  const {
    max,
    min,
    step,
    value,
    coloring,
    disabled,
    onChange,
    circleTypes,
    withTooltip,
    defaultValue,
    tooltipType,
    isSmallHandler,
    showCircleOnDrag,
    className,
    circleSizeBasedOnRange,
    ...restProps
  } = props;
  const isControlled = ('value' in props);
  const [sliderValue, setSliderValue] = useState(defaultValue);
  const [tooltipVisibility, toggleTooltipVisibility] = useToggle(false);
  const localValue = isControlled ? value : sliderValue;
  const isGradient = coloring === 'gradient-value';
  const leftPercent = localValue[0] * 100 / (max - min);
  const divRef = useRef();
  const sliderWidth = useWidth(divRef);
  const RangeElement = withTooltip ? RangeWithTooltip : Range;
  const setCircleStyles = useCallback(i => {
    const isMaxValue = isMax(localValue[i], max);
    const isMiddleValue = isMiddle(localValue[i], max);
    return classnames(circleTypes[i], {
      'max-coloring': isGradient && isMaxValue,
      'max-size': circleSizeBasedOnRange && isMaxValue,
      'min-coloring': !isMiddleValue && !isMaxValue && isGradient,
      'middle-coloring': isGradient && isMiddleValue && !isMaxValue,
      'middle-size': circleSizeBasedOnRange && !isMaxValue && isMiddleValue
    });
  }, [localValue, max, circleTypes, isGradient, circleSizeBasedOnRange]);
  const handleSliderChange = useCallback(val => {
    if (val[1] <= max && val[0] >= min) {
      !isControlled && setSliderValue(val);
      onChange && onChange(val);
    }
  }, [max, min, isControlled, onChange]);
  const tipFormatter = useCallback(value => formatter(value, tooltipType), [tooltipType]);
  return /*#__PURE__*/React__default.createElement("div", {
    className: classnames('slider-holder ', className, coloring, {
      disabled,
      'show-on-drag': showCircleOnDrag
    }),
    onMouseEnter: toggleTooltipVisibility,
    onMouseLeave: toggleTooltipVisibility
  }, /*#__PURE__*/React__default.createElement("div", {
    className: classnames('slider-comp', {
      'size-small': isSmallHandler
    }),
    style: {
      '--left': "-".concat(leftPercent, "%"),
      '--sliderWidth': "".concat(sliderWidth, "px")
    }
  }, /*#__PURE__*/React__default.createElement("div", {
    ref: divRef
  }, /*#__PURE__*/React__default.createElement(RangeElement, _extends({
    max: max,
    min: min,
    step: step,
    value: localValue,
    tipProps: {
      prefixCls: 'tooltip-el',
      visible: tooltipVisibility && localValue[1] - localValue[0] > max / 20
    },
    allowCross: false,
    tipFormatter: tipFormatter,
    onChange: handleSliderChange,
    handleStyle: [{
      content: "'".concat(setCircleStyles(0), "'")
    }, {
      content: "'".concat(setCircleStyles(1), "'")
    }]
  }, restProps)))));
}
RangeMolecule.propTypes = {
  /**
   * Controlled value.
   */
  value: PropTypes.array,
  /**
   * Disabled state.
   */
  disabled: PropTypes.bool,
  /**
   * External/Additional className that can be added to 'Range' component.
   */
  className: PropTypes.string,
  /**
   * Fires an event on ExtendedInput change((event: Event) => void).
   */
  onChange: PropTypes.func,
  /**
   * Show/Hide tooltips on 'Range'.
   */
  withTooltip: PropTypes.bool,
  /**
   * Switch on/off small size.
   */
  isSmallHandler: PropTypes.bool,
  /**
   * Initial value.
   */
  defaultValue: PropTypes.array,
  /**
   * Show/hide circles.
   */
  showCircleOnDrag: PropTypes.bool,
  /**
   * Max value.
   */
  max: PropTypes.number.isRequired,
  /**
   * Min value.
   */
  min: PropTypes.number.isRequired,
  /**
   * Skip steps count.
   */
  step: PropTypes.number.isRequired,
  circleSizeBasedOnRange: PropTypes.bool,
  /**
   * Various circle type.
   */
  circleTypes: (props, propName, componentName) => {
    const prop = props[propName];
    const isCircleTypes = Array.isArray(prop) && prop.length === 2 && prop.every(item => rangeCircleTypes.includes(item));
    if (!isCircleTypes) {
      return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName));
    }
  },
  /**
   * Various tooltip types.
   */
  tooltipType: PropTypes.oneOf(['default', 'percentage', 'currency', 'pixel']),
  /**
   * Various themes/colors for component.
   */
  coloring: PropTypes.oneOf(['primary', 'positive-value', 'negative-value', 'gradient-value'])
};
RangeMolecule.defaultProps = {
  disabled: false,
  isSmallHandler: true,
  withTooltip: false,
  coloring: 'primary',
  tooltipType: 'default',
  showCircleOnDrag: false,
  circleSizeBasedOnRange: true
};

export { RangeMolecule as default };