@tra-tech/react-native-kitra/lib/module/components/CheckBox/CheckBox.js

UI kit for React Native

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); }
import { useEffect, useState } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import Animated, { interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { applyDefaults } from '../../core/KitraProvider';
import Octicons from '../Icons/Octicons';
const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
export const CheckBox = _ref => {
  let {
    theme,
    value,
    onChange,
    onPress,
    style,
    disabled,
    iconColor = theme === null || theme === void 0 ? void 0 : theme.white,
    ...props
  } = _ref;
  const [status, setStatus] = useState(value || false);
  const animatedValue = useSharedValue(0);
  const animatedStyle = useAnimatedStyle(() => {
    const borderColorInterpolation = interpolateColor(animatedValue.value, [0, 1], [disabled ? theme === null || theme === void 0 ? void 0 : theme.disabledDark : theme === null || theme === void 0 ? void 0 : theme.disabledLight, 'transparent']);
    const backgroundColorInterpolation = interpolateColor(animatedValue.value, [0, 1], [theme === null || theme === void 0 ? void 0 : theme.disabledLightDark, disabled ? theme === null || theme === void 0 ? void 0 : theme.disabledDark : theme === null || theme === void 0 ? void 0 : theme.focused]);
    return {
      backgroundColor: backgroundColorInterpolation,
      borderColor: borderColorInterpolation
    };
  });
  const toggle = () => {
    onPress === null || onPress === void 0 ? void 0 : onPress(!status);
    setStatus(prev => !prev);
  };
  useEffect(() => {
    animatedValue.value = withTiming(Number(!!status));
    if (onChange) onChange(status);
  }, [status]);
  useEffect(() => {
    setStatus(!!value);
  }, [value]);
  return /*#__PURE__*/React.createElement(AnimatedTouchableOpacity, _extends({
    activeOpacity: 1,
    onPress: toggle,
    disabled: disabled,
    style: [styles.checkBox, animatedStyle, style]
  }, props), status && /*#__PURE__*/React.createElement(Animated.View, null, /*#__PURE__*/React.createElement(Octicons, {
    color: iconColor,
    name: "check",
    size: 12
  })));
};
export default applyDefaults(CheckBox);
const styles = StyleSheet.create({
  checkBox: {
    height: 20,
    width: 20,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 4
  }
});
//# sourceMappingURL=CheckBox.js.map