vantui-edit/lib/area/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = require("react");

var computed = _interopRequireWildcard(require("./wxs"));

var _picker = _interopRequireDefault(require("./../picker"));

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["showToolbar", "value", "areaList", "columnsNum", "columnsPlaceholder", "onCancel", "onChange", "onConfirm", "title", "loading", "itemHeight", "visibleItemCount", "cancelButtonText", "confirmButtonText"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var EMPTY_CODE = '000000';

function Index(props, ref) {
  var _props$showToolbar = props.showToolbar,
      showToolbar = _props$showToolbar === void 0 ? true : _props$showToolbar,
      value = props.value,
      areaList = props.areaList,
      _props$columnsNum = props.columnsNum,
      columnsNum = _props$columnsNum === void 0 ? 3 : _props$columnsNum,
      _props$columnsPlaceho = props.columnsPlaceholder,
      columnsPlaceholder = _props$columnsPlaceho === void 0 ? [] : _props$columnsPlaceho,
      onCancel = props.onCancel,
      onChange = props.onChange,
      onConfirm = props.onConfirm,
      title = props.title,
      loading = props.loading,
      itemHeight = props.itemHeight,
      _props$visibleItemCou = props.visibleItemCount,
      visibleItemCount = _props$visibleItemCou === void 0 ? 6 : _props$visibleItemCou,
      _props$cancelButtonTe = props.cancelButtonText,
      cancelButtonText = _props$cancelButtonTe === void 0 ? '取消' : _props$cancelButtonTe,
      _props$confirmButtonT = props.confirmButtonText,
      confirmButtonText = _props$confirmButtonT === void 0 ? '确认' : _props$confirmButtonT,
      others = (0, _objectWithoutProperties2.default)(props, _excluded);
  var pickerRef = (0, _react.useRef)(null);
  var codeRef = (0, _react.useRef)(''); // const [columns, setColumns] = useState<any[]>([
  //   { values: [] },
  //   { values: [] },
  //   { values: [] },
  // ])

  var columns = (0, _react.useMemo)(function () {
    return [{
      values: []
    }, {
      values: []
    }, {
      values: []
    }];
  }, []);
  var typeToColumnsPlaceholderRef = (0, _react.useRef)({}); // const [typeToColumnsPlaceholder, setTypeToColumnsPlaceholder] = useState<any>(
  //   {},
  // )

  var _parseValues = (0, _react.useCallback)(function (values) {
    return values.map(function (value, index) {
      if (value && (!value.code || value.name === columnsPlaceholder[index])) {
        return Object.assign(Object.assign({}, value), {
          code: '',
          name: ''
        });
      }

      return value;
    });
  }, [columnsPlaceholder]);

  var _getConfig = (0, _react.useCallback)(function (type) {
    return areaList && areaList["".concat(type, "_list")] || {};
  }, [areaList]);

  var _getList = (0, _react.useCallback)(function (type, code) {
    var _typeToColumnsPlaceho;

    if (type !== 'province' && !code) {
      return [];
    } // console.log(typeToColumnsPlaceholder)


    var list = _getConfig(type);

    var result = Object.keys(list).map(function (code) {
      return {
        code: code,
        name: list[code]
      };
    });

    if (code != null) {
      // oversea code
      if (code[0] === '9' && type === 'city') {
        code = '9';
      }

      result = result.filter(function (item) {
        return item.code.indexOf(code) === 0;
      });
    }

    if ((_typeToColumnsPlaceho = typeToColumnsPlaceholderRef.current) !== null && _typeToColumnsPlaceho !== void 0 && _typeToColumnsPlaceho[type] && result.length) {
      var _typeToColumnsPlaceho2;

      // set columns placeholder
      var codeFill = type === 'province' ? '' : type === 'city' ? EMPTY_CODE.slice(2, 4) : EMPTY_CODE.slice(4, 6);
      result.unshift({
        code: "".concat(code === undefined ? '' : code).concat(codeFill),
        name: (_typeToColumnsPlaceho2 = typeToColumnsPlaceholderRef.current) === null || _typeToColumnsPlaceho2 === void 0 ? void 0 : _typeToColumnsPlaceho2[type]
      });
    }

    return result;
  }, [_getConfig]);

  var _getIndex = (0, _react.useCallback)(function (type, code) {
    var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;

    var list = _getList(type, code.slice(0, compareNum - 2)); // oversea code


    if (code[0] === '9' && type === 'province') {
      compareNum = 1;
    }

    code = code.slice(0, compareNum);

    for (var i = 0; i < list.length; i++) {
      var _list$i, _list$i$code;

      if ((list === null || list === void 0 ? void 0 : (_list$i = list[i]) === null || _list$i === void 0 ? void 0 : (_list$i$code = _list$i.code) === null || _list$i$code === void 0 ? void 0 : _list$i$code.slice(0, compareNum)) === code) {
        return i;
      }
    }

    return 0;
  }, [_getList]);

  var _getPicker = (0, _react.useCallback)(function () {
    // console.log(picker)
    return pickerRef.current;
  }, []);

  var _onCancel = (0, _react.useCallback)(function (event) {
    onCancel === null || onCancel === void 0 ? void 0 : onCancel(event);
  }, [onCancel]);

  var _onConfirm = (0, _react.useCallback)(function (event) {
    var index = event.detail.index;
    var value = event.detail.value;
    value = _parseValues(value);
    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
      detail: {
        value: value,
        index: index
      }
    });
  }, [_parseValues, onConfirm]);

  var _getDefaultCode = (0, _react.useCallback)(function () {
    if (columnsPlaceholder.length) {
      return EMPTY_CODE;
    }

    var countyCodes = Object.keys(_getConfig('county'));

    if (countyCodes[0]) {
      return countyCodes[0];
    }

    var cityCodes = Object.keys(_getConfig('city'));

    if (cityCodes[0]) {
      return cityCodes[0];
    }

    return '';
  }, [_getConfig, columnsPlaceholder]);

  var _setValues = (0, _react.useCallback)(function () {
    var picker = _getPicker();

    if (!picker) {
      return;
    }

    var code = (codeRef.current || _getDefaultCode()) + '';

    var provinceList = _getList('province');

    var cityList = _getList('city', code.slice(0, 2));

    var stack = [];
    var indexes = [];

    if (columnsNum >= 1) {
      stack.push(picker.setColumnValues(0, provinceList, false));
      indexes.push(_getIndex('province', code));
    }

    if (columnsNum >= 2) {
      stack.push(picker.setColumnValues(1, cityList, false));
      indexes.push(_getIndex('city', code));

      if (cityList.length && code.slice(2, 4) === '00') {
        var _cityList$;

        // ;[{ code }] = cityList
        code = cityList === null || cityList === void 0 ? void 0 : (_cityList$ = cityList[0]) === null || _cityList$ === void 0 ? void 0 : _cityList$.code;
      }
    }

    if (columnsNum === 3) {
      stack.push(picker.setColumnValues(2, _getList('county', code.slice(0, 4)), false));
      indexes.push(_getIndex('county', code));
    }

    return Promise.all(stack).then(function () {
      // 由于picker.setColumnValues初始化每一项初始值的操作为异步
      setTimeout(function () {
        picker.setIndexes(indexes);
      }, 30);
    }).catch(function () {});
  }, [_getDefaultCode, _getIndex, _getList, _getPicker, columnsNum]);

  var _onChange = (0, _react.useCallback)(function (event) {
    var _a;

    var _event$detail = event.detail,
        index = _event$detail.index,
        value = _event$detail.value,
        picker = _event$detail.picker;
    codeRef.current = value[index].code;
    (_a = _setValues()) === null || _a === void 0 ? void 0 : _a.then(function () {
      var event_ = {
        detail: {
          picker: picker,
          values: _parseValues(picker.getValues()),
          index: index
        }
      };
      onChange === null || onChange === void 0 ? void 0 : onChange(event_);
    });
  }, [_parseValues, _setValues, onChange]);

  var _getValues = (0, _react.useCallback)(function () {
    var picker = _getPicker();

    if (!picker) {
      return [];
    }

    return _parseValues(picker.getValues().filter(function (value) {
      return !!value;
    }));
  }, [_getPicker, _parseValues]);

  var getDetail = (0, _react.useCallback)(function () {
    var values = _getValues();

    var area = {
      code: '',
      country: '',
      province: '',
      city: '',
      county: ''
    };

    if (!values.length) {
      return area;
    }

    var names = values.map(function (item) {
      return item.name;
    });
    area.code = values[values.length - 1].code;

    if (area.code[0] === '9') {
      area.country = names[1] || '';
      area.province = names[2] || '';
    } else {
      area.province = names[0] || '';
      area.city = names[1] || '';
      area.county = names[2] || '';
    }

    return area;
  }, [_getValues]);
  var reset = (0, _react.useCallback)(function (code) {
    codeRef.current = code || '';
    return _setValues();
  }, [_setValues]);
  (0, _react.useEffect)(function () {
    typeToColumnsPlaceholderRef.current = {
      province: columnsPlaceholder[0] || '',
      city: columnsPlaceholder[1] || '',
      county: columnsPlaceholder[2] || ''
    };
  }, [columnsPlaceholder]);
  (0, _react.useEffect)(function () {
    codeRef.current = value;
  }, [value]);
  (0, _react.useEffect)(function () {
    _setValues();
  }, [_setValues, areaList, value]);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      reset: reset,
      getDetail: getDetail
    };
  }); // useEffect(() => {
  //   requestAnimationFrame(() => {
  //     _setValues()
  //     // console.log('我应当就跑一次')
  //   })
  // }, [])

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_picker.default, _objectSpread({
    ref: pickerRef,
    className: "van-area__picker",
    showToolbar: showToolbar,
    valueKey: "name",
    title: title,
    loading: loading,
    columns: computed.displayColumns(columns, columnsNum),
    itemHeight: itemHeight,
    visibleItemCount: visibleItemCount,
    cancelButtonText: cancelButtonText,
    confirmButtonText: confirmButtonText,
    onChange: _onChange,
    onConfirm: _onConfirm,
    onCancel: _onCancel
  }, others));
}

var Area = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Index));
exports.Area = Area;
var _default = Area;
exports.default = _default;