next-helios-fe 1.1.39 → 1.1.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/content-container/accordion/index.d.ts +3 -0
- package/dist/components/content-container/accordion/item.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/content-container/accordion/index.tsx +9 -2
- package/src/components/content-container/accordion/item.tsx +18 -11
- package/src/components/content-container/tab/index.tsx +1 -1
- package/src/components/form/input/number.tsx +1 -1
package/package.json
CHANGED
@@ -4,20 +4,27 @@ import { Item, type ItemProps } from "./item";
|
|
4
4
|
|
5
5
|
interface AccordionProps {
|
6
6
|
children: React.ReactNode;
|
7
|
+
options?: {
|
8
|
+
twoColumns?: boolean;
|
9
|
+
};
|
7
10
|
}
|
8
11
|
|
9
12
|
interface AccordionComponent extends React.FC<AccordionProps> {
|
10
13
|
Item: React.FC<ItemProps>;
|
11
14
|
}
|
12
15
|
|
13
|
-
export const Accordion: AccordionComponent = ({ children }) => {
|
16
|
+
export const Accordion: AccordionComponent = ({ children, options }) => {
|
14
17
|
const childrenList = React.Children.toArray(children);
|
15
18
|
const itemList = childrenList.filter((child) => {
|
16
19
|
return (child as React.ReactElement).type === Accordion.Item;
|
17
20
|
});
|
18
21
|
|
19
22
|
return (
|
20
|
-
<div
|
23
|
+
<div
|
24
|
+
className={`grid gap-x-4 gap-y-2 w-full h-min ${
|
25
|
+
options?.twoColumns && "lg:grid-cols-2"
|
26
|
+
}`}
|
27
|
+
>
|
21
28
|
{itemList.map((item) => {
|
22
29
|
return item;
|
23
30
|
})}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
"use client";
|
2
|
-
import React, { useState } from "react";
|
2
|
+
import React, { useState, useEffect } from "react";
|
3
3
|
import { Icon } from "@iconify/react";
|
4
4
|
|
5
5
|
export interface ItemProps {
|
@@ -7,6 +7,7 @@ export interface ItemProps {
|
|
7
7
|
title: string;
|
8
8
|
subTitle?: string;
|
9
9
|
options?: {
|
10
|
+
defaultOpen?: boolean;
|
10
11
|
border?: boolean;
|
11
12
|
};
|
12
13
|
}
|
@@ -17,35 +18,41 @@ export const Item: React.FC<ItemProps> = ({
|
|
17
18
|
subTitle,
|
18
19
|
options,
|
19
20
|
}) => {
|
20
|
-
const [
|
21
|
+
const [open, setOpen] = useState(false);
|
22
|
+
|
23
|
+
useEffect(() => {
|
24
|
+
if (options?.defaultOpen) {
|
25
|
+
setOpen(true);
|
26
|
+
}
|
27
|
+
}, [options?.defaultOpen]);
|
21
28
|
|
22
29
|
return (
|
23
30
|
<div
|
24
|
-
className={`rounded-md overflow-hidden ${options?.border && "border"}`}
|
31
|
+
className={`h-min rounded-md overflow-hidden ${options?.border && "border"}`}
|
25
32
|
>
|
26
33
|
<div
|
27
34
|
className={`grid w-full overflow-hidden duration-300 ${
|
28
|
-
|
35
|
+
open ? "border-l-4 border-primary" : "border-l-0"
|
29
36
|
}`}
|
30
37
|
>
|
31
38
|
<button
|
32
39
|
type="button"
|
33
40
|
className={`flex justify-between items-center w-full px-4 py-2 hover:bg-secondary-light ${
|
34
|
-
|
41
|
+
open && "text-primary"
|
35
42
|
}`}
|
36
43
|
onClick={() => {
|
37
|
-
|
44
|
+
setOpen(!open);
|
38
45
|
}}
|
39
46
|
>
|
40
|
-
<div className="flex flex-col items-start">
|
41
|
-
<span>{title}</span>
|
42
|
-
{subTitle && <span className="text-sm">{subTitle}</span>}
|
47
|
+
<div className="flex-1 flex flex-col items-start">
|
48
|
+
<span className="text-start">{title}</span>
|
49
|
+
{subTitle && <span className="text-start text-sm">{subTitle}</span>}
|
43
50
|
</div>
|
44
|
-
<Icon icon={`gravity-ui:chevron-${
|
51
|
+
<Icon icon={`gravity-ui:chevron-${open ? "up" : "down"}`} />
|
45
52
|
</button>
|
46
53
|
<div
|
47
54
|
className={`overflow-auto duration-300 transition-all ${
|
48
|
-
|
55
|
+
open ? "max-h-96 border-t" : "max-h-0"
|
49
56
|
}`}
|
50
57
|
>
|
51
58
|
<div className="px-6 py-4">{children}</div>
|
@@ -28,7 +28,7 @@ export const Tab: TabComponent = ({ children, tabs, options }) => {
|
|
28
28
|
|
29
29
|
return (
|
30
30
|
<div
|
31
|
-
className={`flex w-full h-full ${
|
31
|
+
className={`flex w-full h-full overlow-hidden ${
|
32
32
|
options?.variant !== "horizontal"
|
33
33
|
? "flex-col divide-y-1"
|
34
34
|
: "flex-col lg:flex-row divide-y-1 lg:divide-y-0 divide-x-0 lg:divide-x-1"
|
@@ -25,7 +25,7 @@ export const Number: React.FC<NumberProps> = ({ options, label, ...rest }) => {
|
|
25
25
|
if (rest.value) {
|
26
26
|
setTempValue(rest.value as string);
|
27
27
|
return;
|
28
|
-
} else if (rest.defaultValue) {
|
28
|
+
} else if (rest.defaultValue || rest.defaultValue === 0) {
|
29
29
|
setTempValue(rest.defaultValue as string);
|
30
30
|
return;
|
31
31
|
}
|