feat: 优化picker组件

package.json

@@ -75,7 +75,7 @@
  "change-case": "^5.4.4",
  "classnames": "^2.5.1",
  "dayjs": "^1.11.13",
- "framer-motion": "^11.5.4",
+ "framer-motion": "^11.11.1",
  "i18next": "^23.15.1",
  "immer": "^10.1.1",
  "js-cookie": "^3.0.5",
@@ -84,7 +84,6 @@
  "rc-cascader": "^3.27.0",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
- "react-geiger": "^1.2.0",
  "react-i18next": "^15.0.0",
  "react-router-dom": "^6.26.2",
  "smooth-scroll-into-view-if-needed": "^2.0.2",

src/components/widgets/wheel/helpers/index.ts

@@ -1,5 +1,5 @@
 import { isNumber, isString } from '@busymango/is-esm';
-import { compact } from '@busymango/utils';
+import { and, compact } from '@busymango/utils';
 
 import type { ReactTargetType } from '@/models';
 import { iFindElement } from '@/utils';
@@ -47,3 +47,13 @@ export const iScrollIntoView = (target?: ReactTargetType) => {
  inline: 'center',
  });
 };
+
+export const isSupportSnape = () =>
+ and(
+ [
+ ['scroll-snap-type', 'y mandatory'],
+ ['scroll-snap-stop', 'normal'],
+ ['scroll-snap-align', 'center'],
+ ] satisfies [string, string][],
+ (args) => CSS.supports(...args)
+ );

src/components/widgets/wheel/index.scss

@@ -13,12 +13,18 @@
  align-items: center;
  justify-content: center;
 
- // scroll-snap-stop: normal;
- // scroll-snap-align: center;
-
  // transform-style: preserve-3d;
 }
 
+.is-scroll-snap {
+ scroll-snap-type: y mandatory;
+
+ & > .option {
+ scroll-snap-stop: normal;
+ scroll-snap-align: center;
+ }
+}
+
 .wheel {
  width: 100%;
  height: 100%;
@@ -35,8 +41,6 @@
  transform-style: preserve-3d;
  scroll-behavior: smooth;
 
- // scroll-snap-type: y mandatory;
-
  -webkit-overflow-scrolling: touch;
 
  &::-webkit-scrollbar {

src/components/widgets/wheel/index.tsx

@@ -13,6 +13,7 @@ import { useControlState } from '../control';
 import {
  identified,
  iScrollIntoView,
+ isSupportSnape,
  iTarget,
  WHEEL_ITEM_ID_NAME,
 } from './helpers';
@@ -62,7 +63,7 @@ const IWheelOption: ReactCFC<IWheelOptionProps> = (props) => {
 };
 
 export const IWheel: React.FC<IWheelProps> = (props) => {
- const { options } = props;
+ const { options, isScrollSnape = isSupportSnape() } = props;
 
  const view = useRef<string>();
 
@@ -81,19 +82,19 @@ export const IWheel: React.FC<IWheelProps> = (props) => {
  iScrollIntoView(element);
  }
  }
- }, 10 * FRAME2MS);
+ }, 0);
 
  useEffect(() => {
  const { current } = container;
- if (current) {
+ if (current && !isScrollSnape) {
  const { starer, cancel } = iEventListener;
  current?.addEventListener('scrollend', starer);
  return () => {
  cancel();
  current?.removeEventListener('scrollend', starer);
  };
  }
- }, [container, iEventListener]);
+ }, [container, iEventListener, isScrollSnape]);
 
  const iScroll = useDebounceFunc(() => {
  const index = options?.findIndex((option, index) => {
@@ -124,7 +125,13 @@ export const IWheel: React.FC<IWheelProps> = (props) => {
  );
 
  return (
- <div ref={container} className={styles.wheel} onScroll={iScroll.starer}>
+ <div
+ ref={container}
+ className={classNames(styles.wheel, {
+ [styles.isScrollSnap]: isScrollSnape,
+ })}
+ onScroll={iScroll.starer}
+ >
  <IWheelOption key={-3} container={container} />
  <IWheelOption key={-2} container={container} />
  <IWheelOption key={-1} container={container} />
@@ -147,15 +154,3 @@ export const IWheel: React.FC<IWheelProps> = (props) => {
  </div>
  );
 };
-
-// useEffect(() => {
-// const { current } = refs.floating;
-// if (open && current) {
-// value?.forEach((e, i) => {
-// const id = identified(e, i);
-// const selector = `[${DATA_ID_NAME}="${id}"]`;
-// const element = current.querySelector(selector);
-// isHTMLElement(element) && iScrollIntoView(element);
-// });
-// }
-// }, [open, value, refs.floating]);

src/components/widgets/wheel/models/index.tsx

@@ -7,6 +7,7 @@ export interface IWheelOptionProps {
 
 export interface IWheelProps {
  options?: ControlOption[];
+ isScrollSnape?: boolean;
  value?: ControlOption['value'];
  onChange?: (value?: ControlOption['value']) => void;
 }