feat: 优化selector组件

src/components/widgets/popover/index.tsx

@@ -11,7 +11,7 @@ import {
 } from '@floating-ui/react';
 
 import { container } from '@/init';
-import { iFindElement, size2px } from '@/utils';
+import { iFindElement, iPropagation, size2px } from '@/utils';
 
 import { useControlState } from '../control';
 import { useFloatingMotion } from './hooks/motion';
@@ -78,7 +78,9 @@ export const IPopover = forwardRef<IPopoverRef, IPopoverProps>(
  ref={refs.setFloating}
  className={classNames(styles.wrap, styles.tip)}
  style={floatingStyles}
- {...interax.getFloatingProps()}
+ {...interax.getFloatingProps({
+ onClick: iPropagation,
+ })}
  {...motions}
  >
  <div className={styles.content}>{content}</div>

src/components/widgets/scrollable/index.tsx

@@ -134,7 +134,7 @@ export const Scrollable = forwardRef<ScrollableRef, ScrollableProps>(
  onSelect?.(index, iSelectedList);
  }}
  >
- {render?.option(element, { isActive, isSelected })}
+ {render?.option(element, { isActive, isSelected, index })}
  </div>
  );
  };

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

@@ -13,6 +13,7 @@ export type IScrollableEmptyRender = ReactRender<IEmptyWrapProps, PlainObject>;
 export type IScrollableOptionRender = ReactRender<
  ControlOption,
  {
+ index: number;
  isActive: boolean;
  isSelected: boolean;
  }

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

@@ -69,6 +69,7 @@ export type ISelectorChipRender = ReactRender<
 
 export type ISelectorOptionRender = ReactRender<
  {
+ index: number;
  className: string;
  isActive: boolean;
  isSelected: boolean;

src/components/widgets/selector/selector.tsx

@@ -365,14 +365,15 @@ export const ISelector = forwardRef<ISelectorRef, ISelectorProps>(
  className: styles.scrollable,
  render: {
  empty: ifnot(render?.empty && iEmptyRender),
- option: (option, { isActive, isSelected }) =>
+ option: (option, { isActive, isSelected, index }) =>
  (render?.option ?? iOptionRender)(
  {
  option,
  className: classNames(styles.option, {
  [styles.active]: isActive,
  [styles.selected]: isSelected,
  }),
+ index,
  isActive,
  isSelected,
  },

src/examples/selector/custom.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Fragment } from 'react/jsx-runtime';
+import { Fragment, useState } from 'react';
+import { motion } from 'framer-motion';
 import { produce } from 'immer';
 import { create } from 'zustand';
 
@@ -68,8 +68,16 @@ const options = [
 const useSelectorStore = create<{
  options: ControlOption[];
  creator: (option: ControlOption) => void;
+ mutation: (index: number, recipe: (option: ControlOption) => void) => void;
 }>((set) => ({
  options,
+ mutation: (index, recipe) => {
+ set(
+ produce(({ options }: { options: ControlOption[] }) => {
+ recipe(options[index]);
+ })
+ );
+ },
  creator: (option) => {
  set(
  produce(({ options }: { options: ControlOption[] }) => {
@@ -104,7 +112,7 @@ const iChipRender: ISelectorChipRender = (
 };
 
 const iOptionRender: ISelectorOptionRender = (
- { option, className },
+ { option, className, index },
  { keyword }
 ) => (
  <IFlex align="center" className={className} justify="space-between">
@@ -128,28 +136,41 @@ const iOptionRender: ISelectorOptionRender = (
  }}
  >
  {iColorDisc.map((color) => (
- <div
+ <motion.div
  key={color}
  style={{
  cursor: 'pointer',
  position: 'relative',
  backgroundColor: color,
  borderRadius: 'var(--border-radius-02)',
  }}
- onClick={iPropagation}
+ onClick={() => {
+ useSelectorStore.getState().mutation(index, (opt) => {
+ opt.color = color;
+ });
+ }}
  >
  <IWaveShell>
  {(ref) => (
- <div
+ <motion.div
  ref={ref}
+ animate={{
+ scale: option.color === color ? 1.1 : 1,
+ borderColor: ifnot(
+ option.color === color && `var(--border-color-active)`
+ ),
+ }}
  style={{
  width: '1em',
  height: '1em',
+ borderWidth: 1,
+ borderStyle: 'solid',
+ borderRadius: 'var(--border-radius-02)',
  }}
  />
  )}
  </IWaveShell>
- </div>
+ </motion.div>
  ))}
  </IFlex>
  }