@audira/carbon-react-native/lib/commonjs/components/toggle/base/Base.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Base = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _index = require("../../../_internal/contexts/index.js");
var _index2 = require("../../../_internal/style-sheets/index.js");
var _index3 = require("../../../contexts/index.js");
var _index4 = require("../../form-label/index.js");
var _index5 = require("../../switch/index.js");
var _index6 = require("../../text/index.js");
var _jsxRuntime = require("react/jsx-runtime");
const Base = exports.Base = /*#__PURE__*/(0, _react.forwardRef)(function Base({
  state = 'normal',
  defaultValue,
  value,
  label,
  actionText,
  onChange,
  formLabelProps,
  actionTextProps,
  pressableProps,
  switchProps,
  style,
  dir,
  ...viewProps
}, forwardedRef) {
  const viewRef = (0, _react.useRef)(null),
    switchRef = (0, _react.useRef)(null),
    themeContext = (0, _react.useContext)(_index3.ThemeContext),
    globalConfigContext = (0, _react.useContext)(_index.GlobalConfigContext),
    pressHandler = (0, _react.useCallback)(event => {
      pressableProps?.onPress?.(event);
      switchRef.current?.setValue(currentValue => !currentValue);
    }, [pressableProps]);
  (0, _react.useImperativeHandle)(forwardedRef, () => {
    return Object.assign(viewRef.current ?? {}, {
      get value() {
        return !!switchRef.current?.value;
      },
      setValue(val) {
        switchRef.current?.setValue(val);
      }
    });
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    ...viewProps,
    dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
    style: [_index2.FlexStyleSheet.flex_row, _index2.FlexStyleSheet.flex_wrap, _index2.FlexStyleSheet.items_center, globalConfigContext.rtl ? _index2.CommonStyleSheet.rtl : undefined, style],
    ref: viewRef,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
      ...pressableProps,
      role: "switch",
      disabled: state !== 'normal',
      "aria-checked": value,
      "aria-label": pressableProps?.['aria-label'] || label,
      onPress: pressHandler,
      style: [_index2.CommonStyleSheet.absolute, _index2.CommonStyleSheet.w_full, _index2.CommonStyleSheet.h_full, baseStyle.pressable, pressableProps?.style]
    }), !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.FormLabel, {
      ...formLabelProps,
      label: label,
      textProps: {
        ...formLabelProps?.textProps,
        style: [mapFormLabelTextStyle[themeContext.colorScheme][state], formLabelProps?.textProps?.style]
      },
      style: [_index2.CommonStyleSheet.w_full, baseStyle.label, formLabelProps?.style]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Switch, {
      ...switchProps,
      "aria-label": switchProps?.['aria-label'] || label,
      state: state,
      disabled: state !== 'normal',
      role: "none",
      defaultValue: defaultValue,
      value: value,
      onChange: onChange,
      onPress: switchProps?.onPress ?? pressableProps?.onPress,
      dir: switchProps?.dir ?? globalConfigContext.rtl ? 'ltr' : undefined // Fix
      ,
      style: [baseStyle.switch, globalConfigContext.rtl ? baseStyle.ltr : undefined,
      // Fix
      switchProps?.style],
      ref: switchRef
    }), !!actionText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
      ...actionTextProps,
      type: actionTextProps?.type || 'body_compact_01',
      style: [baseStyle.actionText, mapActionTextStyle[themeContext.colorScheme][state], actionTextProps?.style],
      children: actionText
    })]
  });
});
const baseStyle = _reactNative.StyleSheet.create({
    pressable: {
      zIndex: 1
    },
    switch: {
      zIndex: 2
    },
    label: {
      marginBottom: _carbonReactNativeElements.Spacing.spacing_05
    },
    actionText: {
      marginStart: _carbonReactNativeElements.Spacing.spacing_03 // same for both size
    },
    /**
     * Fix
     */
    ltr: {
      direction: 'ltr'
    }
  }),
  coloringStyle = {
    gray_10: {
      formLabel_normal: {
        color: _carbonReactNativeElements.Color.Token.gray_10.text_primary
      },
      formLabel_disabled: {
        color: _carbonReactNativeElements.Color.Token.gray_10.text_disabled
      },
      formLabel_read_only: {
        color: _carbonReactNativeElements.Color.Token.gray_10.text_primary
      },
      actionText_normal: {
        color: _carbonReactNativeElements.Color.Token.gray_10.text_primary
      },
      actionText_disabled: {
        color: _carbonReactNativeElements.Color.Token.gray_10.text_disabled
      },
      actionText_read_only: {
        color: _carbonReactNativeElements.Color.Token.gray_10.text_primary
      }
    },
    gray_100: {
      formLabel_normal: {
        color: _carbonReactNativeElements.Color.Token.gray_100.text_primary
      },
      formLabel_disabled: {
        color: _carbonReactNativeElements.Color.Token.gray_100.text_disabled
      },
      formLabel_read_only: {
        color: _carbonReactNativeElements.Color.Token.gray_100.text_primary
      },
      actionText_normal: {
        color: _carbonReactNativeElements.Color.Token.gray_100.text_primary
      },
      actionText_disabled: {
        color: _carbonReactNativeElements.Color.Token.gray_100.text_disabled
      },
      actionText_read_only: {
        color: _carbonReactNativeElements.Color.Token.gray_100.text_primary
      }
    }
  },
  mapFormLabelTextStyle = {
    gray_10: {
      normal: coloringStyle.gray_10.formLabel_normal,
      disabled: coloringStyle.gray_10.formLabel_disabled,
      read_only: coloringStyle.gray_10.formLabel_read_only
    },
    gray_100: {
      normal: coloringStyle.gray_100.formLabel_normal,
      disabled: coloringStyle.gray_100.formLabel_disabled,
      read_only: coloringStyle.gray_100.formLabel_read_only
    }
  },
  mapActionTextStyle = {
    gray_10: {
      normal: coloringStyle.gray_10.actionText_normal,
      disabled: coloringStyle.gray_10.actionText_disabled,
      read_only: coloringStyle.gray_10.actionText_read_only
    },
    gray_100: {
      normal: coloringStyle.gray_100.actionText_normal,
      disabled: coloringStyle.gray_100.actionText_disabled,
      read_only: coloringStyle.gray_100.actionText_read_only
    }
  };
//# sourceMappingURL=Base.js.map