Merge pull request #7 from xiexiejie/city_select_code_2

feat: 新增城市选择组件

packages/bui-core/src/CitySelector/CitySelector.less

@@ -0,0 +1,122 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.bui-city-selector {
+  font-family: var(--bui-font-family);
+  height: 100%;
+  position: relative;
+
+  &-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);
+  }
+
+  &-btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 45px;
+    height: 45px;
+    color: var(--bui-color-fg-muted);
+    text-align: center;
+    font-size: 20px;
+  }
+
+  &-scroll-view-container {
+    height: 100%;
+
+    &.container-has-title {
+      height: calc(100% - 45px);
+    }
+  }
+
+  &-all-city {
+    min-height: 500px;
+    font-size: var(--bui-text-size-2);
+    width: 100%;
+    background: var(--bui-color-bg-view);
+    align-self: flex-start;
+
+    .select-city-buttons {
+      display: flex;
+      flex-flow: wrap;
+      padding-left: 3px;
+      padding-top: 7.5px;
+    }
+
+    .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;
+    }
+  }
+
+  &-list {
+    padding-left: var(--bui-spacing-lg);
+    list-style-type: none;
+  }
+
+  &-list-item {
+    height: 45px;
+    font-size: var(--bui-title-size-4);
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) {
+      border-bottom: 0.5px solid var(--bui-color-border-default);
+    }
+  }
+
+  &-index-container {
+    z-index: 1001;
+    position: absolute;
+    white-space: nowrap;
+    right: 0;
+    top: 50%;
+    width: 40px;
+    will-change: transform;
+    // transform: translate(100%, -50%);
+    transform: translate(0, -50%);
+    transition:
+      opacity 0.2s ease-out,
+      transform 0.2s ease-out;
+
+    &.left-in {
+      opacity: 1;
+      transform: translate(0, -50%);
+    }
+
+    &.city-index-has-title {
+      top: calc(50% + 22.5px);
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      float: left;
+      width: 100%;
+      touch-action: none;
+    }
+
+    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;
+    }
+  }
+}

packages/bui-core/src/CitySelector/CitySelector.miniapp.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Taro from '@tarojs/taro';
+import { CitySelectorProps } from './CitySelector.types';
+import CitySelectorCore from './CitySelectorCore';
+import './miniapp.less';
+
+const CitySelector = React.forwardRef<HTMLDivElement, CitySelectorProps>(
+  (props, ref) => {
+    const { cities } = props;
+    const containerTop = useRef(0);
+    const codeHeight = useRef(0);
+    const [height, setHeight] = useState('');
+
+    const queryContainerTop = (cbk?) => {
+      const query = Taro.createSelectorQuery();
+      query.select('.bui-city-selector-index-container').boundingClientRect();
+      query.exec((res) => {
+        containerTop.current = res[0]?.top;
+        cbk?.();
+      });
+    };
+
+    useEffect(() => {
+      if (cities?.length === 0 || codeHeight.current) return;
+      // 演示获取字母高度
+      setTimeout(() => {
+        const query = Taro.createSelectorQuery();
+        query.select('.bui-city-selector-index-item').boundingClientRect();
+        query.exec((res) => {
+          codeHeight.current = res[0]?.height;
+        });
+      }, 300);
+    }, [cities, height]);
+
+    useEffect(() => {
+      if (!cities?.length || height) return;
+      const { screenHeight } = Taro.getSystemInfoSync();
+      const query = Taro.createSelectorQuery();
+      query
+        .select('.bui-city-selector-scroll-view-container')
+        .boundingClientRect();
+      query.exec((codeRect: any) => {
+        const domHeight = codeRect?.[0]?.height;
+        setHeight(`${(domHeight / screenHeight) * 100}vh`);
+      });
+    }, [cities]);
+
+    const parseIndex = (length, index) => {
+      if (index <= 0) return 0;
+      if (index >= length - 1) return length - 1;
+      return index;
+    };
+
+    const pxToCode = (clientY, scrollToCode, codeGroup) => {
+      let index = Math.floor(
+        (clientY - containerTop.current) / codeHeight.current,
+      );
+      index = parseIndex(codeGroup.length, index);
+      const codeItem = codeGroup[index];
+      scrollToCode(codeItem.code || codeItem);
+    };
+
+    const touchHandler = (event, scrollToCode, codeGroup) => {
+      const { clientY } = event.changedTouches[0];
+      queryContainerTop(() => {
+        pxToCode(clientY, scrollToCode, codeGroup);
+      });
+    };
+
+    return (
+      <CitySelectorCore
+        {...props}
+        ref={ref}
+        touchHandler={touchHandler}
+        height={height}
+      />
+    );
+  },
+);
+
+CitySelector.displayName = 'BuiCitySelector';
+
+export default CitySelector;

packages/bui-core/src/CitySelector/CitySelector.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { CitySelectorProps } from './CitySelector.types';
+import CitySelectorCore from './CitySelectorCore';
+
+const CitySelector = React.forwardRef<HTMLDivElement, CitySelectorProps>(
+  (props, ref) => {
+    const { cities } = props;
+    const [height, setHeight] = useState('');
+    const touchHandler = (e, scrollToCode) => {
+      const t: any = document.elementFromPoint(
+        e.changedTouches[0].clientX,
+        e.changedTouches[0].clientY,
+      );
+      const code = t?.dataset?.code;
+      scrollToCode(code);
+    };
+
+    useEffect(() => {
+      if (!cities?.length || height) return;
+      const screenHeight =
+        window.innerHeight || document.documentElement.clientHeight;
+      const domHeight = document
+        .querySelector('.bui-city-selector-scroll-view-container')
+        ?.getBoundingClientRect().height;
+
+      setHeight(`${(domHeight / screenHeight) * 100}vh`);
+    }, [cities]);
+
+    return (
+      <CitySelectorCore
+        {...props}
+        ref={ref}
+        touchHandler={touchHandler}
+        height={height}
+      />
+    );
+  },
+);
+
+CitySelector.displayName = 'BuiCitySelector';
+export default CitySelector;

packages/bui-core/src/CitySelector/CitySelector.types.ts

@@ -0,0 +1,59 @@
+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;
+};