@td-design/react-native/lib/module/button/useButton.js

react-native UI组件库

import { useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import helpers from '../helpers';
const {
  px,
  ONE_PIXEL
} = helpers;
export default function useButton(props) {
  const theme = useTheme();
  const {
    loading,
    type = 'primary',
    width = '100%',
    size = 'default',
    disabled = false,
    borderRadius = theme.borderRadii.x1,
    onPress,
    bordered = true,
    style,
    ...restProps
  } = props;
  let textColor = 'text_active';
  let backgroundColor = theme.colors.transparent;
  let indicatorColor = disabled ? theme.colors.gray200 : theme.colors.white;
  if (type === 'primary') {
    backgroundColor = disabled ? theme.colors.primary400 : theme.colors.primary200;
  } else if (type === 'secondary') {
    textColor = disabled ? 'gray200' : 'primary200';
    backgroundColor = disabled ? theme.colors.disabled : theme.colors.transparent;
    indicatorColor = disabled ? theme.colors.gray200 : theme.colors.primary200;
  }
  let borderWidth = 0;
  if (bordered) {
    borderWidth = type === 'secondary' ? ONE_PIXEL : 0;
  }
  const {
    variant,
    paddingVertical,
    loadingIconSize
  } = useMemo(() => {
    switch (size) {
      case 'default':
      default:
        return {
          variant: 'p1',
          paddingVertical: theme.spacing.x2,
          loadingIconSize: px(16)
        };
      case 'large':
        return {
          variant: 'p0',
          paddingVertical: theme.spacing.x3,
          loadingIconSize: px(20)
        };
      case 'small':
        return {
          variant: 'p2',
          paddingVertical: theme.spacing.x1,
          loadingIconSize: px(12)
        };
    }
  }, [size]);

  /** 容器属性 */
  const pressableProps = {
    disabled,
    onPress: () => {
      if (loading) return;
      onPress === null || onPress === void 0 ? void 0 : onPress();
    },
    activeOpacity: disabled ? 1 : 0.6,
    style: StyleSheet.flatten([{
      width,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor,
      borderWidth,
      borderColor: type === 'primary' ? theme.colors.border : disabled ? theme.colors.disabled : theme.colors.primary200,
      borderRadius,
      paddingVertical
    }, style]),
    ...restProps
  };
  return {
    variant,
    textColor,
    indicatorColor,
    pressableProps,
    loadingIconSize
  };
}
//# sourceMappingURL=useButton.js.map