docs: Init examples

Author: zombieJ

assets/index.less

@@ -1,4 +1,12 @@
 @overflow-prefix-cls: rc-overflow;
 
 .@{overflow-prefix-cls} {
+  display: inline-flex;
+  flex-wrap: nowrap;
+
+  &-item {
+    margin-right: 4px;
+    background: rgba(0, 255, 0, 0.2);
+    padding: 4px 8px;
+  }
 }

examples/basic.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Overflow from '../src';
+import '../assets/index.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;
+}
+
+const Demo = () => {
+  const [data, setData] = React.useState(createData(10));
+
+  return (
+    <div>
+      <select
+        value={data.length}
+        onChange={({ target: { value } }) => {
+          setData(createData(Number(value)));
+        }}
+      >
+        <option value={0}>0</option>
+        <option value={5}>5</option>
+        <option value={10}>10</option>
+        <option value={20}>20</option>
+      </select>
+
+      <div style={{ border: '5px solid green', padding: 8, maxWidth: 300 }}>
+        <Overflow<ItemType> data={data} renderItem={(item) => item.label} />
+      </div>
+    </div>
+  );
+};
+
+export default Demo;

package.json

@@ -46,8 +46,8 @@
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^16.14.2",
+    "@types/react-dom": "^16.9.10",
     "@umijs/fabric": "^2.0.8",
     "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",

src/Overflow.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface OverflowProps<ItemType> {
+  prefixCls?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  data?: ItemType[];
+  itemKey?: React.Key | ((item: ItemType) => React.Key);
+  renderItem?: (item: ItemType) => React.ReactNode;
+}
+
+function Overflow<ItemType = any>(
+  props: OverflowProps<ItemType>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {
+    prefixCls = 'rc-overflow',
+    data = [],
+    renderItem,
+    itemKey,
+    style,
+    className,
+  } = props;
+
+  // ================================= Item =================================
+  const getKey = React.useCallback(
+    (item: ItemType, index: number) => {
+      if (typeof itemKey === 'function') {
+        return itemKey(item);
+      }
+      return (itemKey && (item as any)?.[itemKey]) ?? index;
+    },
+    [itemKey],
+  );
+
+  const mergedRenderItem = React.useCallback(
+    renderItem || ((item: ItemType) => item),
+    [renderItem],
+  );
+
+  // ================================ Render ================================
+  return (
+    <div className={classNames(prefixCls, className)} style={style} ref={ref}>
+      {data.map((item, index) => {
+        const key = getKey(item, index);
+
+        return (
+          <div className={`${prefixCls}-item`} key={key}>
+            {mergedRenderItem(item)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const ForwardOverflow = React.forwardRef(Overflow);
+
+ForwardOverflow.displayName = 'Overflow';
+
+// Convert to generic type
+export default ForwardOverflow as <ItemType = any>(
+  props: React.PropsWithChildren<OverflowProps<ItemType>> & {
+    ref?: React.Ref<HTMLDivElement>;
+  },
+) => React.ReactElement;

src/index.tsx

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