react-better-html 1.1.111 → 1.1.112
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.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +55 -44
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +55 -44
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -318,6 +318,7 @@ type PageHolderProps = {
|
|
|
318
318
|
type PageHolderComponentType = {
|
|
319
319
|
(props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
|
|
320
320
|
center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
|
|
321
|
+
pageBackgroundColor?: string;
|
|
321
322
|
sideImageSrc?: string;
|
|
322
323
|
sideImageName?: AssetName | AnyOtherString;
|
|
323
324
|
/** @default "right" */
|
package/dist/index.d.ts
CHANGED
|
@@ -318,6 +318,7 @@ type PageHolderProps = {
|
|
|
318
318
|
type PageHolderComponentType = {
|
|
319
319
|
(props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
|
|
320
320
|
center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
|
|
321
|
+
pageBackgroundColor?: string;
|
|
321
322
|
sideImageSrc?: string;
|
|
322
323
|
sideImageName?: AssetName | AnyOtherString;
|
|
323
324
|
/** @default "right" */
|
package/dist/index.js
CHANGED
|
@@ -3184,6 +3184,7 @@ var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ n
|
|
|
3184
3184
|
);
|
|
3185
3185
|
});
|
|
3186
3186
|
PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
|
|
3187
|
+
pageBackgroundColor,
|
|
3187
3188
|
sideImageSrc,
|
|
3188
3189
|
sideImageName,
|
|
3189
3190
|
sideImagePosition = "right",
|
|
@@ -3197,49 +3198,59 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
|
|
|
3197
3198
|
const mediaQuery = useMediaQuery();
|
|
3198
3199
|
const { app } = useBetterHtmlContextInternal();
|
|
3199
3200
|
const breakingPoint = mediaQuery.size1000;
|
|
3200
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3201
|
-
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3202
|
+
Div_default.row,
|
|
3203
|
+
{
|
|
3204
|
+
width: "100%",
|
|
3205
|
+
minHeight: "100svh",
|
|
3206
|
+
alignItems: "center",
|
|
3207
|
+
justifyContent: "center",
|
|
3208
|
+
backgroundColor: pageBackgroundColor,
|
|
3209
|
+
children: [
|
|
3210
|
+
sideImagePosition === "left" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
|
|
3211
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.column, { width: `${!breakingPoint && (sideImageSrc || sideImageName) ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3212
|
+
Div_default.box,
|
|
3213
|
+
{
|
|
3214
|
+
width: `calc(100% - ${theme2.styles.space}px * 2)`,
|
|
3215
|
+
maxWidth: !noMaxContentWidth ? app.contentMaxWidth / 2 : void 0,
|
|
3216
|
+
marginInline: theme2.styles.space,
|
|
3217
|
+
marginBlock: theme2.styles.space,
|
|
3218
|
+
...props,
|
|
3219
|
+
ref,
|
|
3220
|
+
children
|
|
3221
|
+
}
|
|
3222
|
+
) }),
|
|
3223
|
+
sideImagePosition === "right" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
|
|
3224
|
+
(sideImageSrc || sideImageName) && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
3225
|
+
Div_default,
|
|
3226
|
+
{
|
|
3227
|
+
position: "fixed",
|
|
3228
|
+
width: "50%",
|
|
3229
|
+
height: "100svh",
|
|
3230
|
+
top: 0,
|
|
3231
|
+
left: sideImagePosition === "left" ? 0 : "auto",
|
|
3232
|
+
right: sideImagePosition === "right" ? 0 : "auto",
|
|
3233
|
+
children: [
|
|
3234
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3235
|
+
Div_default.row,
|
|
3236
|
+
{
|
|
3237
|
+
position: "absolute",
|
|
3238
|
+
width: "100%",
|
|
3239
|
+
height: "100%",
|
|
3240
|
+
top: 0,
|
|
3241
|
+
left: 0,
|
|
3242
|
+
justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
|
|
3243
|
+
overflow: "hidden",
|
|
3244
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
|
|
3245
|
+
}
|
|
3246
|
+
),
|
|
3247
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
|
|
3248
|
+
]
|
|
3249
|
+
}
|
|
3250
|
+
)
|
|
3251
|
+
]
|
|
3252
|
+
}
|
|
3253
|
+
);
|
|
3243
3254
|
});
|
|
3244
3255
|
var PageHolder2 = (0, import_react12.memo)(PageHolderComponent);
|
|
3245
3256
|
PageHolder2.center = PageHolderComponent.center;
|
|
@@ -5304,7 +5315,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
|
|
|
5304
5315
|
Div_default.row,
|
|
5305
5316
|
{
|
|
5306
5317
|
position: "absolute",
|
|
5307
|
-
top: 46 / 2 + (label ? 16 + theme2.styles.gap : 0),
|
|
5318
|
+
top: 46 / 2 + (label ? 16 + theme2.styles.gap / 2 : 0),
|
|
5308
5319
|
right: theme2.styles.space + 1,
|
|
5309
5320
|
alignItems: "center",
|
|
5310
5321
|
gap: theme2.styles.gap,
|