@fruits-chain/react-native-xiaoshu/lib/module/dropdown/dropdown-item.js

🌈 React Native UI library

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useMemo, memo } from 'react';
import { getDefaultValue } from '../helpers';
import { useControllableValue, usePersistFn } from '../hooks';
import useState from '../hooks/useStateUpdate';
import Locale from '../locale';
import { useDropdownConfig } from './context';
import DropdownSelector from './dropdown-selector';
import DropdownText from './dropdown-text';

const DropdownItem = _ref => {
  let {
    titleStyle,
    titleTextStyle,
    options,
    duration,
    zIndex,
    closeOnPressOutside,
    divider,
    loading,
    search,
    ...restProps
  } = _ref;
  const locale = Locale.useLocale().DropdownItem;
  const config = useDropdownConfig();
  const [active, setActive] = useState(false);
  const [value, onChange] = useControllableValue(restProps);

  const _selectOption = useMemo(() => {
    if (loading) {
      return {
        label: locale.labelLoadingText,
        value: null
      };
    } // eslint-disable-next-line @typescript-eslint/consistent-type-assertions


    let selectOption = {};

    const findX = list => {
      list.forEach(item => {
        var _item$children;

        if (item.value === value) {
          selectOption = item;
        } else if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
          findX(item.children);
        }
      });
    };

    findX(options);
    return selectOption;
  }, [loading, locale.labelLoadingText, options, value]);

  duration = getDefaultValue(duration, config.duration);
  zIndex = getDefaultValue(zIndex, config.zIndex);
  closeOnPressOutside = getDefaultValue(closeOnPressOutside, config.closeOnPressOutside);
  const onPressText = usePersistFn(() => {
    // 计算 Menu 的 Top 和元素高度
    // eslint-disable-next-line max-params
    config.MenuRef.current.measure((x, y, width, height, pageX, pageY) => {
      setActive(true);
      DropdownSelector({
        targetHeight: height,
        targetPageY: pageY,
        defaultValue: value,
        options,
        duration,
        zIndex,
        closeOnPressOutside,
        divider,
        search,
        activeColor: config.activeColor
      }).then(d => {
        onChange(d.value, d.data);
      }).catch(() => {}).finally(() => {
        setActive(false);
      });
    });
  });
  return /*#__PURE__*/React.createElement(DropdownText, _extends({}, restProps, {
    style: titleStyle,
    textStyle: titleTextStyle,
    title: _selectOption.label,
    badge: _selectOption.badge,
    active: active,
    onPress: onPressText,
    disabled: restProps.disabled || loading
  }));
};

export default /*#__PURE__*/memo(DropdownItem);
//# sourceMappingURL=dropdown-item.js.map