@audira/carbon-react-native/lib/commonjs/components/checkbox-input/CheckboxInput.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CheckboxInput = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _checkmark = _interopRequireDefault(require("@carbon/icons/svg/32/checkmark.svg"));
var _subtract = _interopRequireDefault(require("@carbon/icons/svg/32/subtract.svg"));
var _index = require("../../_internal/style-sheets/index.js");
var _index2 = require("../../carbon-style-sheet/index.js");
var _index3 = require("../../contexts/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(function CheckboxInput({
  defaultValue,
  value: valueProp,
  interactiveState = 'normal',
  style,
  role = 'checkbox',
  onBlur,
  onChange,
  onFocus,
  onPress,
  ...props
}, forwardedRef) {
  const themeContext = (0, _react.useContext)(_index3.ThemeContext),
    viewRef = (0, _react.useRef)(null),
    ref = (0, _react.useRef)({
      onChangeEffect: false,
      value: typeof valueProp == 'boolean' || typeof valueProp == 'object' ? valueProp : typeof defaultValue == 'boolean' || typeof defaultValue == 'object' ? defaultValue : false
    }),
    [isFocused, setIsFocused] = (0, _react.useState)(false),
    [valueSelf, setValueSelf] = (0, _react.useState)(() => {
      if (typeof defaultValue == 'boolean' || typeof defaultValue == 'object') {
        return defaultValue;
      }
      return false;
    }),
    controlled = typeof valueProp !== 'undefined',
    value = controlled ? valueProp : valueSelf,
    indeterminate = value === null,
    blurHandler = (0, _react.useCallback)(event => {
      onBlur?.(event);
      setIsFocused(false);
    }, [onBlur]),
    focusHandler = (0, _react.useCallback)(event => {
      onFocus?.(event);
      setIsFocused(true);
    }, [onFocus]),
    pressHandler = (0, _react.useCallback)(event => {
      onPress?.(event);
      if (interactiveState !== 'read_only') {
        if (!controlled) {
          ref.current.onChangeEffect = true;
          setValueSelf(self => self === null ? true : !self);
        } else {
          onChange?.(ref.current.value === null ? true : !ref.current.value);
        }
      }
    }, [controlled, interactiveState, onPress, onChange]),
    iconColor = mapIconColor[interactiveState][themeContext.colorScheme];
  (0, _react.useEffect)(() => {
    if (ref.current.onChangeEffect) {
      ref.current.onChangeEffect = false;
      ref.current.value = value;
      onChange?.(value);
    }
  }, [value, onChange]);
  (0, _react.useImperativeHandle)(forwardedRef, () => {
    return Object.assign(viewRef.current, {
      get value() {
        return value;
      },
      setValue(value_) {
        if (!controlled && interactiveState !== 'read_only') {
          ref.current.onChangeEffect = true;
          setValueSelf(self => {
            if (typeof value_ === 'function') {
              ref.current.value = value_(self);
            } else {
              ref.current.value = value_;
            }
            return ref.current.value;
          });
        }
      }
    });
  }, [value, controlled, interactiveState]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
    ...props,
    disabled: interactiveState === 'disabled',
    role: role,
    onBlur: blurHandler,
    onFocus: focusHandler,
    onPress: pressHandler,
    style: [_index.FlexStyleSheet.items_center, _index.FlexStyleSheet.justify_center, _index.CommonStyleSheet.relative, baseStyle.checkbox, getInteractiveStateStyle(interactiveState, value), style],
    ref: viewRef,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [_index.CommonStyleSheet.absolute, _index.CommonStyleSheet.overflow_hidden, baseStyle.focusBox, isFocused ? carbonStyle.focusBox : null]
    }), value && indeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtract.default, {
      width: iconSize,
      height: iconSize,
      fill: iconColor
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmark.default, {
      width: iconSize,
      height: iconSize,
      fill: iconColor,
      style: !value ? baseStyle.checkmarkHidden : null
    })]
  });
});
const size = 18,
  iconSize = size - 4,
  baseStyle = _reactNative.StyleSheet.create({
    checkbox: {
      width: size,
      height: size,
      borderWidth: 1
    },
    focusBox: {
      width: size + 6,
      height: size + 6,
      borderRadius: 4,
      borderWidth: 2,
      borderColor: 'transparent'
    },
    checkmarkHidden: {
      opacity: 0
    }
  }),
  interactiveStyle = _index2.CarbonStyleSheet.create({
    normal_false: {
      borderColor: _index2.CarbonStyleSheet.color.icon_primary
    },
    normal_true: {
      backgroundColor: _index2.CarbonStyleSheet.color.icon_primary,
      borderColor: _index2.CarbonStyleSheet.color.icon_primary
    },
    disabled_false: {
      borderColor: _index2.CarbonStyleSheet.color.icon_disabled
    },
    disabled_true: {
      backgroundColor: _index2.CarbonStyleSheet.color.icon_disabled,
      borderColor: _index2.CarbonStyleSheet.color.icon_disabled
    },
    error_false: {
      borderColor: _index2.CarbonStyleSheet.color.support_error
    },
    error_true: {
      backgroundColor: _index2.CarbonStyleSheet.color.icon_primary,
      borderColor: _index2.CarbonStyleSheet.color.support_error
    },
    read_only_false: {
      borderColor: _index2.CarbonStyleSheet.color.icon_disabled
    },
    read_only_true: {
      borderColor: _index2.CarbonStyleSheet.color.icon_disabled
    },
    warning_false: {
      borderColor: _index2.CarbonStyleSheet.color.icon_primary
    },
    warning_true: {
      backgroundColor: _index2.CarbonStyleSheet.color.icon_primary,
      borderColor: _index2.CarbonStyleSheet.color.icon_primary
    }
  }),
  carbonStyle = _index2.CarbonStyleSheet.create({
    focusBox: {
      borderColor: _index2.CarbonStyleSheet.color.focus
    }
  }),
  mapIconColor = {
    normal: {
      gray_10: _carbonReactNativeElements.Color.Token.gray_10.icon_inverse,
      gray_100: _carbonReactNativeElements.Color.Token.gray_100.icon_inverse
    },
    disabled: {
      gray_10: _carbonReactNativeElements.Color.Token.gray_10.icon_inverse,
      gray_100: _carbonReactNativeElements.Color.Token.gray_100.icon_inverse
    },
    error: {
      gray_10: _carbonReactNativeElements.Color.Token.gray_10.icon_inverse,
      gray_100: _carbonReactNativeElements.Color.Token.gray_100.icon_inverse
    },
    read_only: {
      gray_10: _carbonReactNativeElements.Color.Token.gray_10.icon_primary,
      gray_100: _carbonReactNativeElements.Color.Token.gray_100.icon_primary
    },
    warning: {
      gray_10: _carbonReactNativeElements.Color.Token.gray_10.icon_inverse,
      gray_100: _carbonReactNativeElements.Color.Token.gray_100.icon_inverse
    }
  };
function getInteractiveStateStyle(interactiveState, value) {
  return interactiveStyle[`${interactiveState}_${!!value}`];
}
//# sourceMappingURL=CheckboxInput.js.map