next-recomponents 1.7.12 → 1.7.14

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/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +36 -29
  4. package/dist/index.mjs +36 -29
  5. package/package.json +1 -1
  6. package/src/calendar/index.tsx +26 -18
package/dist/index.d.mts CHANGED
@@ -183,10 +183,11 @@ declare function useExcel(): {
183
183
  };
184
184
 
185
185
  interface CalendarProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
186
+ label: React.ReactNode;
186
187
  enabledDates: Date[];
187
188
  onChange?: any;
188
189
  value?: any;
189
190
  }
190
- declare function MyCalendar({ enabledDates, onChange, defaultValue, className, ...otherProps }: CalendarProps): react_jsx_runtime.JSX.Element | null;
191
+ declare function MyCalendar({ enabledDates, onChange, defaultValue, className, label, value, ...otherProps }: CalendarProps): react_jsx_runtime.JSX.Element | null;
191
192
 
192
193
  export { Alert, Button, Container, Form, Input, Modal, MyCalendar, Pre, Select, Table, type TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };
package/dist/index.d.ts CHANGED
@@ -183,10 +183,11 @@ declare function useExcel(): {
183
183
  };
184
184
 
185
185
  interface CalendarProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
186
+ label: React.ReactNode;
186
187
  enabledDates: Date[];
187
188
  onChange?: any;
188
189
  value?: any;
189
190
  }
190
- declare function MyCalendar({ enabledDates, onChange, defaultValue, className, ...otherProps }: CalendarProps): react_jsx_runtime.JSX.Element | null;
191
+ declare function MyCalendar({ enabledDates, onChange, defaultValue, className, label, value, ...otherProps }: CalendarProps): react_jsx_runtime.JSX.Element | null;
191
192
 
192
193
  export { Alert, Button, Container, Form, Input, Modal, MyCalendar, Pre, Select, Table, type TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };
package/dist/index.js CHANGED
@@ -44486,17 +44486,21 @@ function MyCalendar(_a) {
44486
44486
  enabledDates,
44487
44487
  onChange,
44488
44488
  defaultValue = "",
44489
- className = ""
44489
+ className = "",
44490
+ label = "",
44491
+ value
44490
44492
  } = _b, otherProps = __objRest(_b, [
44491
44493
  "enabledDates",
44492
44494
  "onChange",
44493
44495
  "defaultValue",
44494
- "className"
44496
+ "className",
44497
+ "label",
44498
+ "value"
44495
44499
  ]);
44496
44500
  const modalRef = (0, import_react31.useRef)(null);
44497
44501
  const [selectedDate, setSelectedDate] = (0, import_react31.useState)(null);
44498
44502
  const [dateStr, setDateStr] = (0, import_react31.useState)(
44499
- defaultValue
44503
+ defaultValue || value
44500
44504
  );
44501
44505
  const [visible, setVisible] = (0, import_react31.useState)(false);
44502
44506
  (0, import_react31.useEffect)(() => {
@@ -44515,32 +44519,35 @@ function MyCalendar(_a) {
44515
44519
  return null;
44516
44520
  }
44517
44521
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
44518
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
44519
- "div",
44520
- {
44521
- onClick: () => {
44522
- var _a2, _b2;
44523
- return (_b2 = (_a2 = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a2.showModal) == null ? void 0 : _b2.call(_a2);
44524
- },
44525
- className: "cursor-pointer flex items-center justify-center",
44526
- children: [
44527
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
44528
- "input",
44529
- __spreadProps(__spreadValues({}, otherProps), {
44530
- className: [
44531
- "p-2 w-full rounded border shadow cursor-pointer",
44532
- className
44533
- ].join(" "),
44534
- value: dateStr,
44535
- onChange: () => {
44536
- },
44537
- readOnly: true
44538
- })
44539
- ),
44540
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarIcon, {}) })
44541
- ]
44542
- }
44543
- ),
44522
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex flex-col gap-1", children: [
44523
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-bold ", children: label }),
44524
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
44525
+ "div",
44526
+ {
44527
+ onClick: () => {
44528
+ var _a2, _b2;
44529
+ return (_b2 = (_a2 = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a2.showModal) == null ? void 0 : _b2.call(_a2);
44530
+ },
44531
+ className: "cursor-pointer flex items-center justify-center",
44532
+ children: [
44533
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
44534
+ "input",
44535
+ __spreadProps(__spreadValues({}, otherProps), {
44536
+ className: [
44537
+ "p-2 w-full rounded border shadow cursor-pointer",
44538
+ className
44539
+ ].join(" "),
44540
+ value: dateStr,
44541
+ onChange: () => {
44542
+ },
44543
+ readOnly: true
44544
+ })
44545
+ ),
44546
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarIcon, {}) })
44547
+ ]
44548
+ }
44549
+ ) })
44550
+ ] }),
44544
44551
  visible && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
44545
44552
  "dialog",
44546
44553
  {
package/dist/index.mjs CHANGED
@@ -44479,17 +44479,21 @@ function MyCalendar(_a) {
44479
44479
  enabledDates,
44480
44480
  onChange,
44481
44481
  defaultValue = "",
44482
- className = ""
44482
+ className = "",
44483
+ label = "",
44484
+ value
44483
44485
  } = _b, otherProps = __objRest(_b, [
44484
44486
  "enabledDates",
44485
44487
  "onChange",
44486
44488
  "defaultValue",
44487
- "className"
44489
+ "className",
44490
+ "label",
44491
+ "value"
44488
44492
  ]);
44489
44493
  const modalRef = useRef7(null);
44490
44494
  const [selectedDate, setSelectedDate] = useState10(null);
44491
44495
  const [dateStr, setDateStr] = useState10(
44492
- defaultValue
44496
+ defaultValue || value
44493
44497
  );
44494
44498
  const [visible, setVisible] = useState10(false);
44495
44499
  useEffect9(() => {
@@ -44508,32 +44512,35 @@ function MyCalendar(_a) {
44508
44512
  return null;
44509
44513
  }
44510
44514
  return /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
44511
- /* @__PURE__ */ jsxs14(
44512
- "div",
44513
- {
44514
- onClick: () => {
44515
- var _a2, _b2;
44516
- return (_b2 = (_a2 = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a2.showModal) == null ? void 0 : _b2.call(_a2);
44517
- },
44518
- className: "cursor-pointer flex items-center justify-center",
44519
- children: [
44520
- /* @__PURE__ */ jsx22(
44521
- "input",
44522
- __spreadProps(__spreadValues({}, otherProps), {
44523
- className: [
44524
- "p-2 w-full rounded border shadow cursor-pointer",
44525
- className
44526
- ].join(" "),
44527
- value: dateStr,
44528
- onChange: () => {
44529
- },
44530
- readOnly: true
44531
- })
44532
- ),
44533
- /* @__PURE__ */ jsx22("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ jsx22(CalendarIcon, {}) })
44534
- ]
44535
- }
44536
- ),
44515
+ /* @__PURE__ */ jsxs14("label", { className: "flex flex-col gap-1", children: [
44516
+ /* @__PURE__ */ jsx22("div", { className: "font-bold ", children: label }),
44517
+ /* @__PURE__ */ jsx22("div", { children: /* @__PURE__ */ jsxs14(
44518
+ "div",
44519
+ {
44520
+ onClick: () => {
44521
+ var _a2, _b2;
44522
+ return (_b2 = (_a2 = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a2.showModal) == null ? void 0 : _b2.call(_a2);
44523
+ },
44524
+ className: "cursor-pointer flex items-center justify-center",
44525
+ children: [
44526
+ /* @__PURE__ */ jsx22(
44527
+ "input",
44528
+ __spreadProps(__spreadValues({}, otherProps), {
44529
+ className: [
44530
+ "p-2 w-full rounded border shadow cursor-pointer",
44531
+ className
44532
+ ].join(" "),
44533
+ value: dateStr,
44534
+ onChange: () => {
44535
+ },
44536
+ readOnly: true
44537
+ })
44538
+ ),
44539
+ /* @__PURE__ */ jsx22("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ jsx22(CalendarIcon, {}) })
44540
+ ]
44541
+ }
44542
+ ) })
44543
+ ] }),
44537
44544
  visible && /* @__PURE__ */ jsx22(
44538
44545
  "dialog",
44539
44546
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-recomponents",
3
- "version": "1.7.12",
3
+ "version": "1.7.14",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/calendar/index.tsx CHANGED
@@ -15,6 +15,7 @@ interface CalendarProps
15
15
  InputHTMLAttributes<HTMLInputElement>,
16
16
  HTMLInputElement
17
17
  > {
18
+ label: React.ReactNode;
18
19
  enabledDates: Date[];
19
20
  onChange?: any;
20
21
  value?: any;
@@ -25,12 +26,14 @@ export default function MyCalendar({
25
26
  onChange,
26
27
  defaultValue = "",
27
28
  className = "",
29
+ label = "",
30
+ value,
28
31
  ...otherProps
29
32
  }: CalendarProps) {
30
33
  const modalRef = useRef<HTMLDialogElement>(null);
31
34
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
32
35
  const [dateStr, setDateStr] = useState<string | number | readonly string[]>(
33
- defaultValue
36
+ defaultValue || value
34
37
  );
35
38
  const [visible, setVisible] = useState(false);
36
39
 
@@ -53,24 +56,29 @@ export default function MyCalendar({
53
56
 
54
57
  return (
55
58
  <div className="relative">
56
- <div
57
- onClick={() => modalRef?.current?.showModal?.()}
58
- className="cursor-pointer flex items-center justify-center"
59
- >
60
- <input
61
- {...otherProps}
62
- className={[
63
- "p-2 w-full rounded border shadow cursor-pointer",
64
- className,
65
- ].join(" ")}
66
- value={dateStr}
67
- onChange={() => {}}
68
- readOnly
69
- />
70
- <div className="absolute" style={{ right: "10px" }}>
71
- <CalendarIcon />
59
+ <label className="flex flex-col gap-1">
60
+ <div className="font-bold ">{label}</div>
61
+ <div>
62
+ <div
63
+ onClick={() => modalRef?.current?.showModal?.()}
64
+ className="cursor-pointer flex items-center justify-center"
65
+ >
66
+ <input
67
+ {...otherProps}
68
+ className={[
69
+ "p-2 w-full rounded border shadow cursor-pointer",
70
+ className,
71
+ ].join(" ")}
72
+ value={dateStr}
73
+ onChange={() => {}}
74
+ readOnly
75
+ />
76
+ <div className="absolute" style={{ right: "10px" }}>
77
+ <CalendarIcon />
78
+ </div>
79
+ </div>
72
80
  </div>
73
- </div>
81
+ </label>
74
82
 
75
83
  {visible && (
76
84
  <dialog