@nghinv/react-native-switch/lib/commonjs/index.js

React Native switch Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));

var _reactNativeGestureHandler = require("react-native-gesture-handler");

var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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); }

Switch.defaultProps = {
  size: 27,
  thumbColor: 'white',
  value: false,
  disabled: false
};
const SpringConfigDefault = {
  mass: 1,
  damping: 15,
  stiffness: 120,
  overshootClamping: false,
  restSpeedThreshold: 0.001,
  restDisplacementThreshold: 0.001
};
const DefaultTrackColor = {
  true: '#31D158',
  false: 'rgba(120, 120, 120, 0.3)'
};

function Switch(props) {
  var _props$progress;

  const {
    value,
    thumbColor,
    disabled,
    onChange,
    style,
    ...rest
  } = props;
  const size = props.size;
  const trackColor = { ...DefaultTrackColor,
    ...props.trackColor
  };
  const trackSize = size + 4;
  const trackWidth = size * 1.9;
  const progress = (_props$progress = props.progress) !== null && _props$progress !== void 0 ? _props$progress : (0, _reactNativeReanimated.useSharedValue)(value ? 1 : 0);
  const thumbWidth = (0, _reactNativeReanimated.useSharedValue)(size);
  const thumbTransX = (0, _reactNativeReanimated.useSharedValue)(0);
  (0, _react.useEffect)(() => {
    progress.value = (0, _reactNativeReanimated.withSpring)(value ? 1 : 0, SpringConfigDefault);
  }, [value]);
  const onChangeValue = (0, _react.useCallback)(() => {
    onChange && onChange(!value);
  }, [value]);
  const onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
    onStart: () => {
      const newSize = size * 1.2;
      thumbWidth.value = (0, _reactNativeReanimated.withTiming)(newSize);

      if (progress.value > 0.5) {
        thumbTransX.value = (0, _reactNativeReanimated.withTiming)(size - newSize);
      }
    },
    onFinish: () => {
      thumbTransX.value = 0;
      thumbWidth.value = (0, _reactNativeReanimated.withTiming)(size);
      const newValue = progress.value > 0.5 ? false : true;
      progress.value = (0, _reactNativeReanimated.withSpring)(newValue ? 0 : 1, SpringConfigDefault);
      (0, _reactNativeReanimated.runOnJS)(onChangeValue)();
    }
  });
  const trackStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    return {
      backgroundColor: (0, _reactNativeReanimated.interpolateColor)(progress.value, [0, 1], [trackColor.false, trackColor.true])
    };
  });
  const thumbStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    return {
      width: thumbWidth.value,
      transform: [{
        translateX: (0, _reactNativeReanimated.interpolate)(progress.value, [0, 1], [0, trackWidth - size - 4], _reactNativeReanimated.Extrapolate.CLAMP)
      }, {
        translateX: thumbTransX.value
      }]
    };
  });
  return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
    enabled: !disabled && !!onChange,
    onGestureEvent: onGestureEvent
  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({}, rest, {
    style: [{
      width: trackWidth,
      height: trackSize,
      borderRadius: trackSize / 2,
      opacity: disabled ? 0.5 : 1,
      justifyContent: 'center'
    }, trackStyle, style]
  }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
    pointerEvents: "box-none",
    style: [styles.thumb, {
      height: size,
      borderRadius: size / 2,
      backgroundColor: thumbColor
    }, thumbStyle]
  })));
}

const styles = _reactNative.StyleSheet.create({
  thumb: {
    position: 'absolute',
    left: 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  }
});

var _default = /*#__PURE__*/_react.default.memo(Switch, _reactFastCompare.default);

exports.default = _default;
//# sourceMappingURL=index.js.map