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

Build React Native apps with component and shared patterns using Carbon

"use strict";

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