@skalfa/skalfa-component 1.0.49 → 1.0.50

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 (4) hide show
  1. package/dist/modal/FloatingPage.component.d.ts +2 -1
  2. package/dist/modal/FloatingPage.component.js +2 -2
  3. package/package.json +1 -1
  4. package/src/modal/FloatingPage.component.tsx +20 -15
package/dist/modal/FloatingPage.component.d.ts CHANGED
@@ -5,10 +5,11 @@ export interface FloatingPageProps {
5
5
  title?: string | ReactNode;
6
6
  children?: any;
7
7
  tip?: string | ReactNode;
8
+ header?: false | ReactNode;
8
9
  footer?: string | ReactNode;
9
10
  size?: string | number;
10
11
  maxSize?: string | number;
11
12
  /** Use custom class with: "backdrop::", "header::", "footer::". */
12
13
  className?: string;
13
14
  }
14
- export declare function FloatingPageComponent({ show, onClose, title, children, tip, footer, className, size, maxSize, }: FloatingPageProps): import("@types/react").JSX.Element;
15
+ export declare function FloatingPageComponent({ show, onClose, title, children, tip, footer, header, className, size, maxSize, }: FloatingPageProps): import("@types/react").JSX.Element;
package/dist/modal/FloatingPage.component.js CHANGED
@@ -8,7 +8,7 @@ const Button_component_1 = require("../button/Button.component");
8
8
  const _utils_1 = require("@utils");
9
9
  const BottomSheet_component_1 = require("./BottomSheet.component");
10
10
  ;
11
- function FloatingPageComponent({ show, onClose, title, children, tip, footer, className = "", size, maxSize, }) {
11
+ function FloatingPageComponent({ show, onClose, title, children, tip, footer, header, className = "", size, maxSize, }) {
12
12
  const { isSm } = (0, _utils_1.useResponsive)();
13
13
  (0, react_1.useEffect)(() => {
14
14
  if (show) {
@@ -27,5 +27,5 @@ function FloatingPageComponent({ show, onClose, title, children, tip, footer, cl
27
27
  if (isSm) {
28
28
  return ((0, jsx_runtime_1.jsxs)(BottomSheet_component_1.BottomSheetComponent, { show: show, onClose: onClose, size: size, maxSize: maxSize, footer: footer, className: className, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })) }), show && children] }));
29
29
  }
30
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("floating-page", !show && "top-[200vh] md:top-0 md:-right-[200vw]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", variant: "simple", paint: "danger", onClick: () => onClose() })] }), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer absolute bottom-0 w-full", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
30
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("floating-page", !show && "top-[200vh] md:top-0 md:-right-[200vw]", (0, _utils_1.pcn)(className, "base")), children: [(header == undefined || header != false) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", variant: "simple", paint: "danger", onClick: () => onClose() })] })), !!header && header, show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer absolute bottom-0 w-full", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
31
31
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skalfa/skalfa-component",
3
- "version": "1.0.49",
3
+ "version": "1.0.50",
4
4
  "description": "Reusable UI components for Skalfa App.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/modal/FloatingPage.component.tsx CHANGED
@@ -15,6 +15,7 @@ export interface FloatingPageProps {
15
15
  title ?: string | ReactNode;
16
16
  children ?: any;
17
17
  tip ?: string | ReactNode;
18
+ header ?: false | ReactNode;
18
19
  footer ?: string | ReactNode;
19
20
  size ?: string | number;
20
21
  maxSize ?: string | number;
@@ -33,6 +34,7 @@ export function FloatingPageComponent({
33
34
  children,
34
35
  tip,
35
36
  footer,
37
+ header,
36
38
  className = "",
37
39
  size,
38
40
  maxSize,
@@ -98,22 +100,25 @@ export function FloatingPageComponent({
98
100
  pcn<CT>(className, "base"),
99
101
  )}
100
102
  >
101
- <div className={cn("modal-header", pcn<CT>(className, "header"))}>
102
- {title && (
103
- <div>
104
- <h6 className="modal-title">{title}</h6>
105
- {tip && <p className="modal-tip">{tip}</p>}
106
- </div>
107
- )}
103
+ {(header == undefined || header != false) && (
104
+ <div className={cn("modal-header", pcn<CT>(className, "header"))}>
105
+ {title && (
106
+ <div>
107
+ <h6 className="modal-title">{title}</h6>
108
+ {tip && <p className="modal-tip">{tip}</p>}
109
+ </div>
110
+ )}
108
111
 
109
- <ButtonComponent
110
- icon="solid/times"
111
- variant="simple"
112
- paint="danger"
113
- onClick={() => onClose()}
114
- />
115
- </div>
116
-
112
+ <ButtonComponent
113
+ icon="solid/times"
114
+ variant="simple"
115
+ paint="danger"
116
+ onClick={() => onClose()}
117
+ />
118
+ </div>
119
+ )}
120
+
121
+ {!!header && header}
117
122
 
118
123
  {show && children}
119
124