@wavemaker-ai/app-rn-runtime 1.0.0-rc.647469

package/components/input/select/select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","defineStyles","Platform","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","padding","borderWidth","borderStyle","borderColor","inputBorderColor","backgroundColor","inputBackgroundColor","borderRadius","minWidth","alignItems","invalid","borderBottomColor","inputInvalidBorderColor","text","fontSize","fontFamily","baseFont","flex","color","inputTextColor","checkIcon","primaryColor","disabledText","inputDisabledBgColor","modal","height","modalContent","position","width","selectItem","paddingHorizontal","paddingVertical","borderBottomWidth","borderBottomStyle","selecttemBorderColor","lastSelectItem","selectItemText","selectItemTextColor","selectedItem","selectedItemText","placeholderText","inputPlaceholderColor","dropDownContent","arrowButton","paddingTop","paddingBottom","paddingLeft","paddingRight","minHeight","alignSelf","justifyContent","skeleton","marginRight","dropdown","popoverBackgroundColor","maxHeight","arrowButtonSkeleton","textSkeleton","maxWidth","transparent","boxShadow","OS","textAlign","rootWrapper","searchInputWrapper","undefined","display"],"sources":["select.styles.ts"],"sourcesContent":["import BASE_THEME, {AllStyle} from '@wavemaker-ai/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker-ai/app-rn-runtime/core/base.component';\nimport { WmButtonStyles } from '@wavemaker-ai/app-rn-runtime/components/basic/button/button.styles';\nimport { Platform } from 'react-native';\nimport { WmIconStyles } from '@wavemaker-ai/app-rn-runtime/components/basic/icon/icon.styles';\nimport { WmSkeletonStyles } from '@wavemaker-ai/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmSelectStyles = BaseStyles & {\n  arrowButton: WmButtonStyles;\n  modal: AllStyle;\n  modalContent: AllStyle;\n  checkIcon: WmIconStyles;\n  selectItem: AllStyle;\n  lastSelectItem: AllStyle,\n  selectItemText: AllStyle;\n  selectedItem: AllStyle;\n  selectedItemText: AllStyle;\n  dropDownContent: AllStyle;\n  disabledText: AllStyle;\n  placeholderText: AllStyle;\n  invalid: AllStyle;\n  skeleton: WmSkeletonStyles;\n  arrowButtonSkeleton: WmSkeletonStyles;\n  textSkeleton: WmSkeletonStyles;\n};\n\nexport const DEFAULT_CLASS = 'app-select';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmSelectStyles = defineStyles({\n    root: {\n      flexDirection: 'row',\n      padding: 12,\n      borderWidth: 1,\n      borderStyle: 'solid',\n      borderColor: themeVariables.inputBorderColor,\n      backgroundColor: themeVariables.inputBackgroundColor,\n      borderRadius: 6,\n      minWidth: 160,\n      alignItems: 'center',\n    },\n    invalid: {\n      borderBottomColor: themeVariables.inputInvalidBorderColor\n    },\n    text: {\n      fontSize: 16,\n      fontFamily: themeVariables.baseFont,\n      flex: 1,\n      color: themeVariables.inputTextColor\n    },\n    checkIcon: {\n      text: {\n        fontSize: 24,\n        color: themeVariables.primaryColor\n      }\n    } as WmIconStyles,\n    disabledText: {\n      backgroundColor : themeVariables.inputDisabledBgColor\n    },\n    modal: {\n      backgroundColor: 'rgba(0, 0, 0, 0.3)',\n      height: '100%'\n    },\n    modalContent: {\n      backgroundColor: themeVariables.inputBackgroundColor,\n      borderRadius: 6,\n      position: 'absolute',\n      borderWidth: 1,\n      borderStyle: 'solid',\n      borderColor: themeVariables.inputBorderColor,\n      width: '90%'\n    },\n    selectItem: {\n      width: '100%',\n      paddingHorizontal: 16,\n      paddingVertical: 8,\n      borderBottomWidth: 1,\n      borderBottomStyle: 'solid',\n      borderBottomColor: themeVariables.selecttemBorderColor,\n      flexDirection: 'row',\n      alignItems: 'center'\n    },\n    lastSelectItem: {\n      borderBottomWidth: 0\n    },\n    selectItemText: {\n      fontSize: 16,\n      fontFamily: themeVariables.baseFont,\n      color: themeVariables.selectItemTextColor,\n      flex: 1\n    },\n    selectedItem: {},\n    selectedItemText:{},\n    placeholderText: {\n      color: themeVariables.inputPlaceholderColor\n    },\n    dropDownContent: {},\n    arrowButton: {\n      root: {\n        borderRadius: 0,\n        paddingTop: 6,\n        paddingBottom: 6,\n        paddingLeft: 6,\n        paddingRight: 0,\n        minHeight: 0,\n        alignItems: 'center',\n        alignSelf: 'center',\n        justifyContent: 'center',\n        backgroundColor: 'transparent'\n      }\n    } as WmButtonStyles,\n    skeleton: {\n      root:{\n        minWidth: 0,\n        width:120,\n        height: 16,\n        borderRadius: 4,\n        marginRight:8,\n        padding:0\n      }\n    } as any as WmSkeletonStyles,\n    dropdown: {\n      backgroundColor: themeVariables.popoverBackgroundColor,\n      maxHeight: 240,\n      borderRadius:6\n  },\n    arrowButtonSkeleton: {\n      root: {\n        width: 24,\n        height: 24,\n        borderRadius: 12\n      }\n    } as any as WmSkeletonStyles,\n    textSkeleton: {\n      root: {\n        width: 100,\n        height: 16,\n        borderRadius: 8\n      }\n    } as any as WmSkeletonStyles\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n\n  // Add horizontal form input styles for horizontal form field layouts - positioned early to avoid overriding more specific styles\n  addStyle('form-select-input-horizontal', '', {\n    root: {\n      flex: 1,\n      minWidth: 0,\n      maxWidth: '100%'\n    },\n    text: {}\n  } as BaseStyles);\n\n  addStyle(DEFAULT_CLASS + '-disabled', '', {\n      root : {\n        backgroundColor: themeVariables.inputDisabledBgColor\n      }\n  });\n  addStyle('select-dropdown', '', {\n    modal: {\n        backgroundColor: 'transparent',\n    },\n    dropdown: {\n        backgroundColor: themeVariables.transparent\n    },\n    modalContent: {\n        borderRadius: 6,\n        boxShadow: `4px 4px 8px rgba(0, 0, 0, 0.27)`\n    }\n});\n  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS==\"web\"?{\n    text:{\n      textAlign:'right',\n    }\n    ,selectItemText : {\n      textAlign : 'right'\n    }\n  }:{\n    text:{\n      textAlign:'left',\n    },\n    selectItemText : {\n      textAlign : 'left'\n    }\n  });\n\n  addStyle('form-widget-selectform-select-input-horizontal', '', {\n    rootWrapper: {\n      width: '70%'\n    },\n    root: {\n      width: '100%'\n    },\n    text: {},\n    searchInputWrapper: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flex: undefined,\n      display: 'flex'\n    },\n  } as BaseStyles);\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,538 @@
+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-ai/app-rn-runtime/styles/background.component';
+import WmTooltip from '@wavemaker-ai/app-rn-runtime/components/basic/tooltip/tooltip.component';
+import WmSliderProps from './slider.props';
+import { DEFAULT_CLASS } from './slider.styles';
+import { isDefined, isWebPreviewMode } from '@wavemaker-ai/app-rn-runtime/core/utils';
+import { BaseDatasetComponent, BaseDatasetState } from '../basedataset/basedataset.component';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker-ai/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", 5);
+    _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;
+        const parsedValue = isString(d) ? parseInt(d) : d;
+        return ((_this$scale2 = this.scale) === null || _this$scale2 === void 0 || (_this$scale2 = _this$scale2.ticks.find(t => t.datafield === parsedValue)) === null || _this$scale2 === void 0 ? void 0 : _this$scale2.markValue) || parsedValue;
+      });
+    }
+    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);
+      if (i % 10 == 0) {
+        return /*#__PURE__*/React.createElement(View, {
+          key: i,
+          style: [this.styles.markerWrapper, {
+            left: stepwiseLeft,
+            bottom: 16 + markWidth,
+            alignItems: 'center'
+          }]
+        }, /*#__PURE__*/React.createElement(View, {
+          style: [this.styles.mark, {
+            width: markWidth,
+            height: markWidth,
+            borderRadius: markWidth
+          }, this.styles.markerStyle]
+        }));
+      }
+      return null;
+    }) : 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