@fruits-chain/react-native-xiaoshu/lib/commonjs/dropdown/dropdown-selector.js

🌈 React Native UI library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _cell = _interopRequireDefault(require("../cell"));

var _style = require("../cell/style");

var _helpers = require("../helpers");

var _hooks = require("../hooks");

var _useStateUpdate = _interopRequireDefault(require("../hooks/useStateUpdate"));

var _success = _interopRequireDefault(require("../icon/success"));

var _portal = _interopRequireDefault(require("../portal"));

var _search = _interopRequireDefault(require("../search"));

var _space = _interopRequireDefault(require("../space"));

var _theme = _interopRequireDefault(require("../theme"));

var _dropdownBadge = _interopRequireDefault(require("./dropdown-badge"));

var _dropdownPopup = _interopRequireDefault(require("./dropdown-popup"));

var _style2 = require("./style");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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); }

const DropdownSelectorMethod = _ref => {
  let {
    targetHeight,
    targetPageY,
    onConfirm,
    onCancel,
    defaultValue,
    options,
    duration,
    zIndex,
    closeOnPressOutside,
    divider,
    search,
    onClosed,
    activeColor
  } = _ref;

  const TOKENS = _theme.default.useThemeTokens();

  const CV = _theme.default.createVar(TOKENS, _style2.varCreator);

  const CV_CELL = _theme.default.createVar(TOKENS, _style.varCreator);

  const STYLES = _theme.default.createStyle(CV, _style2.styleCreator);

  const STYLES_CELL = _theme.default.createStyle(CV_CELL, _style.styleCreator);

  activeColor = (0, _helpers.getDefaultValue)(activeColor, CV.dropdown_active_color);
  const [state, setState] = (0, _useStateUpdate.default)({
    active: false,
    keyword: ''
  });
  const ScrollViewRef = (0, _react.useRef)(null);
  const searchOptions = (0, _react.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((0, _omit.default)(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]);
  (0, _react.useEffect)(() => {
    setState({
      active: true
    });
  }, []);
  const onPressShade = (0, _react.useCallback)(() => {
    setState({
      active: false,
      keyword: ''
    });

    _reactNative.Keyboard.dismiss();

    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
  }, [onCancel]);
  const onRequestClose = (0, _hooks.usePersistFn)(() => {
    onPressShade();
    return true;
  });

  const genOnPressCell = o => () => {
    setState({
      active: false,
      keyword: ''
    });

    _reactNative.Keyboard.dismiss();

    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(o.value, o);
  };

  const onSearch = (0, _react.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.default.createElement(_cell.default, {
        key: `${item.value}`,
        divider: divider,
        title: !(0, _isNil.default)(item.badge) && item.badge !== false ? /*#__PURE__*/_react.default.createElement(_space.default, {
          direction: "horizontal",
          align: "center",
          gapVertical: 0
        }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
          style: STYLES_CELL.title_text
        }, item.label), /*#__PURE__*/_react.default.createElement(_dropdownBadge.default, {
          count: item.badge
        })) : item.label,
        valueExtra: item.value === defaultValue ? /*#__PURE__*/_react.default.createElement(_success.default, {
          color: activeColor
        }) : null,
        onPress: genOnPressCell(item)
      });

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

      return cellJSX;
    });
  };

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

const DropdownSelectorMethodMemo = /*#__PURE__*/(0, _react.memo)(DropdownSelectorMethod);

var _default = opt => {
  return new Promise((resolve, reject) => {
    const key = _portal.default.add( /*#__PURE__*/_react.default.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.default.remove(key);
      }
    })));
  });
};

exports.default = _default;
//# sourceMappingURL=dropdown-selector.js.map