react-component / overflow

📦 Auto collapse box util component
overflow-git-master.react-component.vercel.app
MIT License
51 stars 36 forks source link

display values error when value has more than 2 counts #25

Closed tchen-l closed 2 years ago

tchen-l commented 2 years ago

codesandbox

import Overflow from "../src";
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>
  );
}

const Demo = () => {
  const [responsive, setResponsive] = React.useState(true);
  const [data, setData] = React.useState(createData(2));

  return (
    <div style={{ padding: 32 }}>
      <div
        style={{
          border: "5px solid green",
          padding: 8,
          maxWidth: 100,
          marginTop: 32
        }}
      >
        <Overflow<ItemType>
          data={data}
          renderItem={renderItem}
          renderRest={renderRest}
          maxCount="responsive"
        />
      </div>
    </div>
  );
};

export default Demo;
tchen-l commented 2 years ago

image