react-better-html 1.1.112 → 1.1.113
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/index.js +101 -96
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +101 -96
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -2899,6 +2899,7 @@ var Divider_default = {
|
|
|
2899
2899
|
|
|
2900
2900
|
// src/components/Modal.tsx
|
|
2901
2901
|
var import_react11 = require("react");
|
|
2902
|
+
var import_react_dom = require("react-dom");
|
|
2902
2903
|
var import_styled_components8 = __toESM(require("styled-components"));
|
|
2903
2904
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2904
2905
|
var DialogStylesElement = import_styled_components8.default.dialog.withConfig({
|
|
@@ -2995,101 +2996,104 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
|
|
|
2995
2996
|
},
|
|
2996
2997
|
[onClickOpen, onClickClose, isOpened]
|
|
2997
2998
|
);
|
|
2998
|
-
return
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
2999
|
+
return (0, import_react_dom.createPortal)(
|
|
3000
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3001
|
+
DialogStylesElement,
|
|
3002
|
+
{
|
|
3003
|
+
theme: theme2,
|
|
3004
|
+
colorTheme,
|
|
3005
|
+
opacity: !isOpened ? 0 : 1,
|
|
3006
|
+
onClose: onClickClose,
|
|
3007
|
+
ref: dialogRef,
|
|
3008
|
+
children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3009
|
+
Div_default.column,
|
|
3010
|
+
{
|
|
3011
|
+
position: "relative",
|
|
3012
|
+
width: "100%",
|
|
3013
|
+
maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
|
|
3014
|
+
minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
|
|
3015
|
+
alignItems: "center",
|
|
3016
|
+
justifyContent: "center",
|
|
3017
|
+
marginBlock: theme2.styles.space,
|
|
3018
|
+
marginInline: "auto",
|
|
3019
|
+
transform: `translateY(${theme2.styles.space}px)`,
|
|
3020
|
+
transition: theme2.styles.transition,
|
|
3021
|
+
animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
|
|
3022
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3023
|
+
Div_default,
|
|
3024
|
+
{
|
|
3025
|
+
position: "relative",
|
|
3026
|
+
width: "100%",
|
|
3027
|
+
minHeight: 32 + theme2.styles.space * 2,
|
|
3028
|
+
backgroundColor: theme2.colors.backgroundBase,
|
|
3029
|
+
borderRadius: theme2.styles.borderRadius * 2,
|
|
3030
|
+
paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
|
|
3031
|
+
paddingBlock: !title ? theme2.styles.space : void 0,
|
|
3032
|
+
overflow,
|
|
3033
|
+
children: [
|
|
3034
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
3035
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3036
|
+
Div_default.row,
|
|
3037
|
+
{
|
|
3038
|
+
alignItems: "center",
|
|
3039
|
+
gap: theme2.styles.gap,
|
|
3040
|
+
backgroundColor: headerBackgroundColor,
|
|
3041
|
+
borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
|
|
3042
|
+
borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
|
|
3043
|
+
paddingInline: theme2.styles.space + theme2.styles.gap,
|
|
3044
|
+
paddingBlock: theme2.styles.space,
|
|
3045
|
+
transition: theme2.styles.transition,
|
|
3046
|
+
children: [
|
|
3047
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
|
|
3048
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3049
|
+
Text_default,
|
|
3050
|
+
{
|
|
3051
|
+
as: "h1",
|
|
3052
|
+
color: titleColor ?? theme2.colors.textPrimary,
|
|
3053
|
+
transition: theme2.styles.transition,
|
|
3054
|
+
children: title
|
|
3055
|
+
}
|
|
3056
|
+
),
|
|
3057
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3058
|
+
Text_default,
|
|
3059
|
+
{
|
|
3060
|
+
color: descriptionColor ?? theme2.colors.textSecondary,
|
|
3061
|
+
transition: theme2.styles.transition,
|
|
3062
|
+
children: description
|
|
3063
|
+
}
|
|
3064
|
+
)
|
|
3065
|
+
] }),
|
|
3046
3066
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3047
|
-
|
|
3048
|
-
{
|
|
3049
|
-
as: "h1",
|
|
3050
|
-
color: titleColor ?? theme2.colors.textPrimary,
|
|
3051
|
-
transition: theme2.styles.transition,
|
|
3052
|
-
children: title
|
|
3053
|
-
}
|
|
3054
|
-
),
|
|
3055
|
-
description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3056
|
-
Text_default,
|
|
3067
|
+
Button_default.icon,
|
|
3057
3068
|
{
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3069
|
+
icon: "XMark",
|
|
3070
|
+
marginTop: 1,
|
|
3071
|
+
iconColor: titleColor,
|
|
3072
|
+
onClick: onClickClose,
|
|
3073
|
+
transition: theme2.styles.transition
|
|
3061
3074
|
}
|
|
3062
3075
|
)
|
|
3063
|
-
]
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
]
|
|
3076
|
+
]
|
|
3077
|
+
}
|
|
3078
|
+
),
|
|
3079
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default.horizontal, {})
|
|
3080
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
|
|
3081
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3082
|
+
Div_default,
|
|
3083
|
+
{
|
|
3084
|
+
paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
|
|
3085
|
+
paddingBlock: title ? theme2.styles.space : void 0,
|
|
3086
|
+
children
|
|
3075
3087
|
}
|
|
3076
|
-
)
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
}
|
|
3086
|
-
)
|
|
3087
|
-
]
|
|
3088
|
-
}
|
|
3089
|
-
)
|
|
3090
|
-
}
|
|
3091
|
-
) : void 0
|
|
3092
|
-
}
|
|
3088
|
+
)
|
|
3089
|
+
]
|
|
3090
|
+
}
|
|
3091
|
+
)
|
|
3092
|
+
}
|
|
3093
|
+
) : void 0
|
|
3094
|
+
}
|
|
3095
|
+
),
|
|
3096
|
+
document.body
|
|
3093
3097
|
);
|
|
3094
3098
|
});
|
|
3095
3099
|
ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
|
|
@@ -3104,7 +3108,7 @@ ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmati
|
|
|
3104
3108
|
modalRef.current?.close();
|
|
3105
3109
|
}, [onContinue]);
|
|
3106
3110
|
(0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
|
|
3107
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
|
|
3108
3112
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }),
|
|
3109
3113
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3110
3114
|
Div_default.row,
|
|
@@ -3133,7 +3137,7 @@ ModalComponent.destructive = (0, import_react11.forwardRef)(function Destructive
|
|
|
3133
3137
|
modalRef.current?.close();
|
|
3134
3138
|
}, [onDelete]);
|
|
3135
3139
|
(0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
|
|
3136
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
|
|
3137
3141
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
|
|
3138
3142
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3139
3143
|
Div_default.row,
|
|
@@ -3198,6 +3202,7 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
|
|
|
3198
3202
|
const mediaQuery = useMediaQuery();
|
|
3199
3203
|
const { app } = useBetterHtmlContextInternal();
|
|
3200
3204
|
const breakingPoint = mediaQuery.size1000;
|
|
3205
|
+
const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
|
|
3201
3206
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3202
3207
|
Div_default.row,
|
|
3203
3208
|
{
|
|
@@ -3207,8 +3212,8 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
|
|
|
3207
3212
|
justifyContent: "center",
|
|
3208
3213
|
backgroundColor: pageBackgroundColor,
|
|
3209
3214
|
children: [
|
|
3210
|
-
sideImagePosition === "left" &&
|
|
3211
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.column, { width: `${
|
|
3215
|
+
sideImagePosition === "left" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
|
|
3216
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3212
3217
|
Div_default.box,
|
|
3213
3218
|
{
|
|
3214
3219
|
width: `calc(100% - ${theme2.styles.space}px * 2)`,
|
|
@@ -3220,8 +3225,8 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
|
|
|
3220
3225
|
children
|
|
3221
3226
|
}
|
|
3222
3227
|
) }),
|
|
3223
|
-
sideImagePosition === "right" &&
|
|
3224
|
-
|
|
3228
|
+
sideImagePosition === "right" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
|
|
3229
|
+
withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3225
3230
|
Div_default,
|
|
3226
3231
|
{
|
|
3227
3232
|
position: "fixed",
|