@sendbird/uikit-react-native-foundation/lib/commonjs/components/Switch/index.js

A foundational UI kit for building chat-enabled React Native apps.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Switch = ({
  value,
  onChangeValue,
  inactiveThumbColor,
  inactiveTrackColor,
  trackColor,
  thumbColor
}) => {
  const {
    select,
    palette,
    colors
  } = (0, _useUIKitTheme.default)();
  const position = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const start = _reactNative.I18nManager.isRTL ? styles.thumbOn.start : styles.thumbOff.start;
  const end = _reactNative.I18nManager.isRTL ? styles.thumbOff.start : styles.thumbOn.start;
  (0, _react.useEffect)(() => {
    const animation = _reactNative.Animated.timing(position, {
      toValue: value ? end : start,
      duration: 150,
      useNativeDriver: false
    });
    animation.start();
    return () => animation.stop();
  }, [value]);
  const createInterpolate = (offValue, onValue) => {
    return position.interpolate({
      inputRange: [styles.thumbOff.start, styles.thumbOn.start],
      outputRange: _reactNative.I18nManager.isRTL ? [onValue, offValue] : [offValue, onValue],
      extrapolate: 'clamp'
    });
  };
  const _trackColor = createInterpolate(inactiveTrackColor ?? colors.onBackground04, trackColor ?? palette.primary200);
  const _thumbColor = createInterpolate(inactiveThumbColor ?? palette.background300, thumbColor ?? select({
    light: palette.primary400,
    dark: palette.primary300
  }));
  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    onPress: () => onChangeValue(!value),
    style: [styles.container]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styles.track, {
      backgroundColor: _trackColor
    }]
  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styles.thumb, {
      backgroundColor: _thumbColor,
      transform: [{
        translateX: position
      }]
    }]
  }));
};
const OFFSET = {
  W: 20,
  H: 16
};
const styles = (0, _createStyleSheet.default)({
  container: {
    width: OFFSET.W + OFFSET.H,
    height: OFFSET.H,
    alignItems: 'center',
    justifyContent: 'center'
  },
  track: {
    width: '100%',
    height: '100%',
    borderRadius: OFFSET.H / 2,
    position: 'absolute'
  },
  thumb: {
    width: OFFSET.W,
    height: OFFSET.W,
    borderRadius: OFFSET.W / 2,
    ..._reactNative.Platform.select({
      android: {
        elevation: 2
      },
      ios: {
        shadowColor: 'black',
        shadowRadius: 1,
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.4
      }
    })
  },
  thumbOn: {
    start: OFFSET.H / 2
  },
  thumbOff: {
    start: -OFFSET.H / 2
  }
});
var _default = exports.default = Switch;
//# sourceMappingURL=index.js.map