@td-design/react-native/lib/module/checkbox/CheckboxItem.js

react-native UI组件库

import React, { memo, useMemo } from 'react';
import { Keyboard, StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import { useMemoizedFn } from '@td-design/rn-hooks';
import Box from '../box';
import Flex from '../flex';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
const mapping = {
  checked: 'checkboxChecked',
  unchecked: 'checkboxUnchecked',
  halfchecked: 'checkboxHalfchecked'
};
const CheckboxItem = _ref => {
  let {
    mode,
    size,
    status,
    label,
    value,
    isLast = false,
    disabled,
    itemStyle,
    labelStyle,
    onChange,
    activeOpacity
  } = _ref;
  const theme = useTheme();
  const styles = StyleSheet.create({
    list: {
      width: '100%'
    }
  });
  const handleChange = useMemoizedFn(() => {
    Keyboard.dismiss();
    if (disabled) return;
    onChange === null || onChange === void 0 ? void 0 : onChange(value, status);
  });
  const Label = useMemo(() => {
    if (typeof label === 'string') return /*#__PURE__*/React.createElement(Box, {
      flex: 1
    }, /*#__PURE__*/React.createElement(Text, {
      variant: "p1",
      color: disabled ? 'disabled' : 'text',
      style: labelStyle,
      numberOfLines: 1,
      ellipsizeMode: "tail"
    }, label));
    return label;
  }, [disabled, label, labelStyle]);
  if (!disabled) return /*#__PURE__*/React.createElement(Pressable, {
    onPress: handleChange,
    activeOpacity: activeOpacity,
    style: [mode === 'list' && styles.list, itemStyle]
  }, /*#__PURE__*/React.createElement(Flex, {
    marginRight: isLast ? 'x0' : 'x2',
    style: mode === 'list' && styles.list
  }, /*#__PURE__*/React.createElement(Box, {
    marginRight: "x1"
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: mapping[status],
    color: theme.colors.primary200,
    size: size
  })), Label));
  return /*#__PURE__*/React.createElement(Box, {
    style: [mode === 'list' && styles.list, itemStyle]
  }, /*#__PURE__*/React.createElement(Flex, {
    marginRight: isLast ? 'x0' : 'x2',
    style: mode === 'list' && styles.list
  }, /*#__PURE__*/React.createElement(Box, {
    marginRight: "x1"
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: mapping[status],
    color: theme.colors.disabled,
    size: size
  })), Label));
};
CheckboxItem.displayName = 'CheckboxItem';
export default /*#__PURE__*/memo(CheckboxItem);
//# sourceMappingURL=CheckboxItem.js.map