@ainias42/react-bootstrap-mobile 0.1.8 → 0.1.10

package/src/Components/Layout/Grid/grid.scss

@@ -40,4 +40,27 @@ $breakpoints: $grid-breakpoints;
       }
     }
   }
+
+  @media print {
+    @for $i from 1 through $columns {
+      .item-print-#{$i} {
+        grid-column: auto / span $i;
+      }
+    }
+
+    // Start with `1` because `0` is and invalid value.
+    // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+    @for $i from 1 through ($columns - 1) {
+      .start-print-#{$i} {
+        grid-column-start: $i;
+      }
+    }
+
+    // Add classes for reordering
+    @for $i from -10 through 10 {
+      .order-print-#{$i} {
+        order: $i;
+      }
+    }
+  }
 }

package/src/Components/List/List.tsx

@@ -32,15 +32,11 @@ export const List = withMemo(function List<ItemType>({
 
     // Callbacks
     const renderItemInner = useCallback<ComponentType<ListChildComponentProps>>(
-        ({ index, style: itemStyle }) => {
-            return renderItem(items[index], itemStyle, index);
-        },
+        ({ index, style: itemStyle }) => renderItem(items[index], itemStyle, index),
         [items, renderItem]
     );
 
-    const setHeight = useCallback<SizeCalculatorProps['onSize']>((_, height) => {
-        setItemHeight(height);
-    }, []);
+    const setHeight = useCallback<SizeCalculatorProps['onSize']>((_, height) => setItemHeight(height), []);
 
     // Effects
 
@@ -68,17 +64,19 @@ export const List = withMemo(function List<ItemType>({
                                 )}
                             </SizeCalculator>
                         )}
-                        <FixedSizeList
-                            height={height}
-                            itemCount={items.length}
-                            width={width}
-                            itemSize={itemHeight}
-                            style={style}
-                            className={className}
-                            itemData={items}
-                        >
-                            {renderItemInner}
-                        </FixedSizeList>
+                        {height !== undefined && width !== undefined && (
+                            <FixedSizeList
+                                height={height}
+                                itemCount={items.length}
+                                width={width}
+                                itemSize={itemHeight}
+                                style={style}
+                                className={className}
+                                itemData={items}
+                            >
+                                {renderItemInner}
+                            </FixedSizeList>
+                        )}
                     </>
                 );
             }}

package/src/Components/RbmComponentProps.ts

@@ -1,10 +1,10 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Recursive } from '../TypeHelpers';
 
-type Child = Recursive<JSX.Element | undefined | null | Child[]> | false;
+export type RbmChildWithoutString = Recursive<JSX.Element | undefined | null | RbmChildWithoutString[]> | false;
 export type WithNoStringProps =
     | {
-          children?: Child;
+          children?: RbmChildWithoutString;
           __allowChildren?: 'html';
       }
     | {
@@ -14,7 +14,7 @@ export type WithNoStringProps =
 
 export type WithNoStringAndChildrenProps =
     | {
-          children: Child;
+          children: RbmChildWithoutString;
           __allowChildren?: 'html';
       }
     | {

package/webpack.config.js

@@ -23,7 +23,7 @@ const banner = `
 module.exports = (env) => {
     return {
         mode: env.production ? 'production' : 'development',
-        // devtool: 'source-map',
+        devtool: env.production ? 'source-map' : 'eval-source-map',
         entry: './bootstrapReactMobile.ts',
         output: {
             filename: 'bootstrapReactMobile.js',