(
+ .add('performance (1000)', () => (
+
+ {({ selected, setSelected, }) => (
{
- collisions.forEach(toggleItem);
- }}
- renderContents={({ collisions, ref }) => (
-
- {Array.from(Array(100).keys())
- .map(i => `item-${i}`)
- .map(text => (
- 0
- ? selected.has(text) || collisions.has(text)
- : selected.has(text)
- }
- hovered={
- collisions.size > 0
- ? selected.has(text) && collisions.has(text)
- : null
- }
- >
- {text}
-
- ))}
-
- )}
+ onMouseUp={setSelected}
+ renderContents={(props) => }
/>
)}
- />
+
+ ))
+ .add('performance (5000)', () => (
+
+ {({ selected, setSelected, }) => (
+ }
+ />
+ )}
+
))
.add('scroll area', () => (
- (
+
+ {({ selected, setSelected, }) => (
collisions.forEach(toggleItem)}
- renderContents={({ collisions, ref }) => (
-
- {Array.from(Array(100).keys())
- .map(i => `item-${i}`)
- .map(text => (
- 0
- ? selected.has(text) || collisions.has(text)
- : selected.has(text)
- }
- hovered={
- collisions.size > 0
- ? selected.has(text) && collisions.has(text)
- : null
- }
- >
- {text}
-
- ))}
-
- )}
+ onMouseUp={setSelected}
+ renderContents={(props) => }
/>
)}
- />
+
))
.add('non-data-attr based', () => (