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.mjs
CHANGED
|
@@ -2819,6 +2819,7 @@ var Divider_default = {
|
|
|
2819
2819
|
|
|
2820
2820
|
// src/components/Modal.tsx
|
|
2821
2821
|
import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef6, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
|
|
2822
|
+
import { createPortal } from "react-dom";
|
|
2822
2823
|
import styled7 from "styled-components";
|
|
2823
2824
|
import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2824
2825
|
var DialogStylesElement = styled7.dialog.withConfig({
|
|
@@ -2915,101 +2916,104 @@ var ModalComponent = forwardRef6(function Modal({
|
|
|
2915
2916
|
},
|
|
2916
2917
|
[onClickOpen, onClickClose, isOpened]
|
|
2917
2918
|
);
|
|
2918
|
-
return
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
/* @__PURE__ */ jsxs5(
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2919
|
+
return createPortal(
|
|
2920
|
+
/* @__PURE__ */ jsx9(
|
|
2921
|
+
DialogStylesElement,
|
|
2922
|
+
{
|
|
2923
|
+
theme: theme2,
|
|
2924
|
+
colorTheme,
|
|
2925
|
+
opacity: !isOpened ? 0 : 1,
|
|
2926
|
+
onClose: onClickClose,
|
|
2927
|
+
ref: dialogRef,
|
|
2928
|
+
children: isOpenedLate ? /* @__PURE__ */ jsx9(
|
|
2929
|
+
Div_default.column,
|
|
2930
|
+
{
|
|
2931
|
+
position: "relative",
|
|
2932
|
+
width: "100%",
|
|
2933
|
+
maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
|
|
2934
|
+
minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
|
|
2935
|
+
alignItems: "center",
|
|
2936
|
+
justifyContent: "center",
|
|
2937
|
+
marginBlock: theme2.styles.space,
|
|
2938
|
+
marginInline: "auto",
|
|
2939
|
+
transform: `translateY(${theme2.styles.space}px)`,
|
|
2940
|
+
transition: theme2.styles.transition,
|
|
2941
|
+
animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
|
|
2942
|
+
children: /* @__PURE__ */ jsxs5(
|
|
2943
|
+
Div_default,
|
|
2944
|
+
{
|
|
2945
|
+
position: "relative",
|
|
2946
|
+
width: "100%",
|
|
2947
|
+
minHeight: 32 + theme2.styles.space * 2,
|
|
2948
|
+
backgroundColor: theme2.colors.backgroundBase,
|
|
2949
|
+
borderRadius: theme2.styles.borderRadius * 2,
|
|
2950
|
+
paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
|
|
2951
|
+
paddingBlock: !title ? theme2.styles.space : void 0,
|
|
2952
|
+
overflow,
|
|
2953
|
+
children: [
|
|
2954
|
+
title ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2955
|
+
/* @__PURE__ */ jsxs5(
|
|
2956
|
+
Div_default.row,
|
|
2957
|
+
{
|
|
2958
|
+
alignItems: "center",
|
|
2959
|
+
gap: theme2.styles.gap,
|
|
2960
|
+
backgroundColor: headerBackgroundColor,
|
|
2961
|
+
borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
|
|
2962
|
+
borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
|
|
2963
|
+
paddingInline: theme2.styles.space + theme2.styles.gap,
|
|
2964
|
+
paddingBlock: theme2.styles.space,
|
|
2965
|
+
transition: theme2.styles.transition,
|
|
2966
|
+
children: [
|
|
2967
|
+
/* @__PURE__ */ jsxs5(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
|
|
2968
|
+
/* @__PURE__ */ jsx9(
|
|
2969
|
+
Text_default,
|
|
2970
|
+
{
|
|
2971
|
+
as: "h1",
|
|
2972
|
+
color: titleColor ?? theme2.colors.textPrimary,
|
|
2973
|
+
transition: theme2.styles.transition,
|
|
2974
|
+
children: title
|
|
2975
|
+
}
|
|
2976
|
+
),
|
|
2977
|
+
description && /* @__PURE__ */ jsx9(
|
|
2978
|
+
Text_default,
|
|
2979
|
+
{
|
|
2980
|
+
color: descriptionColor ?? theme2.colors.textSecondary,
|
|
2981
|
+
transition: theme2.styles.transition,
|
|
2982
|
+
children: description
|
|
2983
|
+
}
|
|
2984
|
+
)
|
|
2985
|
+
] }),
|
|
2966
2986
|
/* @__PURE__ */ jsx9(
|
|
2967
|
-
|
|
2968
|
-
{
|
|
2969
|
-
as: "h1",
|
|
2970
|
-
color: titleColor ?? theme2.colors.textPrimary,
|
|
2971
|
-
transition: theme2.styles.transition,
|
|
2972
|
-
children: title
|
|
2973
|
-
}
|
|
2974
|
-
),
|
|
2975
|
-
description && /* @__PURE__ */ jsx9(
|
|
2976
|
-
Text_default,
|
|
2987
|
+
Button_default.icon,
|
|
2977
2988
|
{
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2989
|
+
icon: "XMark",
|
|
2990
|
+
marginTop: 1,
|
|
2991
|
+
iconColor: titleColor,
|
|
2992
|
+
onClick: onClickClose,
|
|
2993
|
+
transition: theme2.styles.transition
|
|
2981
2994
|
}
|
|
2982
2995
|
)
|
|
2983
|
-
]
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
]
|
|
2996
|
+
]
|
|
2997
|
+
}
|
|
2998
|
+
),
|
|
2999
|
+
/* @__PURE__ */ jsx9(Divider_default.horizontal, {})
|
|
3000
|
+
] }) : /* @__PURE__ */ jsx9(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ jsx9(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
|
|
3001
|
+
/* @__PURE__ */ jsx9(
|
|
3002
|
+
Div_default,
|
|
3003
|
+
{
|
|
3004
|
+
paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
|
|
3005
|
+
paddingBlock: title ? theme2.styles.space : void 0,
|
|
3006
|
+
children
|
|
2995
3007
|
}
|
|
2996
|
-
)
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
}
|
|
3006
|
-
)
|
|
3007
|
-
]
|
|
3008
|
-
}
|
|
3009
|
-
)
|
|
3010
|
-
}
|
|
3011
|
-
) : void 0
|
|
3012
|
-
}
|
|
3008
|
+
)
|
|
3009
|
+
]
|
|
3010
|
+
}
|
|
3011
|
+
)
|
|
3012
|
+
}
|
|
3013
|
+
) : void 0
|
|
3014
|
+
}
|
|
3015
|
+
),
|
|
3016
|
+
document.body
|
|
3013
3017
|
);
|
|
3014
3018
|
});
|
|
3015
3019
|
ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
|
|
@@ -3024,7 +3028,7 @@ ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButton
|
|
|
3024
3028
|
modalRef.current?.close();
|
|
3025
3029
|
}, [onContinue]);
|
|
3026
3030
|
useImperativeHandle(ref, () => modalRef.current, []);
|
|
3027
|
-
return /* @__PURE__ */ jsxs5(
|
|
3031
|
+
return /* @__PURE__ */ jsxs5(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
|
|
3028
3032
|
/* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }),
|
|
3029
3033
|
/* @__PURE__ */ jsxs5(
|
|
3030
3034
|
Div_default.row,
|
|
@@ -3053,7 +3057,7 @@ ModalComponent.destructive = forwardRef6(function Destructive2({ deleteButtonLoa
|
|
|
3053
3057
|
modalRef.current?.close();
|
|
3054
3058
|
}, [onDelete]);
|
|
3055
3059
|
useImperativeHandle(ref, () => modalRef.current, []);
|
|
3056
|
-
return /* @__PURE__ */ jsxs5(
|
|
3060
|
+
return /* @__PURE__ */ jsxs5(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
|
|
3057
3061
|
/* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
|
|
3058
3062
|
/* @__PURE__ */ jsxs5(
|
|
3059
3063
|
Div_default.row,
|
|
@@ -3118,6 +3122,7 @@ PageHolderComponent.center = forwardRef7(function Center({
|
|
|
3118
3122
|
const mediaQuery = useMediaQuery();
|
|
3119
3123
|
const { app } = useBetterHtmlContextInternal();
|
|
3120
3124
|
const breakingPoint = mediaQuery.size1000;
|
|
3125
|
+
const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
|
|
3121
3126
|
return /* @__PURE__ */ jsxs6(
|
|
3122
3127
|
Div_default.row,
|
|
3123
3128
|
{
|
|
@@ -3127,8 +3132,8 @@ PageHolderComponent.center = forwardRef7(function Center({
|
|
|
3127
3132
|
justifyContent: "center",
|
|
3128
3133
|
backgroundColor: pageBackgroundColor,
|
|
3129
3134
|
children: [
|
|
3130
|
-
sideImagePosition === "left" &&
|
|
3131
|
-
/* @__PURE__ */ jsx10(Div_default.column, { width: `${
|
|
3135
|
+
sideImagePosition === "left" && withSideImage && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
|
|
3136
|
+
/* @__PURE__ */ jsx10(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx10(
|
|
3132
3137
|
Div_default.box,
|
|
3133
3138
|
{
|
|
3134
3139
|
width: `calc(100% - ${theme2.styles.space}px * 2)`,
|
|
@@ -3140,8 +3145,8 @@ PageHolderComponent.center = forwardRef7(function Center({
|
|
|
3140
3145
|
children
|
|
3141
3146
|
}
|
|
3142
3147
|
) }),
|
|
3143
|
-
sideImagePosition === "right" &&
|
|
3144
|
-
|
|
3148
|
+
sideImagePosition === "right" && withSideImage && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
|
|
3149
|
+
withSideImage && /* @__PURE__ */ jsxs6(
|
|
3145
3150
|
Div_default,
|
|
3146
3151
|
{
|
|
3147
3152
|
position: "fixed",
|