feat: add event param to onStart (#34)

linxianxi · Mar 12, 2024 · 1d144d1 · 1d144d1
1 parent 3f58df8
commit 1d144d1
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 56 deletions.
diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
@@ -2,12 +2,12 @@ import { Descriptions, Radio, Switch } from 'antd';
 import { useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
-const Item = ({ value, rule }: { value: string; rule: 'collision' | 'inclusion' }) => {
+const Item = ({ value, rule }: { value: number; rule: 'collision' | 'inclusion' }) => {
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
  rule,
@@ -17,18 +17,24 @@ const Item = ({ value, rule }: { value: string; rule: 'collision' | 'inclusion'
  <div
  ref={setNodeRef}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: 50,
  height: 50,
  borderRadius: 4,
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
  const [mode, setMode] = useState<'add' | 'remove' | 'reverse'>('add');
  const [selectStartRange, setSelectStartRange] = useState<'all' | 'inside' | 'outside'>('all');
  const [disabled, setDisabled] = useState(false);

diff --git a/docs/examples/cancel.tsx b/docs/examples/cancel.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import Selectable, { SelectableRef, useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
-const Item = ({ value }: { value: string }) => {
+const Item = ({ value }: { value: number }) => {
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
  });
@@ -15,18 +15,24 @@ const Item = ({ value }: { value: string }) => {
  <div
  ref={setNodeRef}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: 50,
  height: 50,
  borderRadius: 4,
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
  const selectableRef = useRef<SelectableRef>(null);
 
  useEffect(() => {

diff --git a/docs/examples/circle-item.tsx b/docs/examples/circle-item.tsx
@@ -1,9 +1,9 @@
 import { useRef, useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
 const checkCircleCollision = (
@@ -48,7 +48,7 @@ const checkCircleCollision = (
 
 const itemSize = 50;
 
-const Item = ({ value }: { value: string }) => {
+const Item = ({ value }: { value: number }) => {
  const itemRef = useRef<HTMLDivElement | null>(null);
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
@@ -77,18 +77,24 @@ const Item = ({ value }: { value: string }) => {
  itemRef.current = ref;
  }}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: itemSize,
  height: itemSize,
  borderRadius: '50%',
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
 
  return (
  <Selectable

diff --git a/docs/examples/click-to-select.tsx b/docs/examples/click-to-select.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
-const Item = ({ value, onClick }: { value: string; onClick: (isSelected: boolean) => void }) => {
+const Item = ({ value, onClick }: { value: number; onClick: (isSelected: boolean) => void }) => {
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
  });
@@ -15,19 +15,25 @@ const Item = ({ value, onClick }: { value: string; onClick: (isSelected: boolean
  <div
  ref={setNodeRef}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: 50,
  height: 50,
  borderRadius: 4,
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
  onClick={() => onClick(isSelected)}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
 
  return (
  <Selectable

diff --git a/docs/examples/item-disabled.tsx b/docs/examples/item-disabled.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
-const Item = ({ value }: { value: string }) => {
- const disabled = ['46', '47', '48'].includes(value);
+const Item = ({ value }: { value: number }) => {
+ const disabled = [46, 47, 48].includes(value);
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
  disabled,
@@ -17,18 +17,24 @@ const Item = ({ value }: { value: string }) => {
  <div
  ref={setNodeRef}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: 50,
  height: 50,
  borderRadius: 4,
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: disabled ? '#999' : isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
 
  return (
  <Selectable

diff --git a/docs/examples/reset-at-end.tsx b/docs/examples/reset-at-end.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
-const Item = ({ value }: { value: string }) => {
+const Item = ({ value }: { value: number }) => {
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
  });
@@ -15,18 +15,24 @@ const Item = ({ value }: { value: string }) => {
  <div
  ref={setNodeRef}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: 50,
  height: 50,
  borderRadius: 4,
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
 
  return (
  <Selectable

diff --git a/docs/examples/reset-at-start.tsx b/docs/examples/reset-at-start.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
-const Item = ({ value }: { value: string }) => {
+const Item = ({ value }: { value: number }) => {
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
  });
@@ -15,18 +15,24 @@ const Item = ({ value }: { value: string }) => {
  <div
  ref={setNodeRef}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: 50,
  height: 50,
  borderRadius: 4,
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
 
  return (
  <Selectable

diff --git a/docs/examples/scroll-container.tsx b/docs/examples/scroll-container.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
-const Item = ({ value }: { value: string }) => {
+const Item = ({ value }: { value: number }) => {
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
  });
@@ -15,18 +15,24 @@ const Item = ({ value }: { value: string }) => {
  <div
  ref={setNodeRef}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: 50,
  height: 50,
  borderRadius: 4,
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
 
  return (
  <Selectable

diff --git a/docs/examples/shift-remove.tsx b/docs/examples/shift-remove.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
-const list: string[] = [];
+const list: number[] = [];
 for (let i = 0; i < 200; i++) {
- list.push(String(i));
+ list.push(i);
 }
 
-const Item = ({ value }: { value: string }) => {
+const Item = ({ value }: { value: number }) => {
  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
  value,
  });
@@ -15,18 +15,24 @@ const Item = ({ value }: { value: string }) => {
  <div
  ref={setNodeRef}
  style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ color: 'white',
  width: 50,
  height: 50,
  borderRadius: 4,
  border: isAdding ? '1px solid #1677ff' : undefined,
  background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
  }}
- />
+ >
+ {value}
+ </div>
  );
 };
 
 export default () => {
- const [value, setValue] = useState<string[]>([]);
+ const [value, setValue] = useState<number[]>([]);
  const [mode, setMode] = useState<'add' | 'remove'>('add');
 
  useEffect(() => {