@fruits-chain/react-native-xiaoshu/lib/module/dropdown/dropdown-selector.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 isNil from 'lodash/isNil';
import omit from 'lodash/omit';
import React, { useCallback, useMemo, useRef, useEffect, memo } from 'react';
import { View, Text, ScrollView, Keyboard } from 'react-native';
import Cell from '../cell';
import { varCreator as varCreatorCell, styleCreator as styleCreatorCell } from '../cell/style';
import { getDefaultValue } from '../helpers';
import { usePersistFn } from '../hooks';
import useState from '../hooks/useStateUpdate';
import IconSuccessOutline from '../icon/success';
import Portal from '../portal';
import Search from '../search';
import Space from '../space';
import Theme from '../theme';
import DropdownBadge from './dropdown-badge';
import DropdownPopup from './dropdown-popup';
import { varCreator, styleCreator } from './style';

const DropdownSelectorMethod = _ref => {
  let {
    targetHeight,
    targetPageY,
    onConfirm,
    onCancel,
    defaultValue,
    options,
    duration,
    zIndex,
    closeOnPressOutside,
    divider,
    search,
    onClosed,
    activeColor
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const CV_CELL = Theme.createVar(TOKENS, varCreatorCell);
  const STYLES = Theme.createStyle(CV, styleCreator);
  const STYLES_CELL = Theme.createStyle(CV_CELL, styleCreatorCell);
  activeColor = getDefaultValue(activeColor, CV.dropdown_active_color);
  const [state, setState] = useState({
    active: false,
    keyword: ''
  });
  const ScrollViewRef = useRef(null);
  const searchOptions = useMemo(() => {
    if (!state.keyword) {
      return [];
    }

    const opts = [];

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

        if (item.label.indexOf(state.keyword) > -1) {
          opts.push(omit(item, ['children']));
        }

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

    findX(options);
    return opts;
  }, [state.keyword, options]);
  useEffect(() => {
    setState({
      active: true
    });
  }, []);
  const onPressShade = useCallback(() => {
    setState({
      active: false,
      keyword: ''
    });
    Keyboard.dismiss();
    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
  }, [onCancel]);
  const onRequestClose = usePersistFn(() => {
    onPressShade();
    return true;
  });

  const genOnPressCell = o => () => {
    setState({
      active: false,
      keyword: ''
    });
    Keyboard.dismiss();
    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(o.value, o);
  };

  const onSearch = useCallback(t => {
    var _ScrollViewRef$curren;

    setState({
      keyword: t
    });
    (_ScrollViewRef$curren = ScrollViewRef.current) === null || _ScrollViewRef$curren === void 0 ? void 0 : _ScrollViewRef$curren.scrollTo({
      x: 0,
      y: 0
    });
  }, []);

  const renderOption = cs => {
    return cs.map(item => {
      var _item$children2;

      const cellJSX = /*#__PURE__*/React.createElement(Cell, {
        key: `${item.value}`,
        divider: divider,
        title: !isNil(item.badge) && item.badge !== false ? /*#__PURE__*/React.createElement(Space, {
          direction: "horizontal",
          align: "center",
          gapVertical: 0
        }, /*#__PURE__*/React.createElement(Text, {
          style: STYLES_CELL.title_text
        }, item.label), /*#__PURE__*/React.createElement(DropdownBadge, {
          count: item.badge
        })) : item.label,
        valueExtra: item.value === defaultValue ? /*#__PURE__*/React.createElement(IconSuccessOutline, {
          color: activeColor
        }) : null,
        onPress: genOnPressCell(item)
      });

      if ((_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length) {
        return /*#__PURE__*/React.createElement(React.Fragment, {
          key: `${item.value}`
        }, cellJSX, /*#__PURE__*/React.createElement(View, {
          style: STYLES.item_cell_inner
        }, renderOption(item.children)));
      }

      return cellJSX;
    });
  };

  return /*#__PURE__*/React.createElement(DropdownPopup, {
    targetHeight: targetHeight,
    targetPageY: targetPageY,
    closeOnPressOutside: closeOnPressOutside,
    duration: duration,
    zIndex: zIndex,
    onPressShade: onPressShade,
    visible: state.active,
    onRequestClose: onRequestClose,
    onClosed: onClosed,
    onPressOverlay: onPressShade
  }, search ? /*#__PURE__*/React.createElement(Search, {
    autoSearch: true,
    onSearch: onSearch
  }) : null, /*#__PURE__*/React.createElement(ScrollView, {
    bounces: false,
    ref: ScrollViewRef,
    keyboardShouldPersistTaps: "handled"
  }, state.keyword ? searchOptions.length ? renderOption(searchOptions) : null : renderOption(options)));
};

const DropdownSelectorMethodMemo = /*#__PURE__*/memo(DropdownSelectorMethod);
export default (opt => {
  return new Promise((resolve, reject) => {
    const key = Portal.add( /*#__PURE__*/React.createElement(DropdownSelectorMethodMemo, _extends({}, opt, {
      onCancel: () => {
        var _opt$onCancel;

        (_opt$onCancel = opt.onCancel) === null || _opt$onCancel === void 0 ? void 0 : _opt$onCancel.call(opt);
        reject(new Error());
      },
      onConfirm: (v, d) => {
        var _opt$onConfirm;

        (_opt$onConfirm = opt.onConfirm) === null || _opt$onConfirm === void 0 ? void 0 : _opt$onConfirm.call(opt, v, d);
        resolve({
          value: v,
          data: d
        });
      },
      onClosed: () => {
        Portal.remove(key);
      }
    })));
  });
});
//# sourceMappingURL=dropdown-selector.js.map