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

react-native UI组件库

import { useEffect, useState } from 'react';
import { useMemoizedFn } from '@td-design/rn-hooks';
export default function useCheckbox(props) {
  const {
    value,
    options,
    disabledValue,
    defaultValue,
    onChange,
    showCheckAll
  } = props;
  const [transformedOptions, setTransformedOptions] = useState([]);
  useEffect(() => {
    const checkedValue = value ?? defaultValue ?? [];
    const newOptions = options.map(option => {
      const disabled = !!(disabledValue !== null && disabledValue !== void 0 && disabledValue.includes(option.value));
      const checked = !!(checkedValue !== null && checkedValue !== void 0 && checkedValue.includes(option.value));
      return {
        ...option,
        disabled,
        status: checked ? 'checked' : 'unchecked'
      };
    });
    setTransformedOptions(newOptions);
  }, [options, value, defaultValue, disabledValue]);
  let checkedAllStatus = 'unchecked';
  if (showCheckAll) {
    checkedAllStatus = getCheckedAllStatus(transformedOptions);
  }

  /**
   * 1. 选中或者办选中状态下，设置为未选中
   * 2. 未选中状态下，设置为选中
   */
  const handleAllChange = (_, status) => {
    if (status === 'checked') {
      const newOptions = transformedOptions.map(option => {
        return {
          ...option,
          disabled: !!(disabledValue !== null && disabledValue !== void 0 && disabledValue.includes(option.value)),
          status: 'unchecked'
        };
      });
      if (onChange) {
        onChange([]);
      } else {
        setTransformedOptions(newOptions);
      }
    } else {
      const newOptions = transformedOptions.map(option => {
        const disabled = !!(disabledValue !== null && disabledValue !== void 0 && disabledValue.includes(option.value));
        return {
          ...option,
          disabled,
          status: !disabled ? 'checked' : 'unchecked'
        };
      });
      if (onChange) {
        const values = newOptions.filter(item => !(disabledValue !== null && disabledValue !== void 0 && disabledValue.includes(item.value))).map(option => option.value);
        onChange(values);
      } else {
        setTransformedOptions(newOptions);
      }
    }
  };

  /**
   * 1. 选中状态下，设置为未选中
   * 2. 未选中状态下，设置为选中
   */
  const handleChange = (value, status) => {
    const newOptions = transformedOptions.map(item => {
      if (item.value === value) {
        item.status = status === 'checked' ? 'unchecked' : 'checked';
      }
      return item;
    });
    if (onChange) {
      const values = newOptions.filter(item => item.status === 'checked').map(item => item.value);
      onChange(values);
    } else {
      setTransformedOptions(newOptions);
    }
  };
  return {
    transformedOptions,
    checkedAllStatus,
    handleAllChange: useMemoizedFn(handleAllChange),
    handleChange: useMemoizedFn(handleChange)
  };
}
function getCheckedAllStatus() {
  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  const checkedLength = options.filter(option => option.status === 'checked').length;
  if (checkedLength === 0) {
    return 'unchecked';
  } else if (checkedLength === options.length) {
    return 'checked';
  } else {
    return 'halfchecked';
  }
}
//# sourceMappingURL=useCheckbox.js.map