fix: box should not exceed the container

linxianxi · Sep 2, 2023 · 765cc47 · 765cc47
1 parent eaddc4b
commit 765cc47
Show file tree

Hide file tree

Showing 29 changed files with 418 additions and 137 deletions.
diff --git a/README.md b/README.md
@@ -46,27 +46,25 @@ A React component that allows you to select elements in the drag area using the
 
 </div>
 
-## 简介
+## Introduction
 
 A React component that allows you to select elements in the drag area using the mouse
 
-## 快速上手
+## Usage
 
-### 安装
-
-推荐使用 `pnpm` 安装
+### Install
 
 ```bash
 pnpm i react-selectable-box
 ```
 
-### 使用
+### Docs
 
 [docs](https://linxianxi.github.io/react-selectable-box/)
 
-## 迭代记录
+## Changelog
 
-详情：[CHANGELOG](https://linxianxi.github.io/react-selectable-box/changelog)
+[CHANGELOG](https://linxianxi.github.io/react-selectable-box/changelog)
 
 <div align="right">
 

diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
@@ -1,4 +1,4 @@
-import { Radio, Space, Switch } from 'antd';
+import { Descriptions, Radio, Switch } from 'antd';
 import React, { useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
 
@@ -17,17 +17,13 @@ const Item = ({ value, rule }: { value: string; rule: 'collision' | 'inclusion'
     <div
       ref={setNodeRef}
       style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
         width: 50,
         height: 50,
+        borderRadius: 4,
         border: isAdding ? '1px solid #1677ff' : undefined,
         background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
       }}
-    >
-      {value}
-    </div>
+    />
   );
 };
 
@@ -40,41 +36,48 @@ export default () => {
 
   return (
     <div>
-      <Space style={{ marginBottom: 20 }} direction="vertical">
-        <div>
-          enable: <Switch checked={enable} onChange={setEnable} />
-        </div>
-        <div>
-          selectFromInside: <Switch checked={selectFromInside} onChange={setSelectFromInside} />
-        </div>
-        <div>
-          rule:
-          <Radio.Group
-            value={rule}
-            onChange={(e) => setRule(e.target.value)}
-            buttonStyle="solid"
-            optionType="button"
-            options={[
-              { label: 'collision', value: 'collision' },
-              { label: 'inclusion', value: 'inclusion' },
-            ]}
-          />
-        </div>
-        <div>
-          mode:
-          <Radio.Group
-            value={mode}
-            onChange={(e) => setMode(e.target.value)}
-            buttonStyle="solid"
-            optionType="button"
-            options={[
-              { label: 'add', value: 'add' },
-              { label: 'remove', value: 'remove' },
-              { label: 'reverse', value: 'reverse' },
-            ]}
-          />
-        </div>
-      </Space>
+      <Descriptions
+        column={1}
+        items={[
+          { label: 'enable', children: <Switch checked={enable} onChange={setEnable} /> },
+          {
+            label: 'selectFromInside',
+            children: <Switch checked={selectFromInside} onChange={setSelectFromInside} />,
+          },
+          {
+            label: 'rule',
+            children: (
+              <Radio.Group
+                value={rule}
+                onChange={(e) => setRule(e.target.value)}
+                buttonStyle="solid"
+                optionType="button"
+                options={[
+                  { label: 'collision', value: 'collision' },
+                  { label: 'inclusion', value: 'inclusion' },
+                ]}
+              />
+            ),
+          },
+          {
+            label: 'mode',
+            children: (
+              <Radio.Group
+                value={mode}
+                onChange={(e) => setMode(e.target.value)}
+                buttonStyle="solid"
+                optionType="button"
+                options={[
+                  { label: 'add', value: 'add' },
+                  { label: 'remove', value: 'remove' },
+                  { label: 'reverse', value: 'reverse' },
+                ]}
+              />
+            ),
+          },
+        ]}
+      />
+
       <Selectable
         disabled={!enable}
         mode={mode}

diff --git a/docs/examples/click-to-select.tsx b/docs/examples/click-to-select.tsx
@@ -15,18 +15,14 @@ const Item = ({ value, onClick }: { value: string; onClick: (isSelected: boolean
     <div
       ref={setNodeRef}
       style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
         width: 50,
         height: 50,
+        borderRadius: 4,
         border: isAdding ? '1px solid #1677ff' : undefined,
         background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
       }}
       onClick={() => onClick(isSelected)}
-    >
-      {value}
-    </div>
+    />
   );
 };
 

diff --git a/docs/examples/item-disabled.tsx b/docs/examples/item-disabled.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import Selectable, { useSelectable } from 'react-selectable-box';
+
+const list: string[] = [];
+for (let i = 0; i < 200; i++) {
+  list.push(String(i));
+}
+
+const Item = ({ value }: { value: string }) => {
+  const disabled = ['46', '47', '48'].includes(value);
+  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
+    value,
+    disabled,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        width: 50,
+        height: 50,
+        borderRadius: 4,
+        border: isAdding ? '1px solid #1677ff' : undefined,
+        background: disabled ? '#999' : isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
+      }}
+    />
+  );
+};
+
+export default () => {
+  const [value, setValue] = useState<React.Key[]>([]);
+
+  return (
+    <Selectable
+      value={value}
+      onEnd={(selectingValue, { added, removed }) => {
+        const result = value.concat(added).filter((i) => !removed.includes(i));
+        setValue(result);
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 20,
+          padding: 20,
+          border: '1px solid #ccc',
+        }}
+      >
+        {list.map((i) => (
+          <Item key={i} value={i} />
+        ))}
+      </div>
+    </Selectable>
+  );
+};
diff --git a/docs/examples/reset-at-end.tsx b/docs/examples/reset-at-end.tsx
@@ -15,17 +15,13 @@ const Item = ({ value }: { value: string }) => {
     <div
       ref={setNodeRef}
       style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
         width: 50,
         height: 50,
+        borderRadius: 4,
         border: isAdding ? '1px solid #1677ff' : undefined,
         background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
       }}
-    >
-      {value}
-    </div>
+    />
   );
 };
 

diff --git a/docs/examples/reset-at-start.tsx b/docs/examples/reset-at-start.tsx
@@ -15,17 +15,13 @@ const Item = ({ value }: { value: string }) => {
     <div
       ref={setNodeRef}
       style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
         width: 50,
         height: 50,
+        borderRadius: 4,
         border: isAdding ? '1px solid #1677ff' : undefined,
         background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
       }}
-    >
-      {value}
-    </div>
+    />
   );
 };
 

diff --git a/docs/examples/scroll-container.tsx b/docs/examples/scroll-container.tsx
@@ -15,17 +15,13 @@ const Item = ({ value }: { value: string }) => {
     <div
       ref={setNodeRef}
       style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
         width: 50,
         height: 50,
+        borderRadius: 4,
         border: isAdding ? '1px solid #1677ff' : undefined,
         background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
       }}
-    >
-      {value}
-    </div>
+    />
   );
 };
 

diff --git a/docs/examples/shift-remove.tsx b/docs/examples/shift-remove.tsx
@@ -15,17 +15,13 @@ const Item = ({ value }: { value: string }) => {
     <div
       ref={setNodeRef}
       style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
         width: 50,
         height: 50,
+        borderRadius: 4,
         border: isAdding ? '1px solid #1677ff' : undefined,
         background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
       }}
-    >
-      {value}
-    </div>
+    />
   );
 };