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

app-rn-runtime/components/input/select/select.styles.js

@@ -1,129 +0,0 @@
-import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
-import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
-import { Platform } from 'react-native';
-export const DEFAULT_CLASS = 'app-select';
-BASE_THEME.registerStyle((themeVariables, addStyle) => {
-  const defaultStyles = defineStyles({
-    root: {
-      flexDirection: 'row',
-      padding: 12,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: themeVariables.inputBorderColor,
-      backgroundColor: themeVariables.inputBackgroundColor,
-      borderRadius: 6,
-      minWidth: 160,
-      alignItems: 'center'
-    },
-    invalid: {
-      borderBottomColor: themeVariables.inputInvalidBorderColor
-    },
-    text: {
-      fontSize: 16,
-      fontFamily: themeVariables.baseFont,
-      flex: 1,
-      color: themeVariables.inputTextColor
-    },
-    checkIcon: {
-      text: {
-        fontSize: 24,
-        color: themeVariables.primaryColor
-      }
-    },
-    disabledText: {
-      backgroundColor: themeVariables.inputDisabledBgColor
-    },
-    modal: {
-      backgroundColor: 'rgba(0, 0, 0, 0.3)',
-      height: '100%'
-    },
-    modalContent: {
-      backgroundColor: themeVariables.inputBackgroundColor,
-      borderRadius: 6,
-      position: 'absolute',
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: themeVariables.inputBorderColor,
-      width: '90%'
-    },
-    selectItem: {
-      width: '100%',
-      paddingHorizontal: 16,
-      paddingVertical: 8,
-      borderBottomWidth: 1,
-      borderBottomStyle: 'solid',
-      borderBottomColor: themeVariables.selecttemBorderColor,
-      flexDirection: 'row',
-      alignItems: 'center'
-    },
-    lastSelectItem: {
-      borderBottomWidth: 0
-    },
-    selectItemText: {
-      fontSize: 16,
-      fontFamily: themeVariables.baseFont,
-      color: themeVariables.selectItemTextColor,
-      flex: 1
-    },
-    selectedItem: {},
-    selectedItemText: {},
-    placeholderText: {
-      color: themeVariables.inputPlaceholderColor
-    },
-    dropDownContent: {},
-    arrowButton: {
-      root: {
-        borderRadius: 0,
-        paddingTop: 6,
-        paddingBottom: 6,
-        paddingLeft: 6,
-        paddingRight: 0,
-        minHeight: 0,
-        alignItems: 'center',
-        alignSelf: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'transparent'
-      }
-    },
-    skeleton: {
-      root: {
-        minWidth: 0,
-        width: 120,
-        height: 16,
-        borderRadius: 4,
-        marginRight: 8,
-        padding: 0
-      }
-    },
-    arrowButtonSkeleton: {
-      root: {
-        width: 24,
-        height: 24,
-        borderRadius: 12
-      }
-    },
-    textSkeleton: {
-      root: {
-        width: 100,
-        height: 16,
-        borderRadius: 8
-      }
-    }
-  });
-  addStyle(DEFAULT_CLASS, '', defaultStyles);
-  addStyle(DEFAULT_CLASS + '-disabled', '', {
-    root: {
-      backgroundColor: themeVariables.inputDisabledBgColor
-    }
-  });
-  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS == "web" ? {
-    text: {
-      textAlign: 'right'
-    }
-  } : {
-    text: {
-      textAlign: 'left'
-    }
-  });
-});
-//# sourceMappingURL=select.styles.js.map

app-rn-runtime/components/input/select/select.styles.js.map

@@ -1 +0,0 @@
-{"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","arrowButtonSkeleton","textSkeleton","OS","textAlign"],"sources":["select.styles.ts"],"sourcesContent":["import BASE_THEME, {AllStyle} from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmButtonStyles } from '@wavemaker/app-rn-runtime/components/basic/button/button.styles';\nimport { Platform } from 'react-native';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\nimport { WmSkeletonStyles } from '@wavemaker/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    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  addStyle(DEFAULT_CLASS + '-disabled', '', {\n      root : {\n        backgroundColor: themeVariables.inputDisabledBgColor\n      }\n  });\n  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS==\"web\"?{\n    text:{\n      textAlign:'right',\n    }\n  }:{\n    text:{\n      textAlign:'left',\n    }\n  });\n});\n"],"mappings":"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","ignoreList":[]}

app-rn-runtime/components/input/slider/slider.component.js

@@ -1,444 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-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); }
-import React from 'react';
-import { View, Text, TouchableOpacity, Animated, Dimensions } from 'react-native';
-import { debounce, isNumber, isNil, isArray, isString, last } 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) {
-    var _this$ticks$, _last;
-    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 ? (max - min) / (thisMax - thisMin) : 1;
-    const ticks = [];
-    this.ticks.forEach((v, i) => {
-      const markValue = Math.round(min + (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, "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');
-      });
-    });
-    this.initScale();
-    this.configureGesture(this.trackGesture, 'track');
-    this.configureGesture(this.knobGesture, 'lowThumb');
-    this.configureGesture(this.highKnobGesture, 'highThumb');
-  }
-  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 => {
-      const value = this.getValueFromGesture(e.absoluteX);
-      this.computePosition(value, gestureType);
-      this.forceUpdate();
-    }).onEnd(e => {
-      if (this.state.track) {
-        const value = this.getValueFromGesture(e.absoluteX);
-        this.onSliderChange(value, gestureType);
-        this.forceUpdate();
-      }
-    });
-  }
-  getScaledDataValue() {
-    let dataValue = this.state.props.datavalue || this.getDataValue();
-    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 = 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 (isNumber($new) && isNumber($old)) {
-          this.invokeEventCallback('onChange', [null, this, $new, $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;
-    this.uiScale = this.scale.transform(0, width);
-  }
-  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 props = this.props;
-    let tooltipValue = initialValue;
-    const updatedPositionInPx = Number(JSON.stringify(value));
-    if (updatedPositionInPx) {
-      tooltipValue = this.scale.ticks[this.uiScale.getTickIndex(updatedPositionInPx)].markValue;
-    }
-    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 _tick$dataitem;
-      return props.getToolTipExpression((_tick$dataitem = tick.dataitem) === null || _tick$dataitem === void 0 ? void 0 : _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$track;
-    const width = ((_this$state$track = this.state.track) === null || _this$state$track === void 0 ? void 0 : _this$state$track.width) || 0;
-    return /*#__PURE__*/React.createElement(View, {
-      style: {
-        flexDirection: 'row'
-      }
-    }, /*#__PURE__*/React.createElement(View, null, width ? this.scale.ticks.map((t, i) => {
-      const markWidth = 10;
-      const stepwiseLeft = this.getPositionFromValue(t.markValue);
-      const labelText = t.displayfield;
-      return /*#__PURE__*/React.createElement(View, {
-        key: i,
-        style: [this.styles.markerWrapper, {
-          left: stepwiseLeft,
-          bottom: markWidth / 2
-        }]
-      }, /*#__PURE__*/React.createElement(Text, {
-        style: [this.styles.markerLabel, {
-          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$track2;
-    const width = ((_this$state$track2 = this.state.track) === null || _this$state$track2 === void 0 ? void 0 : _this$state$track2.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
-    }, 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