react95-native/dist/module/components/Slider/Slider.js

Refreshed Windows 95 style UI components for your React Native app

function _extends() { _extends = Object.assign || 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); }

import React, { useRef, useState, useEffect } from 'react';
import { StyleSheet, View, PanResponder, ImageBackground } from 'react-native';
import useAsyncReference from '../../hooks/useAsyncReference';
import { withTheme } from '../../core/theming';
import { buildBorderStyles } from '../../styles/styles';
import { Border } from '../../styles/styleElements';
import { clamp, roundValueToStep, findClosest } from '../../utils';
import { Panel, Text, Label } from '../..';

function percentToValue(percent, min, max) {
  return (max - min) * percent + min;
}

const Slider = ({
  disabled = false,
  marks: marksProp,
  max = 100,
  min = 0,
  onChange,
  onChangeCommitted,
  step = 1,
  style,
  theme,
  value = 0,
  ...rest
}) => {
  const [isUsed, setIsUsed] = useState(false);
  let marks; // if marks is set to true, we only show ticks at specified steps

  if (marksProp === true && step !== null) {
    marks = [...Array(Math.round((max - min) / step) + 1)].map((_, index) => ({
      value: min + step * index
    })); // otherwise we display ticks and optional labels specified by the developer
  } else if (Array.isArray(marksProp)) {
    marks = marksProp; // otherwise don't display any marks or labels
  } else {
    marks = [];
  }

  const [sliderSize, setSliderSize] = useAsyncReference(0);

  const handleLayout = e => {
    setSliderSize(e.nativeEvent.layout.width);
  };

  const getNewValue = e => {
    const percent = clamp(e.nativeEvent.locationX / sliderSize.current, 0, 1);
    let newValue = percentToValue(percent, min, max);

    if (step) {
      newValue = roundValueToStep(newValue, step, min);
    } else {
      const marksValues = marks.map(mark => mark.value);
      const closestIndex = findClosest(marksValues, newValue);
      newValue = marksValues[closestIndex];
    }

    newValue = clamp(newValue, min, max);
    return newValue;
  }; // TODO: is this a good approach?


  const valueRef = useRef(value);
  useEffect(() => {
    valueRef.current = value;
  }, [value]);

  const handleChange = newValue => {
    if (valueRef.current !== newValue) {
      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
    }
  };

  const panResponder = useRef(PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onStartShouldSetPanResponderCapture: () => true,
    onMoveShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponderCapture: () => true,
    onPanResponderStart: e => {
      setIsUsed(true);
      const newValue = getNewValue(e);
      handleChange(newValue);
    },
    onPanResponderMove: e => {
      const newValue = getNewValue(e);
      handleChange(newValue);
    },
    onPanResponderEnd: e => {
      setIsUsed(false);
      const newValue = getNewValue(e);
      onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(newValue);
    },
    onPanResponderTerminationRequest: () => true
  })).current;
  const borderStyles = buildBorderStyles(theme);
  return /*#__PURE__*/React.createElement(View, _extends({
    style: [styles.wrapper, style]
  }, rest, {
    accessibilityRole: "adjustable",
    accessibilityState: {
      disabled
    },
    accessibilityValue: {
      min,
      max,
      now: value
    }
  }), /*#__PURE__*/React.createElement(View, {
    style: [styles.inner, isUsed ? borderStyles.focusOutline : {
      borderWidth: 2,
      borderColor: 'transparent'
    }]
  }, /*#__PURE__*/React.createElement(View, _extends({
    pointerEvents: disabled ? 'none' : 'auto',
    style: [styles.track],
    onLayout: handleLayout
  }, panResponder.panHandlers), /*#__PURE__*/React.createElement(View, {
    style: [styles.trackInner]
  }, /*#__PURE__*/React.createElement(Border, {
    theme: theme,
    variant: "cutout"
  }), /*#__PURE__*/React.createElement(Panel, {
    theme: theme,
    pointerEvents: "none",
    style: [styles.thumb, {
      left: "".concat(100 * (value - min) / (max - min), "%")
    }]
  }, disabled && /*#__PURE__*/React.createElement(ImageBackground, {
    style: {
      flex: 1
    },
    imageStyle: {
      resizeMode: 'repeat'
    },
    source: {
      // TODO: create util function for generating checkered background
      uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIUlEQVQoU2P8////fwYkwMjIyIjCp4MCZPtAbAwraa8AAEGrH/nfAIhgAAAAAElFTkSuQmCC'
    }
  }), isUsed && /*#__PURE__*/React.createElement(View, {
    style: styles.tooltipWrapper
  }, /*#__PURE__*/React.createElement(Label, {
    elevation: 4,
    style: styles.tooltip
  }, value))))), marks && /*#__PURE__*/React.createElement(View, {
    style: styles.marksWrapper
  }, marks.map((m, index) => /*#__PURE__*/React.createElement(View, {
    style: [styles.mark, {
      position: index === 0 ? 'relative' : 'absolute',
      left: "".concat((m.value - min) / (max - min) * 100, "%")
    }],
    key: m.value / (max - min) * 100
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.tick, {
      backgroundColor: disabled ? theme.materialTextDisabled : theme.materialText,
      // TODO: util function to create disabled shadows
      shadowColor: disabled ? theme.materialTextDisabledShadow : 'transparent',
      shadowOffset: {
        width: 1,
        height: 1
      },
      shadowOpacity: 1,
      shadowRadius: 0
    }]
  }), m.label ? /*#__PURE__*/React.createElement(Text, {
    style: styles.markText,
    disabled: disabled
  }, m.label) : null)))));
};

const thumbWidth = 18;
const thumbHeight = 32;
const tickSize = 6;
const styles = StyleSheet.create({
  wrapper: {
    paddingVertical: 4
  },
  inner: {
    position: 'relative',
    paddingHorizontal: 16
  },
  track: {
    paddingVertical: thumbHeight / 2
  },
  trackInner: {
    height: 8,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  thumb: {
    position: 'absolute',
    width: thumbWidth,
    height: thumbHeight,
    transform: [{
      translateX: -thumbWidth / 2
    }]
  },
  tooltipWrapper: {
    position: 'absolute',
    top: -44,
    left: thumbWidth / 2,
    alignItems: 'center'
  },
  tooltip: {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center'
  },
  marksWrapper: {
    position: 'relative'
  },
  mark: {
    transform: [{
      translateX: -1
    }]
  },
  tick: {
    height: tickSize,
    marginBottom: 2,
    width: 2
  },
  markText: {
    fontSize: 14,
    // TODO: is there a way to translate by 0.5 of a character width?
    // tick should centered above
    transform: [{
      translateX: -2
    }]
  }
});
export default withTheme(Slider);
//# sourceMappingURL=Slider.js.map