@wavemaker/app-rn-runtime 12.0.0-next.46502 → 12.0.0-next.47810

package/components/input/slider/slider.component.js

@@ -0,0 +1,540 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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); }
+import React from 'react';
+import { View, Text, TouchableOpacity, Animated, Dimensions } from 'react-native';
+import { debounce, isNil, isArray, isString, last, isEqual, isObject } from 'lodash';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { BackgroundComponent } from '@wavemaker/app-rn-runtime/styles/background.component';
+import WmTooltip from '@wavemaker/app-rn-runtime/components/basic/tooltip/tooltip.component';
+import WmSliderProps from './slider.props';
+import { DEFAULT_CLASS } from './slider.styles';
+import { isDefined, isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import { BaseDatasetComponent, BaseDatasetState } from '../basedataset/basedataset.component';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+const SCREEN_WIDTH = Dimensions.get("screen").width;
+export class WmSliderState extends BaseDatasetState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "track", void 0);
+  }
+}
+class Scale {
+  static getInstanceWithTicks(ticks) {
+    const scale = new Scale();
+    scale.ticks = [...ticks];
+    return scale;
+  }
+  constructor() {
+    _defineProperty(this, "ticks", []);
+  }
+  getTickIndex(value) {
+    if (isString(value)) {
+      value = parseInt(value);
+    }
+    let markIndex = 0;
+    const i = this.ticks.findIndex((v, i) => v.markValue >= value);
+    if (i === 0) {
+      markIndex = 0;
+    } else if (i < 0 || i === this.ticks.length - 1) {
+      markIndex = this.ticks.length - 1;
+    } else if (value - this.ticks[i - 1].markValue < (this.ticks[i].markValue - this.ticks[i - 1].markValue) / 2) {
+      markIndex = i - 1;
+    } else {
+      markIndex = i;
+    }
+    return markIndex;
+  }
+  getMinTick() {
+    return this.ticks[0];
+  }
+  getMaxTick() {
+    return last(this.ticks) || {};
+  }
+  getTick(value) {
+    return this.ticks[this.getTickIndex(value)];
+  }
+  clamp(value) {
+    const index = this.getTickIndex(value);
+    return this.ticks[index].markValue;
+  }
+  transform(min, max, markerRadius) {
+    var _this$ticks$, _last;
+    const MARKER_RADIUS = markerRadius;
+    const adjustedMin = min + MARKER_RADIUS;
+    const adjustedMax = max - MARKER_RADIUS;
+    const thisMin = (this.ticks ? (_this$ticks$ = this.ticks[0]) === null || _this$ticks$ === void 0 ? void 0 : _this$ticks$.markValue : 0) || 0;
+    const thisMax = (_last = last(this.ticks)) === null || _last === void 0 ? void 0 : _last.markValue;
+    const factor = thisMax ? (adjustedMax - adjustedMin) / (thisMax - thisMin) : 1;
+    const ticks = [];
+    this.ticks.forEach((v, i) => {
+      const markValue = Math.round(adjustedMin + (v.markValue - this.ticks[0].markValue) * factor);
+      ticks[i] = {
+        displayfield: '' + markValue,
+        markValue: markValue,
+        datafield: markValue,
+        dataitem: markValue
+      };
+    });
+    return Scale.getInstanceWithTicks(ticks);
+  }
+}
+export default class WmSlider extends BaseDatasetComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmSliderProps());
+    _defineProperty(this, "valueBeforeSlide", 0);
+    _defineProperty(this, "position", new Animated.Value(0));
+    _defineProperty(this, "highPosition", new Animated.Value(0));
+    _defineProperty(this, "trackGesture", Gesture.Pan());
+    _defineProperty(this, "knobGesture", Gesture.Pan());
+    _defineProperty(this, "highKnobGesture", Gesture.Pan());
+    _defineProperty(this, "scale", null);
+    _defineProperty(this, "uiScale", null);
+    _defineProperty(this, "positionRefMaksudai", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "tempPosition", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "MARKER_WIDTH", 10);
+    _defineProperty(this, "onSliderChange", debounce((value, gestureType) => {
+      const dataValue = this.getScaledDataValue();
+      const isRangeSlider = this.state.props.range && isArray(dataValue);
+
+      // * thumb value for low or high
+      const oldThumbValue = gestureType === 'lowThumb' ? dataValue || (dataValue === null || dataValue === void 0 ? void 0 : dataValue[0]) : dataValue === null || dataValue === void 0 ? void 0 : dataValue[1];
+      let thumbDataValue = isRangeSlider ? [dataValue[0], dataValue[1]] : [value];
+      if (isRangeSlider) {
+        if (gestureType === 'lowThumb') {
+          const valueLowerThanHighThumb = value > (dataValue === null || dataValue === void 0 ? void 0 : dataValue[1]) ? dataValue === null || dataValue === void 0 ? void 0 : dataValue[1] : value;
+          thumbDataValue = [valueLowerThanHighThumb, dataValue[1]];
+        } else if (gestureType === 'highThumb') {
+          const valueGreaterThanLowThumb = value < dataValue[0] ? dataValue === null || dataValue === void 0 ? void 0 : dataValue[0] : value;
+          thumbDataValue = [dataValue[0], valueGreaterThanLowThumb];
+        } else if (dataValue[1] && value > dataValue[1]) {
+          thumbDataValue = [dataValue[0], value];
+        } else {
+          thumbDataValue = [value, dataValue[1]];
+        }
+      }
+
+      // * new thumb value is different from old value
+      const dataset = thumbDataValue.map(v => this.scale.getTick(v).datafield);
+      this.updateState({
+        props: {
+          datavalue: dataset.length > 1 ? dataset : dataset[0]
+        }
+      });
+      this.props.onFieldChange && this.props.onFieldChange('datavalue', thumbDataValue, oldThumbValue);
+    }, 200));
+    _defineProperty(this, "onLayoutChange", e => {
+      const layout = e.nativeEvent.layout;
+      this.updateState({
+        track: {
+          top: isWebPreviewMode() ? layout.top : layout.y,
+          left: isWebPreviewMode() ? layout.left : layout.x,
+          width: layout.width,
+          height: layout.height
+        }
+      }, () => {
+        this.initScale();
+        this.computePosition(this.getScaledDataValue()[0], 'track');
+      });
+    });
+    _defineProperty(this, "getLabel", (data, displayFiled, indexOfMarker) => {
+      let title = "";
+      if (isString(data)) {
+        let formattedData = data.replace(/ ,/g, ',').replace(/, /g, ',');
+        title = this.getLabel(formattedData.split(','), displayFiled, indexOfMarker);
+      } else if (data && isArray(data) && data[indexOfMarker]) {
+        if (isObject(data[indexOfMarker]) && data[indexOfMarker].title) {
+          title = `${data[indexOfMarker].title}`;
+        } else if (!isObject(data[indexOfMarker])) {
+          title = `${data[indexOfMarker]}`;
+        }
+      } else {
+        title = `${displayFiled}`;
+      }
+      return title;
+    });
+    _defineProperty(this, "getLabelPosition", (data, indexOfMarker) => {
+      let position = "up";
+      if (data && isArray(data) && data[indexOfMarker]) {
+        if (isObject(data[indexOfMarker]) && data[indexOfMarker].position) {
+          position = data[indexOfMarker].position;
+        }
+      }
+      return position;
+    });
+    this.initScale();
+    this.configureGesture(this.trackGesture, 'track');
+    this.configureGesture(this.knobGesture, 'lowThumb');
+    this.configureGesture(this.highKnobGesture, 'highThumb');
+    this.positionRefMaksudai.current = 0;
+  }
+  constrainValueToRange(value) {
+    const minValue = this.state.props.minvalue;
+    const maxValue = this.state.props.maxvalue;
+    if (!isDefined(minValue) || !isDefined(maxValue)) {
+      return value;
+    }
+    if (isArray(value)) {
+      return value.map(val => {
+        if (val < minValue) return minValue;
+        if (val > maxValue) return maxValue;
+        return val;
+      });
+    } else if (!isNil(value)) {
+      if (value < minValue) return minValue;
+      if (value > maxValue) return maxValue;
+    }
+    return value;
+  }
+  getMarkerWidthFromStyles() {
+    var _this$styles;
+    const cssWidth = (_this$styles = this.styles) === null || _this$styles === void 0 || (_this$styles = _this$styles.markerStyle) === null || _this$styles === void 0 ? void 0 : _this$styles.width;
+    return typeof cssWidth === 'number' && cssWidth > 0 ? cssWidth : this.MARKER_WIDTH;
+  }
+  getMarkerRadius() {
+    var _this$styles2, _this$state$track;
+    const markerWidth = this.getMarkerWidthFromStyles();
+    const markerHeight = ((_this$styles2 = this.styles) === null || _this$styles2 === void 0 || (_this$styles2 = _this$styles2.markerStyle) === null || _this$styles2 === void 0 ? void 0 : _this$styles2.height) || markerWidth;
+    const trackHeight = ((_this$state$track = this.state.track) === null || _this$state$track === void 0 ? void 0 : _this$state$track.height) || 2;
+    const baseRadius = markerWidth / 2;
+    const extraPadding = Math.max(0, (trackHeight - markerHeight) / 2);
+    return baseRadius + extraPadding;
+  }
+  getValueFromGesture(positionX) {
+    var _this$scale;
+    return ((_this$scale = this.scale) === null || _this$scale === void 0 ? void 0 : _this$scale.ticks[this.uiScale.getTickIndex(positionX)].markValue) || 0;
+  }
+  getPositionFromValue(value) {
+    var _this$uiScale;
+    return (_this$uiScale = this.uiScale) === null || _this$uiScale === void 0 || (_this$uiScale = _this$uiScale.ticks[this.scale.getTickIndex(value)]) === null || _this$uiScale === void 0 ? void 0 : _this$uiScale.markValue;
+  }
+  configureGesture(gesture, gestureType) {
+    gesture.maxPointers(1).minDistance(0).onChange(e => {
+      var _this$uiScale2, _this$uiScale3;
+      const tickLastIndex = this.scale.ticks.length - 1;
+      const max = (_this$uiScale2 = this.uiScale) === null || _this$uiScale2 === void 0 || (_this$uiScale2 = _this$uiScale2.ticks[tickLastIndex]) === null || _this$uiScale2 === void 0 ? void 0 : _this$uiScale2.markValue;
+      const min = (_this$uiScale3 = this.uiScale) === null || _this$uiScale3 === void 0 || (_this$uiScale3 = _this$uiScale3.ticks[0]) === null || _this$uiScale3 === void 0 ? void 0 : _this$uiScale3.markValue;
+      let newValue = this.positionRefMaksudai.current + e.translationX;
+      newValue = newValue > max ? max : newValue;
+      newValue = newValue < min ? min : newValue;
+      this.position.setValue(newValue);
+      this.tempPosition.current = newValue;
+    }).onEnd(e => {
+      if (this.state.track) {
+        const value = this.getValueFromGesture(this.tempPosition.current);
+        this.positionRefMaksudai.current = this.tempPosition.current;
+        this.computePosition(value, gestureType);
+        this.onSliderChange(value, gestureType);
+      }
+    });
+  }
+  getScaledDataValue() {
+    let dataValue = this.state.props.datavalue || this.getDataValue();
+    dataValue = this.constrainValueToRange(dataValue);
+    if (dataValue && this.scale) {
+      dataValue = isArray(dataValue) ? dataValue : [dataValue];
+      return dataValue.map(d => {
+        var _this$scale2;
+        return (_this$scale2 = this.scale) === null || _this$scale2 === void 0 || (_this$scale2 = _this$scale2.ticks.find(t => t.datafield === d)) === null || _this$scale2 === void 0 ? void 0 : _this$scale2.markValue;
+      });
+    }
+    return dataValue;
+  }
+  getDataValue() {
+    let dataValue = this.props.datavalue;
+    if (isNil(this.props.datavalue)) {
+      var _this$scale$ticks, _this$scale$ticks$mid;
+      const mid = Math.floor(this.scale.ticks.length / 2);
+      return mid > 0 ? [((_this$scale$ticks = this.scale.ticks[mid - 1]) === null || _this$scale$ticks === void 0 ? void 0 : _this$scale$ticks.datafield) || 0, ((_this$scale$ticks$mid = this.scale.ticks[mid]) === null || _this$scale$ticks$mid === void 0 ? void 0 : _this$scale$ticks$mid.datafield) || 100] : [];
+    }
+    dataValue = this.constrainValueToRange(dataValue);
+    dataValue = isArray(dataValue) ? dataValue : [dataValue];
+    return dataValue.map(d => {
+      var _this$scale$getTick;
+      return (_this$scale$getTick = this.scale.getTick(d)) === null || _this$scale$getTick === void 0 ? void 0 : _this$scale$getTick.datafield;
+    });
+  }
+  initNumericSlider() {
+    const dataset = [];
+    const minValue = this.state.props.minvalue;
+    const maxValue = this.state.props.maxvalue;
+    const step = this.state.props.step;
+    if (isDefined(minValue) && isDefined(maxValue) && isDefined(step)) {
+      let nextMark = minValue;
+      while (nextMark <= maxValue) {
+        dataset.push(nextMark);
+        nextMark += step || 1;
+      }
+      this.updateState({
+        props: {
+          dataset: dataset
+        }
+      });
+    }
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case 'maxvalue':
+      case 'minvalue':
+      case 'step':
+        if (this.state.props.datatype === 'number' && this.initialized) {
+          this.initNumericSlider();
+        }
+      case 'datavalue':
+        if (!isEqual($new, $old)) {
+          const clampedValue = this.constrainValueToRange($new);
+          if (!isEqual(clampedValue, $new)) {
+            this.updateState({
+              props: {
+                datavalue: clampedValue
+              }
+            });
+          }
+          this.invokeEventCallback('onChange', [null, this, clampedValue, $old]);
+        }
+        break;
+    }
+  }
+  onDataItemsUpdate() {
+    var _this$getScaledDataVa;
+    super.onDataItemsUpdate();
+    this.initScale();
+    this.computePosition(((_this$getScaledDataVa = this.getScaledDataValue()) === null || _this$getScaledDataVa === void 0 ? void 0 : _this$getScaledDataVa[0]) || 10, "track");
+  }
+  initScale() {
+    var _this$state$dataItems, _state$track;
+    const props = this.state.props;
+    const state = this.state;
+    this.scale = Scale.getInstanceWithTicks((_this$state$dataItems = this.state.dataItems) === null || _this$state$dataItems === void 0 ? void 0 : _this$state$dataItems.map((d, i) => ({
+      displayfield: d.displayexp || d.displayfield,
+      markValue: i + 1,
+      datafield: d.datafield,
+      dataitem: d
+    })));
+    const width = ((_state$track = state.track) === null || _state$track === void 0 ? void 0 : _state$track.width) || 0;
+    const markerRadius = this.getMarkerRadius();
+    this.uiScale = this.scale.transform(0, width, markerRadius);
+  }
+  computePosition(from, gestureType) {
+    const state = this.state;
+    const datavalue = this.getScaledDataValue();
+    // * single thumb slider
+    if (!state.props.range) {
+      var _this$position;
+      const value = this.getPositionFromValue(from);
+      (_this$position = this.position) === null || _this$position === void 0 || _this$position.setValue(isNaN(value) ? 0 : value);
+      return;
+    }
+    if (gestureType === 'highThumb') {
+      var _this$highPosition;
+      const value = this.getPositionFromValue(Math.max(datavalue[0], from));
+      (_this$highPosition = this.highPosition) === null || _this$highPosition === void 0 || _this$highPosition.setValue(value);
+    } else if (gestureType === 'lowThumb') {
+      var _this$position2;
+      const value = this.getPositionFromValue(Math.min(from, datavalue[1]));
+      (_this$position2 = this.position) === null || _this$position2 === void 0 || _this$position2.setValue(value);
+    } else {
+      var _this$scale$getMinTic, _this$position3, _this$scale$getMaxTic, _this$highPosition2;
+      /*
+       * gestureType: track
+       * initial position for low and high thumb
+       */
+      const lowPosition = this.getPositionFromValue((datavalue === null || datavalue === void 0 ? void 0 : datavalue[0]) || ((_this$scale$getMinTic = this.scale.getMinTick()) === null || _this$scale$getMinTic === void 0 ? void 0 : _this$scale$getMinTic.datafield));
+      (_this$position3 = this.position) === null || _this$position3 === void 0 || _this$position3.setValue(lowPosition || 0);
+      const highPosition = this.getPositionFromValue((datavalue === null || datavalue === void 0 ? void 0 : datavalue[1]) || ((_this$scale$getMaxTic = this.scale.getMaxTick()) === null || _this$scale$getMaxTic === void 0 ? void 0 : _this$scale$getMaxTic.datafield));
+      (_this$highPosition2 = this.highPosition) === null || _this$highPosition2 === void 0 || _this$highPosition2.setValue(highPosition || 0);
+    }
+  }
+  getTooltipLabel(value, initialValue, type) {
+    var _this$scale3;
+    const maxValue = this.state.props.maxvalue;
+    const minValue = this.state.props.minvalue;
+    const minTick = this.scale.getMinTick();
+    const maxTick = this.scale.getMaxTick();
+    const props = this.props;
+    let tooltipValue = initialValue;
+    const updatedPositionInPx = Number(JSON.stringify(value));
+    const tick = (_this$scale3 = this.scale) === null || _this$scale3 === void 0 ? void 0 : _this$scale3.getTick(tooltipValue);
+    // * getting custom tooltip label
+    if (tick && props.getToolTipExpression && this.initialized) {
+      var _minTick$dataitem, _maxTick$dataitem, _tick$dataitem;
+      if (tick.datafield <= minValue && minTick !== null && minTick !== void 0 && (_minTick$dataitem = minTick.dataitem) !== null && _minTick$dataitem !== void 0 && _minTick$dataitem.dataObject) {
+        return props.getToolTipExpression(minTick.dataitem.dataObject);
+      }
+      if (tick.datafield >= maxValue && maxTick !== null && maxTick !== void 0 && (_maxTick$dataitem = maxTick.dataitem) !== null && _maxTick$dataitem !== void 0 && _maxTick$dataitem.dataObject) {
+        return props.getToolTipExpression(maxTick.dataitem.dataObject);
+      }
+      if ((_tick$dataitem = tick.dataitem) !== null && _tick$dataitem !== void 0 && _tick$dataitem.dataObject) {
+        return props.getToolTipExpression(tick.dataitem.dataObject);
+      }
+    }
+    return tick === null || tick === void 0 ? void 0 : tick.displayfield;
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    if (this.state.props.datatype === 'number') {
+      this.initNumericSlider();
+    }
+  }
+  renderToolTips(props) {
+    var _this$position4;
+    const sDataValue = this.getScaledDataValue();
+    const isRangeSlider = props.range && sDataValue.length > 1;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WmTooltip, {
+      showTooltip: props.showtooltip,
+      text: this.getTooltipLabel((_this$position4 = this.position) === null || _this$position4 === void 0 ? void 0 : _this$position4._value, sDataValue[0], 'lowThumb'),
+      tooltipStyle: [{
+        transform: [{
+          translateX: this.position
+        }]
+      }, this.styles.tooltip],
+      tooltipLabelStyle: this.styles.tooltipLabel,
+      tooltipTriangleStyle: this.styles.tooltipTriangle,
+      direction: props.tooltipdirection
+    }, /*#__PURE__*/React.createElement(GestureDetector, {
+      gesture: this.knobGesture
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.thumb, {
+        transform: [{
+          translateX: this.position
+        }]
+      }],
+      accessible: true,
+      accessibilityLabel: isRangeSlider && this.highPosition ? 'Low thumb' : 'Thumb'
+    }, /*#__PURE__*/React.createElement(BackgroundComponent, {
+      size: this.styles.thumb.backgroundSize,
+      position: this.styles.thumb.backgroundPosition,
+      image: this.styles.thumb.backgroundImage,
+      repeat: this.styles.thumb.backgroundRepeat || 'no-repeat'
+    })))), isRangeSlider && this.highPosition ? /*#__PURE__*/React.createElement(WmTooltip, {
+      showTooltip: props.showtooltip,
+      text: this.getTooltipLabel(this.highPosition._value, sDataValue[1], 'highThumb'),
+      tooltipStyle: [{
+        transform: [{
+          translateX: this.highPosition
+        }]
+      }, this.styles.tooltip],
+      tooltipLabelStyle: this.styles.tooltipLabel,
+      tooltipTriangleStyle: this.styles.tooltipTriangle,
+      direction: props.tooltipdirection
+    }, /*#__PURE__*/React.createElement(GestureDetector, {
+      gesture: this.highKnobGesture
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.thumb, {
+        transform: [{
+          translateX: this.highPosition
+        }]
+      }],
+      accessible: true,
+      accessibilityLabel: 'High thumb'
+    }, /*#__PURE__*/React.createElement(BackgroundComponent, {
+      size: this.styles.thumb.backgroundSize,
+      position: this.styles.thumb.backgroundPosition,
+      image: this.styles.thumb.backgroundImage,
+      repeat: this.styles.thumb.backgroundRepeat || 'no-repeat'
+    })))) : null);
+  }
+  renderOldMarkerStyle(props) {
+    var _this$scale4, _this$scale5, _last2, _this$scale6;
+    const sDataValue = this.getScaledDataValue();
+    const isRangeSlider = props.range && sDataValue.length > 1;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestProps('min'), {
+      style: [this.styles.text, this.styles.minimumValue]
+    }), (_this$scale4 = this.scale) === null || _this$scale4 === void 0 || (_this$scale4 = _this$scale4.ticks[0]) === null || _this$scale4 === void 0 ? void 0 : _this$scale4.displayfield), isRangeSlider ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestProps('value'), {
+      style: [this.styles.text, this.styles.value]
+    }), (_this$scale5 = this.scale) === null || _this$scale5 === void 0 || (_this$scale5 = _this$scale5.ticks.find(t => t.datafield === props.datavalue)) === null || _this$scale5 === void 0 ? void 0 : _this$scale5.displayfield), /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestProps('max'), {
+      style: [this.styles.text, this.styles.maximumValue]
+    }), (_last2 = last((_this$scale6 = this.scale) === null || _this$scale6 === void 0 ? void 0 : _this$scale6.ticks)) === null || _last2 === void 0 ? void 0 : _last2.displayfield));
+  }
+  renderMarkers(props) {
+    var _this$state$track2;
+    const markerlabeltext = props.markerlabeltext;
+    const width = ((_this$state$track2 = this.state.track) === null || _this$state$track2 === void 0 ? void 0 : _this$state$track2.width) || 0;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row'
+      }
+    }, /*#__PURE__*/React.createElement(View, null, width ? this.scale.ticks.map((t, i) => {
+      const markWidth = this.getMarkerWidthFromStyles();
+      const stepwiseLeft = this.getPositionFromValue(t.markValue);
+      const labelText = this.getLabel(markerlabeltext, t.displayfield, i);
+      const marketLabelPosition = this.getLabelPosition(markerlabeltext, i);
+      return /*#__PURE__*/React.createElement(View, {
+        key: i,
+        style: [this.styles.markerWrapper, {
+          left: stepwiseLeft,
+          bottom: markWidth / 2,
+          alignItems: 'center'
+        }]
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: [this.styles.markerLabel, marketLabelPosition === 'down' ? {
+          bottom: (markWidth / 2 + 10 + markWidth) * -1
+        } : {
+          bottom: markWidth / 2 + 10
+        }, this.styles.markerLabelStyle, i === 0 ? this.styles.minimumValue : null, i === this.scale.ticks.length - 1 ? this.styles.maximumValue : null]
+      }, labelText), /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.mark, {
+          width: markWidth,
+          height: markWidth,
+          borderRadius: markWidth
+        }, this.styles.markerStyle]
+      }));
+    }) : null));
+  }
+  renderTracks(props) {
+    var _this$state$track3;
+    const width = ((_this$state$track3 = this.state.track) === null || _this$state$track3 === void 0 ? void 0 : _this$state$track3.width) || 0;
+    const sDataValue = this.getScaledDataValue();
+    const isRangeSlider = props.range && sDataValue.length > 1;
+    return /*#__PURE__*/React.createElement(GestureDetector, {
+      gesture: this.trackGesture
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
+      activeOpacity: 1,
+      style: [this.styles.track, this.styles.trackStyle],
+      onLayout: this.onLayoutChange
+    }, this.getTestProps(), getAccessibilityProps(AccessibilityWidgetType.SLIDER, props)), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [isRangeSlider && this.highPosition ? this.styles.maximumTrack : this.styles.minimumTrack, {
+        width: width,
+        transform: [{
+          translateX: this.position.interpolate({
+            inputRange: [0, width],
+            outputRange: [-width, 0]
+          })
+        }]
+      }, this.styles.minimumTrackStyle]
+    }), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [isRangeSlider && this.highPosition ? this.styles.minimumTrack : this.styles.maximumTrack, {
+        width: width,
+        transform: [{
+          translateX: this.position
+        }]
+      }, this.styles.activeTrackStyle]
+    }), isRangeSlider && this.highPosition ? /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.maximumTrack, {
+        width: width,
+        transform: [{
+          translateX: this.highPosition
+        }]
+      }, this.styles.maximumTrackStyle]
+    }) : null));
+  }
+  renderWidget(props) {
+    const sDataValue = this.getScaledDataValue();
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root,
+      onLayout: event => this.handleLayout(event)
+    }, this._background, !props.showmarkers && !props.showtooltip ? this.renderOldMarkerStyle(props) : null, this.renderTracks(props), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row'
+      }
+    }, props.showmarkers ? this.renderMarkers(props) : null, this.renderToolTips(props)));
+  }
+}
+//# sourceMappingURL=slider.component.js.map