@bifrostui/react 1.0.5 → 1.1.1

package/dist/Picker/utils.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickerPanelType = exports.formatOptions = exports.formatCascade = void 0;
+/**
+ * 根据第一列数据判断选择器类型
+ */
+const pickerPanelType = (options = []) => {
+  const firstColumn = options[0];
+
+  // 多列模式
+  if (Array.isArray(firstColumn)) {
+    return 'multiple';
+  }
+
+  // 级联模式
+  if (firstColumn?.children) {
+    return 'cascade';
+  }
+
+  // 单列模式
+  return 'single';
+};
+
+/**
+ * 格式化级联模式数据
+ */
+exports.pickerPanelType = pickerPanelType;
+const formatCascade = (columns, values) => {
+  const result = [];
+  let columnOptions = {
+    label: '',
+    value: '',
+    children: columns
+  };
+  let columnIndex = 0;
+  while (columnOptions?.children) {
+    const options = columnOptions.children;
+    const value = values?.[columnIndex];
+    let index = options.findIndex(item => item.value === value);
+    if (index === -1) index = 0;
+    columnOptions = columnOptions.children[index];
+    columnIndex += 1;
+    result.push(options);
+  }
+  return result;
+};
+
+/**
+ * 统一options数据格式
+ */
+exports.formatCascade = formatCascade;
+const formatOptions = (internalValue, options = []) => {
+  const panelType = pickerPanelType(options);
+  switch (panelType) {
+    case 'multiple':
+      return options;
+    case 'cascade':
+      return formatCascade(options, internalValue);
+    default:
+      return options;
+  }
+};
+exports.formatOptions = formatOptions;

package/dist/Tabs/Tabs.css

@@ -44,11 +44,11 @@
 }
 .bui-tabs-mask-left {
   left: 0;
-  background: linear-gradient(to right, var(--bui-color-white), rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--bui-color-bg-view), rgba(255, 255, 255, 0));
 }
 .bui-tabs-mask-right {
   right: 0;
-  background: linear-gradient(to left, var(--bui-color-white), rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--bui-color-bg-view), rgba(255, 255, 255, 0));
 }
 .bui-tabline-invisible {
   visibility: hidden;

package/dist/index.d.ts

@@ -36,3 +36,5 @@ export * from './NavBar';
 export * from './Loading';
 export * from './TabBar';
 export * from './Countdown';
+export * from './CitySelector';
+export * from './Picker';

package/dist/index.js

@@ -420,4 +420,26 @@ Object.keys(_Countdown).forEach(function (key) {
       return _Countdown[key];
     }
   });
+});
+var _CitySelector = require("./CitySelector");
+Object.keys(_CitySelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CitySelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CitySelector[key];
+    }
+  });
+});
+var _Picker = require("./Picker");
+Object.keys(_Picker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Picker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Picker[key];
+    }
+  });
 });

package/es/CitySelector/CitySelector.css

@@ -0,0 +1,102 @@
+.bui-city-selector {
+  font-family: var(--bui-font-family);
+  height: 100%;
+  position: relative;
+}
+.bui-city-selector-title {
+  width: 100%;
+  height: 45px;
+  color: var(--bui-color-fg-default);
+  font-size: var(--bui-title-size-3);
+  line-height: 45px;
+  text-align: center;
+  position: sticky;
+  top: 0;
+  z-index: 1004;
+  border-bottom: solid 1px var(--bui-color-border-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-city-selector-btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 45px;
+  height: 45px;
+  color: var(--bui-color-fg-muted);
+  text-align: center;
+  font-size: 20px;
+}
+.bui-city-selector-scroll-view-container {
+  height: 100%;
+}
+.bui-city-selector-scroll-view-container.container-has-title {
+  height: calc(100% - 45px);
+}
+.bui-city-selector-all-city {
+  min-height: 500px;
+  font-size: var(--bui-text-size-2);
+  width: 100%;
+  background: var(--bui-color-bg-view);
+  align-self: flex-start;
+}
+.bui-city-selector-all-city .select-city-buttons {
+  display: flex;
+  flex-flow: wrap;
+  padding-left: 3px;
+  padding-top: 7.5px;
+}
+.bui-city-selector-all-city .select-city-title {
+  font-size: var(--bui-title-size-4);
+  line-height: 15px;
+  font-weight: 600;
+  padding-left: var(--bui-spacing-lg);
+  padding-top: 9px;
+}
+.bui-city-selector-list {
+  padding-left: var(--bui-spacing-lg);
+  list-style-type: none;
+}
+.bui-city-selector-list-item {
+  height: 45px;
+  font-size: var(--bui-title-size-4);
+  display: flex;
+  align-items: center;
+}
+.bui-city-selector-list-item:not(:last-child) {
+  border-bottom: 0.5px solid var(--bui-color-border-default);
+}
+.bui-city-selector-index-container {
+  z-index: 1001;
+  position: absolute;
+  white-space: nowrap;
+  right: 0;
+  top: 50%;
+  width: 40px;
+  will-change: transform;
+  transform: translate(0, -50%);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+.bui-city-selector-index-container.left-in {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+.bui-city-selector-index-container.city-index-has-title {
+  top: calc(50% + 22.5px);
+}
+.bui-city-selector-index-container ul {
+  margin: 0;
+  padding: 0;
+  float: left;
+  width: 100%;
+  touch-action: none;
+}
+.bui-city-selector-index-container li {
+  list-style: none;
+  height: 20px;
+  text-align: center;
+  font-size: var(--bui-text-size-3);
+  color: var(--bui-color-info, --bui-color-info);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/CitySelector/CitySelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CitySelectorProps } from './CitySelector.types';
+declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CitySelector;

package/es/CitySelector/CitySelector.js

@@ -0,0 +1,36 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useState } from 'react';
+import CitySelectorCore from "./CitySelectorCore";
+var CitySelector = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var cities = props.cities;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var touchHandler = function touchHandler(e, scrollToCode) {
+    var _t$dataset;
+    var t = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+    var code = t === null || t === void 0 || (_t$dataset = t.dataset) === null || _t$dataset === void 0 ? void 0 : _t$dataset.code;
+    scrollToCode(code);
+  };
+  useEffect(function () {
+    var _document$querySelect;
+    if (!(cities !== null && cities !== void 0 && cities.length) || height) return;
+    var screenHeight = window.innerHeight || document.documentElement.clientHeight;
+    var domHeight = (_document$querySelect = document.querySelector('.bui-city-selector-scroll-view-container')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect().height;
+    setHeight("".concat(domHeight / screenHeight * 100, "vh"));
+  }, [cities]);
+  return /*#__PURE__*/React.createElement(CitySelectorCore, _extends({}, props, {
+    ref: ref,
+    touchHandler: touchHandler,
+    height: height
+  }));
+});
+CitySelector.displayName = 'BuiCitySelector';
+export default CitySelector;

package/es/CitySelector/CitySelector.miniapp.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CitySelectorProps } from './CitySelector.types';
+import './miniapp.less';
+declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CitySelector;

package/es/CitySelector/CitySelector.miniapp.js

@@ -0,0 +1,77 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useRef, useState } from 'react';
+import Taro from '@tarojs/taro';
+import CitySelectorCore from "./CitySelectorCore";
+import "./miniapp.css";
+var CitySelector = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var cities = props.cities;
+  var containerTop = useRef(0);
+  var codeHeight = useRef(0);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var queryContainerTop = function queryContainerTop(cbk) {
+    var query = Taro.createSelectorQuery();
+    query.select('.bui-city-selector-index-container').boundingClientRect();
+    query.exec(function (res) {
+      var _res$;
+      containerTop.current = (_res$ = res[0]) === null || _res$ === void 0 ? void 0 : _res$.top;
+      cbk === null || cbk === void 0 || cbk();
+    });
+  };
+  useEffect(function () {
+    if ((cities === null || cities === void 0 ? void 0 : cities.length) === 0 || codeHeight.current) return;
+    // 演示获取字母高度
+    setTimeout(function () {
+      var query = Taro.createSelectorQuery();
+      query.select('.bui-city-selector-index-item').boundingClientRect();
+      query.exec(function (res) {
+        var _res$2;
+        codeHeight.current = (_res$2 = res[0]) === null || _res$2 === void 0 ? void 0 : _res$2.height;
+      });
+    }, 300);
+  }, [cities, height]);
+  useEffect(function () {
+    if (!(cities !== null && cities !== void 0 && cities.length) || height) return;
+    var _Taro$getSystemInfoSy = Taro.getSystemInfoSync(),
+      screenHeight = _Taro$getSystemInfoSy.screenHeight;
+    var query = Taro.createSelectorQuery();
+    query.select('.bui-city-selector-scroll-view-container').boundingClientRect();
+    query.exec(function (codeRect) {
+      var _codeRect$;
+      var domHeight = codeRect === null || codeRect === void 0 || (_codeRect$ = codeRect[0]) === null || _codeRect$ === void 0 ? void 0 : _codeRect$.height;
+      setHeight("".concat(domHeight / screenHeight * 100, "vh"));
+    });
+  }, [cities]);
+  var parseIndex = function parseIndex(length, index) {
+    if (index <= 0) return 0;
+    if (index >= length - 1) return length - 1;
+    return index;
+  };
+  var pxToCode = function pxToCode(clientY, scrollToCode, codeGroup) {
+    var index = Math.floor((clientY - containerTop.current) / codeHeight.current);
+    index = parseIndex(codeGroup.length, index);
+    var codeItem = codeGroup[index];
+    scrollToCode(codeItem.code || codeItem);
+  };
+  var touchHandler = function touchHandler(event, scrollToCode, codeGroup) {
+    var clientY = event.changedTouches[0].clientY;
+    queryContainerTop(function () {
+      pxToCode(clientY, scrollToCode, codeGroup);
+    });
+  };
+  return /*#__PURE__*/React.createElement(CitySelectorCore, _extends({}, props, {
+    ref: ref,
+    touchHandler: touchHandler,
+    height: height
+  }));
+});
+CitySelector.displayName = 'BuiCitySelector';
+export default CitySelector;

package/es/CitySelector/CitySelector.types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { OverrideProps } from '@bifrostui/types';
+export type cityType = {
+    /** 城市名 */
+    name: string;
+    /** 城市名id */
+    code: string;
+};
+export type allCityItemType = {
+    /** 城市列表 */
+    cities: cityType[];
+    /** 索引字母 */
+    groupName: string;
+};
+export type CitySelectorProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /** 当前城市信息 */
+        selectedCity?: cityType;
+        /** 当前城市栏的title */
+        selectedCityGroupName?: string;
+        /** 定位城市信息 */
+        currentCity?: cityType;
+        /** 定位城市栏的title */
+        currentCityGroupName?: string;
+        /** 热门城市信息 */
+        hotCities?: cityType[];
+        /** 热门城市栏的title */
+        hotCitiesGroupName?: string;
+        /** 城市列表 */
+        cities: allCityItemType[];
+        /** 禁用展示索引 默认false 即展示索引 */
+        disableIndex?: boolean;
+        /** 头部标题 */
+        title?: string;
+        /** 选择城市回调 */
+        onSelect: (e: React.SyntheticEvent, data: {
+            city: cityType;
+        }) => void;
+        /** 和title配合使用，头部右侧的关闭回调 */
+        onClose?: (e: React.SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type CitySelectorCoreProps = CitySelectorProps & {
+    touchHandler: any;
+    height?: string;
+};

package/es/CitySelector/CitySelector.types.js

@@ -0,0 +1 @@
+export {};

package/es/CitySelector/CitySelectorCore.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CitySelectorCoreProps } from './CitySelector.types';
+import './CitySelector.less';
+declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorCoreProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CitySelector;

package/es/CitySelector/CitySelectorCore.js

@@ -0,0 +1,195 @@
+var _excluded = ["className", "title", "selectedCity", "selectedCityGroupName", "currentCity", "currentCityGroupName", "hotCities", "hotCitiesGroupName", "cities", "disableIndex", "touchHandler", "height", "onSelect", "onClose", "ref"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { throttle, useForkRef, useTouchEmulator } from '@bifrostui/utils';
+import { ScrollView } from "../ScrollView";
+import Selector from "./Selector";
+import "./CitySelector.css";
+
+// 误差偏移量
+var DEVIATION_HEIGHT = '6vmin';
+var GPS_TYPE = {
+  title: '定位',
+  code: 'GPS'
+};
+var CURRENT_TYPE = {
+  title: '当前',
+  code: 'CRRT'
+};
+var HOT_CITY_TYPE = {
+  title: '热门',
+  code: 'HOT'
+};
+var prefixCls = 'bui-city-selector';
+var CitySelector = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    pageTitle = props.title,
+    selectedCity = props.selectedCity,
+    _props$selectedCityGr = props.selectedCityGroupName,
+    selectedCityGroupName = _props$selectedCityGr === void 0 ? '当前城市' : _props$selectedCityGr,
+    currentCity = props.currentCity,
+    _props$currentCityGro = props.currentCityGroupName,
+    currentCityGroupName = _props$currentCityGro === void 0 ? '定位城市' : _props$currentCityGro,
+    hotCities = props.hotCities,
+    _props$hotCitiesGroup = props.hotCitiesGroupName,
+    hotCitiesGroupName = _props$hotCitiesGroup === void 0 ? '热门城市' : _props$hotCitiesGroup,
+    cities = props.cities,
+    disableIndex = props.disableIndex,
+    touchHandler = props.touchHandler,
+    height = props.height,
+    onSelect = props.onSelect,
+    onClose = props.onClose,
+    propsRef = props.ref,
+    others = _objectWithoutProperties(props, _excluded);
+  var cityRef = useRef(null);
+  var nodeRef = useForkRef(ref, propsRef, cityRef);
+  useTouchEmulator(cityRef.current);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    codeGroup = _useState2[0],
+    setCodeGroup = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    codeShow = _useState4[0],
+    setCodeShow = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    targetId = _useState6[0],
+    setTargetId = _useState6[1];
+
+  // 提取字母
+  useEffect(function () {
+    if (!cities || (cities === null || cities === void 0 ? void 0 : cities.length) === 0 || codeGroup.length !== 0 || disableIndex) return;
+    var newGroup = [];
+    if (selectedCity) {
+      newGroup.push(CURRENT_TYPE);
+    }
+    if (currentCity) {
+      newGroup.push(GPS_TYPE);
+    }
+    if (hotCities) {
+      newGroup.push(HOT_CITY_TYPE);
+    }
+    cities.forEach(function (item) {
+      newGroup.push(item.groupName.toUpperCase());
+    });
+    setCodeGroup(newGroup);
+  }, [cities, selectedCity, currentCity, hotCities]);
+
+  // 计算每个code的top
+  useEffect(function () {
+    if (codeGroup.length === 0) return;
+    setCodeShow(true);
+  }, [codeGroup]);
+  var selectHandler = function selectHandler(e, city) {
+    onSelect(e, {
+      city: city
+    });
+  };
+  var scrollToCode = function scrollToCode(targetCode) {
+    if (!targetCode) return;
+    setTargetId(function (oldCode) {
+      if (targetCode !== oldCode) return targetCode;
+      return oldCode;
+    });
+  };
+  var touchCbk = function touchCbk(e) {
+    e.stopPropagation();
+    touchHandler === null || touchHandler === void 0 || touchHandler(e, scrollToCode, codeGroup);
+  };
+  var codeClickHandler = function codeClickHandler(rightCode) {
+    setTargetId(rightCode);
+  };
+  var scrollHandler = throttle(function () {
+    if (targetId) {
+      setTargetId(undefined);
+    }
+  }, 500);
+  var closeHandler = function closeHandler(e) {
+    onClose === null || onClose === void 0 || onClose(e);
+  };
+  var renderTitile = function renderTitile(title, titleCode) {
+    var parseTitle = (titleCode || title).toUpperCase();
+    return /*#__PURE__*/React.createElement("div", {
+      className: "select-city-title",
+      id: disableIndex ? '' : parseTitle
+    }, title.toUpperCase());
+  };
+  var renderCity = function renderCity(citys, title, titleCode) {
+    return /*#__PURE__*/React.createElement("div", null, renderTitile(title, titleCode), /*#__PURE__*/React.createElement("div", {
+      className: "select-city-buttons"
+    }, citys.map(function (city, index) {
+      return /*#__PURE__*/React.createElement(Selector, {
+        key: index,
+        city: city,
+        onSelect: selectHandler
+      });
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(prefixCls, className),
+    ref: nodeRef
+  }, others), pageTitle ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, pageTitle, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-btn-close"),
+    onClick: closeHandler
+  }, "\u2715")) : null, /*#__PURE__*/React.createElement(ScrollView, {
+    scrollIntoView: targetId,
+    scrollY: true,
+    className: clsx("".concat(prefixCls, "-scroll-view-container tph"), {
+      'container-has-title': pageTitle
+    }),
+    onScroll: scrollHandler
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-all-city")
+  }, selectedCity ? renderCity([selectedCity], selectedCityGroupName, CURRENT_TYPE.code) : null, currentCity ? renderCity([currentCity], currentCityGroupName, GPS_TYPE.code) : null, (hotCities === null || hotCities === void 0 ? void 0 : hotCities.length) > 0 ? renderCity(hotCities, hotCitiesGroupName, HOT_CITY_TYPE.code) : null, (cities === null || cities === void 0 ? void 0 : cities.length) > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-list-container")
+  }, cities.map(function (item, cityGroupIndex) {
+    if (!(item !== null && item !== void 0 && item.groupName)) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: cityGroupIndex
+    }, renderTitile(item.groupName, item.groupName), /*#__PURE__*/React.createElement("ul", {
+      className: "".concat(prefixCls, "-list")
+    }, item.cities.map(function (city, cityIndex) {
+      return /*#__PURE__*/React.createElement("li", {
+        className: "".concat(prefixCls, "-list-item"),
+        key: cityIndex,
+        onClick: function onClick(e) {
+          selectHandler(e, city);
+        }
+      }, city.name);
+    })));
+  })) : null)), (codeGroup === null || codeGroup === void 0 ? void 0 : codeGroup.length) > 0 && height ? /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-index-container"), {
+      'left-in': codeShow,
+      'city-index-has-title': pageTitle
+    })
+  }, /*#__PURE__*/React.createElement("ul", {
+    onTouchMove: touchCbk,
+    className: "".concat(prefixCls, "-index-list")
+  }, codeGroup.map(function (item, chartIndex) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "".concat(prefixCls, "-index-item"),
+      key: chartIndex,
+      "data-code": item.code || item,
+      onClick: function onClick() {
+        codeClickHandler(item.code || item);
+      },
+      style: {
+        maxHeight: "calc((".concat(height, " - ").concat(DEVIATION_HEIGHT, ") / ").concat(codeGroup.length, ")")
+      }
+    }, item.title || item);
+  }))) : null);
+});
+CitySelector.displayName = 'BuiCitySelector';
+export default CitySelector;

package/es/CitySelector/Selector/index.css

@@ -0,0 +1,11 @@
+.bui-city-selector-item {
+  width: 111px;
+  height: 36px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  margin: 4.5px 0 4.5px 9px;
+  background-color: var(--bui-color-bg-default);
+  font-size: var(--bui-text-size-2);
+}

package/es/CitySelector/Selector/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { cityType } from '../CitySelector.types';
+import './index.less';
+type propsType = {
+    city: cityType;
+    onSelect: (e: React.SyntheticEvent, city: cityType) => void;
+};
+declare const Selector: (props: propsType) => React.JSX.Element;
+export default Selector;

package/es/CitySelector/Selector/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import "./index.css";
+var Selector = function Selector(props) {
+  var city = props.city,
+    onSelect = props.onSelect;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "bui-city-selector-item",
+    onClick: function onClick(e) {
+      onSelect === null || onSelect === void 0 || onSelect(e, city);
+    }
+  }, city.name);
+};
+export default Selector;

package/es/CitySelector/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CitySelector, default } from './CitySelector';
+export * from './CitySelector.types';

package/es/CitySelector/index.js

@@ -0,0 +1,2 @@
+export { default as CitySelector, default } from "./CitySelector";
+export * from "./CitySelector.types";

package/es/CitySelector/miniapp.css

@@ -0,0 +1,4 @@
+.bui-city-scroll-view-container {
+  height: 100%;
+  display: block;
+}