next-helios-fe 1.8.124 → 1.8.126

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.
Files changed (6) hide show
  1. package/dist/components/calendar/big-calendar/index.d.ts +14 -0
  2. package/dist/components/calendar/big-calendar/toolbar.d.ts +14 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/calendar/big-calendar/index.tsx +15 -0
  6. package/src/components/calendar/big-calendar/toolbar.tsx +93 -48
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.124",
3
+ "version": "1.8.126",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/calendar/big-calendar/index.tsx CHANGED
@@ -12,6 +12,20 @@ interface BigCalendarProps {
12
12
  title?: string;
13
13
  options?: {
14
14
  showEventListFilter?: boolean;
15
+ toolbar?: {
16
+ month?: {
17
+ show?: boolean
18
+ },
19
+ week?: {
20
+ show?: boolean
21
+ },
22
+ day?: {
23
+ show?: boolean
24
+ },
25
+ list?: {
26
+ show?: boolean
27
+ },
28
+ }
15
29
  };
16
30
  eventList: {
17
31
  id: number | string;
@@ -102,6 +116,7 @@ export const BigCalendar: React.FC<BigCalendarProps> = ({
102
116
  return (
103
117
  <Toolbar
104
118
  toolbar={toolbar}
119
+ option={options?.toolbar}
105
120
  active={active}
106
121
  setActive={setActive}
107
122
  />
package/src/components/calendar/big-calendar/toolbar.tsx CHANGED
@@ -5,12 +5,27 @@ import dayjs from "dayjs";
5
5
 
6
6
  interface ToolbarProps {
7
7
  toolbar: any;
8
+ option?: {
9
+ month?: {
10
+ show?: boolean;
11
+ };
12
+ week?: {
13
+ show?: boolean;
14
+ };
15
+ day?: {
16
+ show?: boolean;
17
+ };
18
+ list?: {
19
+ show?: boolean;
20
+ };
21
+ };
8
22
  active: string;
9
23
  setActive: (active: string) => void;
10
24
  }
11
25
 
12
26
  export const Toolbar: React.FC<ToolbarProps> = ({
13
27
  toolbar,
28
+ option,
14
29
  active,
15
30
  setActive,
16
31
  }) => {
@@ -44,54 +59,84 @@ export const Toolbar: React.FC<ToolbarProps> = ({
44
59
  </span>
45
60
  </div>
46
61
  <div className="flex">
47
- <button
48
- type="button"
49
- className={`px-4 py-1.5 rounded-l-md text-primary hover:bg-primary-light ${
50
- active === "month" ? "bg-primary-light" : "bg-primary-transparent"
51
- }`}
52
- onClick={() => {
53
- toolbar.onView("month");
54
- setActive("month");
55
- }}
56
- >
57
- Month
58
- </button>
59
- <button
60
- type="button"
61
- className={`px-4 py-1.5 border-x border-primary/30 text-primary hover:bg-primary-light ${
62
- active === "week" ? "bg-primary-light" : "bg-primary-transparent"
63
- }`}
64
- onClick={() => {
65
- toolbar.onView("week");
66
- setActive("week");
67
- }}
68
- >
69
- Week
70
- </button>
71
- <button
72
- type="button"
73
- className={`px-4 py-1.5 border-r border-primary/30 text-primary hover:bg-primary-light ${
74
- active === "day" ? "bg-primary-light" : "bg-primary-transparent"
75
- }`}
76
- onClick={() => {
77
- toolbar.onView("day");
78
- setActive("day");
79
- }}
80
- >
81
- Day
82
- </button>
83
- <button
84
- type="button"
85
- className={`px-3 py-1.5 rounded-r-md text-primary hover:bg-primary-light ${
86
- active === "agenda" ? "bg-primary-light" : "bg-primary-transparent"
87
- }`}
88
- onClick={() => {
89
- toolbar.onView("agenda");
90
- setActive("agenda");
91
- }}
92
- >
93
- List
94
- </button>
62
+ {option?.month?.show !== false && (
63
+ <button
64
+ type="button"
65
+ className={`px-4 py-1.5 text-primary hover:bg-primary-light ${
66
+ active === "month" ? "bg-primary-light" : "bg-primary-transparent"
67
+ } ${
68
+ option?.week?.show === false &&
69
+ option?.day?.show === false &&
70
+ option?.list?.show
71
+ ? "rounded-md"
72
+ : "rounded-l-md"
73
+ }`}
74
+ onClick={() => {
75
+ toolbar.onView("month");
76
+ setActive("month");
77
+ }}
78
+ >
79
+ Month
80
+ </button>
81
+ )}
82
+ {option?.week?.show !== false && (
83
+ <button
84
+ type="button"
85
+ className={`px-4 py-1.5 border-x border-primary/30 text-primary hover:bg-primary-light ${
86
+ active === "week" ? "bg-primary-light" : "bg-primary-transparent"
87
+ } ${option?.month?.show === false && "rounded-l-md"} ${
88
+ option?.day?.show === false &&
89
+ option?.list?.show === false &&
90
+ "rounded-r-md"
91
+ }`}
92
+ onClick={() => {
93
+ toolbar.onView("week");
94
+ setActive("week");
95
+ }}
96
+ >
97
+ Week
98
+ </button>
99
+ )}
100
+ {option?.day?.show !== false && (
101
+ <button
102
+ type="button"
103
+ className={`px-4 py-1.5 border-r border-primary/30 text-primary hover:bg-primary-light ${
104
+ active === "day" ? "bg-primary-light" : "bg-primary-transparent"
105
+ } ${
106
+ option?.month?.show === false &&
107
+ option?.week?.show === false &&
108
+ "rounded-l-md"
109
+ } ${option?.list?.show === false && "rounded-r-md"}`}
110
+ onClick={() => {
111
+ toolbar.onView("day");
112
+ setActive("day");
113
+ }}
114
+ >
115
+ Day
116
+ </button>
117
+ )}
118
+ {option?.list?.show !== false && (
119
+ <button
120
+ type="button"
121
+ className={`px-3 py-1.5 text-primary hover:bg-primary-light ${
122
+ active === "agenda"
123
+ ? "bg-primary-light"
124
+ : "bg-primary-transparent"
125
+ } ${
126
+ option?.month?.show === false &&
127
+ option?.week?.show === false &&
128
+ option?.day?.show === false
129
+ ? "rounded-md"
130
+ : "rounded-r-md"
131
+ }`}
132
+ onClick={() => {
133
+ toolbar.onView("agenda");
134
+ setActive("agenda");
135
+ }}
136
+ >
137
+ List
138
+ </button>
139
+ )}
95
140
  </div>
96
141
  </div>
97
142
  );