@talend/react-components/lib-esm/Slider/Slider.component.js

Set of react components.

import { forwardRef, createElement as _createElement } from 'react';
import classnames from 'classnames';
import RcSlider from 'rc-slider';
import 'rc-slider/assets/index.css';
// eslint-disable-line no-unused-vars
import { ButtonIcon } from '@talend/design-system';
import Icon from '../Icon';
import theme from './Slider.module.scss';

/**
 * Options for controlling slider operator display mode
 */
import { range } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const SliderModes = {
  GREATER_THAN: 'greaterThan',
  EQUALS: 'equals',
  EXCLUSIVE: 'exclusive'
};

/**
 * this function check if we have icons to display
 * @param {array} icons array if icons to display
 */
function isIconsAvailable(icons) {
  return icons && Array.isArray(icons) && icons.length > 1;
}

/**
 * This function give the selected icon position if there is more than 1 icon
 */
export function getSelectedIconPosition(icons, min, max, value) {
  if (Array.isArray(value) || value === undefined) {
    return -1;
  }
  const interval = (max - min) / (icons.length - 1);
  return Math.round(value / interval);
}

/**
 * Return an array with ranged values calculate on the length of the captions .
 * @param {number} captionsLength
 * @param {number} min
 * @param {number} max
 */
export function getCaptionsValue(captionsLength, min, max) {
  const interval = (max - min) / (captionsLength - 1);
  const captionsValue = range(min, max, interval);
  captionsValue.push(max);
  return captionsValue;
}

/**
 * This function allow to get the actions components
 * @param {array} actions
 * @param {number} value
 * @param {number} min
 * @param {number} max
 * @param {function} onChange
 */
export function renderActions(actions, onChange, min, max, value, disabled) {
  const captions = getCaptionsValue(actions.length, min, max);
  return /*#__PURE__*/_jsx("div", {
    className: classnames(theme['tc-slider-captions'], 'tc-slider-captions'),
    children: actions.map((action, index) => /*#__PURE__*/_createElement(ButtonIcon, {
      tooltipPlacement: "bottom",
      ...action,
      key: index,
      onClick: () => onChange(captions[index]),
      disabled: disabled
    }, 'children' in action ? action.children || '' : 'label' in action ? action.label : ''))
  }, "actions");
}
function renderIcons(icons, min, max, value) {
  if (isIconsAvailable(icons)) {
    const position = getSelectedIconPosition(icons, min, max, value);
    return /*#__PURE__*/_jsx("div", {
      className: classnames(theme['tc-slider-captions'], 'tc-slider-captions'),
      children: icons.map((icon, index) => /*#__PURE__*/_jsx("div", {
        className: classnames(theme['tc-slider-captions-element'], 'tc-slider-captions-element'),
        children: /*#__PURE__*/_jsx(Icon, {
          name: icon,
          className: classnames({
            [theme.selected]: index === position
          }, {
            selected: index === position
          })
        }, index)
      }, index))
    }, "icons");
  }
  return null;
}
function renderTextCaptions(captionTextStepNumber, captionsFormat, min, max) {
  if (captionTextStepNumber > 1) {
    const captions = getCaptionsValue(captionTextStepNumber, min, max);
    return /*#__PURE__*/_jsx("div", {
      className: classnames(theme['tc-slider-captions'], 'tc-slider-captions'),
      children: captions.map((caption, index) => /*#__PURE__*/_jsx("div", {
        className: classnames(theme['tc-slider-captions-element'], 'tc-slider-captions-element'),
        children: captionsFormat(caption)
      }, index))
    }, "captions");
  }
  return null;
}
function getCaption(onChange, captionsFormat, min, max, value, captionActions, captionIcons, captionTextStepNumber, disabled) {
  if (captionActions) {
    return renderActions(captionActions, onChange, min, max, value, disabled);
  }
  if (captionIcons) {
    return renderIcons(captionIcons, min, max, value);
  }
  if (captionTextStepNumber) {
    return renderTextCaptions(captionTextStepNumber, captionsFormat, min, max);
  }
  return null;
}

/**
 * Function to set the tooltip
 * @param {function} captionsFormat the function to format the caption
 */
function getHandle(captionsFormat) {
  function renderHandler(origin, props) {
    return /*#__PURE__*/_jsxs("div", {
      className: theme['tc-slider__handler'],
      children: [/*#__PURE__*/_jsx("div", {
        className: theme['tc-slider__value'],
        style: origin.props.style,
        children: captionsFormat ? captionsFormat(props === null || props === void 0 ? void 0 : props.value) : null
      }), origin]
    });
  }
  return renderHandler;
}
const Slider = /*#__PURE__*/forwardRef(({
  id,
  value,
  captionActions,
  captionIcons,
  captionTextStepNumber,
  captionsFormat = captionValue => captionValue,
  min = 0,
  max = 100,
  step = 1,
  mode,
  onChange,
  disabled,
  hideTooltip,
  ...rest
}, ref) => {
  const handleRender = getHandle(captionsFormat);
  const noValue = value === null || value === undefined;
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx("div", {
      className: classnames(theme['tc-slider'], 'tc-slider'),
      children: /*#__PURE__*/_jsx(RcSlider, {
        range: Array.isArray(value),
        defaultValue: noValue ? undefined : 0,
        value: value,
        min: min,
        max: max,
        step: step,
        handleRender: noValue || hideTooltip ? undefined : handleRender,
        className: classnames(theme['tc-slider-rc-slider'], {
          [theme['tc-slider-rc-slider--track-equals']]: mode === SliderModes.EQUALS
        }, {
          [theme['tc-slider-rc-slider--track-exclusive']]: mode === SliderModes.EXCLUSIVE
        }, {
          [theme['tc-slider-rc-slider--track-greater-than']]: mode === SliderModes.GREATER_THAN
        }, 'tc-slider-rc-slider', {
          'tc-slider-rc-slider--track-equals': mode === SliderModes.EQUALS
        }, {
          'tc-slider-rc-slider--track-exclusive': mode === SliderModes.EXCLUSIVE
        }, {
          'tc-slider-rc-slider--track-greater-than': mode === SliderModes.GREATER_THAN
        }),
        onChange: onChange,
        disabled: disabled,
        ref: ref,
        ...rest
      })
    }), getCaption(onChange, captionsFormat, min, max, value, captionActions, captionIcons, captionTextStepNumber, disabled)]
  });
});
Slider.displayName = 'Slider';

// @ts-ignore
Slider.MODES = SliderModes;
export default Slider;
//# sourceMappingURL=Slider.component.js.map