@prosperitainova/dumbo-react-native/lib/module/components/Checkbox/index.js

Dumbo for React Native Library

"use strict";

import React from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { defaultText } from '../../constants/defaultText';
import { createIcon, styleReferenceBreaker } from '../../helpers';
import { getColor } from '../../styles/colors';
import { Text } from '../Text';
import CheckboxIcon from '@carbon/icons/es/checkbox/20';
import CheckboxCheckedIcon from '@carbon/icons/es/checkbox--checked--filled/20';
import { Tooltip } from '../Tooltip';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const checkboxRadioBaseStyle = {
  paddingTop: 14,
  paddingBottom: 14,
  minWidth: 48,
  flexDirection: 'row',
  alignContent: 'flex-start'
};

/** Props for Checkbox and Radio component */

/**
 * Checkbox component for rendering a checkbox
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Checkbox.tsx | Example code}
 */
export class Checkbox extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: checkboxRadioBaseStyle,
      checkboxWrapper: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center'
      }
    });
  }
  get textStyle() {
    const {
      disabled
    } = this.props;
    const finalStyle = {
      color: getColor(disabled ? 'textDisabled' : 'textPrimary'),
      marginLeft: 8,
      lineHeight: 20,
      maxWidth: '100%'
    };
    return finalStyle;
  }
  get checkbox() {
    const {
      checked,
      disabled
    } = this.props;
    const color = disabled ? getColor('iconDisabled') : getColor('iconPrimary');
    return /*#__PURE__*/_jsx(View, {
      children: checked ? createIcon(CheckboxCheckedIcon, 20, 20, color) : createIcon(CheckboxIcon, 20, 20, color)
    });
  }
  onPress = event => {
    const {
      onPress,
      checked,
      id
    } = this.props;
    if (typeof onPress === 'function') {
      onPress(!checked, id, event);
    }
  };
  onLongPress = event => {
    const {
      onLongPress,
      id
    } = this.props;
    if (typeof onLongPress === 'function') {
      onLongPress(id, event);
    }
  };
  render() {
    const {
      disabled,
      componentProps,
      label,
      accessibleText,
      hideLabel,
      style,
      tooltipProps,
      wrapperStyle
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: styleReferenceBreaker(this.styles.checkboxWrapper, wrapperStyle),
      children: [/*#__PURE__*/_jsxs(Pressable, {
        style: styleReferenceBreaker(this.styles.wrapper, style),
        disabled: disabled,
        accessibilityLabel: accessibleText || defaultText.checkbox,
        accessibilityHint: label,
        accessibilityRole: "checkbox",
        onPress: this.onPress,
        onLongPress: this.onLongPress,
        ...(componentProps || {}),
        children: [this.checkbox, !hideLabel && /*#__PURE__*/_jsx(Text, {
          style: this.textStyle,
          text: label
        })]
      }), !!tooltipProps && /*#__PURE__*/_jsx(Tooltip, {
        ...tooltipProps
      })]
    });
  }
}
//# sourceMappingURL=index.js.map