beta-parity-react/ui/Slider/index.js

Beta Parity React Components

"use strict";function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}Object.defineProperty(exports,"__esModule",{value:true});exports.SliderTrack=exports.Slider=exports.RangeInputs=exports.Marks=void 0;var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));require("./index.css");require("./variables.css");var _Tooltip=require("../Tooltip");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["className","mode","min","max","step","defaultValue","marks","color","orientation","indicator","indicatorSide","disabled","onValueChange"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}}return target}var Slider=exports.Slider=_react["default"].forwardRef(function(_ref,ref){var className=_ref.className,_ref$mode=_ref.mode,mode=_ref$mode===void 0?"single":_ref$mode,_ref$min=_ref.min,min=_ref$min===void 0?0:_ref$min,_ref$max=_ref.max,max=_ref$max===void 0?100:_ref$max,_ref$step=_ref.step,step=_ref$step===void 0?1:_ref$step,_ref$defaultValue=_ref.defaultValue,defaultValue=_ref$defaultValue===void 0?mode==="range"?[0,50]:0:_ref$defaultValue,_ref$marks=_ref.marks,marks=_ref$marks===void 0?[]:_ref$marks,_ref$color=_ref.color,color=_ref$color===void 0?"neutral":_ref$color,_ref$orientation=_ref.orientation,orientation=_ref$orientation===void 0?"horizontal":_ref$orientation,_ref$indicator=_ref.indicator,indicator=_ref$indicator===void 0?"normal":_ref$indicator,_ref$indicatorSide=_ref.indicatorSide,indicatorSide=_ref$indicatorSide===void 0?"normal":_ref$indicatorSide,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,onValueChange=_ref.onValueChange,rest=_objectWithoutProperties(_ref,_excluded);var isRange=mode==="range";var isVertical=orientation==="vertical";var _React$useState=_react["default"].useState(isRange?defaultValue:defaultValue),_React$useState2=_slicedToArray(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1];var minValue=isRange?value[0]:value;var maxValue=isRange?value[1]:value;var handleMinChange=function handleMinChange(e){if(disabled)return;var newMin=Number(e.target.value);if(!isRange){setValue(newMin);onValueChange===null||onValueChange===void 0||onValueChange(newMin)}else if(newMin<maxValue){setValue([newMin,maxValue]);onValueChange===null||onValueChange===void 0||onValueChange([newMin,maxValue])}};var handleMaxChange=function handleMaxChange(e){if(disabled)return;var newMax=Number(e.target.value);if(isRange&&newMax>minValue){setValue([minValue,newMax]);onValueChange===null||onValueChange===void 0||onValueChange([minValue,newMax])}};var childProps={isVertical:isVertical,minValue:minValue,maxValue:maxValue,min:min,max:max,step:step,handleMinChange:handleMinChange,handleMaxChange:handleMaxChange,isRange:isRange,indicatorSide:indicatorSide,color:color,marks:marks,indicator:indicator,disabled:disabled};return(0,_jsxRuntime.jsxs)("div",_objectSpread(_objectSpread({ref:ref,className:(0,_classnames["default"])(className,"slider",{"slider-vertical":isVertical,"slider-range":isRange,"slider-disabled":disabled})},rest),{},{children:[(0,_jsxRuntime.jsx)(SliderTrack,_objectSpread({},childProps)),(0,_jsxRuntime.jsx)(RangeInputs,_objectSpread({},childProps)),(0,_jsxRuntime.jsx)(Marks,_objectSpread({},childProps))]}))});Slider.displayName="Slider";var Marks=exports.Marks=function Marks(_ref2){var marks=_ref2.marks,min=_ref2.min,max=_ref2.max,minValue=_ref2.minValue,maxValue=_ref2.maxValue,isVertical=_ref2.isVertical;var checkInRange=function checkInRange(value){var isNotRange=minValue===maxValue;return isNotRange?value<=maxValue:value>=minValue&&value<=maxValue};return(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("slider-marks"),children:marks.map(function(mark,index){return(0,_jsxRuntime.jsxs)("div",{className:"slider-marks-item",style:_defineProperty({},isVertical?"bottom":"left","".concat((mark.value-min)/(max-min)*100,"%")),children:[mark.value===min||mark.value===max?null:(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("slider-dot",{"in-range":checkInRange(mark.value),"out-range":!checkInRange(mark.value)})}),mark.label&&(0,_jsxRuntime.jsx)("span",{className:"slider-label",children:mark.label})]},mark.value)})})};var SliderTrack=exports.SliderTrack=function SliderTrack(_ref4){var isVertical=_ref4.isVertical,isRange=_ref4.isRange,minValue=_ref4.minValue,min=_ref4.min,max=_ref4.max,maxValue=_ref4.maxValue,color=_ref4.color;return(0,_jsxRuntime.jsx)("div",{className:"slider-track",children:(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("slider-progress",color),style:_defineProperty(_defineProperty({},isVertical?"bottom":"left",isRange?"".concat((minValue-min)/(max-min)*100,"%"):"0%"),isVertical?"height":"width",isRange?"".concat((maxValue-minValue)/(max-min)*100,"%"):"".concat((minValue-min)/(max-min)*100,"%"))})})};var RangeInputs=exports.RangeInputs=function RangeInputs(_ref6){var isVertical=_ref6.isVertical,minValue=_ref6.minValue,maxValue=_ref6.maxValue,min=_ref6.min,max=_ref6.max,step=_ref6.step,handleMinChange=_ref6.handleMinChange,handleMaxChange=_ref6.handleMaxChange,isRange=_ref6.isRange,indicatorSide=_ref6.indicatorSide,indicator=_ref6.indicator,disabled=_ref6.disabled;var isTooltip=indicator==="tooltip";var normalPosition=isVertical?"left":"top";var reversePosion=isVertical?"right":"bottom";var position=indicatorSide==="normal"?normalPosition:reversePosion;var _React$useState3=_react["default"].useState({min:false,max:false}),_React$useState4=_slicedToArray(_React$useState3,2),inputFocus=_React$useState4[0],setInputFocus=_React$useState4[1];var handleFocus=function handleFocus(type){setInputFocus(function(prev){return _objectSpread(_objectSpread({},prev),{},_defineProperty({},type,true))})};var handleBlur=function handleBlur(type){setInputFocus(function(prev){return _objectSpread(_objectSpread({},prev),{},_defineProperty({},type,false))})};var generateInputProps=function generateInputProps(type){return{type:"range",min:min,max:max,step:step,value:type==="min"?minValue:maxValue,onChange:type==="min"?handleMinChange:handleMaxChange,onFocus:function onFocus(){return handleFocus(type)},onBlur:function onBlur(){return handleBlur(type)},onMouseEnter:function onMouseEnter(){return handleFocus(type)},onMouseLeave:function onMouseLeave(){return handleBlur(type)},className:"par-input-slider",disabled:disabled,tabIndex:disabled?-1:0}};return(0,_jsxRuntime.jsxs)(_react["default"].Fragment,{children:[(0,_jsxRuntime.jsx)("input",_objectSpread({},generateInputProps("min"))),isRange&&(0,_jsxRuntime.jsx)("input",_objectSpread({},generateInputProps("max"))),isTooltip?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_Tooltip.Tooltip,{content:minValue,controlledOpen:inputFocus.min,position:position,children:(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("indicator-wrapper",indicatorSide),style:_defineProperty({},isVertical?"bottom":"left","".concat((minValue-min)/(max-min)*100,"%")),children:(0,_jsxRuntime.jsx)("span",{className:"slider-thumb-indicator-text"})})}),isRange&&(0,_jsxRuntime.jsx)(_Tooltip.Tooltip,{content:maxValue,controlledOpen:inputFocus.max,position:position,children:(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("indicator-wrapper",indicatorSide),style:_defineProperty({},isVertical?"bottom":"left","".concat((maxValue-min)/(max-min)*100,"%")),children:(0,_jsxRuntime.jsx)("span",{className:"slider-thumb-indicator-text"})})})]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("indicator-wrapper",indicatorSide),style:_defineProperty({},isVertical?"bottom":"left","".concat((minValue-min)/(max-min)*100,"%")),children:(0,_jsxRuntime.jsx)("span",{className:"slider-thumb-indicator-text",children:minValue})}),isRange&&(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("indicator-wrapper",indicatorSide),style:_defineProperty({},isVertical?"bottom":"left","".concat((maxValue-min)/(max-min)*100,"%")),children:(0,_jsxRuntime.jsx)("span",{className:"slider-thumb-indicator-text",children:maxValue})})]})]})};