antd-mobile-taro-ui/2x/es/components/checkbox/checkbox.js

以antd-mobile为设计标准，基于taro框架的微信小程序组件库

import { View } from '@tarojs/components';
import classNames from 'classnames';
import React, { useContext } from 'react';
import { withNativeProps } from 'antd-mobile/es/utils/native-props';
import { usePropsValue } from 'antd-mobile/es/utils/use-props-value';
import { mergeProps } from 'antd-mobile/es/utils/with-default-props';
import { CheckIcon } from 'antd-mobile-taro-icons';
import { CheckboxGroupContext } from './group-context';
const classPrefix = `adm-checkbox`;
const defaultProps = {
  defaultChecked: false,
  indeterminate: false
};
export const Checkbox = p => {
  const groupContext = useContext(CheckboxGroupContext);
  const props = mergeProps(defaultProps, p);
  let [checked, setChecked] = usePropsValue({
    value: props.checked,
    defaultValue: props.defaultChecked,
    onChange: props.onChange
  });
  let {
    disabled
  } = props;
  const {
    value
  } = props;

  if (groupContext && value !== undefined) {
    checked = groupContext.value.includes(value);

    setChecked = checked => {
      var _a;

      if (checked) {
        groupContext.check(value);
      } else {
        groupContext.uncheck(value);
      }

      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, checked);
    };

    disabled = disabled || groupContext.disabled;
  }

  const renderIcon = () => {
    if (props.icon) {
      return React.createElement(View, {
        className: `${classPrefix}-custom-icon`
      }, props.icon(checked, props.indeterminate));
    }

    return React.createElement(View, {
      className: `${classPrefix}-icon`
    }, props.indeterminate ? React.createElement(View, {
      className: `${classPrefix}-indeterminate-checked`
    }, React.createElement(View, {
      className: `${classPrefix}-indeterminate-checked-icon`
    })) : checked && React.createElement(CheckIcon, {
      className: `${classPrefix}-icon-checked`
    }));
  };

  return withNativeProps(props, React.createElement(View, {
    className: classNames(classPrefix, {
      [`${classPrefix}-checked`]: checked,
      [`${classPrefix}-indeterminate`]: props.indeterminate,
      [`${classPrefix}-disabled`]: disabled,
      [`${classPrefix}-block`]: props.block
    }),
    onClick: () => {
      if (disabled) return;
      setChecked(!checked);
    }
  }, renderIcon(), props.children && React.createElement(View, {
    className: `${classPrefix}-content`
  }, props.children)));
};