feat: add vc-overflow

components/vc-overflow/Item.tsx

@@ -13,7 +13,7 @@ import { Key, VueNode } from '../_util/type';
 import PropTypes from '../_util/vue-types';
 
 export default defineComponent({
-  name: 'InternalItem',
+  name: 'Item',
   props: {
     prefixCls: String,
     item: PropTypes.any,

components/vc-overflow/Overflow.tsx

@@ -0,0 +1,393 @@
+import {
+  computed,
+  CSSProperties,
+  defineComponent,
+  HTMLAttributes,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
+import ResizeObserver from '../vc-resize-observer';
+import classNames from '../_util/classNames';
+import { Key, VueNode } from '../_util/type';
+import PropTypes from '../_util/vue-types';
+import { OverflowContextProvider } from './context';
+import Item from './Item';
+import RawItem from './RawItem';
+
+const RESPONSIVE = 'responsive' as const;
+const INVALIDATE = 'invalidate' as const;
+
+function defaultRenderRest<ItemType>(omittedItems: ItemType[]) {
+  return `+ ${omittedItems.length} ...`;
+}
+
+export interface OverflowProps<ItemType> extends HTMLAttributes {
+  prefixCls?: string;
+  data?: ItemType[];
+  itemKey?: Key;
+  /** Used for `responsive`. It will limit render node to avoid perf issue */
+  itemWidth?: number;
+  renderItem?: (item: ItemType) => VueNode;
+  /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
+  renderRawItem?: (item: ItemType, index: number) => VueNode;
+  maxCount?: number | typeof RESPONSIVE | typeof INVALIDATE;
+  renderRest?: VueNode | ((omittedItems: ItemType[]) => VueNode);
+  /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
+  renderRawRest?: (omittedItems: ItemType[]) => VueNode;
+  suffix?: VueNode;
+  component?: any;
+  itemComponent?: any;
+
+  /** @private This API may be refactor since not well design */
+  onVisibleChange?: (visibleCount: number) => void;
+
+  /** When set to `full`, ssr will render full items by default and remove at client side */
+  ssr?: 'full';
+}
+
+const Overflow = defineComponent({
+  name: 'Overflow',
+  inheritAttrs: false,
+  props: {
+    prefixCls: String,
+    data: Array,
+    itemKey: [String, Number, Function] as PropType<Key | ((item: any) => Key)>,
+    /** Used for `responsive`. It will limit render node to avoid perf issue */
+    itemWidth: { type: Number, default: 10 },
+    renderItem: Function as PropType<(item: any) => VueNode>,
+    /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
+    renderRawItem: Function as PropType<(item: any, index: number) => VueNode>,
+    maxCount: [Number, String] as PropType<number | typeof RESPONSIVE | typeof INVALIDATE>,
+    renderRest: Function as PropType<(items: any[]) => VueNode>,
+    /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
+    renderRawRest: Function as PropType<(items: any[]) => VueNode>,
+    suffix: PropTypes.any,
+    component: String,
+    itemComponent: String,
+    /** @private This API may be refactor since not well design */
+    onVisibleChange: Function as PropType<(visibleCount: number) => void>,
+    /** When set to `full`, ssr will render full items by default and remove at client side */
+    ssr: String as PropType<'full'>,
+  },
+  emits: ['visibleChange'],
+  setup(props, { attrs, emit }) {
+    const fullySSR = computed(() => props.ssr === 'full');
+
+    const containerWidth = ref<number>(null);
+    const mergedContainerWidth = computed(() => containerWidth.value || 0);
+    const itemWidths = ref<Map<Key, number>>(new Map<Key, number>());
+    const prevRestWidth = ref(0);
+    const restWidth = ref(0);
+    const suffixWidth = ref(0);
+    const suffixFixedStart = ref<number>(null);
+    const displayCount = ref<number>(null);
+
+    const mergedDisplayCount = computed(() => {
+      if (displayCount.value === null && fullySSR.value) {
+        return Number.MAX_SAFE_INTEGER;
+      }
+
+      return displayCount.value || 0;
+    });
+
+    const restReady = ref(false);
+
+    const itemPrefixCls = computed(() => `${props.prefixCls}-item`);
+
+    // Always use the max width to avoid blink
+    const mergedRestWidth = computed(() => Math.max(prevRestWidth.value, restWidth.value));
+
+    // ================================= Data =================================
+    const isResponsive = computed(() => props.data.length && props.maxCount === RESPONSIVE);
+    const invalidate = computed(() => props.maxCount === INVALIDATE);
+
+    /**
+     * When is `responsive`, we will always render rest node to get the real width of it for calculation
+     */
+    const showRest = computed(
+      () =>
+        isResponsive.value ||
+        (typeof props.maxCount === 'number' && props.data.length > props.maxCount),
+    );
+
+    const mergedData = computed(() => {
+      let items = props.data;
+
+      if (isResponsive.value) {
+        if (containerWidth.value === null && fullySSR.value) {
+          items = props.data;
+        } else {
+          items = props.data.slice(
+            0,
+            Math.min(props.data.length, mergedContainerWidth.value / props.itemWidth),
+          );
+        }
+      } else if (typeof props.maxCount === 'number') {
+        items = props.data.slice(0, props.maxCount);
+      }
+
+      return items;
+    });
+
+    const omittedItems = computed(() => {
+      if (isResponsive) {
+        return props.data.slice(mergedDisplayCount.value + 1);
+      }
+      return props.data.slice(mergedData.value.length);
+    });
+
+    // ================================= Item =================================
+    const getKey = (item: any, index: number) => {
+      if (typeof props.itemKey === 'function') {
+        return props.itemKey(item);
+      }
+      return (props.itemKey && (item as any)?.[props.itemKey]) ?? index;
+    };
+
+    const mergedRenderItem = computed(() => props.renderItem || ((item: any) => item));
+
+    const updateDisplayCount = (count: number, notReady?: boolean) => {
+      displayCount.value = count;
+      if (!notReady) {
+        restReady.value = count < props.data.length - 1;
+
+        emit('visibleChange', count);
+      }
+    };
+
+    // ================================= Size =================================
+    const onOverflowResize = (_: object, element: HTMLElement) => {
+      containerWidth.value = element.clientWidth;
+    };
+
+    const registerSize = (key: Key, width: number | null) => {
+      const clone = new Map(itemWidths.value);
+
+      if (width === null) {
+        clone.delete(key);
+      } else {
+        clone.set(key, width);
+      }
+      itemWidths.value = clone;
+    };
+
+    const registerOverflowSize = (_: Key, width: number | null) => {
+      prevRestWidth.value = restWidth.value;
+      restWidth.value = width!;
+    };
+
+    const registerSuffixSize = (_: Key, width: number | null) => {
+      suffixWidth.value = width!;
+    };
+
+    // ================================ Effect ================================
+    const getItemWidth = (index: number) => {
+      return itemWidths.value.get(getKey(mergedData[index], index));
+    };
+
+    watch(
+      [mergedContainerWidth, itemWidths, restWidth, suffixWidth, () => props.itemKey, mergedData],
+      () => {
+        if (mergedContainerWidth.value && mergedRestWidth.value && mergedData.value) {
+          let totalWidth = suffixWidth.value;
+
+          const len = mergedData.value.length;
+          const lastIndex = len - 1;
+
+          // When data count change to 0, reset this since not loop will reach
+          if (!len) {
+            updateDisplayCount(0);
+            suffixFixedStart.value = null;
+            return;
+          }
+
+          for (let i = 0; i < len; i += 1) {
+            const currentItemWidth = getItemWidth(i);
+
+            // Break since data not ready
+            if (currentItemWidth === undefined) {
+              updateDisplayCount(i - 1, true);
+              break;
+            }
+
+            // Find best match
+            totalWidth += currentItemWidth;
+
+            if (
+              i === lastIndex - 1 &&
+              totalWidth + getItemWidth(lastIndex)! <= mergedContainerWidth.value
+            ) {
+              // Additional check if match the end
+              updateDisplayCount(lastIndex);
+              suffixFixedStart.value = null;
+              break;
+            } else if (totalWidth + mergedRestWidth.value > mergedContainerWidth.value) {
+              // Can not hold all the content to show rest
+              updateDisplayCount(i - 1);
+              suffixFixedStart.value =
+                totalWidth - currentItemWidth - suffixWidth.value + restWidth.value;
+              break;
+            } else if (i === lastIndex) {
+              // Reach the end
+              updateDisplayCount(lastIndex);
+              suffixFixedStart.value = totalWidth - suffixWidth.value;
+              break;
+            }
+          }
+
+          if (props.suffix && getItemWidth(0) + suffixWidth.value > mergedContainerWidth.value) {
+            suffixFixedStart.value = null;
+          }
+        }
+      },
+    );
+
+    return () => {
+      // ================================ Render ================================
+      const displayRest = restReady.value && !!omittedItems.value.length;
+      const {
+        itemComponent,
+        renderRawItem,
+        renderRawRest,
+        renderRest,
+        prefixCls = 'rc-overflow',
+        suffix,
+        component: Component = 'div' as any,
+      } = props;
+      const { class: className, style, ...restAttrs } = attrs;
+      let suffixStyle: CSSProperties = {};
+      if (suffixFixedStart.value !== null && isResponsive.value) {
+        suffixStyle = {
+          position: 'absolute',
+          left: `${suffixFixedStart.value}px`,
+          top: 0,
+        };
+      }
+
+      const itemSharedProps = {
+        prefixCls: itemPrefixCls.value,
+        responsive: isResponsive.value,
+        component: itemComponent,
+        invalidate: invalidate.value,
+      };
+
+      // >>>>> Choice render fun by `renderRawItem`
+      const internalRenderItemNode = renderRawItem
+        ? (item: any, index: number) => {
+            const key = getKey(item, index);
+
+            return (
+              <OverflowContextProvider
+                key={key}
+                value={{
+                  ...itemSharedProps,
+                  order: index,
+                  item,
+                  itemKey: key,
+                  registerSize,
+                  display: index <= mergedDisplayCount.value,
+                }}
+              >
+                {renderRawItem(item, index)}
+              </OverflowContextProvider>
+            );
+          }
+        : (item: any, index: number) => {
+            const key = getKey(item, index);
+
+            return (
+              <Item
+                {...itemSharedProps}
+                order={index}
+                key={key}
+                item={item}
+                renderItem={mergedRenderItem.value}
+                itemKey={key}
+                registerSize={registerSize}
+                display={index <= mergedDisplayCount.value}
+              />
+            );
+          };
+
+      // >>>>> Rest node
+      let restNode: VueNode;
+      const restContextProps = {
+        order: displayRest ? mergedDisplayCount.value : Number.MAX_SAFE_INTEGER,
+        className: `${itemPrefixCls.value}-rest`,
+        registerSize: registerOverflowSize,
+        display: displayRest,
+      };
+
+      if (!renderRawRest) {
+        const mergedRenderRest = renderRest || defaultRenderRest;
+
+        restNode = (
+          <Item
+            {...itemSharedProps}
+            // When not show, order should be the last
+            {...restContextProps}
+          >
+            {typeof mergedRenderRest === 'function'
+              ? mergedRenderRest(omittedItems.value)
+              : mergedRenderRest}
+          </Item>
+        );
+      } else if (renderRawRest) {
+        restNode = (
+          <OverflowContextProvider
+            value={{
+              ...itemSharedProps,
+              ...restContextProps,
+            }}
+          >
+            {renderRawRest(omittedItems.value)}
+          </OverflowContextProvider>
+        );
+      }
+
+      let overflowNode = (
+        <Component
+          class={classNames(!invalidate.value && prefixCls, className)}
+          style={style}
+          {...restAttrs}
+        >
+          {mergedData.value.map(internalRenderItemNode)}
+
+          {/* Rest Count Item */}
+          {showRest.value ? restNode : null}
+
+          {/* Suffix Node */}
+          {suffix && (
+            <Item
+              {...itemSharedProps}
+              order={mergedDisplayCount.value}
+              class={`${itemPrefixCls}-suffix`}
+              registerSize={registerSuffixSize}
+              display
+              style={suffixStyle}
+            >
+              {suffix}
+            </Item>
+          )}
+        </Component>
+      );
+
+      if (isResponsive.value) {
+        overflowNode = <ResizeObserver onResize={onOverflowResize}>{overflowNode}</ResizeObserver>;
+      }
+
+      return overflowNode;
+    };
+  },
+});
+
+Overflow.Item = RawItem;
+Overflow.RESPONSIVE = RESPONSIVE;
+Overflow.INVALIDATE = INVALIDATE;
+
+export default Overflow as typeof Overflow & {
+  readonly Item: typeof RawItem;
+  readonly RESPONSIVE: typeof RESPONSIVE;
+  readonly INVALIDATE: typeof INVALIDATE;
+};

components/vc-overflow/RawItem.tsx

@@ -0,0 +1,44 @@
+import { defineComponent } from 'vue';
+import classNames from '../_util/classNames';
+import PropTypes from '../_util/vue-types';
+import { OverflowContextProvider, useInjectOverflowContext } from './context';
+import Item from './Item';
+
+export default defineComponent({
+  name: 'RawItem',
+  inheritAttrs: false,
+  props: {
+    component: PropTypes.any,
+  },
+  setup(props, { slots, attrs }) {
+    const context = useInjectOverflowContext();
+
+    return () => {
+      // Render directly when context not provided
+      if (!context.value) {
+        const { component: Component = 'div', ...restProps } = props;
+        return (
+          <Component {...restProps} {...attrs}>
+            {slots.default?.()}
+          </Component>
+        );
+      }
+
+      const { className: contextClassName, ...restContext } = context.value;
+      const { class: className, ...restProps } = attrs;
+      // Do not pass context to sub item to avoid multiple measure
+      return (
+        <OverflowContextProvider value={null}>
+          <Item
+            class={classNames(contextClassName, className)}
+            {...restContext}
+            {...restProps}
+            {...props}
+          >
+            {slots.default?.()}
+          </Item>
+        </OverflowContextProvider>
+      );
+    };
+  },
+});

components/vc-overflow/context.ts

@@ -0,0 +1,53 @@
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  inject,
+  InjectionKey,
+  PropType,
+  provide,
+} from 'vue';
+import { Key } from '../_util/type';
+
+export interface OverflowContextProviderValueType {
+  prefixCls: string;
+  responsive: boolean;
+  order: number;
+  registerSize: (key: Key, width: number | null) => void;
+  display: boolean;
+
+  invalidate: boolean;
+
+  // Item Usage
+  item?: any;
+  itemKey?: Key;
+
+  // Rest Usage
+  className?: string;
+}
+
+const OverflowContextProviderKey: InjectionKey<ComputedRef<OverflowContextProviderValueType | null>> = Symbol(
+  'OverflowContextProviderKey',
+);
+
+export const OverflowContextProvider = defineComponent({
+  name: 'OverflowContextProvider',
+  inheritAttrs: false,
+  props: {
+    value: { type: Object as PropType<OverflowContextProviderValueType> },
+  },
+  setup(props, { slots }) {
+    provide(
+      OverflowContextProviderKey,
+      computed(() => props.value),
+    );
+    return () => slots.default?.();
+  },
+});
+
+export const useInjectOverflowContext = (): ComputedRef<OverflowContextProviderValueType | null> => {
+  return inject(
+    OverflowContextProviderKey,
+    computed(() => null),
+  );
+};

components/vc-overflow/examples/basic.tsx

@@ -0,0 +1,98 @@
+import { defineComponent, ref } from 'vue';
+import Overflow from '..';
+import '../assets/index.less';
+import './common.less';
+
+interface ItemType {
+  value: string | number;
+  label: string;
+}
+
+function createData(count: number): ItemType[] {
+  const data: ItemType[] = new Array(count).fill(undefined).map((_, index) => ({
+    value: index,
+    label: `Label ${index}`,
+  }));
+
+  return data;
+}
+
+function renderItem(item: ItemType) {
+  return (
+    <div
+      style={{
+        margin: '0 16px 0 8px',
+        padding: '4px 8px',
+        background: 'rgba(255, 0, 0, 0.2)',
+      }}
+    >
+      {item.label}
+    </div>
+  );
+}
+
+function renderRest(items: ItemType[]) {
+  return (
+    <div
+      style={{
+        margin: '0 16px 0 8px',
+        padding: '4px 8px',
+        background: 'rgba(255, 0, 0, 0.2)',
+      }}
+    >
+      +{items.length}...
+    </div>
+  );
+}
+export default defineComponent({
+  setup() {
+    const responsive = ref(true);
+    const data = ref(createData(1));
+    return () => {
+      return (
+        <div style={{ padding: '32px' }}>
+          <button
+            type="button"
+            onClick={() => {
+              responsive.value != !responsive.value;
+            }}
+          >
+            {responsive.value ? 'Responsive' : 'MaxCount: 6'}
+          </button>
+          <select
+            style={{ width: '200px', height: '32px' }}
+            value={data.value.length}
+            onChange={(e: any) => {
+              data.value = createData(Number(e.target.value));
+            }}
+          >
+            <option value={0}>0</option>
+            <option value={1}>1</option>
+            <option value={2}>2</option>
+            <option value={3}>3</option>
+            <option value={5}>5</option>
+            <option value={10}>10</option>
+            <option value={20}>20</option>
+            <option value={200}>200</option>
+          </select>
+
+          <div
+            style={{
+              border: '5px solid green',
+              padding: '8px',
+              maxWidth: '300px',
+              marginTop: '32px',
+            }}
+          >
+            <Overflow
+              data={data.value}
+              renderItem={renderItem}
+              renderRest={renderRest}
+              maxCount={responsive.value ? 'responsive' : 6}
+            />
+          </div>
+        </div>
+      );
+    };
+  },
+});

components/vc-overflow/index.ts

@@ -1,5 +1,5 @@
-// import Overflow, { OverflowProps } from './Overflow';
+import Overflow, { OverflowProps } from './Overflow';
 
-// export { OverflowProps };
+export { OverflowProps };
 
-// export default Overflow;
+export default Overflow;