@rainbow-oh/yee-c 0.4.4 → 0.5.0

package/src/Select/options.tsx

@@ -1,5 +1,12 @@
 import clsx from 'clsx';
-import React, { createContext, forwardRef, useRef } from 'react';
+import React, {
+  createContext,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import useVirtualList from '../hooks/useVirtualList';
 import { useLocale } from '../locale';
 import type { OptionsContextValue, OptionsProps } from './interface';
 import Option from './option';
@@ -22,27 +29,151 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
       focusedKey,
       dataTestId,
       multiple,
+      virtual,
+      itemHeight = 32,
+      listHeight = 200,
+      virtualApiRef,
       onSelect,
       ...rest
     } = props;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const componentRef = ref || useRef<HTMLDivElement>(null);
+    const rootRef = useRef<HTMLDivElement | null>(null);
+    // Forward the popup root element to the parent (Select uses it as the
+    // keyboard-nav containerRef) while keeping a stable RefObject for the
+    // effects below.
+    useImperativeHandle(ref, () => rootRef.current as HTMLDivElement, []);
 
+    // Hook is always called (rules of hooks). When `virtual` is off the
+    // returned viewportRef is never attached, so the observer stays idle.
+    const {
+      start,
+      end,
+      offsetY,
+      totalHeight,
+      viewportRef,
+      onScroll,
+      scrollToIndex,
+    } = useVirtualList({
+      itemCount: options.length,
+      itemHeight,
+    });
+
+    // Expose the virtual scroll API to the parent so keyboard navigation
+    // can drive the virtual viewport (replaces scrollIntoView).
+    useEffect(() => {
+      if (!virtual || !virtualApiRef) return;
+      virtualApiRef.current = { scrollToIndex };
+      return () => {
+        if (virtualApiRef.current) {
+          virtualApiRef.current = null;
+        }
+      };
+    }, [virtual, virtualApiRef, scrollToIndex]);
+
+    // Reset the scroll position whenever the option set changes (e.g. after
+    // filtering via search), otherwise the viewport may sit at an offset
+    // where none of the new results are visible.
+    useEffect(() => {
+      if (virtual) {
+        scrollToIndex(0);
+      }
+    }, [options, virtual, scrollToIndex]);
+
+    // Bring the focused option into view on open and whenever it changes.
+    //   - virtual mode: drive the virtual viewport via scrollToIndex.
+    //   - default mode: scrollIntoView on the option's DOM node.
+    // Options owns this (rather than the keyboard hook) so it also covers the
+    // initial open, where the keyboard effect can fire before the popup is
+    // mounted / the virtual API ref is wired up.
+    useEffect(() => {
+      if (options.length === 0) return;
+      if (focusedKey === '') return;
+      const focusedIndex = options.findIndex((o) => o.value === focusedKey);
+      if (focusedIndex < 0) return;
+
+      if (virtual) {
+        scrollToIndex(focusedIndex);
+        return;
+      }
+
+      const container = rootRef.current;
+      if (!container) return;
+      const optionElements = container.querySelectorAll('[role="option"]');
+      const targetElement = optionElements[focusedIndex] as
+        | HTMLElement
+        | undefined;
+      if (targetElement) {
+        targetElement.scrollIntoView({ block: 'nearest' });
+      }
+    }, [focusedKey, virtual, options, scrollToIndex, rootRef]);
+
+    const isEmpty = options.length === 0;
+    const ctxValue = {
+      prefixCls,
+      selectedKeys,
+      focusedKey,
+      multiple,
+      onSelect,
+    };
+
+    // ----- Virtual mode: only render the visible window -----
+    if (virtual && !isEmpty) {
+      const visibleOptions = options.slice(start, end);
+      return (
+        <div
+          {...rest}
+          className={clsx(
+            `${prefixCls}-popup`,
+            `${prefixCls}-popup-virtual`,
+            popupClassName,
+          )}
+          style={popupStyle}
+          ref={rootRef}
+          tabIndex={-1}
+        >
+          <OptionsCtx.Provider value={ctxValue}>
+            <div
+              className={`${prefixCls}-popup-viewport`}
+              ref={viewportRef}
+              onScroll={onScroll}
+              style={{ maxHeight: listHeight, overflowY: 'auto' }}
+            >
+              <div style={{ height: totalHeight, position: 'relative' }}>
+                {visibleOptions.map((option, i) => (
+                  <Option
+                    {...option}
+                    key={option.value}
+                    dataTestId={`${dataTestId}-${start + i}`}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      height: itemHeight,
+                      transform: `translateY(${offsetY + i * itemHeight}px)`,
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          </OptionsCtx.Provider>
+        </div>
+      );
+    }
+
+    // ----- Default mode: render every option (unchanged behavior) -----
     return (
       <div
         {...rest}
         className={clsx(`${prefixCls}-popup`, popupClassName)}
         style={popupStyle}
-        ref={componentRef}
+        ref={rootRef}
         tabIndex={-1}
       >
-        {options.length === 0 ? (
+        {isEmpty ? (
           <div className={`${prefixCls}-empty`}>{select.noData}</div>
         ) : (
-          <OptionsCtx.Provider
-            value={{ prefixCls, selectedKeys, focusedKey, multiple, onSelect }}
-          >
+          <OptionsCtx.Provider value={ctxValue}>
             {options.map((option, index: number) => (
               <Option
                 {...option}

package/src/Select/select.tsx

@@ -1,4 +1,10 @@
-import React, { useContext, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { GlobalContext } from '../Config-Provider';
 import Selector from '../Selector';
 import Trigger from '../Trigger';
@@ -23,6 +29,9 @@ const Select = (baseprops: SelectProps) => {
     disabled,
     onChange,
     onFilter,
+    virtual,
+    itemHeight,
+    listHeight,
     ...rest
   } = props;
 
@@ -50,6 +59,14 @@ const Select = (baseprops: SelectProps) => {
 
   const [open, setOpen] = useState(false);
   const popupRef = useRef<HTMLDivElement>(null);
+  // Holds the virtual list API exposed by <Options>, so keyboard navigation
+  // can drive the virtual viewport (only populated when `virtual` is on).
+  const virtualApiRef = useRef<{
+    scrollToIndex: (index: number) => void;
+  } | null>(null);
+  const handleVirtualScrollToIndex = useCallback((index: number) => {
+    virtualApiRef.current?.scrollToIndex(index);
+  }, []);
 
   const getOptions = (keys: string | number | Array<string | number>) => {
     if (keys === '' || keys === null) {
@@ -135,6 +152,7 @@ const Select = (baseprops: SelectProps) => {
     onClose: () => setOpen(false),
     onOpenChange: handleOpenChange,
     containerRef: popupRef as React.RefObject<HTMLDivElement>,
+    scrollToIndex: virtual ? handleVirtualScrollToIndex : undefined,
   });
 
   const popup = (
@@ -147,6 +165,10 @@ const Select = (baseprops: SelectProps) => {
       dataTestId={rest['data-testid']}
       onSelect={handleSelect}
       ref={popupRef}
+      virtual={virtual}
+      itemHeight={itemHeight}
+      listHeight={listHeight}
+      virtualApiRef={virtualApiRef}
     />
   );
 

package/src/Select/style/index.less

@@ -8,6 +8,17 @@
     overflow: auto;
   }
 
+  // Virtual mode: the popup no longer scrolls itself; the inner viewport does.
+  // Without this override there would be two scrollbars.
+  &-popup-virtual {
+    max-height: none;
+    overflow: visible;
+  }
+
+  &-popup-viewport {
+    overflow-y: auto;
+  }
+
   &-option {
     display: flex;
     padding: var(--yee-select-option-padding);
@@ -37,20 +48,13 @@
     }
   }
 
-  &-empty {
-    padding: var(--yee-select-option-padding);
-  }
-}
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
+  // In virtual mode each option has a fixed inline height; center its content
+  // vertically so it stays aligned regardless of the inherited line-height.
+  &-popup-virtual &-option {
+    align-items: center;
   }
-}
 
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
+  &-empty {
+    padding: var(--yee-select-option-padding);
   }
 }

package/src/Selector/style/index.less

@@ -5,8 +5,7 @@
   box-sizing: border-box;
   width: 100%;
   padding: var(--yee-selector-padding);
-  border: var(--yee-selector-border-width) solid
-    var(--yee-selector-border-color);
+  border: var(--yee-selector-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-selector-border-radius);
 
   &-small {
@@ -145,7 +144,7 @@
 
   &:not(@{pls}-disabled) {
     &:hover {
-      border-color: var(--yee-selector-hover-border-color);
+      border-color: var(--yee-input-hover-border-color);
     }
   }
 
@@ -206,137 +205,3 @@
     }
   }
 }
-
-// .yee-tags-searchable {
-//   cursor: text;
-
-//   .yee-tags-input-wrapper {
-//     width: 100%;
-//     padding: 0;
-//     border: none;
-//     outline: none;
-
-//     &:focus {
-//       border: none;
-//       box-shadow: none;
-//     }
-//   }
-
-//   .yee-tags-icon {
-//     width: auto;
-//   }
-// }
-
-// .yee-tags-single-mode {
-//   height: var(--yee-tags-height);
-
-//   .yee-tags-input-container {
-//     position: absolute;
-//     z-index: -1;
-//     width: 100%;
-//     font-size: var(--yee-tags-input-font-size);
-//     line-height: var(--yee-tags-input-line-height);
-
-//     input {
-//       width: 100%;
-//     }
-//   }
-
-//   &.yee-tags-searchable {
-//     .yee-tags-single-option {
-//       width: 100%;
-//     }
-
-//     .yee-tags-container {
-//       &:focus-within,
-//       &:focus {
-//         .yee-tags-input-container {
-//           z-index: 1;
-//           opacity: var(--yee-tags-input-focus-opacity);
-
-//           &.has-value {
-//             opacity: 1;
-
-//             + .yee-tags-single-option {
-//               display: none;
-//             }
-//           }
-//         }
-
-//         .yee-tags-single-option {
-//           opacity: var(--yee-tags-single-option-focus-opacity);
-//         }
-//       }
-//     }
-//   }
-// }
-
-// .yee-tags-multi-mode {
-//   height: auto;
-//   min-height: var(--yee-tags-multi-min-height);
-
-//   &.yee-tags-searchable {
-//     .yee-tag {
-//       max-width: var(--yee-tags-multi-tag-max-width);
-//       height: var(--yee-tags-multi-tag-height);
-//     }
-//   }
-
-//   .yee-tags-container {
-//     flex-wrap: wrap;
-//   }
-
-//   .yee-tags-input-container {
-//     display: inline-grid;
-//     // color: var(--yee-tags-input-container-font-color);
-//     flex: 1 1 auto;
-//     grid-area: 1 / 1 / 2 / 3;
-//     grid-template-columns: 0 min-content;
-//     box-sizing: border-box;
-//     height: var(--yee-tags-multi-input-height);
-
-//     &::after {
-//       grid-area: 1 / 2 / auto / auto;
-//       min-width: var(--yee-tags-multi-input-after-min-width);
-//       margin: 0;
-//       padding: 0;
-//       font: inherit;
-//       white-space: pre;
-//       border: 0;
-//       outline: 0;
-//       visibility: hidden;
-//       content: attr(data-value) ' ';
-//     }
-
-//     & > input {
-//       grid-area: 1 / 2 / auto / auto;
-//       width: 100%;
-//       min-width: var(--yee-tags-multi-input-min-width);
-//       height: var(--yee-tags-multi-input-height);
-//       margin: 0;
-//       padding: 0;
-//       font: inherit;
-//       background-color: transparent;
-//       border: 0;
-//       outline: 0;
-//       opacity: 1;
-//     }
-//   }
-// }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:hover {
-      border-color: var(--yee-error-color-hover);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/src/Splitter/hooks/useMove.ts

@@ -15,13 +15,13 @@ export default function useMove(
   React.useEffect(() => {
     if (!handler.current) return;
     const ele = handler.current as HTMLElement;
-    const onMouseDown = (e: any) => {
+    const onMouseDown = (e: MouseEvent) => {
       e.preventDefault();
       let x = e.pageX;
       let y = e.pageY;
       setMoving(true);
 
-      const onMouseMove = debounce((e: any) => {
+      const onMouseMove = debounce((e: MouseEvent) => {
         document.body.style.userSelect = 'none';
         document.body.style.cursor =
           direction === 'horizontal' ? 'col-resize' : 'row-resize';

package/src/Table/style/index.less

@@ -23,13 +23,32 @@
           var(--yee-table-tbody-td-borderbottom-color);
       }
     }
+
+    @{pls}-cell {
+      &::before {
+        display: none;
+      }
+    }
   }
 
   &-thead {
     color: var(--yee-table-thead-color);
 
     @{pls}-cell {
+      position: relative;
       background-color: var(--yee-table-thead-bg-color);
+
+      &:not(:last-child):not(@{pls}-expand-col) {
+        &::before {
+          position: absolute;
+          content: '';
+          width: 1.5px;
+          height: 30%;
+          top: 35%;
+          right: 0;
+          background-color: var(--yee-table-head-cell-split-line-color, #eee);
+        }
+      }
     }
 
     &-cell {

package/src/TextArea/style/index.less

@@ -98,20 +98,3 @@
     cursor: not-allowed;
   }
 }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:hover {
-      border-color: var(--yee-error-color-hover);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/src/hooks/index.ts

@@ -16,6 +16,7 @@ import useMount from './useMount';
 import usePrevious from './usePrevious';
 import useUpdateEffect from './useUpdateEffect';
 import useVirtualForm from './useVirtualForm';
+import useVirtualList from './useVirtualList';
 
 export {
   useBreakpoint,
@@ -36,4 +37,5 @@ export {
   usePrevious,
   useUpdateEffect,
   useVirtualForm,
+  useVirtualList,
 };

package/src/hooks/useEvent.ts

@@ -2,13 +2,16 @@ import React from 'react';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export default function useEvent<T extends Function>(callback?: T): T {
-  const ref = React.useRef<any>(undefined);
+  const ref = React.useRef<T | undefined>(undefined);
   ref.current = callback;
 
-  const memoFn = React.useCallback<T>(
-    ((...args: any) => ref.current?.(...args)) as any,
+  const memoFn = React.useCallback(
+    (...args: unknown[]) =>
+      (ref.current as ((...args: unknown[]) => unknown) | undefined)?.(
+        ...args,
+      ),
     [],
-  );
+  ) as unknown as T;
 
   return memoFn;
 }

package/src/hooks/useMergedState.ts

@@ -17,7 +17,7 @@ enum Source {
 type ValueRecord<T> = [T, Source, T];
 
 /** We only think `undefined` is empty */
-function hasValue(value: any) {
+function hasValue<T>(value: T | undefined): value is T {
   return value !== undefined;
 }
 
@@ -50,13 +50,13 @@ export default function useMergedState<T, R = T>(
     } else if (hasValue(defaultValue)) {
       finalValue =
         typeof defaultValue === 'function'
-          ? (defaultValue as any)()
+          ? (defaultValue as () => T)()
           : defaultValue;
       source = Source.PROP;
     } else {
       finalValue =
         typeof defaultStateValue === 'function'
-          ? (defaultStateValue as any)()
+          ? (defaultStateValue as () => T)()
           : defaultStateValue;
       source = Source.INNER;
     }
@@ -94,7 +94,9 @@ export default function useMergedState<T, R = T>(
       const [prevValue, prevSource, prevPrevValue] = prev;
 
       const nextValue: T =
-        typeof updater === 'function' ? (updater as any)(prevValue) : updater;
+        typeof updater === 'function'
+          ? (updater as (origin: T) => T)(prevValue)
+          : updater;
       // Do nothing if value not change
       if (nextValue === prevValue) {
         return prev;