react-native-ios-utilities/lib/module/example_components/CardRowSwitch.js

Utilities for react-native + iOS and wrappers for using swift together with fabric/paper + JSI

"use strict";

import * as React from 'react';
import { StyleSheet, View, Text, Switch } from 'react-native';
import { Colors } from "../misc/Colors.js";

/**
 * ```
 * ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
 *   Title               ┌──┬─┐   
 * │ Subtitle            └──┴─┘  │
 *  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 
 * ```
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function CardRowSwitch(props) {
  return /*#__PURE__*/_jsxs(View, {
    style: styles.cardRowSwitchContainer,
    children: [/*#__PURE__*/_jsxs(View, {
      style: styles.cardRowSwitchLabelContainer,
      children: [/*#__PURE__*/_jsx(Text, {
        style: styles.cardRowSwitchLabelText,
        children: props.title ?? 'title'
      }), /*#__PURE__*/_jsx(Text, {
        style: styles.cardRowSwitchSubtitleText,
        children: props.subtitle ?? 'Toggle the value'
      })]
    }), /*#__PURE__*/_jsx(Switch, {
      value: props.value ?? false,
      onValueChange: props.onValueChange,
      trackColor: {
        true: Colors.PURPLE.A700,
        false: Colors.PURPLE.A100
      }
    })]
  });
}
;
const styles = StyleSheet.create({
  cardRowSwitchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 12
  },
  cardRowSwitchLabelContainer: {
    flex: 1,
    marginRight: 10
  },
  cardRowSwitchLabelText: {
    fontSize: 12,
    fontWeight: '500',
    color: Colors.PURPLE[1200]
  },
  cardRowSwitchSubtitleText: {
    fontSize: 12,
    opacity: 0.5,
    color: Colors.PURPLE[1100]
  }
});
//# sourceMappingURL=CardRowSwitch.js.map