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

🌈 React Native UI library

"use strict";

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

var _groupBy = _interopRequireDefault(require("lodash/groupBy"));

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

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

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

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

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

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

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

var _locale = _interopRequireDefault(require("../locale"));

var _popup = _interopRequireDefault(require("../popup/popup"));

var _popupHeader = _interopRequireDefault(require("../popup/popup-header"));

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

var _line = _interopRequireDefault(require("./line"));

var _style = 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); }

function StepSelector(_ref) {
  let {
    title,
    safeAreaInsetTop,
    round = true,
    onPressClose,
    request,
    ...resetProps
  } = _ref;
  const safeHeight = (0, _hooks.useSafeHeight)({
    top: safeAreaInsetTop
  });

  const locale = _locale.default.useLocale().StepSelector;

  const TOKENS = _theme.default.useThemeTokens();

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

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

  const requestPersistFn = (0, _hooks.usePersistFn)(request);
  const ScrollViewRef = (0, _react.useRef)(null);
  const [value, onChange] = (0, _hooks.useControllableValue)(resetProps, {
    defaultValue: []
  });
  const [state, setState] = (0, _useStateUpdate.default)({
    index: 0,
    selected: [],
    loading: false,
    responseData: []
  });
  const responseDataRef = (0, _react.useRef)({});
  const onPressRef = (0, _react.useRef)(false);
  const fetchOption = (0, _react.useCallback)(async (parentId, index) => {
    const c = responseDataRef.current[`${parentId}`];

    if (c) {
      return c;
    } // 请求


    const data = await requestPersistFn(parentId, index);
    responseDataRef.current[`${parentId}`] = data;
    return data;
  }, [requestPersistFn]);
  const optionScrollToTop = (0, _react.useCallback)(() => {
    ScrollViewRef.current.scrollTo({
      x: 0,
      y: 0,
      animated: false
    });
  }, []);
  (0, _react.useEffect)(() => {
    // 构建已选的数据
    if (resetProps.visible) {
      setState({
        loading: true
      });
      const _value = [...value, null];
      Promise.all(_value.map((_, index) => {
        return fetchOption(value[index - 1] || null, index);
      })).then(datas => {
        const isEnd = !datas[datas.length - 1].options.length;

        const __value = isEnd ? [...value] : _value;

        const selected = __value.map((v, index) => {
          const opts = datas[index].options; // eslint-disable-next-line max-nested-callbacks

          const vIndex = opts.findIndex(op => op.value === v);
          return opts[vIndex];
        });

        setState({
          loading: false,
          index: __value.length - 1,
          responseData: datas,
          selected: selected
        });

        if (datas[datas.length - 1].options.length) {
          optionScrollToTop();
        }

        if (isEnd && onPressRef.current) {
          onPressRef.current = false;
          onChange(value, selected, true);
        }
      });
    }
  }, [resetProps.visible, fetchOption, value, optionScrollToTop, onChange]);
  const {
    placeholder,
    options,
    groupOption
  } = (0, _react.useMemo)(() => {
    const d = state.responseData[state.index] || {
      options: [],
      placeholder: ''
    };

    const _groupOption = (0, _groupBy.default)(d.options, item => item.index);

    return {
      placeholder: d.placeholder,
      options: d.options,
      groupOption: Object.keys(_groupOption).sort().map(key => {
        return _groupOption[key];
      })
    };
  }, [state.index, state.responseData]);
  return /*#__PURE__*/_react.default.createElement(_popup.default, _extends({}, (0, _omit.default)(resetProps, ['value', 'defaultValue', 'onChange']), {
    position: "bottom",
    round: round,
    safeAreaInsetBottom: true
  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: {
      height: safeHeight
    }
  }, /*#__PURE__*/_react.default.createElement(_popupHeader.default, {
    title: title || locale.title,
    onClose: onPressClose
  }), state.selected.length > 1 && state.selected.map((item, index) => {
    return /*#__PURE__*/_react.default.createElement(_cell.default, {
      key: `${item === null || item === void 0 ? void 0 : item.value}`,
      innerStyle: STYLES.selected_cell,
      title: (item === null || item === void 0 ? void 0 : item.label) || state.responseData[index].placeholder,
      titleExtra: /*#__PURE__*/_react.default.createElement(_line.default, {
        index: index,
        total: state.selected.length,
        active: !!(item !== null && item !== void 0 && item.label)
      }),
      titleTextStyle: [STYLES.selected_cell_title_text, index === state.index && item !== null && item !== void 0 && item.label ? STYLES.option_text_active : null],
      isLink: true,
      disabled: state.loading,
      divider: index === state.selected.length - 1,
      onPress: () => {
        setState({
          index
        });
        optionScrollToTop();
      }
    });
  }), options.length && placeholder ? /*#__PURE__*/_react.default.createElement(_cell.default, {
    titleTextStyle: STYLES.placeholder_text,
    title: placeholder,
    divider: false
  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
    bounces: false,
    ref: ScrollViewRef
  }, groupOption.map(group => {
    return group.map((item, itemIndex) => {
      const selected = state.selected[state.index];
      const isActive = item.value === (selected === null || selected === void 0 ? void 0 : selected.value);
      return /*#__PURE__*/_react.default.createElement(_cell.default, {
        key: `${item.value}`,
        disabled: state.loading,
        titleExtra: /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
          style: STYLES.option_index_text
        }, itemIndex === 0 ? item.index : null),
        title: item.label,
        titleTextStyle: isActive ? STYLES.option_text_active : null,
        valueExtra: isActive ? /*#__PURE__*/_react.default.createElement(_success.default, {
          color: CV.step_selector_active_color
        }) : null,
        divider: false,
        onPress: () => {
          // 根据当前的 index 处理数据
          const sliceEnd = state.index;
          const newValue = value.slice(0, sliceEnd);
          const option = newValue.map((v, index) => {
            const opts = state.responseData[index].options; // eslint-disable-next-line max-nested-callbacks

            const vIndex = opts.findIndex(op => op.value === v);
            return opts[vIndex];
          });
          onChange([...newValue, item.value], [...option, item]);
          onPressRef.current = true;
        }
      });
    });
  }))));
}

var _default = /*#__PURE__*/(0, _react.memo)(StepSelector);

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