@rainbow-oh/yee-c 0.1.0

package/src/TableSelect/table-select.tsx

@@ -0,0 +1,214 @@
+import React, { startTransition, useContext, useMemo, useState } from 'react';
+import { GlobalContext } from '../Config-Provider';
+import useMergedState from '../hooks/useMergedState';
+import Selector from '../Selector';
+import type { TagType } from '../Selector/interface';
+import { tagsAttributes } from '../Selector/selector';
+import { SelectionKeyType } from '../Table/interface';
+import Trigger from '../Trigger';
+import mergeContextToProps from '../utils/mergeContextToProps';
+import omit from '../utils/omit';
+import pick from '../utils/pick';
+import type { InternalTableProps, TableSelectProps } from './interface';
+import InternalTable from './internal-table';
+import './style/index.less';
+
+const handleState = (
+  value: SelectionKeyType | SelectionKeyType[] | undefined,
+) => {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return [value];
+  } else if (Array.isArray(value)) {
+    return value;
+  } else {
+    return [];
+  }
+};
+
+const TableSelect = (baseprops: TableSelectProps) => {
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+
+  const { tableselect } = useContext(GlobalContext);
+  const props = mergeContextToProps(baseprops, tableselect);
+
+  const {
+    prefixCls = 'yee-table-select',
+    value,
+    defaultValue,
+    placement = 'bottomLeft',
+    disabled,
+    rowSelection,
+    dataSource,
+    rowKey = 'id',
+    optionLabelProp = 'name',
+    allowClear = true,
+    closable = true,
+    searchable = true,
+    searchOnInput = true,
+    placeholder,
+    onChange,
+    onSearch,
+    onOpenChange,
+    ...rest
+  } = props;
+
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+
+  const [mergedValue, setMergedValue] = useMergedState<
+    SelectionKeyType | SelectionKeyType[] | undefined,
+    SelectionKeyType[]
+  >([], {
+    value,
+    defaultValue,
+    handleState,
+  });
+
+  const selectionType = rowSelection?.type ? rowSelection.type : 'radio';
+
+  const onVisibleChange = (newVisible: boolean) => {
+    setOpen(newVisible);
+    onOpenChange?.(newVisible);
+  };
+
+  const selectorOptions = useMemo(() => {
+    if (!mergedValue || mergedValue.length === 0) return [];
+    const filtered = dataSource.filter((item) => {
+      const key = typeof rowKey === 'function' ? rowKey(item) : item[rowKey];
+      return mergedValue.includes(key);
+    });
+
+    const translated = filtered.map((item) => ({
+      value: typeof rowKey === 'function' ? rowKey(item) : item[rowKey],
+      label:
+        typeof optionLabelProp === 'function'
+          ? optionLabelProp(item)
+          : item[optionLabelProp],
+    }));
+
+    if (searchValue) {
+      return translated.filter((option) =>
+        option.label.toLowerCase().includes(searchValue.toLowerCase()),
+      );
+    }
+    return translated;
+  }, [mergedValue, searchValue, dataSource, optionLabelProp]);
+
+  const handleSearch = (
+    value: string,
+    e?: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setSearchValue(value);
+    if (searchOnInput) {
+      onSearch?.(value, e);
+    }
+  };
+
+  const clearSearchValue = () => {
+    setSearchValue('');
+    if (searchValue) {
+      onSearch?.('', undefined);
+    }
+  };
+
+  const onSelectChange = (
+    selectedRowKeys: SelectionKeyType | Array<SelectionKeyType>,
+    selectedRows: object,
+  ) => {
+    setMergedValue(selectedRowKeys);
+
+    const keys =
+      selectionType === 'radio' && Array.isArray(selectedRowKeys)
+        ? selectedRowKeys[0]
+        : selectedRowKeys;
+    const rows =
+      selectionType === 'radio' && !Array.isArray(selectedRows)
+        ? selectedRows
+        : (selectedRows as unknown as Array<unknown>);
+
+    onChange?.(keys, rows);
+
+    startTransition(() => {
+      clearSearchValue();
+    });
+  };
+
+  const onTagRemove = (obj: TagType) => {
+    const keys = [
+      ...(mergedValue as SelectionKeyType[]).filter((k) => k !== obj?.value),
+    ];
+    setMergedValue([...keys]);
+    const renderKeys =
+      keys.length === 0 ? (selectionType === 'checkbox' ? [] : '') : keys;
+    onChange?.(renderKeys, undefined);
+  };
+
+  const tableProps = omit(
+    {
+      ...rest,
+      prefixCls,
+      rowSelection: {
+        ...props.rowSelection,
+        onChange: onSelectChange,
+        selectedRowKeys: mergedValue,
+      },
+      dataSource,
+    },
+    [
+      'searchable',
+      'allowClear',
+      'placeholder',
+      'value',
+      'closable',
+      'onSearch',
+      'onBlur',
+      'onRemove',
+    ],
+  ) as InternalTableProps;
+
+  const selectorProps = {
+    ...pick(rest, tagsAttributes),
+    mode: (selectionType === 'radio' ? undefined : 'multiple') as
+      | 'multiple'
+      | 'tags'
+      | undefined,
+    options: selectorOptions,
+    open: open,
+    disabled: disabled,
+    value: searchValue,
+    selectedKeys: mergedValue,
+    onSearch: handleSearch,
+    onRemove: onTagRemove,
+    onOpenChange: (open: boolean) => {
+      if (!open) {
+        clearSearchValue();
+      }
+    },
+    searchable: searchable,
+    allowClear: allowClear,
+    closable: closable,
+    placeholder: placeholder,
+  };
+
+  const renderPopup = () => (
+    <InternalTable {...tableProps} value={value} rowKey={rowKey} />
+  );
+
+  return (
+    <Trigger
+      trigger="click"
+      popupClassName={`${prefixCls}-popup`}
+      popup={renderPopup()}
+      placement={placement}
+      hideOnClick={selectionType === 'radio' ? true : false}
+      onOpenChange={onVisibleChange}
+      stretch="minWidth"
+    >
+      <Selector {...selectorProps} />
+    </Trigger>
+  );
+};
+
+TableSelect.displayName = 'TableSelect';
+
+export default TableSelect;

package/src/Tabs/demo/basic.tsx

@@ -0,0 +1,94 @@
+import { Tabs } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => {
+  const items = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab 2',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+    {
+      key: '4',
+      label: 'Tab 4',
+      children: 'Content of Tab Pane 4',
+    },
+    {
+      key: '5',
+      label: 'Tab 5',
+      children: 'Content of Tab Pane 5',
+    },
+    {
+      key: '6',
+      label: 'Tab 6',
+      children: 'Content of Tab Pane 6',
+    },
+    {
+      key: '7',
+      label: 'Tab 7',
+      children: 'Content of Tab Pane 7',
+    },
+    {
+      key: '8',
+      label: 'Tab 8',
+      children: 'Content of Tab Pane 8',
+    },
+    {
+      key: '9',
+      label: 'Tab 9',
+      children: 'Content of Tab Pane 9',
+    },
+    {
+      key: '10',
+      label: 'Tab 10',
+      children: 'Content of Tab Pane 10',
+    },
+    {
+      key: '11',
+      label: 'Tab 11',
+      children: 'Content of Tab Pane 11',
+    },
+    {
+      key: '12',
+      label: 'Tab 12',
+      children: 'Content of Tab Pane 12',
+    },
+    {
+      key: '13',
+      label: 'Tab 13',
+      children: 'Content of Tab Pane 13',
+    },
+    {
+      key: '14',
+      label: 'Tab 14',
+      children: 'Content of Tab Pane 14',
+    },
+    {
+      key: '15',
+      label: 'Tab 15',
+      children: 'Content of Tab Pane 15',
+    },
+    {
+      key: '16',
+      label: 'Tab 16',
+      children: 'Content of Tab Pane 16',
+    },
+    {
+      key: '17',
+      label: 'Tab 17',
+      children: 'Content of Tab Pane 17',
+    },
+  ];
+
+  return <Tabs defaultActiveKey="1" items={items} />;
+};

package/src/Tabs/demo/controlled.tsx

@@ -0,0 +1,53 @@
+import { Button, Space, Tabs } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const [activeKey, setActiveKey] = useState('1');
+
+  const items = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab 2',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+  ];
+
+  const handleChange = (key: string | number) => {
+    setActiveKey(key as string);
+  };
+
+  const handlePrev = () => {
+    const currentIndex = items.findIndex((item) => item.key === activeKey);
+    if (currentIndex > 0) {
+      setActiveKey(items[currentIndex - 1].key);
+    }
+  };
+
+  const handleNext = () => {
+    const currentIndex = items.findIndex((item) => item.key === activeKey);
+    if (currentIndex < items.length - 1) {
+      setActiveKey(items[currentIndex + 1].key);
+    }
+  };
+
+  return (
+    <>
+      <Space style={{ marginBottom: 16 }}>
+        <Button onClick={handlePrev}>Previous</Button>
+        <Button onClick={handleNext}>Next</Button>
+      </Space>
+
+      <Tabs activeKey={activeKey} items={items} onChange={handleChange} />
+    </>
+  );
+};

package/src/Tabs/demo/editable.tsx

@@ -0,0 +1,57 @@
+import { Tabs } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const initialItems = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab 2',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+  ];
+
+  const [items, setItems] = useState(initialItems);
+  const [activeKey, setActiveKey] = useState('1');
+
+  const onEdit = (type: 'add' | 'remove', key?: string | number) => {
+    if (type === 'add') {
+      const newActiveKey = `${items.length + 1}`;
+      const newItems = [
+        ...items,
+        {
+          key: newActiveKey,
+          label: `New Tab ${items.length + 1}`,
+          children: `Content of New Tab ${items.length + 1}`,
+        },
+      ];
+      setItems(newItems);
+      setActiveKey(newActiveKey);
+    } else if (type === 'remove' && key) {
+      const newItems = items.filter((item) => item.key !== key);
+      setItems(newItems);
+      if (key === activeKey && newItems.length > 0) {
+        setActiveKey(newItems[0].key);
+      }
+    }
+  };
+
+  return (
+    <Tabs
+      activeKey={activeKey}
+      items={items}
+      type="editable-card"
+      onEdit={onEdit}
+      onChange={(key) => setActiveKey(key as string)}
+    />
+  );
+};

package/src/Tabs/demo/extra.tsx

@@ -0,0 +1,31 @@
+import { Button, Tabs } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => {
+  const items = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab 2',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+  ];
+
+  const tabBarExtraContent = {
+    prefix: <Button>Left Extra</Button>,
+    suffix: <Button type="primary">Right Extra</Button>,
+  };
+
+  return (
+    <Tabs defaultActiveKey="1" items={items} headerExtra={tabBarExtraContent} />
+  );
+};

package/src/Tabs/demo/position.tsx

@@ -0,0 +1,48 @@
+import { Radio, Space, Tabs } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const [position, setPosition] = useState<'top' | 'bottom' | 'left' | 'right'>(
+    'top',
+  );
+
+  const items = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab 2',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+  ];
+
+  return (
+    <>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Radio.Group
+          value={position}
+          onChange={(e) =>
+            setPosition(e as 'top' | 'bottom' | 'left' | 'right')
+          }
+          style={{ marginBottom: 16 }}
+          options={[
+            { value: 'top', label: 'Top' },
+            { value: 'bottom', label: 'Bottom' },
+            { value: 'left', label: 'Left' },
+            { value: 'right', label: 'Right' },
+          ]}
+        ></Radio.Group>
+
+        <Tabs defaultActiveKey="1" items={items} position={position} />
+      </Space>
+    </>
+  );
+};

package/src/Tabs/demo/type.tsx

@@ -0,0 +1,24 @@
+import { Tabs } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => {
+  const items = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab 2',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+  ];
+
+  return <Tabs defaultActiveKey="1" items={items} type="card" />;
+};

package/src/Tabs/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useActiveBar';
+export * from './useContainerResize';
+export * from './useDropdownVisibility';
+export * from './useNavListMove';
+export * from './useTabScroll';

package/src/Tabs/hooks/useActiveBar.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+interface UseActiveBarOptions {
+  direction: 'horizontal' | 'vertical';
+  activeKey: string | number;
+  activetab: React.RefObject<HTMLElement | null>;
+  activebar: React.RefObject<HTMLDivElement | null>;
+  enabled: boolean;
+}
+
+export function useActiveBar({
+  direction,
+  activeKey,
+  activetab,
+  activebar,
+  enabled,
+}: UseActiveBarOptions) {
+  const rafIdRef = useRef<number>(0);
+
+  const moveActiveBar = useCallback(() => {
+    const bar = activebar.current;
+    const tab = activetab.current;
+
+    if (!bar || !tab || !enabled) return;
+
+    const rect = tab.getBoundingClientRect();
+    const isHorizontal = direction === 'horizontal';
+
+    if (isHorizontal) {
+      bar.style.width = `${rect.width}px`;
+      bar.style.transform = `translateX(${tab.offsetLeft}px)`;
+    } else {
+      bar.style.height = `${rect.height}px`;
+      bar.style.transform = `translateY(${tab.offsetTop}px)`;
+    }
+  }, [direction, activetab, activebar, enabled]);
+
+  useEffect(() => {
+    // Cancel previous RAF
+    if (rafIdRef.current) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+
+    // Use RAF to ensure DOM update is complete
+    rafIdRef.current = requestAnimationFrame(() => {
+      moveActiveBar();
+    });
+
+    return () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+    };
+  }, [activeKey, moveActiveBar]);
+
+  return moveActiveBar;
+}

package/src/Tabs/hooks/useContainerResize.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect } from 'react';
+import debounce from '../../utils/debounce';
+
+export function useContainerResize(
+  containerRef: React.RefObject<HTMLElement | null>,
+  onResize: () => void,
+  delay = 300,
+) {
+  const debouncedResize = useCallback(debounce(onResize, delay), [
+    onResize,
+    delay,
+  ]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // Check if browser supports ResizeObserver
+    if (typeof ResizeObserver === 'undefined') {
+      console.warn('ResizeObserver is not supported in this browser');
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === container) {
+          debouncedResize();
+        }
+      }
+    });
+
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef, debouncedResize]);
+}

package/src/Tabs/hooks/useDropdownVisibility.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface UseDropdownVisibilityOptions {
+  direction: 'horizontal' | 'vertical';
+  navContainer: React.RefObject<HTMLDivElement | null>;
+  navList: React.RefObject<HTMLDivElement | null>;
+  itemsLength: number;
+}
+
+export function useDropdownVisibility({
+  direction,
+  navContainer,
+  navList,
+  itemsLength,
+}: UseDropdownVisibilityOptions) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const checkVisibility = useCallback(() => {
+    const container = navContainer.current;
+    const list = navList.current;
+
+    if (!container || !list) {
+      setIsVisible(false);
+      return;
+    }
+
+    const isHorizontal = direction === 'horizontal';
+    const containerSize = isHorizontal
+      ? container.clientWidth
+      : container.clientHeight;
+    const listSize = isHorizontal ? list.scrollWidth : list.scrollHeight;
+
+    setIsVisible(listSize > containerSize);
+  }, [direction, navContainer, navList]);
+
+  useEffect(() => {
+    // Delay check to ensure DOM rendering is complete
+    const timeoutId = setTimeout(checkVisibility, 0);
+    return () => clearTimeout(timeoutId);
+  }, [checkVisibility, itemsLength]);
+
+  return { isVisible, checkVisibility };
+}