@geneui/components
Version:
The Gene UI components library designed for BI tools
262 lines (259 loc) • 8.04 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useRef, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { c as createSliderWithTooltip, S as Slider } from '../rangeAndSlider-693a3d41.js';
import useWidth from '../hooks/useWidth.js';
import '../dateValidation-67caec66.js';
import 'react-dom';
import '../configs-00612ce0.js';
import Icon from '../Icon/index.js';
import NumberInput from '../ValidatableNumberInput/index.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';
import '../index-a0e4e333.js';
import '../hooks/useMount.js';
import '../ExtendedInput/index.js';
import '../hooks/useDeviceType.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../SuggestionList/index.js';
import '../hooks/useKeyDown.js';
import '../hooks/useClickOutside.js';
import '../config-1053d64d.js';
import '../Scrollbar/index.js';
import '../callAfterDelay-7272faca.js';
import '../index-6d7e99cd.js';
import '../tslib.es6-f211516f.js';
import '../GeneUIProvider/index.js';
const SliderWithTooltip = createSliderWithTooltip(Slider);
function tipFormatter(value, tooltipType) {
switch (tooltipType) {
case 'percentage':
return "".concat(value, "%");
case 'currency':
return "$".concat(value);
case 'pixel':
return "".concat(value, "px");
default:
return value;
}
}
function SliderMolecule(props) {
const {
max,
min,
step,
value,
coloring,
disabled,
onChange,
withInput,
circleType,
withTooltip,
tooltipType,
className,
isSmallHandler,
plusMinusIcons,
likeDislikeIcons,
withActionButtons,
showCircleOnDrag,
defaultValue = min,
circleSizeBasedOnRange,
...restProps
} = props;
const isControlled = ('value' in props);
const [sliderValue, setSliderValue] = useState(defaultValue);
const localValue = isControlled ? value : sliderValue;
const [withLikeDisLikeActions, setWithLikeDisLikeActions] = useState(withActionButtons);
const isMin = localValue < max / 3;
const isMiddle = localValue > max / 3;
const isMax = localValue >= max * 2 / 3;
const divRef = useRef();
const sliderWidth = useWidth(divRef);
const isGradient = coloring === 'gradient-value';
const SliderElement = withTooltip ? SliderWithTooltip : Slider;
const handleSliderChange = useCallback(val => {
!isControlled && setSliderValue(Number(val));
onChange && onChange(val);
}, [onChange, isControlled]);
const handleAfterChange = val => {
val > max / 2 ? handleSliderChange(max) : handleSliderChange(min);
};
// Like and dislike buttons can change value only min or max
const handleLikeDislikeClick = useCallback(val => {
withLikeDisLikeActions && handleSliderChange(val);
}, [handleSliderChange, withLikeDisLikeActions]);
useEffect(() => {
!likeDislikeIcons && setWithLikeDisLikeActions(withLikeDisLikeActions => !withLikeDisLikeActions);
}, [likeDislikeIcons]);
useEffect(() => {
setWithLikeDisLikeActions(withActionButtons);
}, [withActionButtons]);
return /*#__PURE__*/React__default.createElement("div", _extends({
className: classnames('slider-holder', className, coloring, {
disabled,
'show-on-drag': showCircleOnDrag
})
}, restProps), likeDislikeIcons && /*#__PURE__*/React__default.createElement(Icon, {
className: classnames('bc-icon-dislike', {
active: localValue === min,
'negative-value': !withLikeDisLikeActions
}),
onClick: () => handleLikeDislikeClick(min)
}), /*#__PURE__*/React__default.createElement("div", {
className: classnames('slider-comp', {
'size-small': isSmallHandler
}),
style: {
'--sliderWidth': "".concat(sliderWidth / 10, "rem")
}
}, /*#__PURE__*/React__default.createElement("div", {
ref: divRef
}, /*#__PURE__*/React__default.createElement(SliderElement, _extends({}, restProps, {
max: max,
min: min,
step: step,
onAfterChange: withLikeDisLikeActions ? handleAfterChange : () => void 0,
value: Math.min(localValue, max),
onChange: handleSliderChange,
tipProps: {
prefixCls: 'tooltip-el',
overlay: tipFormatter(localValue, tooltipType)
},
handleStyle: {
content: "'".concat(classnames(circleType, {
'min-coloring': isMin && isGradient,
'max-coloring': isGradient && isMax,
'max-size': circleSizeBasedOnRange && isMax,
'middle-coloring': isGradient && isMiddle && !isMax,
'middle-size': circleSizeBasedOnRange && !isMax && isMiddle
}), "'")
}
})))), plusMinusIcons && /*#__PURE__*/React__default.createElement("div", {
className: "slider-actions"
}, /*#__PURE__*/React__default.createElement(Icon, {
className: classnames('bc-icon-plus', {
disabled: localValue === max
}),
onClick: () => handleSliderChange(localValue + step)
}), /*#__PURE__*/React__default.createElement(Icon, {
className: classnames('bc-icon-minus', {
disabled: localValue === min
}),
onClick: () => handleSliderChange(localValue - step)
})), likeDislikeIcons && /*#__PURE__*/React__default.createElement(Icon, {
className: classnames('bc-icon-like', {
active: localValue === max,
'positive-value': !withLikeDisLikeActions
}),
onClick: () => handleLikeDislikeClick(max)
}), withInput && /*#__PURE__*/React__default.createElement(NumberInput, {
step: step,
min: min,
max: max,
type: "number",
colorOnValid: false,
showIconOnValid: false,
colorBorderOnError: true,
showErrorIcon: false,
value: String(localValue),
flexibility: "content-size",
onChange: e => handleSliderChange(e.target.value)
}));
}
SliderMolecule.propTypes = {
/**
* Controlled value.
*/
value: PropTypes.number,
/**
* Disabled state.
*/
disabled: PropTypes.bool,
/**
* Fires an event when 'Slider' changes checked state((event: Event) => void).
*/
onChange: PropTypes.func,
/**
* Additional view to choose step.
*/
withInput: PropTypes.bool,
/**
* Show/hide 'Slider' tooltip.
*/
withTooltip: PropTypes.bool,
/**
* Switch on/off small size.
*/
isSmallHandler: PropTypes.bool,
/**
* External/Additional className that can be added to 'Range' component.
*/
className: PropTypes.string,
/**
* Initial value.
*/
defaultValue: PropTypes.number,
/**
* Show/hide actions with (+/-) icons
*/
plusMinusIcons: PropTypes.bool,
/**
* Show/hide actions with (like/dislike) icons
*/
likeDislikeIcons: PropTypes.bool,
/**
* 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,
/**
* Change circle size based on range
*/
circleSizeBasedOnRange: PropTypes.bool,
/**
* Show/hide action button.
*/
withActionButtons: PropTypes.bool,
/**
* Various circle type.
*/
circleType: PropTypes.oneOf(['c-type-1', 'c-type-2', 'c-type-3']),
/**
* Various tooltip type.
*/
tooltipType: PropTypes.oneOf(['default', 'percentage', 'currency', 'pixel']),
/**
* Various themes/colors for component.
*/
coloring: PropTypes.oneOf(['primary', 'positive-value', 'negative-value', 'gradient-value'])
};
SliderMolecule.defaultProps = {
disabled: false,
withInput: false,
isSmallHandler: true,
withActionButtons: false,
withTooltip: false,
coloring: 'primary',
plusMinusIcons: false,
tooltipType: 'default',
likeDislikeIcons: false,
showCircleOnDrag: false,
circleSizeBasedOnRange: true
};
export { SliderMolecule as default };