https://github.com/laclys/drag-select-rc
A React Drag & Drop Selection Component for Table (headless UI component)
https://github.com/laclys/drag-select-rc
headlessui react react-component rollup typescript
Last synced: 7 months ago
JSON representation
A React Drag & Drop Selection Component for Table (headless UI component)
- Host: GitHub
- URL: https://github.com/laclys/drag-select-rc
- Owner: laclys
- License: mit
- Created: 2020-02-01T16:12:56.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T16:24:07.000Z (over 1 year ago)
- Last Synced: 2025-04-01T08:51:43.983Z (10 months ago)
- Topics: headlessui, react, react-component, rollup, typescript
- Language: TypeScript
- Homepage: https://laclys.github.io/drag-select-rc/storybook-static/
- Size: 6.28 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# drag-select-rc
[](https://github.com/laclys/drag-select-rc)
[](https://www.npmjs.com/package/drag-select-rc)
[](https://www.npmjs.com/package/drag-select-rc)
- A drag-select react component(v1.1.0)
[Storybook Demo](https://laclys.github.io/drag-select-rc/storybook-static/)
### Installation
- `npm i drag-select-rc --save`
or
- `npm instal https://github.com/laclys/drag-select-rc.git --save`
### Usage
``` javascript
import React, { useState } from "react";
import DragSelect from "drag-select-rc";
import "./table.scss";
const WEEK_S = ["一", "二", "三", "四", "五", "六", "日"];
export const index = () => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const [cells, setCells] = useState(initCellsFunc());
const changeDrag = (val) => {
action('draged!')
setCells(val)
};
return (
星期/时段
{Array(24)
.fill(null)
.map((item, index) => (
{`${index}-${index + 1}`}
))}
{Array(7)
.fill(null)
.map((item, index) => {
return (
{WEEK_S[index]}
{Array(24)
.fill(null)
.map((ele, idx) => (
))}
);
})}
);
};
// helpers
const initCellsFunc = () => {
let arr = new Array(8); // 25rows
for (let i = 0; i < arr.length; i++) {
arr[i] = new Array(25).fill(true);
}
return arr;
};
```
```scss
// table.scss
$border-color: #d9d9d9;
$disabled-color: #efefef;
$selected-color: #fff6de;
$being-selected-color: #defbff;
.table-drag-select {
width: 100%;
word-break: break-word;
border: 1px solid $border-color;
font-size: 10px;
}
.table-drag-select td {
min-width: 30px;
min-height: 30px;
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;
}
.table-drag-select td.cell-enabled {
background: white;
cursor: cell;
}
.table-drag-select td.cell-disabled {
text-align: center;
background: $disabled-color;
}
.table-drag-select td.cell-selected {
background-color: $selected-color;
}
.table-drag-select td.cell-being-selected {
background-color: $being-selected-color;
}
```
### Dev
- `npm run storybook` run storybook server on http://localhost:6006/
- `npm run build-storybook` build storybook-static
- `npm run build`
### License
- MIT
Have fun 👿
----
### Changelog
1.1.0 (2023.05.15)
- Update `demo page` storybook version(5 -> 7 (Built via @storybook/react-vite)) && refactor `.storybook files` && rebuild `storybook-static`
- Update core npm package(react -> 18..)
- rebuild npm version 1.1.0