react-better-html 1.1.68 → 1.1.69

package/dist/components/PageHeader.js

@@ -14,6 +14,6 @@ function PageHeader({ imageUrl, imageSize = 60, title, titleAs, titleRightElemen
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
     const mediaQuery = (0, hooks_1.useMediaQuery)();
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : undefined, textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description }))] }), rightElement] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : undefined, textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description }))] }), rightElement] }));
 }
 exports.default = (0, react_1.memo)(PageHeader);

package/dist/components/Table.d.ts

@@ -4,26 +4,27 @@ import { ToggleInputProps } from "./ToggleInput";
 import { ImageProps } from "./Image";
 type TextColumn<DataItem> = {
     type: "text";
-    keyName: keyof DataItem;
-    format?: (value: any) => string;
+    keyName?: keyof DataItem;
+    format?: (item: DataItem, index: number) => string;
 };
 type ElementColumn<DataItem> = {
     type: "element";
-    render: (item: DataItem, index: number) => ReactNode;
+    render?: (item: DataItem, index: number) => ReactNode;
 };
 type ImageColumn<DataItem> = {
     type: "image";
     keyName?: keyof DataItem;
 } & ImageProps;
-type CheckboxColumn<DataItem> = {
+type CheckboxColumn = {
     type: "checkbox";
-    keyName?: keyof DataItem;
 } & ToggleInputProps<boolean>;
 export type TableColumn<DataItem> = {
     label?: string;
     width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
     align?: "left" | "center" | "right";
-} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem>);
+} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn);
 export type TableProps<DataItem> = {
     columns: TableColumn<DataItem>[];
     data: DataItem[];
@@ -34,7 +35,7 @@ export type TableProps<DataItem> = {
     /** @default "No data available" */
     noDataItemsMessage?: string;
     onClickRow?: (item: DataItem, index: number) => void;
-    onClickAllCheckboxes?: () => void;
+    onClickAllCheckboxes?: (checked: boolean) => void;
 } & ComponentMarginProps;
 type TableComponentType = {
     <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;

package/dist/components/Table.js

@@ -100,9 +100,11 @@ const TableStyledComponent = styled_components_1.default.table.withConfig({
    }
 `;
 const ThStyledComponent = styled_components_1.default.th.withConfig({
-    shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop),
+    shouldForwardProp: (prop) => !["width", "minWidth", "maxWidth", "textAlign"].includes(prop),
 }) `
    ${(props) => (props.width ? `width: ${props.width}px;` : "")}
+   ${(props) => (props.minWidth ? `min-width: ${props.minWidth}px;` : "")}
+   ${(props) => (props.maxWidth ? `max-width: ${props.maxWidth}px;` : "")}
    ${(props) => (props.textAlign ? `text-align: ${props.textAlign} !important;` : "")}
 `;
 const TdStyledComponent = styled_components_1.default.td.withConfig({
@@ -112,14 +114,15 @@ const TdStyledComponent = styled_components_1.default.td.withConfig({
 `;
 const TableComponent = (0, react_1.forwardRef)(function Table({ columns, data, isStriped, withStickyHeader, noDataItemsMessage = "No data available", onClickRow, onClickAllCheckboxes, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const [checkedItems, setCheckedItems] = (0, react_1.useState)([]);
     const renderCellContent = (0, react_1.useCallback)((column, item, index) => {
         switch (column.type) {
             case "text": {
-                const value = item[column.keyName];
-                return column.format ? column.format(value) : String(value ?? "");
+                const value = column.keyName ? item[column.keyName] : undefined;
+                return column.format ? column.format(item, index) : String(value ?? "");
             }
             case "element": {
-                return column.render(item, index);
+                return column.render?.(item, index) ?? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
             }
             case "image": {
                 const { type, keyName, ...props } = column;
@@ -127,28 +130,30 @@ const TableComponent = (0, react_1.forwardRef)(function Table({ columns, data, i
                 return ((0, jsx_runtime_1.jsx)(Image_1.default, { src: src, width: defaultImageWidth, borderRadius: theme.styles.borderRadius / 2, ...props }));
             }
             case "checkbox": {
-                const { type, keyName, ...props } = column;
-                const checked = keyName ? item[keyName] : false;
-                return (0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: checked, ...props });
+                const { type, onChange, ...props } = column;
+                const checkedValue = checkedItems[index];
+                return ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: checkedValue, onChange: (checked, value) => {
+                        setCheckedItems((oldValue) => oldValue.map((isChecked, internalIndex) => (internalIndex === index ? checked : isChecked)));
+                        onChange?.(checked, value);
+                    }, ...props }));
             }
             default: {
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
             }
         }
-    }, [theme]);
+    }, [theme, checkedItems]);
     const onClickRowElement = (0, react_1.useCallback)((item, index) => {
         onClickRow?.(item, index);
     }, [onClickRow]);
+    const onClickAllCheckboxesElement = (0, react_1.useCallback)((checked) => {
+        onClickAllCheckboxes?.(checked);
+        setCheckedItems(data.map(() => checked));
+    }, [onClickAllCheckboxes, data]);
     const everythingIsChecked = (0, react_1.useMemo)(() => {
-        if (!columns.some((column) => column.type === "checkbox"))
-            return false;
-        const keyName = columns.find((column) => column.type === "checkbox")?.keyName;
-        if (!keyName)
-            return false;
-        return data.every((item) => item[keyName]);
-    }, [data]);
-    return ((0, jsx_runtime_1.jsx)(Div_1.default, { border: `1px solid ${theme.colors.border}`, borderRadius: theme.styles.borderRadius * 2, overflow: "auto", ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(TableStyledComponent, { isStriped: isStriped, withHover: onClickRow !== undefined, withStickyHeader: withStickyHeader, theme: theme, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)(ThStyledComponent, { width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width, textAlign: column.align, children: column.label ??
-                                (column.type === "checkbox" && onClickAllCheckboxes ? ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: everythingIsChecked, onChange: onClickAllCheckboxes })) : ("")) }, column.type + column.label + index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.length > 0 ? (data.map((item, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: onClickRow ? "isClickable" : undefined, onClick: () => onClickRowElement(item, rowIndex), children: columns.map((column, colIndex) => ((0, jsx_runtime_1.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))) }, JSON.stringify(item) + rowIndex)))) : ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: "noData", colSpan: columns.length, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { children: noDataItemsMessage }) }) })) })] }) }));
+        return checkedItems.every((checked) => checked) && checkedItems.length === data.length;
+    }, [data, checkedItems]);
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { border: `1px solid ${theme.colors.border}`, borderRadius: theme.styles.borderRadius * 2, overflow: "auto", ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(TableStyledComponent, { isStriped: isStriped, withHover: onClickRow !== undefined, withStickyHeader: withStickyHeader, theme: theme, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)(ThStyledComponent, { width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, textAlign: column.align, children: column.label ??
+                                (column.type === "checkbox" && onClickAllCheckboxes ? ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: everythingIsChecked, onChange: onClickAllCheckboxesElement })) : ("")) }, column.type + column.label + index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.length > 0 ? (data.map((item, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: onClickRow ? "isClickable" : undefined, onClick: () => onClickRowElement(item, rowIndex), children: columns.map((column, colIndex) => ((0, jsx_runtime_1.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))) }, JSON.stringify(item) + rowIndex)))) : ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: "noData", colSpan: columns.length, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { children: noDataItemsMessage }) }) })) })] }) }));
 });
 const Table = (0, react_1.memo)(TableComponent);
 exports.default = Table;

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.68",
+   "version": "1.1.69",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [