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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.SliderModes = void 0;
exports.getCaptionsValue = getCaptionsValue;
exports.getSelectedIconPosition = getSelectedIconPosition;
exports.renderActions = renderActions;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _rcSlider = _interopRequireDefault(require("rc-slider"));
require("rc-slider/assets/index.css");
var _designSystem = require("@talend/design-system");
var _Icon = _interopRequireDefault(require("../Icon"));
var _SliderModule = _interopRequireDefault(require("./Slider.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// eslint-disable-line no-unused-vars

/**
 * Options for controlling slider operator display mode
 */
const SliderModes = exports.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
 */
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
 */
function getCaptionsValue(captionsLength, min, max) {
  const interval = (max - min) / (captionsLength - 1);
  const captionsValue = (0, _lodash.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
 */
function renderActions(actions, onChange, min, max, value, disabled) {
  const captions = getCaptionsValue(actions.length, min, max);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _classnames.default)(_SliderModule.default['tc-slider-captions'], 'tc-slider-captions'),
    children: actions.map((action, index) => /*#__PURE__*/(0, _react.createElement)(_designSystem.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__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(_SliderModule.default['tc-slider-captions'], 'tc-slider-captions'),
      children: icons.map((icon, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)(_SliderModule.default['tc-slider-captions-element'], 'tc-slider-captions-element'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          name: icon,
          className: (0, _classnames.default)({
            [_SliderModule.default.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__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(_SliderModule.default['tc-slider-captions'], 'tc-slider-captions'),
      children: captions.map((caption, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)(_SliderModule.default['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__*/(0, _jsxRuntime.jsxs)("div", {
      className: _SliderModule.default['tc-slider__handler'],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _SliderModule.default['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__*/(0, _react.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__*/(0, _jsxRuntime.jsxs)("div", {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(_SliderModule.default['tc-slider'], 'tc-slider'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcSlider.default, {
        range: Array.isArray(value),
        defaultValue: noValue ? undefined : 0,
        value: value,
        min: min,
        max: max,
        step: step,
        handleRender: noValue || hideTooltip ? undefined : handleRender,
        className: (0, _classnames.default)(_SliderModule.default['tc-slider-rc-slider'], {
          [_SliderModule.default['tc-slider-rc-slider--track-equals']]: mode === SliderModes.EQUALS
        }, {
          [_SliderModule.default['tc-slider-rc-slider--track-exclusive']]: mode === SliderModes.EXCLUSIVE
        }, {
          [_SliderModule.default['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;
var _default = exports.default = Slider;
//# sourceMappingURL=Slider.component.js.map