mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(table): component done
This commit is contained in:
Junior Garcia
parent
316acb48c5
commit
535ac18ec7
@ -1,5 +1,35 @@
|
||||
# @nextui-org/accordion
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/accordion",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/avatar
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/avatar",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
|
||||
"keywords": [
|
||||
"avatar"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/badge
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/badge",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
|
||||
"keywords": [
|
||||
"badge"
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
# @nextui-org/button
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/button",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Buttons allow users to perform actions and choose with a single tap.",
|
||||
"keywords": [
|
||||
"button"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/card
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/card",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
||||
"keywords": [
|
||||
"card"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/checkbox
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/checkbox",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
||||
"keywords": [
|
||||
"checkbox"
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/chip
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/chip",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
|
||||
"keywords": [
|
||||
"chip"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/code
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/code",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Code is a component used to display inline code.",
|
||||
"keywords": [
|
||||
"code"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/drip
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/drip",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
|
||||
"keywords": [
|
||||
"drip"
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
# @nextui-org/dropdown
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/dropdown",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "A dropdown displays a list of actions or options that a user can choose.",
|
||||
"keywords": [
|
||||
"dropdown"
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/image
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-image@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/image",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "A simple image component",
|
||||
"keywords": [
|
||||
"image"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/input
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/input",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "The input component is designed for capturing user input within a text field.",
|
||||
"keywords": [
|
||||
"input"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/link
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/link",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
|
||||
"keywords": [
|
||||
"link"
|
||||
|
||||
@ -1,5 +1,35 @@
|
||||
# @nextui-org/modal
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-disclosure@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/modal",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
|
||||
"keywords": [
|
||||
"modal"
|
||||
|
||||
@ -1,5 +1,33 @@
|
||||
# @nextui-org/navbar
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-scroll-position@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/navbar",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
|
||||
"keywords": [
|
||||
"navbar"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/pagination
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-pagination@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-pagination@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/pagination",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
|
||||
"keywords": [
|
||||
"pagination"
|
||||
|
||||
@ -1,5 +1,35 @@
|
||||
# @nextui-org/popover
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/popover",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "A popover is an overlay element positioned relative to a trigger.",
|
||||
"keywords": [
|
||||
"popover"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/progress
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-is-mounted@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/progress",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
|
||||
"keywords": [
|
||||
"progress"
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/radio
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/radio",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
|
||||
"keywords": [
|
||||
"radio"
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/snippet
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-clipboard@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/snippet",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Display a snippet of copyable code for the command line.",
|
||||
"keywords": [
|
||||
"snippet"
|
||||
|
||||
23
packages/components/spacer/CHANGELOG.md
Normal file
23
packages/components/spacer/CHANGELOG.md
Normal file
@ -0,0 +1,23 @@
|
||||
# @nextui-org/spacer
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spacer",
|
||||
"version": "2.0.0-beta.1",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
|
||||
"keywords": [
|
||||
"spacer"
|
||||
|
||||
@ -6,6 +6,8 @@ import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {clsx, dataAttr, ReactRef} from "@nextui-org/shared-utils";
|
||||
import {useMemo} from "react";
|
||||
|
||||
import {spacing, Space} from "./utils";
|
||||
|
||||
export interface UseSpacerProps extends HTMLNextUIProps<"span", SpacerVariantProps> {
|
||||
/**
|
||||
* Ref to the DOM node.
|
||||
@ -14,17 +16,21 @@ export interface UseSpacerProps extends HTMLNextUIProps<"span", SpacerVariantPro
|
||||
/**
|
||||
* The x-axis margin.
|
||||
* @default 1
|
||||
*
|
||||
* @see https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
|
||||
*/
|
||||
x?: number;
|
||||
x?: Space;
|
||||
/**
|
||||
* The y-axis margin.
|
||||
* @default 1
|
||||
*
|
||||
* @see https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
|
||||
*/
|
||||
y?: number;
|
||||
y?: Space;
|
||||
}
|
||||
|
||||
export const getMargin = (num: number): string => {
|
||||
return `calc(${num * 15.25}pt + 1px * ${num - 1})`;
|
||||
export const getMargin = (value: Space) => {
|
||||
return spacing[value] ?? value;
|
||||
};
|
||||
|
||||
export function useSpacer(originalProps: UseSpacerProps) {
|
||||
|
||||
38
packages/components/spacer/src/utils.ts
Normal file
38
packages/components/spacer/src/utils.ts
Normal file
@ -0,0 +1,38 @@
|
||||
export const spacing = {
|
||||
px: "1px",
|
||||
0: "0px",
|
||||
0.5: "0.125rem",
|
||||
1: "0.25rem",
|
||||
1.5: "0.375rem",
|
||||
2: "0.5rem",
|
||||
2.5: "0.625rem",
|
||||
3: "0.75rem",
|
||||
3.5: "0.875rem",
|
||||
4: "1rem",
|
||||
5: "1.25rem",
|
||||
6: "1.5rem",
|
||||
7: "1.75rem",
|
||||
8: "2rem",
|
||||
9: "2.25rem",
|
||||
10: "2.5rem",
|
||||
11: "2.75rem",
|
||||
12: "3rem",
|
||||
14: "3.5rem",
|
||||
16: "4rem",
|
||||
20: "5rem",
|
||||
24: "6rem",
|
||||
28: "7rem",
|
||||
32: "8rem",
|
||||
36: "9rem",
|
||||
40: "10rem",
|
||||
44: "11rem",
|
||||
48: "12rem",
|
||||
52: "13rem",
|
||||
56: "14rem",
|
||||
60: "15rem",
|
||||
64: "16rem",
|
||||
72: "18rem",
|
||||
80: "20rem",
|
||||
96: "24rem",
|
||||
};
|
||||
export type Space = keyof typeof spacing;
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/spinner
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -11,7 +11,7 @@ describe("Spinner", () => {
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
const ref = React.createRef<HTMLElement>();
|
||||
|
||||
render(<Spinner ref={ref} />);
|
||||
expect(ref.current).not.toBeNull();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/spinner",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Loaders express an unspecified wait time or display the length of a process.",
|
||||
"keywords": [
|
||||
"loading",
|
||||
|
||||
@ -2,7 +2,7 @@ import {forwardRef} from "@nextui-org/system";
|
||||
|
||||
import {UseSpinnerProps, useSpinner} from "./use-spinner";
|
||||
|
||||
export interface SpinnerProps extends Omit<UseSpinnerProps, "ref"> {}
|
||||
export interface SpinnerProps extends UseSpinnerProps {}
|
||||
|
||||
const Spinner = forwardRef<SpinnerProps, "div">((props, ref) => {
|
||||
const {domRef, slots, classNames, label, getSpinnerProps} = useSpinner({ref, ...props});
|
||||
@ -16,6 +16,6 @@ const Spinner = forwardRef<SpinnerProps, "div">((props, ref) => {
|
||||
);
|
||||
});
|
||||
|
||||
Spinner.displayName = "NextUI.Loading";
|
||||
Spinner.displayName = "NextUI.Spinner";
|
||||
|
||||
export default Spinner;
|
||||
|
||||
@ -10,7 +10,7 @@ export interface UseSpinnerProps extends HTMLNextUIProps<"div", SpinnerVariantPr
|
||||
/**
|
||||
* Ref to the DOM node.
|
||||
*/
|
||||
ref?: ReactRef<HTMLDivElement | null>;
|
||||
ref?: ReactRef<HTMLElement | null>;
|
||||
/**
|
||||
* Spinner label, in case you passed it will be used as `aria-label`.
|
||||
*/
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
# @nextui-org/switch
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/switch",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
|
||||
"keywords": [
|
||||
"switch"
|
||||
|
||||
29
packages/components/table/CHANGELOG.md
Normal file
29
packages/components/table/CHANGELOG.md
Normal file
@ -0,0 +1,29 @@
|
||||
# @nextui-org/table
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-icons@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
@ -1,19 +1,247 @@
|
||||
import * as React from "react";
|
||||
import {render} from "@testing-library/react";
|
||||
import {act, render} from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import {Table} from "../src";
|
||||
import {Table, TableHeader, TableCell, TableColumn, TableBody, TableRow} from "../src";
|
||||
|
||||
const columns = [
|
||||
{name: "Foo", key: "foo"},
|
||||
{name: "Bar", key: "bar"},
|
||||
{name: "Baz", key: "baz"},
|
||||
];
|
||||
|
||||
let items = [
|
||||
{test: "Test 1", foo: "Foo 1", bar: "Bar 1", yay: "Yay 1", baz: "Baz 1"},
|
||||
{test: "Test 2", foo: "Foo 2", bar: "Bar 2", yay: "Yay 2", baz: "Baz 2"},
|
||||
];
|
||||
|
||||
describe("Table", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<Table />);
|
||||
const wrapper = render(
|
||||
<Table aria-label="Test example table">
|
||||
<TableHeader>
|
||||
<TableColumn>NAME</TableColumn>
|
||||
<TableColumn>TYPE</TableColumn>
|
||||
<TableColumn>DATE MODIFIED</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow key="1">
|
||||
<TableCell>Games</TableCell>
|
||||
<TableCell>File folder</TableCell>
|
||||
<TableCell>6/7/2020</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>,
|
||||
);
|
||||
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("ref should be forwarded", () => {
|
||||
const ref = React.createRef<HTMLDivElement>();
|
||||
const ref = React.createRef<HTMLTableElement>();
|
||||
|
||||
render(<Table ref={ref} />);
|
||||
render(
|
||||
<Table ref={ref} aria-label="Test example table">
|
||||
<TableHeader>
|
||||
<TableColumn>NAME</TableColumn>
|
||||
<TableColumn>TYPE</TableColumn>
|
||||
<TableColumn>DATE MODIFIED</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow key="1">
|
||||
<TableCell>Games</TableCell>
|
||||
<TableCell>File folder</TableCell>
|
||||
<TableCell>6/7/2020</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>,
|
||||
);
|
||||
expect(ref.current).not.toBeNull();
|
||||
});
|
||||
|
||||
it("should render a static table", () => {
|
||||
const wrapper = render(
|
||||
<Table aria-label="Static Table">
|
||||
<TableHeader>
|
||||
<TableColumn>Foo</TableColumn>
|
||||
<TableColumn>Bar</TableColumn>
|
||||
<TableColumn>Baz</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Foo 1</TableCell>
|
||||
<TableCell>Bar 1</TableCell>
|
||||
<TableCell>Baz 1</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>,
|
||||
);
|
||||
|
||||
const table = wrapper.getByRole("grid");
|
||||
|
||||
expect(table).toHaveAttribute("aria-label", "Static Table");
|
||||
|
||||
// should have 3 "role=columnheader"
|
||||
expect(wrapper.getAllByRole("columnheader")).toHaveLength(3);
|
||||
|
||||
// should have 2 "role=rowgroup"
|
||||
expect(wrapper.getAllByRole("rowgroup")).toHaveLength(2);
|
||||
|
||||
// should have 2 "role=row" - 1 for header, 1 for body
|
||||
expect(wrapper.getAllByRole("row")).toHaveLength(2);
|
||||
|
||||
// should have 2 "role=gridcell" - react-aria sets the first one as "rowheader"
|
||||
expect(wrapper.getAllByRole("rowheader")).toHaveLength(1);
|
||||
expect(wrapper.getAllByRole("gridcell")).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("should render dynamic table", () => {
|
||||
const wrapper = render(
|
||||
<Table aria-label="Dynamic Table">
|
||||
<TableHeader columns={columns}>
|
||||
{(column) => <TableColumn>{column.name}</TableColumn>}
|
||||
</TableHeader>
|
||||
<TableBody items={items}>
|
||||
{(item) => (
|
||||
<TableRow key={item.test}>
|
||||
<TableCell>{item.test}</TableCell>
|
||||
<TableCell>{item.foo}</TableCell>
|
||||
<TableCell>{item.bar}</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>,
|
||||
);
|
||||
|
||||
const table = wrapper.getByRole("grid");
|
||||
|
||||
expect(table).toHaveAttribute("aria-label", "Dynamic Table");
|
||||
|
||||
// should have 3 "role=columnheader"
|
||||
expect(wrapper.getAllByRole("columnheader")).toHaveLength(3);
|
||||
|
||||
// should have 2 "role=rowgroup"
|
||||
expect(wrapper.getAllByRole("rowgroup")).toHaveLength(2);
|
||||
|
||||
// should have 3 "role=row" - 1 for header, 2 for body
|
||||
expect(wrapper.getAllByRole("row")).toHaveLength(3);
|
||||
|
||||
// should have 4 "role=gridcell" - 2 "rowheader"
|
||||
expect(wrapper.getAllByRole("rowheader")).toHaveLength(2);
|
||||
expect(wrapper.getAllByRole("gridcell")).toHaveLength(4);
|
||||
});
|
||||
|
||||
it("should work with single selectionMode='single'", () => {
|
||||
const onRowAction = jest.fn();
|
||||
|
||||
const wrapper = render(
|
||||
<Table aria-label="Single Selection Table" selectionMode="single" onRowAction={onRowAction}>
|
||||
<TableHeader>
|
||||
<TableColumn>Foo</TableColumn>
|
||||
<TableColumn>Bar</TableColumn>
|
||||
<TableColumn>Baz</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Foo 1</TableCell>
|
||||
<TableCell>Bar 1</TableCell>
|
||||
<TableCell>Baz 1</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Foo 2</TableCell>
|
||||
<TableCell>Bar 2</TableCell>
|
||||
<TableCell>Baz 2</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>,
|
||||
);
|
||||
|
||||
const table = wrapper.getByRole("grid");
|
||||
|
||||
expect(table).toHaveAttribute("aria-label", "Single Selection Table");
|
||||
|
||||
// get the first row
|
||||
const row1 = wrapper.getAllByRole("row")[1];
|
||||
|
||||
act(() => {
|
||||
row1.click();
|
||||
});
|
||||
|
||||
expect(onRowAction).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should work with single selectionMode='multiple'", () => {
|
||||
const onRowAction = jest.fn();
|
||||
|
||||
const wrapper = render(
|
||||
<Table
|
||||
aria-label="Multiple Selection Table"
|
||||
selectionMode="multiple"
|
||||
onRowAction={onRowAction}
|
||||
>
|
||||
<TableHeader>
|
||||
<TableColumn>Foo</TableColumn>
|
||||
<TableColumn>Bar</TableColumn>
|
||||
<TableColumn>Baz</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Foo 1</TableCell>
|
||||
<TableCell>Bar 1</TableCell>
|
||||
<TableCell>Baz 1</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Foo 2</TableCell>
|
||||
<TableCell>Bar 2</TableCell>
|
||||
<TableCell>Baz 2</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>,
|
||||
);
|
||||
|
||||
const table = wrapper.getByRole("grid");
|
||||
|
||||
expect(table).toHaveAttribute("aria-label", "Multiple Selection Table");
|
||||
|
||||
// get the first row
|
||||
const row1 = wrapper.getAllByRole("row")[1];
|
||||
const row2 = wrapper.getAllByRole("row")[2];
|
||||
|
||||
act(() => {
|
||||
row1.click();
|
||||
row2.click();
|
||||
});
|
||||
|
||||
expect(onRowAction).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("should set the proper aria-sort on an ascending sorted column header", () => {
|
||||
const wrapper = render(
|
||||
<Table aria-label="Static Table">
|
||||
<TableHeader>
|
||||
<TableColumn allowsSorting data-testid="test-sort-column">
|
||||
Foo
|
||||
</TableColumn>
|
||||
<TableColumn>Bar</TableColumn>
|
||||
<TableColumn>Baz</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>Foo 1</TableCell>
|
||||
<TableCell>Bar 1</TableCell>
|
||||
<TableCell>Baz 1</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>,
|
||||
);
|
||||
|
||||
const column = wrapper.getByTestId("test-sort-column");
|
||||
|
||||
expect(column).toHaveAttribute("aria-sort", "none");
|
||||
|
||||
act(async () => {
|
||||
await userEvent.click(column);
|
||||
expect(column).toHaveAttribute("aria-sort", "ascending");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/table",
|
||||
"version": "2.0.0-beta.1",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Tables are used to display tabular data using rows and columns. ",
|
||||
"keywords": [
|
||||
"table"
|
||||
@ -56,6 +56,7 @@
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"@nextui-org/spinner": "workspace:*",
|
||||
"@nextui-org/pagination": "workspace:*",
|
||||
"@nextui-org/use-infinite-scroll": "workspace:*",
|
||||
"@nextui-org/tooltip": "workspace:*",
|
||||
"@nextui-org/user": "workspace:*",
|
||||
"@react-stately/data": "^3.9.1",
|
||||
|
||||
@ -6,8 +6,14 @@ import {ReactNode} from "react";
|
||||
export interface TableBodyProps<T>
|
||||
extends TableBodyBaseProps<T>,
|
||||
Omit<HTMLNextUIProps<"tbody">, keyof TableBodyBaseProps<T>> {
|
||||
/** Provides content to display when there are no rows in the table. */
|
||||
renderEmptyState?: () => ReactNode;
|
||||
/**
|
||||
* Provides content to display a loading component when the `loadingState` is `loading` or `loadingMore`.
|
||||
*/
|
||||
loadingContent?: ReactNode;
|
||||
/**
|
||||
* Provides content to display when there are no rows in the table.
|
||||
* */
|
||||
emptyContent?: ReactNode;
|
||||
}
|
||||
|
||||
const TableBody = TableBodyBase as <T>(props: TableBodyProps<T>) => JSX.Element;
|
||||
|
||||
@ -22,6 +22,9 @@ const TableBody = forwardRef<HTMLNextUIProps, "tbody">((props, ref) => {
|
||||
const tbodyStyles = clsx(classNames?.tbody, className);
|
||||
const bodyProps = collection.body.props;
|
||||
|
||||
const isLoading =
|
||||
bodyProps?.loadingState === "loading" || bodyProps?.loadingState === "loadingMore";
|
||||
|
||||
const renderRows = useMemo(() => {
|
||||
return [...collection.body.childNodes].map((row) => (
|
||||
<TableRow key={row.key} node={row}>
|
||||
@ -36,17 +39,32 @@ const TableBody = forwardRef<HTMLNextUIProps, "tbody">((props, ref) => {
|
||||
));
|
||||
}, [collection.body.childNodes]);
|
||||
|
||||
let emptyState;
|
||||
let emptyContent;
|
||||
let loadingContent;
|
||||
|
||||
if (collection.size === 0 && bodyProps.renderEmptyState) {
|
||||
emptyState = (
|
||||
if (collection.size === 0 && bodyProps.emptyContent) {
|
||||
emptyContent = (
|
||||
<tr role="row">
|
||||
<td
|
||||
className={slots?.emptyWrapper({class: classNames?.emptyWrapper})}
|
||||
colSpan={collection.columnCount}
|
||||
role="gridcell"
|
||||
>
|
||||
{bodyProps.renderEmptyState()}
|
||||
{bodyProps.emptyContent}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading && bodyProps.loadingContent) {
|
||||
loadingContent = (
|
||||
<tr role="row">
|
||||
<td
|
||||
className={slots?.loadingWrapper({class: classNames?.loadingWrapper})}
|
||||
colSpan={collection.columnCount}
|
||||
role="gridcell"
|
||||
>
|
||||
{bodyProps.loadingContent}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
@ -58,9 +76,11 @@ const TableBody = forwardRef<HTMLNextUIProps, "tbody">((props, ref) => {
|
||||
{...mergeProps(rowGroupProps, filterDOMProps(bodyProps, {labelable: true}), otherProps)}
|
||||
className={slots.tbody?.({class: tbodyStyles})}
|
||||
data-empty={dataAttr(collection.size === 0)}
|
||||
data-loading={dataAttr(isLoading)}
|
||||
>
|
||||
{renderRows}
|
||||
{emptyState}
|
||||
{loadingContent}
|
||||
{emptyContent}
|
||||
</Component>
|
||||
);
|
||||
});
|
||||
|
||||
@ -31,7 +31,7 @@ const TableCell = forwardRef<TableCellProps, "td">((props, ref) => {
|
||||
|
||||
const {gridCellProps} = useTableCell({node}, state, domRef);
|
||||
|
||||
const tdStyles = clsx(classNames?.thead, className, node.props?.className);
|
||||
const tdStyles = clsx(classNames?.td, className, node.props?.className);
|
||||
const {isFocusVisible, focusProps} = useFocusRing();
|
||||
const isRowSelected = state.selectionManager.isSelected(rowKey);
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@ const Table = forwardRef<TableProps, "table">((props, ref) => {
|
||||
)}
|
||||
</TableHeaderRow>
|
||||
))}
|
||||
<Spacer as="tr" y={0.4} />
|
||||
<Spacer as="tr" y={1} />
|
||||
</TableRowGroup>
|
||||
<TableBody />
|
||||
</Component>
|
||||
|
||||
@ -33,11 +33,15 @@ interface Props extends HTMLNextUIProps<"table"> {
|
||||
*/
|
||||
BaseComponent?: React.ComponentType<any>;
|
||||
/**
|
||||
* A property to include a component in the top of the table.
|
||||
* Ref to the container element.
|
||||
*/
|
||||
baseRef?: ReactRef<HTMLElement | null>;
|
||||
/**
|
||||
* Provides content to include a component in the top of the table.
|
||||
*/
|
||||
topContent?: ReactNode;
|
||||
/**
|
||||
* A property to include a component in the bottom of the table.
|
||||
* Provides content to include a component in the bottom of the table.
|
||||
*/
|
||||
bottomContent?: ReactNode;
|
||||
/**
|
||||
@ -116,6 +120,7 @@ export function useTable<T extends object>(originalProps: UseTableProps<T>) {
|
||||
const {
|
||||
ref,
|
||||
as,
|
||||
baseRef,
|
||||
children,
|
||||
className,
|
||||
classNames,
|
||||
@ -136,6 +141,7 @@ export function useTable<T extends object>(originalProps: UseTableProps<T>) {
|
||||
const Component = as || "table";
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
const domBaseRef = useDOMRef(baseRef);
|
||||
|
||||
const state = useTableState({
|
||||
...originalProps,
|
||||
@ -183,13 +189,13 @@ export function useTable<T extends object>(originalProps: UseTableProps<T>) {
|
||||
state,
|
||||
collection,
|
||||
isSelectable,
|
||||
disableAnimation,
|
||||
originalProps?.color,
|
||||
classNames,
|
||||
selectionMode,
|
||||
selectionBehavior,
|
||||
disabledBehavior,
|
||||
showSelectionCheckboxes,
|
||||
disableAnimation,
|
||||
originalProps?.color,
|
||||
onRowAction,
|
||||
onCellAction,
|
||||
],
|
||||
@ -198,6 +204,7 @@ export function useTable<T extends object>(originalProps: UseTableProps<T>) {
|
||||
const getBaseProps: PropGetter = useCallback(
|
||||
(props) => ({
|
||||
...props,
|
||||
ref: domBaseRef,
|
||||
className: slots.base({class: clsx(baseStyles, props?.className)}),
|
||||
}),
|
||||
[baseStyles, slots],
|
||||
|
||||
@ -5,8 +5,10 @@ import {User} from "@nextui-org/user";
|
||||
import {Chip, ChipProps} from "@nextui-org/chip";
|
||||
import {Button} from "@nextui-org/button";
|
||||
import {Spinner} from "@nextui-org/spinner";
|
||||
import {Pagination} from "@nextui-org/pagination";
|
||||
import {Tooltip} from "@nextui-org/tooltip";
|
||||
import {EditIcon, DeleteIcon, EyeIcon} from "@nextui-org/shared-icons";
|
||||
import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
|
||||
import {useAsyncList} from "@react-stately/data";
|
||||
|
||||
import {Table, TableHeader, TableColumn, TableBody, TableCell, TableRow, TableProps} from "../src";
|
||||
@ -51,13 +53,6 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="flex items-center justify-center w-screen h-screen">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
} as ComponentMeta<typeof Table>;
|
||||
|
||||
const defaultProps = {
|
||||
@ -162,7 +157,7 @@ const EmptyTemplate: ComponentStory<typeof Table> = (args: TableProps) => (
|
||||
<TableColumn>ROLE</TableColumn>
|
||||
<TableColumn>STATUS</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody renderEmptyState={() => "No rows to display."}>{[]}</TableBody>
|
||||
<TableBody emptyContent={"No rows to display."}>{[]}</TableBody>
|
||||
</Table>
|
||||
);
|
||||
|
||||
@ -321,6 +316,154 @@ const CustomCellTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
const CustomCellWithClassnamesTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
|
||||
const columns = [
|
||||
{name: "NAME", uid: "name"},
|
||||
{name: "ROLE", uid: "role"},
|
||||
{name: "STATUS", uid: "status"},
|
||||
{name: "ACTIONS", uid: "actions"},
|
||||
];
|
||||
const users = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Tony Reichert",
|
||||
role: "CEO",
|
||||
team: "Management",
|
||||
status: "active",
|
||||
age: "29",
|
||||
avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
|
||||
email: "tony.reichert@example.com",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Zoey Lang",
|
||||
role: "Technical Lead",
|
||||
team: "Development",
|
||||
status: "paused",
|
||||
age: "25",
|
||||
avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
|
||||
email: "zoey.lang@example.com",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Jane Fisher",
|
||||
role: "Senior Developer",
|
||||
team: "Development",
|
||||
status: "active",
|
||||
age: "22",
|
||||
avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
|
||||
email: "jane.fisher@example.com",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "William Howard",
|
||||
role: "Community Manager",
|
||||
team: "Marketing",
|
||||
status: "vacation",
|
||||
age: "28",
|
||||
avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
|
||||
email: "william.howard@example.com",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Kristen Copper",
|
||||
role: "Sales Manager",
|
||||
team: "Sales",
|
||||
status: "active",
|
||||
age: "24",
|
||||
avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
|
||||
email: "kristen.cooper@example.com",
|
||||
},
|
||||
];
|
||||
|
||||
type User = typeof users[0];
|
||||
|
||||
const statusColorMap: Record<string, ChipProps["color"]> = {
|
||||
active: "success",
|
||||
paused: "danger",
|
||||
vacation: "warning",
|
||||
};
|
||||
|
||||
const renderCell = React.useCallback((user: User, columnKey: React.Key) => {
|
||||
const cellValue = user[columnKey as keyof User];
|
||||
|
||||
switch (columnKey) {
|
||||
case "name":
|
||||
return (
|
||||
<User
|
||||
avatarProps={{radius: "xl", src: user.avatar}}
|
||||
classNames={{
|
||||
description: "text-white/60",
|
||||
}}
|
||||
description={user.email}
|
||||
name={cellValue}
|
||||
>
|
||||
{user.email}
|
||||
</User>
|
||||
);
|
||||
case "role":
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<p className="text-bold text-sm capitalize">{cellValue}</p>
|
||||
<p className="text-bold text-sm capitalize text-white/60">{user.team}</p>
|
||||
</div>
|
||||
);
|
||||
case "status":
|
||||
return (
|
||||
<Chip
|
||||
className="capitalize bg-black/20 font-semibold"
|
||||
color={statusColorMap[user.status]}
|
||||
size="sm"
|
||||
variant="light"
|
||||
>
|
||||
{cellValue}
|
||||
</Chip>
|
||||
);
|
||||
case "actions":
|
||||
return (
|
||||
<div className="relative flex items-center gap-2">
|
||||
<Tooltip color="foreground" content="Details">
|
||||
<span className="text-lg text-white/70 cursor-pointer active:opacity-50">
|
||||
<EyeIcon />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip color="foreground" content="Edit user">
|
||||
<span className="text-lg text-white/70 cursor-pointer active:opacity-50">
|
||||
<EditIcon />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip color="danger" content="Delete user">
|
||||
<span className="text-lg text-danger cursor-pointer active:opacity-50">
|
||||
<DeleteIcon />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return cellValue;
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Table aria-label="Example table with custom cells" {...args}>
|
||||
<TableHeader columns={columns}>
|
||||
{(column) => (
|
||||
<TableColumn key={column.uid} align={column.uid === "actions" ? "center" : "start"}>
|
||||
{column.name}
|
||||
</TableColumn>
|
||||
)}
|
||||
</TableHeader>
|
||||
<TableBody items={users}>
|
||||
{(item) => (
|
||||
<TableRow key={item.id}>
|
||||
{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const SortableTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
|
||||
let list = useAsyncList<SWCharacter>({
|
||||
async load({signal}) {
|
||||
@ -388,15 +531,12 @@ const LoadMoreTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
|
||||
let list = useAsyncList<SWCharacter>({
|
||||
async load({signal, cursor}) {
|
||||
if (cursor) {
|
||||
// write this /^http:\/\//i using RegExp
|
||||
const regex = "/^http:///i";
|
||||
|
||||
cursor = cursor.replace(regex, "https://");
|
||||
|
||||
setPage((prev) => prev + 1);
|
||||
}
|
||||
|
||||
let res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
|
||||
// If no cursor is available, then we're loading the first page.
|
||||
// Otherwise, the cursor is the next URL to load, as returned from the previous page.
|
||||
const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
|
||||
let json = await res.json();
|
||||
|
||||
return {
|
||||
@ -413,14 +553,318 @@ const LoadMoreTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
|
||||
aria-label="Example table with client side sorting"
|
||||
bottomContent={
|
||||
hasMore ? (
|
||||
<Button isDisabled={list.isLoading} variant="flat" onPress={list.loadMore}>
|
||||
{list.isLoading && <Spinner color="white" size="sm" />}
|
||||
Load More
|
||||
</Button>
|
||||
<div className="flex w-full justify-center">
|
||||
<Button isDisabled={list.isLoading} variant="flat" onPress={list.loadMore}>
|
||||
{list.isLoading && <Spinner color="white" size="sm" />}
|
||||
Load More
|
||||
</Button>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
{...args}
|
||||
>
|
||||
<TableHeader>
|
||||
<TableColumn key="name">Name</TableColumn>
|
||||
<TableColumn key="height">Height</TableColumn>
|
||||
<TableColumn key="mass">Mass</TableColumn>
|
||||
<TableColumn key="birth_year">Birth year</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody items={list.items}>
|
||||
{(item) => (
|
||||
<TableRow key={item.name}>
|
||||
{(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const PaginatedTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
|
||||
const [page, setPage] = React.useState(1);
|
||||
|
||||
const rowsPerPage = 4;
|
||||
|
||||
const paginatedRows = [
|
||||
...rows,
|
||||
{
|
||||
key: "5",
|
||||
name: "Emily Collins",
|
||||
role: "Marketing Manager",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
name: "Brian Kim",
|
||||
role: "Product Manager",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
name: "Laura Thompson",
|
||||
role: "UX Designer",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
name: "Michael Stevens",
|
||||
role: "Data Analyst",
|
||||
status: "Paused",
|
||||
},
|
||||
{
|
||||
key: "9",
|
||||
name: "Sophia Nguyen",
|
||||
role: "Quality Assurance",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "10",
|
||||
name: "James Wilson",
|
||||
role: "Front-end Developer",
|
||||
status: "Vacation",
|
||||
},
|
||||
{
|
||||
key: "11",
|
||||
name: "Ava Johnson",
|
||||
role: "Back-end Developer",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "12",
|
||||
name: "Isabella Smith",
|
||||
role: "Graphic Designer",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "13",
|
||||
name: "Oliver Brown",
|
||||
role: "Content Writer",
|
||||
status: "Paused",
|
||||
},
|
||||
{
|
||||
key: "14",
|
||||
name: "Lucas Jones",
|
||||
role: "Project Manager",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "15",
|
||||
name: "Grace Davis",
|
||||
role: "HR Manager",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "16",
|
||||
name: "Elijah Garcia",
|
||||
role: "Network Administrator",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "17",
|
||||
name: "Emma Martinez",
|
||||
role: "Accountant",
|
||||
status: "Vacation",
|
||||
},
|
||||
{
|
||||
key: "18",
|
||||
name: "Benjamin Lee",
|
||||
role: "Operations Manager",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "19",
|
||||
name: "Mia Hernandez",
|
||||
role: "Sales Manager",
|
||||
status: "Paused",
|
||||
},
|
||||
{
|
||||
key: "20",
|
||||
name: "Daniel Lewis",
|
||||
role: "DevOps Engineer",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "21",
|
||||
name: "Amelia Clark",
|
||||
role: "Social Media Specialist",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "22",
|
||||
name: "Jackson Walker",
|
||||
role: "Customer Support",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "23",
|
||||
name: "Henry Hall",
|
||||
role: "Security Analyst",
|
||||
status: "Active",
|
||||
},
|
||||
{
|
||||
key: "24",
|
||||
name: "Charlotte Young",
|
||||
role: "PR Specialist",
|
||||
status: "Paused",
|
||||
},
|
||||
{
|
||||
key: "25",
|
||||
name: "Liam King",
|
||||
role: "Mobile App Developer",
|
||||
status: "Active",
|
||||
},
|
||||
];
|
||||
|
||||
const pages = Math.ceil(paginatedRows.length / rowsPerPage);
|
||||
|
||||
const items = React.useMemo(() => {
|
||||
const start = (page - 1) * rowsPerPage;
|
||||
const end = start + rowsPerPage;
|
||||
|
||||
return paginatedRows.slice(start, end);
|
||||
}, [page, paginatedRows]);
|
||||
|
||||
return (
|
||||
<Table
|
||||
aria-label="Example table with client side pagination"
|
||||
bottomContent={
|
||||
<div className="flex w-full justify-center">
|
||||
<Pagination
|
||||
isCompact
|
||||
showControls
|
||||
showShadow
|
||||
color="secondary"
|
||||
page={page}
|
||||
total={pages}
|
||||
onChange={(page) => setPage(page)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
{...args}
|
||||
>
|
||||
<TableHeader>
|
||||
<TableColumn key="name">NAME</TableColumn>
|
||||
<TableColumn key="role">ROLE</TableColumn>
|
||||
<TableColumn key="status">STATUS</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody items={items}>
|
||||
{(item) => (
|
||||
<TableRow key={item.name}>
|
||||
{(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const AsyncPaginatedTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [total, setTotal] = React.useState(0);
|
||||
|
||||
const rowsPerPage = 10;
|
||||
|
||||
let list = useAsyncList<SWCharacter>({
|
||||
async load({signal, cursor}) {
|
||||
// If no cursor is available, then we're loading the first page.
|
||||
// Otherwise, the cursor is the next URL to load, as returned from the previous page.
|
||||
const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
|
||||
let json = await res.json();
|
||||
|
||||
setTotal(json.count);
|
||||
|
||||
return {
|
||||
items: json.results,
|
||||
cursor: json.next,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const pages = Math.ceil(total / rowsPerPage);
|
||||
|
||||
const items = React.useMemo(() => {
|
||||
const start = (page - 1) * rowsPerPage;
|
||||
const end = start + rowsPerPage;
|
||||
|
||||
return list.items.slice(start, end);
|
||||
}, [page, list.items?.length, list.loadingState]);
|
||||
|
||||
const loadingState = items.length === 0 ? "loading" : list.loadingState;
|
||||
|
||||
return (
|
||||
<Table
|
||||
aria-label="Example table with client async pagination"
|
||||
bottomContent={
|
||||
pages > 0 ? (
|
||||
<div className="flex w-full justify-center">
|
||||
<Pagination
|
||||
isCompact
|
||||
showControls
|
||||
showShadow
|
||||
color="primary"
|
||||
page={page}
|
||||
total={pages}
|
||||
onChange={(page) => {
|
||||
if (page >= list.items.length / rowsPerPage) {
|
||||
list.loadMore();
|
||||
}
|
||||
setPage(page);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
{...args}
|
||||
>
|
||||
<TableHeader>
|
||||
<TableColumn key="name">Name</TableColumn>
|
||||
<TableColumn key="height">Height</TableColumn>
|
||||
<TableColumn key="mass">Mass</TableColumn>
|
||||
<TableColumn key="birth_year">Birth year</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody items={items} loadingContent={<Spinner />} loadingState={loadingState}>
|
||||
{(item) => (
|
||||
<TableRow key={item.name}>
|
||||
{(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const InfinityPaginationTemplate: ComponentStory<typeof Table> = (args: TableProps) => {
|
||||
const [hasMore, setHasMore] = React.useState(false);
|
||||
|
||||
let list = useAsyncList<SWCharacter>({
|
||||
async load({signal, cursor}) {
|
||||
// If no cursor is available, then we're loading the first page.
|
||||
// Otherwise, the cursor is the next URL to load, as returned from the previous page.
|
||||
const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
|
||||
let json = await res.json();
|
||||
|
||||
setHasMore(json.next !== null);
|
||||
|
||||
return {
|
||||
items: json.results,
|
||||
cursor: json.next,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const [loaderRef, scrollerRef] = useInfiniteScroll({hasMore, onLoadMore: list.loadMore});
|
||||
|
||||
return (
|
||||
<Table
|
||||
aria-label="Example table with client side sorting"
|
||||
baseRef={scrollerRef}
|
||||
bottomContent={
|
||||
hasMore ? (
|
||||
<div className="flex w-full justify-center">
|
||||
<Spinner ref={loaderRef} color="white" />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
sortDescriptor={list.sortDescriptor}
|
||||
onSortChange={list.sort}
|
||||
{...args}
|
||||
>
|
||||
<TableHeader>
|
||||
@ -523,6 +967,49 @@ LoadMore.args = {
|
||||
className: "max-w-3xl max-h-auto",
|
||||
};
|
||||
|
||||
export const Paginated = PaginatedTemplate.bind({});
|
||||
Paginated.args = {
|
||||
...defaultProps,
|
||||
className: "max-w-lg min-h-[292px]",
|
||||
};
|
||||
|
||||
export const AsyncPaginated = AsyncPaginatedTemplate.bind({});
|
||||
AsyncPaginated.args = {
|
||||
...defaultProps,
|
||||
className: "max-w-3xl max-h-auto min-h-[400px]",
|
||||
};
|
||||
|
||||
export const InfinityPagination = InfinityPaginationTemplate.bind({});
|
||||
InfinityPagination.args = {
|
||||
...defaultProps,
|
||||
className: "max-w-3xl max-h-[440px] min-h-[400px] overflow-auto",
|
||||
};
|
||||
|
||||
export const HeaderSticky = InfinityPaginationTemplate.bind({});
|
||||
HeaderSticky.args = {
|
||||
...defaultProps,
|
||||
layout: "fixed",
|
||||
isHeaderSticky: true,
|
||||
className: "max-w-3xl max-h-[440px] min-h-[400px] overflow-auto",
|
||||
};
|
||||
|
||||
export const CustomWithClassNames = CustomCellWithClassnamesTemplate.bind({});
|
||||
CustomWithClassNames.args = {
|
||||
...defaultProps,
|
||||
classNames: {
|
||||
base: ["max-w-3xl", "bg-gradient-to-br", "from-purple-500", "to-indigo-900/90", "shadow-xl"],
|
||||
th: ["bg-transparent", "text-white/70", "border-b", "border-white/10"],
|
||||
td: [
|
||||
"py-4",
|
||||
"text-sm",
|
||||
"text-white/90",
|
||||
"border-b",
|
||||
"border-white/10",
|
||||
"group-data-[last=true]:border-b-0",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const DisableAnimation = StaticTemplate.bind({});
|
||||
DisableAnimation.args = {
|
||||
...defaultProps,
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
# @nextui-org/tooltip
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/aria-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/tooltip",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "A React Component for rendering dynamically positioned Tooltips",
|
||||
"keywords": [
|
||||
"tooltip"
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/user
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/shared-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dom-utils@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/user",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Flexible User Profile Component.",
|
||||
"keywords": [
|
||||
"user"
|
||||
|
||||
@ -6,7 +6,7 @@ import {UseUserProps, useUser} from "./use-user";
|
||||
export interface UserProps extends Omit<UseUserProps, "ref"> {}
|
||||
|
||||
const User = forwardRef<UserProps, "div">((props, ref) => {
|
||||
const {Component, name, slots, description, avatarProps, getUserProps} = useUser({
|
||||
const {Component, name, slots, classNames, description, avatarProps, getUserProps} = useUser({
|
||||
ref,
|
||||
...props,
|
||||
});
|
||||
@ -14,9 +14,9 @@ const User = forwardRef<UserProps, "div">((props, ref) => {
|
||||
return (
|
||||
<Component {...getUserProps()}>
|
||||
<Avatar {...avatarProps} />
|
||||
<div className={slots.wrapper()}>
|
||||
<span className={slots.name()}>{name}</span>
|
||||
<span className={slots.description()}>{description}</span>
|
||||
<div className={slots.wrapper({class: classNames?.wrapper})}>
|
||||
<span className={slots.name({class: classNames?.name})}>{name}</span>
|
||||
<span className={slots.description({class: classNames?.description})}>{description}</span>
|
||||
</div>
|
||||
</Component>
|
||||
);
|
||||
|
||||
@ -1,5 +1,75 @@
|
||||
# @nextui-org/react
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/pagination@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/dropdown@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/progress@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/snippet@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/navbar@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/switch@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/badge@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/image@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/input@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/radio@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/table@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/card@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/chip@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/code@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/link@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/user@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/pagination@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/accordion@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/checkbox@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/dropdown@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/progress@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/popover@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/snippet@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/spinner@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/tooltip@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/avatar@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/button@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/navbar@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/spacer@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/switch@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/badge@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/image@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/input@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/modal@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/radio@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/table@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/card@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/chip@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/code@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/drip@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/link@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/user@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/system@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/theme@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/react",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "🚀 Beautiful and modern React UI library.",
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/system
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/system",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "NextUI system primitives",
|
||||
"keywords": [
|
||||
"system"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/theme
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
|
||||
## 0.0.0-dev-v2-20230421004240
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/theme",
|
||||
"version": "0.0.0-dev-v2-20230421004240",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "The default theme for NextUI components",
|
||||
"keywords": [
|
||||
"theme",
|
||||
|
||||
@ -37,7 +37,7 @@ const base: SemanticBaseColors = {
|
||||
},
|
||||
dark: {
|
||||
background: {
|
||||
DEFAULT: "#0B0B0C",
|
||||
DEFAULT: "#000000",
|
||||
},
|
||||
foreground: {
|
||||
DEFAULT: "#ECEDEE",
|
||||
|
||||
@ -43,10 +43,10 @@ const chip = tv({
|
||||
variant: {
|
||||
solid: {},
|
||||
bordered: {
|
||||
base: "border-1.5 !bg-transparent",
|
||||
base: "border-1.5 bg-transparent",
|
||||
},
|
||||
light: {
|
||||
base: "!bg-transparent",
|
||||
base: "bg-transparent",
|
||||
},
|
||||
flat: {},
|
||||
faded: {
|
||||
@ -54,7 +54,7 @@ const chip = tv({
|
||||
},
|
||||
shadow: {},
|
||||
dot: {
|
||||
base: "border-1.5 border-neutral text-foreground !bg-transparent",
|
||||
base: "border-1.5 border-neutral text-foreground bg-transparent",
|
||||
},
|
||||
},
|
||||
color: {
|
||||
|
||||
@ -333,7 +333,7 @@ const pagination = tv({
|
||||
"data-[focus-visible=true]:ring-offset-background",
|
||||
"data-[focus-visible=true]:dark:ring-offset-background-dark",
|
||||
// disabled
|
||||
"data-[disabled=true]:opacity-50",
|
||||
"data-[disabled=true]:text-neutral-300",
|
||||
"data-[disabled=true]:pointer-events-none",
|
||||
],
|
||||
},
|
||||
|
||||
@ -16,7 +16,7 @@ import {tv} from "tailwind-variants";
|
||||
*/
|
||||
const spinner = tv({
|
||||
slots: {
|
||||
base: "flex flex-col items-center justify-center relative",
|
||||
base: "inline-flex flex-col items-center justify-center relative",
|
||||
circle1: [
|
||||
"absolute",
|
||||
"w-full",
|
||||
|
||||
@ -48,9 +48,19 @@ const focusRing = [
|
||||
*/
|
||||
const table = tv({
|
||||
slots: {
|
||||
base: "flex flex-col items-center p-4 gap-4 border border-neutral-100 overflow-auto",
|
||||
table: "",
|
||||
thead: "",
|
||||
base: [
|
||||
"p-4",
|
||||
"flex",
|
||||
"flex-col",
|
||||
"relative",
|
||||
"justify-between",
|
||||
"gap-4",
|
||||
"border",
|
||||
"border-neutral-100",
|
||||
"overflow-auto",
|
||||
],
|
||||
table: "min-w-full h-auto",
|
||||
thead: "[&>tr]:first:rounded-lg",
|
||||
tbody: "",
|
||||
tr: ["group", "outline-none", ...focusRing],
|
||||
th: [
|
||||
@ -77,7 +87,7 @@ const table = tv({
|
||||
"relative",
|
||||
"align-middle",
|
||||
"whitespace-normal",
|
||||
"text-base",
|
||||
"text-sm",
|
||||
"font-normal",
|
||||
"outline-none",
|
||||
...focusRing,
|
||||
@ -101,10 +111,10 @@ const table = tv({
|
||||
"transition-transform-opacity",
|
||||
"data-[visible=true]:opacity-100",
|
||||
"group-data-[hover=true]:opacity-100",
|
||||
"data-[direction=descending]:rotate-0",
|
||||
"data-[direction=ascending]:rotate-180",
|
||||
],
|
||||
emptyWrapper: "text-neutral-300 align-middle text-center h-36",
|
||||
emptyWrapper: "text-neutral-400 align-middle text-center h-40",
|
||||
loadingWrapper: "absolute inset-0 flex items-center justify-center",
|
||||
},
|
||||
variants: {
|
||||
color: {
|
||||
@ -195,6 +205,11 @@ const table = tv({
|
||||
],
|
||||
},
|
||||
},
|
||||
isHeaderSticky: {
|
||||
true: {
|
||||
thead: "sticky top-0 z-10 [&>tr]:first:shadow",
|
||||
},
|
||||
},
|
||||
isSelectable: {
|
||||
true: {
|
||||
tr: "cursor-default",
|
||||
|
||||
@ -27,7 +27,7 @@ const user = tv({
|
||||
"data-[focus-visible=true]:dark:ring-offset-background-dark",
|
||||
],
|
||||
wrapper: "inline-flex flex-col items-start",
|
||||
name: "text-sm text-foreground dark:text-foreground-dark",
|
||||
name: "text-sm text-inherit",
|
||||
description: "text-xs text-neutral-400",
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/use-aria-accordion-item
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-accordion-item",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Internal impl for react aria accordion item",
|
||||
"keywords": [
|
||||
"use-aria-accordion-item"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/use-aria-button
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-button",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
|
||||
"keywords": [
|
||||
"use-aria-button"
|
||||
|
||||
@ -1,5 +1,23 @@
|
||||
# @nextui-org/use-aria-field
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230423212921
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-slot-id@0.0.0-dev-v2-20230423211529
|
||||
- @nextui-org/use-aria-label@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-field",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Based on react-aria useField hook, provides the accessibility implementation for input fields",
|
||||
"keywords": [
|
||||
"use-aria-field"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/use-aria-label
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-label",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Based on react-aria label hook, it provides the accessibility implementation for labels and their associated elements. Labels provide context for user inputs.",
|
||||
"keywords": [
|
||||
"use-aria-label"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/use-aria-slot-id
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-slot-id",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Based on react-aria useSlotId, used to generate an id, and after render check if that id is rendered",
|
||||
"keywords": [
|
||||
"use-aria-slot-id"
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
# @nextui-org/use-aria-toggle-button
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-aria-toggle-button",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
|
||||
"keywords": [
|
||||
"use-aria-toggle-button"
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
# @nextui-org/use-callback-ref
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-callback-ref",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "React hook to persist any value between renders, but keeps it up-to-date if it changes.",
|
||||
"keywords": [
|
||||
"use-callback-ref"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/use-clipboard
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-clipboard",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "Wrapper around navigator.clipboard with feedback timeout",
|
||||
"keywords": [
|
||||
"use-clipboard"
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
# @nextui-org/use-disclosure
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-callback-ref@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-callback-ref@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230420135820
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-disclosure",
|
||||
"version": "0.0.0-dev-v2-20230420135820",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "The hook in charge of managing modals",
|
||||
"keywords": [
|
||||
"use-disclosure"
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
# @nextui-org/use-image
|
||||
|
||||
## 0.0.0-dev-v2-20230423212921
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table improvements
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230423212921
|
||||
|
||||
## 0.0.0-dev-v2-20230423211529
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Table component addded
|
||||
- Updated dependencies
|
||||
- @nextui-org/use-safe-layout-effect@0.0.0-dev-v2-20230423211529
|
||||
|
||||
## 0.0.0-dev-v2-20230420134926
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/use-image",
|
||||
"version": "0.0.0-dev-v2-20230420134926",
|
||||
"version": "0.0.0-dev-v2-20230423212921",
|
||||
"description": "React hook for progressing image loading",
|
||||
"keywords": [
|
||||
"use-image"
|
||||
|
||||
24
packages/hooks/use-infinite-scroll/README.md
Normal file
24
packages/hooks/use-infinite-scroll/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# @nextui-org/use-infinite-scroll
|
||||
|
||||
A Quick description of the component
|
||||
|
||||
> This is an internal utility, not intended for public usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add @nextui-org/use-infinite-scroll
|
||||
# or
|
||||
npm i @nextui-org/use-infinite-scroll
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Yes please! See the
|
||||
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
|
||||
for details.
|
||||
|
||||
## Licence
|
||||
|
||||
This project is licensed under the terms of the
|
||||
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
|
||||
52
packages/hooks/use-infinite-scroll/package.json
Normal file
52
packages/hooks/use-infinite-scroll/package.json
Normal file
@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "@nextui-org/use-infinite-scroll",
|
||||
"version": "0.0.0-dev-v2-20230423211529",
|
||||
"description": "A hook for handling infinity scroll based on the IntersectionObserver API",
|
||||
"keywords": [
|
||||
"use-infinite-scroll"
|
||||
],
|
||||
"author": "Junior Garcia <jrgarciadev@gmail.com>",
|
||||
"homepage": "https://nextui.org",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nextui-org/nextui.git",
|
||||
"directory": "packages/hooks/use-infinite-scroll"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup src --dts",
|
||||
"build:fast": "tsup src",
|
||||
"dev": "yarn build:fast -- --watch",
|
||||
"clean": "rimraf dist .turbo",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"prepack": "clean-package",
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
"clean-package": "../../../clean-package.config.json",
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
"target": "es2019",
|
||||
"format": [
|
||||
"cjs",
|
||||
"esm"
|
||||
]
|
||||
}
|
||||
}
|
||||
65
packages/hooks/use-infinite-scroll/src/index.ts
Normal file
65
packages/hooks/use-infinite-scroll/src/index.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import {useLayoutEffect, useRef} from "react";
|
||||
|
||||
export interface UseInfiniteScrollProps {
|
||||
/**
|
||||
* Whether there are more items to load, the observer will disconnect when there are no more items to load.
|
||||
*/
|
||||
hasMore?: boolean;
|
||||
/**
|
||||
* The distance in pixels before the end of the items that will trigger a call to load more.
|
||||
* @default 250
|
||||
*/
|
||||
distance?: number;
|
||||
/**
|
||||
* Callback to load more items.
|
||||
*/
|
||||
onLoadMore?: () => void;
|
||||
}
|
||||
|
||||
export function useInfiniteScroll(props: UseInfiniteScrollProps = {}) {
|
||||
const {hasMore, distance = 250, onLoadMore} = props;
|
||||
|
||||
const scrollContainerRef = useRef<HTMLElement>(null);
|
||||
const loaderRef = useRef<HTMLElement>(null);
|
||||
|
||||
const previousY = useRef<number>();
|
||||
const previousRatio = useRef<number>(0);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const loaderNode = loaderRef.current;
|
||||
const scrollContainerNode = scrollContainerRef.current;
|
||||
|
||||
if (!scrollContainerNode || !loaderNode || !hasMore) return;
|
||||
|
||||
const options = {
|
||||
root: scrollContainerNode,
|
||||
rootMargin: `0px 0px ${distance}px 0px`,
|
||||
};
|
||||
|
||||
const listener = (entries: IntersectionObserverEntry[]) => {
|
||||
entries.forEach(({isIntersecting, intersectionRatio, boundingClientRect = {}}) => {
|
||||
const y = boundingClientRect.y || 0;
|
||||
|
||||
if (
|
||||
isIntersecting &&
|
||||
intersectionRatio >= previousRatio.current &&
|
||||
(!previousY.current || y < previousY.current)
|
||||
) {
|
||||
onLoadMore?.();
|
||||
}
|
||||
previousY.current = y;
|
||||
previousRatio.current = intersectionRatio;
|
||||
});
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(listener, options);
|
||||
|
||||
observer.observe(loaderNode);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [hasMore, distance, onLoadMore]);
|
||||
|
||||
return [loaderRef, scrollContainerRef];
|
||||
}
|
||||
|
||||
export type UseInfiniteScrollReturn = ReturnType<typeof useInfiniteScroll>;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user