archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

chore(root): collapse component deleted

Browse Source
This commit is contained in:
Junior Garcia 2023-03-19 11:37:19 -03:00
parent a9132c9df3
commit 7e1b49bad8
14 changed files with 0 additions and 765 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/components/collapse/README.md
View File

@ -1,24 +0,0 @@
# @nextui-org/collapse
A Quick description of the component
> This is an internal utility, not intended for public usage.
## Installation
```sh
yarn add @nextui-org/collapse
# or
npm i @nextui-org/collapse
```
## 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).

19
packages/components/collapse/__tests__/collapse.test.tsx
View File

@ -1,19 +0,0 @@
import * as React from "react";
import {render} from "@testing-library/react";
import {Collapse} from "../src";
describe("Collapse", () => {
it("should render correctly", () => {
const wrapper = render(<Collapse />);
expect(() => wrapper.unmount()).not.toThrow();
});
it("ref should be forwarded", () => {
const ref = React.createRef<HTMLDivElement>();
render(<Collapse ref={ref} />);
expect(ref.current).not.toBeNull();
});
});

11
packages/components/collapse/clean-package.config.json
View File

@ -1,11 +0,0 @@
{
"replace": {
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"exports": {
".": {"import": "./dist/index.esm.js", "require": "./dist/index.cjs.js"},
"./package.json": "./package.json"
}
}
}

65
packages/components/collapse/package.json
View File

@ -1,65 +0,0 @@
{
"name": "@nextui-org/collapse",
"version": "2.0.0-beta.1",
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
"keywords": [
"collapse"
],
"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/components/collapse"
},
"bugs": {
"url": "https://github.com/nextui-org/nextui/issues"
},
"scripts": {
"build": "tsup src --dts",
"dev": "yarn build:fast -- --watch",
"clean": "rimraf dist .turbo",
"typecheck": "tsc --noEmit",
"build:fast": "tsup src",
"prepack": "clean-package",
"postpack": "clean-package restore"
},
"peerDependencies": {
"react": ">=18"
},
"dependencies": {
"@nextui-org/system": "workspace:*",
"@nextui-org/dom-utils": "workspace:*",
"@nextui-org/shared-css": "workspace:*",
"@nextui-org/shared-utils": "workspace:*",
"@nextui-org/aria-utils": "workspace:*",
"@nextui-org/react-utils": "workspace:*",
"@react-aria/accordion": "3.0.0-alpha.15",
"@react-aria/focus": "^3.11.0",
"@react-aria/utils": "^3.15.0",
"@react-stately/tree": "^3.5.0"
},
"devDependencies": {
"@react-types/shared": "^3.15.0",
"@react-types/accordion": "3.0.0-alpha.12",
"clean-package": "2.2.0",
"react": "^18.0.0"
},
"tsup": {
"clean": true,
"target": "es2019",
"format": [
"cjs",
"esm"
]
}
}

72
packages/components/collapse/src/base/collapse-item-base.tsx
View File

@ -1,72 +0,0 @@
import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
import {FocusableProps} from "@react-types/shared";
import {ReactNode} from "react";
import {CollapseItemVariantProps} from "../collapse.styles";
export type RenderIndicatorProps = {
/**
* The current indicator
*/
indicator?: ReactNode;
/**
* The current open status.
*/
isOpen?: boolean;
/**
* The current disabled status.
*/
isDisabled?: boolean;
};
export interface CollapseItemBaseProps<T extends object = {}>
extends Omit<ItemProps<"button", T>, "children" | keyof FocusableProps>,
FocusableProps {
/**
* The content of the component.
*/
children?: ReactNode | null;
/**
* The collapse item `expanded` indicator, it's usually an arrow icon.
* If you pass a function, NextUI will expose the current indicator and the open status,
* In case you want to use a custom indicator or muodify the current one.
*/
indicator?: ReactNode | ((props: RenderIndicatorProps) => ReactNode) | null;
/**
* The collapse item subtitle.
*/
subtitle?: ReactNode | string;
/**
* The collapse item variation.
* @default "default"
*/
variant?: "default" | "shadow" | "bordered" | "splitted";
/**
* The border weight for bordered collapse item variation.
* @default "normal"
*/
borderWeight?: CollapseItemVariantProps["borderWeight"];
/**
* The border weight for the collapse item divider.
* @default "light"
*/
dividerWeight?: CollapseItemVariantProps["dividerWeight"];
bgColor?: CollapseItemVariantProps["bgColor"];
/**
* Whether the collapse item have a bottom border.
* @default true
*/
withDivider?: boolean;
/**
* Whether the collapse item open/close animation should be disabled.
* @default false
*/
disableAnimation?: boolean;
}
const CollapseItem = BaseItem as (props: CollapseItemBaseProps) => JSX.Element;
CollapseItem.toString = () => ".nextui-collapse-item-base";
export default CollapseItem;

39
packages/components/collapse/src/collapse-icon.tsx
View File

@ -1,39 +0,0 @@
import {forwardRef, HTMLNextUIProps, NextUI} from "@nextui-org/system";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
export interface CollapseIconProps extends HTMLNextUIProps<"svg"> {}
const CollapseIcon = forwardRef<CollapseIconProps, "svg">((props, ref) => {
const {className, css, ...otherProps} = props;
return (
<NextUI.Svg
ref={ref}
aria-hidden="true"
className={clsx("nextui-collapse-icon", className)}
css={{
opacity: 0.7,
...css,
}}
fill="none"
focusable="false"
height="20"
role="presentation"
stroke="currentColor"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
{...otherProps}
>
<path d="M15.5 19l-7-7 7-7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} />
</NextUI.Svg>
);
});
if (__DEV__) {
CollapseIcon.displayName = "NextUI.CollapseIcon";
}
CollapseIcon.toString = () => ".nextui-collapse-icon";
export default CollapseIcon;

95
packages/components/collapse/src/collapse-item.tsx
View File

@ -1,95 +0,0 @@
import {useMemo} from "react";
import {forwardRef, NextUI} from "@nextui-org/system";
import {Expand} from "@nextui-org/react-utils";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import {mergeProps} from "@react-aria/utils";
import {
StyledCollapseItem,
StyledCollapseItemHeading,
StyledCollapseItemButton,
StyledCollapseItemTitle,
StyledCollapseItemIndicator,
} from "./collapse.styles";
import {UseCollapseItemProps, useCollapseItem} from "./use-collapse-item";
export interface CollapseItemProps<T extends object = {}>
extends Omit<UseCollapseItemProps<T>, "ref"> {}
const CollapseItem = forwardRef<CollapseItemProps, "div">((props, ref) => {
const {
className,
domRef,
indicator,
item,
isOpen,
isDisabled,
isFocusVisible,
buttonProps,
regionProps,
focusProps,
...otherProps
} = useCollapseItem({
ref,
...props,
});
const indicatorWrapper = useMemo(() => {
return (
<StyledCollapseItemIndicator
aria-hidden="true"
aria-label="collapse item indicator"
className="nextui-collapse-item-indicator"
isOpen={isOpen}
role="img"
>
{indicator}
</StyledCollapseItemIndicator>
);
}, [indicator]);
const indicatorComponent = useMemo(() => {
if (typeof item.props?.indicator === "function") {
return item.props?.indicator({indicator, isOpen, isDisabled});
}
return indicatorWrapper;
}, [item.props?.indicator, indicator, indicatorWrapper, isOpen, isDisabled]);
return (
<StyledCollapseItem
className={clsx("nextui-collapse-item", className)}
isDisabled={isDisabled}
isOpen={isOpen}
{...otherProps}
>
<StyledCollapseItemHeading className="nextui-collapse-item-heading">
<StyledCollapseItemButton
{...mergeProps(buttonProps, focusProps)}
ref={domRef}
className="nextui-collapse-item-button"
disabled={isDisabled}
isFocusVisible={isFocusVisible}
>
<StyledCollapseItemTitle className="nextui-collapse-item-title">
{item.props?.title}
</StyledCollapseItemTitle>
{indicatorComponent}
</StyledCollapseItemButton>
</StyledCollapseItemHeading>
<Expand isExpanded={isOpen}>
<NextUI.Div {...regionProps} className="nextui-collapse-item-content">
{item.props?.children}
</NextUI.Div>
</Expand>
</StyledCollapseItem>
);
});
if (__DEV__) {
CollapseItem.displayName = "NextUI.CollapseItem";
}
CollapseItem.toString = () => ".nextui-collapse-item";
export default CollapseItem;

103
packages/components/collapse/src/collapse.styles.ts
View File

@ -1,103 +0,0 @@
import {styled, generateVariants, GeneratedVariantsProps} from "@nextui-org/system";
import {cssFocusVisible} from "@nextui-org/shared-css";
/**
* Theme Variants
*/
export const itemVariants = generateVariants({
bgColor: "backgroundColor",
borderWeight: "borderWidth",
dividerWeight: "borderWidth",
});
export const StyledCollapse = styled("div", {
width: "100%",
maxWidth: "400px",
display: "block",
listStyle: "none",
padding: "0",
margin: "0",
});
export const StyledCollapseItem = styled(
"div",
{
zIndex: "inherit",
position: "relative",
display: "list-item",
margin: "0",
marginBottom: "$4",
borderBottom: "#333333 solid transparent",
"&:first-of-type": {
borderTop: "#333333 solid transparent",
},
".collapse-item-heading": {
margin: 0,
},
".collapse-item-indicator": {
marginLeft: "8px",
},
".collapse-item-content": {
display: "none",
background: "red",
padding: "6px 10px 10px",
},
variants: {
isOpen: {
true: {
".collapse-item-content": {
display: "block",
},
},
},
isSelectable: {},
isDisabled: {
true: {},
},
},
},
itemVariants,
);
export const StyledCollapseItemHeading = styled("h2", {});
export const StyledCollapseItemButton = styled(
"button",
{
width: "100%",
display: "flex",
appearance: "none",
alignItems: "center",
padding: "$4 $6",
background: "transparent",
border: "none",
outline: "none",
cursor: "pointer",
},
cssFocusVisible,
);
export const StyledCollapseItemTitle = styled("div", {
flex: "1 1 0%",
textAlign: "left",
});
export const StyledCollapseItemIndicator = styled("span", {
flexShrink: 0,
variants: {
isOpen: {
true: {
svg: {
transform: "rotateZ(-90deg)",
},
},
false: {
svg: {
transform: "rotateZ(0deg)",
},
},
},
},
});
export type CollapseItemVariantProps = GeneratedVariantsProps<typeof itemVariants>;

47
packages/components/collapse/src/collapse.tsx
View File

@ -1,47 +0,0 @@
import {mergeProps} from "@react-aria/utils";
import {forwardRef} from "@nextui-org/system";
import {clsx, __DEV__} from "@nextui-org/shared-utils";
import CollapseItemBase from "./base/collapse-item-base";
import CollapseItem from "./collapse-item";
import {StyledCollapse} from "./collapse.styles";
import {UseCollapseProps, useCollapse} from "./use-collapse";
export interface CollapseProps<T extends object = {}> extends Omit<UseCollapseProps<T>, "ref"> {}
type CompoundCollapse = {
Item: typeof CollapseItemBase;
};
const Collapse = forwardRef<CollapseProps, "div", CompoundCollapse>((props, ref) => {
const {className, domRef, state, focusedKey, setFocusedKey, collapseProps, ...otherProps} =
useCollapse({ref, ...props});
return (
<StyledCollapse
ref={domRef}
className={clsx("nextui-collapse", className)}
{...mergeProps(collapseProps, otherProps)}
>
{[...state.collection].map((item) => (
<CollapseItem
key={item.key}
focusedKey={focusedKey}
item={item}
state={state}
onFocusChange={(isFocused) => isFocused && setFocusedKey(item.key)}
/>
))}
</StyledCollapse>
);
});
Collapse.Item = CollapseItemBase;
if (__DEV__) {
Collapse.displayName = "NextUI.Collapse";
}
Collapse.toString = () => ".nextui-collapse";
export default Collapse;

7
packages/components/collapse/src/index.ts
View File

@ -1,7 +0,0 @@
// export types
export type {CollapseProps} from "./collapse";
export type {CollapseItemProps} from "./collapse-item";
export type {RenderIndicatorProps} from "./base/collapse-item-base";
// export component
export {default as Collapse} from "./collapse";

109
packages/components/collapse/src/use-collapse-item.tsx
View File

@ -1,109 +0,0 @@
import type {CollapseItemBaseProps} from "./base/collapse-item-base";
import {useFocusRing} from "@react-aria/focus";
import {TreeState} from "@react-stately/tree";
import {callAllHandlers, ReactRef} from "@nextui-org/shared-utils";
import {useAccordionItem, NodeWithProps} from "@nextui-org/aria-utils";
import {useDOMRef} from "@nextui-org/dom-utils";
import {Key} from "react";
import CollapseIcon from "./collapse-icon";
export interface UseCollapseItemProps<T extends object> extends CollapseItemBaseProps<T> {
/**
* The collapse item ref.
*/
ref?: ReactRef<HTMLButtonElement | null>;
/**
* The current collapse focused key.
* @internal
* @info This prop is necessary for the focus to work properly.
* Due to the fact that the selectionManager focusedKey is no a state.
*/
focusedKey?: Key | null;
/**
* The item node.
*/
item: NodeWithProps<T, CollapseItemBaseProps<T>>;
/**
* The tree state.
*/
state: TreeState<T>;
/**
* Whether the collapse item is disabled.
* @default false
*/
isDisabled?: boolean;
}
export function useCollapseItem<T extends object>(props: UseCollapseItemProps<T>) {
const {item, ...propsWithoutItem} = props;
const {
ref,
css = item.props?.css ?? {},
as = item.props?.as,
state,
focusedKey,
subtitle = item.props?.subtitle,
indicator = item.props?.indicator ?? <CollapseIcon />,
variant = item.props?.variant ?? "default",
withDivider = item.props?.withDivider ?? true,
borderWeight = item.props?.borderWeight ?? "normal",
dividerWeight = item.props?.dividerWeight ?? "light",
disableAnimation = item.props?.disableAnimation ?? false,
bgColor = item.props?.bgColor,
isDisabled: groupDisabled = false,
onFocusChange,
...otherProps
} = propsWithoutItem;
const domRef = useDOMRef(ref);
const {buttonProps, regionProps} = useAccordionItem({item}, {...state, focusedKey}, domRef);
const {isFocusVisible, focusProps} = useFocusRing({
autoFocus: item.props?.autoFocus,
});
const isDisabled = state.disabledKeys.has(item.key) || groupDisabled;
const isOpen = state.selectionManager.isSelected(item.key);
const handleFocus = () => {
onFocusChange?.(true);
};
const handleBlur = () => {
onFocusChange?.(false);
};
return {
as,
domRef,
item,
css,
borderWeight,
dividerWeight,
bgColor,
indicator,
subtitle,
variant,
isDisabled,
isOpen,
isFocusVisible,
withDivider,
disableAnimation,
buttonProps,
regionProps,
focusProps,
onFocus: callAllHandlers(
handleFocus,
focusProps.onFocus,
otherProps.onFocus,
item.props?.onFocus,
),
onBlur: callAllHandlers(handleBlur, focusProps.onBlur, otherProps.onBlur, item.props?.onBlur),
...otherProps,
};
}
export type UseCollapseItemReturn = ReturnType<typeof useCollapseItem>;

82
packages/components/collapse/src/use-collapse.ts
View File

@ -1,82 +0,0 @@
import type {HTMLNextUIProps} from "@nextui-org/system";
import type {MultipleSelection, SelectionBehavior} from "@react-types/shared";
import type {ReactRef} from "@nextui-org/shared-utils";
import {useState, Key} from "react";
import {AriaAccordionProps} from "@react-types/accordion";
import {useTreeState} from "@react-stately/tree";
import {useAccordion} from "@react-aria/accordion";
import {useDOMRef} from "@nextui-org/dom-utils";
interface Props extends HTMLNextUIProps<"div"> {
/**
* The collapse ref.
*/
ref?: ReactRef<HTMLDivElement | null>;
selectionBehavior?: SelectionBehavior;
}
export type UseCollapseProps<T extends object> = Props & AriaAccordionProps<T> & MultipleSelection;
export function useCollapse<T extends object>(props: UseCollapseProps<T>) {
const {
ref,
children,
items,
expandedKeys,
defaultExpandedKeys,
disabledKeys,
selectedKeys,
selectionMode = "single",
selectionBehavior = "toggle",
disallowEmptySelection,
defaultSelectedKeys,
onExpandedChange,
onSelectionChange,
...otherProps
} = props;
const [focusedKey, setFocusedKey] = useState<Key | null>(null);
const commonProps = {
children,
items,
};
const expandableProps = {
expandedKeys,
defaultExpandedKeys,
onExpandedChange,
};
const treeProps = {
disabledKeys,
selectedKeys,
selectionMode,
selectionBehavior,
disallowEmptySelection,
defaultSelectedKeys: defaultSelectedKeys ?? defaultExpandedKeys,
onSelectionChange,
...commonProps,
...expandableProps,
};
const accordionProps = {
...commonProps,
...expandableProps,
};
const domRef = useDOMRef(ref);
const state = useTreeState(treeProps);
state.selectionManager.setFocusedKey = (key: Key | null) => {
setFocusedKey(key);
};
const {accordionProps: collapseProps} = useAccordion(accordionProps, state, domRef);
return {domRef, state, focusedKey, setFocusedKey, collapseProps, ...otherProps};
}
export type UseCollapseReturn = ReturnType<typeof useCollapse>;

82
packages/components/collapse/stories/collapse.stories.tsx
View File

@ -1,82 +0,0 @@
import React from "react";
import {Meta} from "@storybook/react";
import {Collapse} from "../src";
export default {
title: "Surfaces/Collapse",
component: Collapse,
} as Meta;
export const Default = () => (
<Collapse selectionMode="single">
<Collapse.Item
key="1"
bgColor={{
"@xsMax": "accents0",
}}
title="Your files"
>
file
</Collapse.Item>
<Collapse.Item key="2" title="Shared with you">
shared
</Collapse.Item>
<Collapse.Item key="3" title="Last item">
last
</Collapse.Item>
<Collapse.Item key="4" title="Four item">
four
</Collapse.Item>
</Collapse>
);
export const CustomIndicator = () => {
const renderIndicator = ({isOpen}) => {
return isOpen ? <span>🔽</span> : <span>🚀</span>;
};
return (
<Collapse selectionMode="single">
<Collapse.Item key="1" indicator={renderIndicator} title="Your files">
file
</Collapse.Item>
<Collapse.Item key="2" title="Shared with you">
shared
</Collapse.Item>
<Collapse.Item key="3" title="Last item">
last
</Collapse.Item>
<Collapse.Item key="4" title="Four item">
four
</Collapse.Item>
</Collapse>
);
};
export const Controlled = () => {
const [expandedKeys, setExpandedKeys] = React.useState<Set<React.Key>>(new Set([]));
return (
<Collapse
defaultExpandedKeys={["1"]}
disabledKeys={["3"]}
expandedKeys={expandedKeys}
selectionMode="single"
onExpandedChange={setExpandedKeys}
>
<Collapse.Item key="1" title="Your files">
file
</Collapse.Item>
<Collapse.Item key="2" title="Shared with you">
shared
</Collapse.Item>
<Collapse.Item key="3" title="Last item">
last
</Collapse.Item>
<Collapse.Item key="4" title="Four item">
four
</Collapse.Item>
</Collapse>
);
};

10
packages/components/collapse/tsconfig.json
View File

@ -1,10 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"tailwind-variants": ["../../../node_modules/tailwind-variants"]
},
},
"include": ["src", "index.ts"]
}