@ainias42/react-bootstrap-mobile 0.2.15 → 1.0.0

package/src/Components/Layout/View.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { ComponentRef, ForwardedRef, PropsWithChildren } from 'react';
 import { Override } from '../../TypeHelpers';
-import { withForwardRef } from "../../helper/withForwardRef";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from "../../helper/withMemo";
 
-export type ViewProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<
-    Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode }>
+export type ViewProps<AsType extends keyof IntrinsicElements> = PropsWithChildren<
+    Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode, ref?: ForwardedRef<ComponentRef<AsType>> }>
 >;
 
-export const View = withForwardRef(function View<AsType extends keyof JSX.IntrinsicElements>(
-    {children, as, ...otherProps}: ViewProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
+export const View = withMemo(function View<AsType extends keyof JSX.IntrinsicElements>(
+    {children, as,ref, ...otherProps}: ViewProps<AsType>
 ) {
     // Variables
 

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { ComponentRef, DOMAttributes, ForwardedRef } from 'react';
+import { DOMAttributes, ForwardedRef } from 'react';
 import { View, ViewProps } from './View';
-import { withForwardRef } from "../../helper/withForwardRef";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from "../../helper/withMemo";
 
-export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements> = Omit<
+export type ViewWithoutListenersProps<AsType extends keyof IntrinsicElements> = Omit<
     ViewProps<AsType>,
     keyof DOMAttributes<AsType>
 > & { children?: React.ReactNode, dangerouslySetInnerHTML?: {
@@ -12,9 +14,8 @@ export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements
         __html: string | TrustedHTML;
     } | undefined;   };
 
-export const ViewWithoutListeners = withForwardRef(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
-    { children, ...props }: ViewWithoutListenersProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
+export const ViewWithoutListeners = withMemo(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
+    { children,ref, ...props }: ViewWithoutListenersProps<AsType>,
 ) {
     // Variables
 
@@ -32,7 +33,7 @@ export const ViewWithoutListeners = withForwardRef(function ViewWithoutListeners
 
     // Render Functions
     return (
-        <View {...props} ref={ref}>
+        <View {...props} ref={ref as ForwardedRef<SVGElement|HTMLElement>}>
             {children}
         </View>
     );

package/src/Components/List/List.tsx

@@ -5,7 +5,7 @@ import styles from './list.scss';
 import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SizeCalculator, SizeCalculatorProps } from '../SizeCalculator/SizeCalculator';
-import { withForwardRef } from "../../helper/withForwardRef";
+import { withMemo } from "../../helper/withMemo";
 
 export type ListProps<ItemType> = RbmComponentProps<{
     renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
@@ -15,9 +15,10 @@ export type ListProps<ItemType> = RbmComponentProps<{
     keyExtractor?: (item: ItemType, index: number) => string;
     onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
     autoSizeClassName?: string;
+    ref?: ForwardedRef<FixedSizeList<ItemType>>
 }>;
 
-export const List = withForwardRef(function List<ItemType>({
+export const List = withMemo(function List<ItemType>({
     items,
     renderItem,
     itemHeight: initialItemHeight = 0,
@@ -25,7 +26,8 @@ export const List = withForwardRef(function List<ItemType>({
     style,
     onItemsRendered,
     autoSizeClassName,
-}: ListProps<ItemType>, ref: ForwardedRef<FixedSizeList<ItemType>>) {
+    ref,
+}: ListProps<ItemType>) {
     // Variables
 
     // States

package/src/Components/RbmComponentProps.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Recursive } from '../TypeHelpers';
+import { JSX } from "react/jsx-runtime";
 
 export type RbmChildWithoutString = Recursive<JSX.Element | undefined | null | RbmChildWithoutString[]> | false;
 export type WithNoStringProps =

package/src/Components/SpoilerList/Spoiler/Spoiler.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { withMemo } from '../../../helper/withMemo';
 import { RbmComponentProps } from '../../RbmComponentProps';
-import { MouseEvent, ReactChild, useCallback, useEffect, useRef, useState } from 'react';
+import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { Flex } from '../../Layout/Flex';
 import { Grow } from '../../Layout/Grow';
 import { Text, TEXT_SIZE } from '../../Text/Text';
@@ -15,11 +15,12 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 
 export type SpoilerProps<OnClickData> = RbmComponentProps<
     {
-        title: ReactChild;
+        title: ReactNode;
         initialOpen?: boolean;
         open?: boolean;
         onlyTitleToggles?: boolean;
         noClosingAnimation?: boolean;
+        noAnimation?: boolean;
         openIcon?: IconSource | null;
         closeIcon?: IconSource | null;
     } & OptionalListener<'onClick', OnClickData>
@@ -30,6 +31,7 @@ function Spoiler<OnClickData>({
                                   children,
                                   initialOpen = false,
                                   noClosingAnimation = false,
+                                  noAnimation = false,
                                   openIcon = faChevronDown,
                                   closeIcon = faChevronUp,
                                   className,
@@ -85,7 +87,7 @@ function Spoiler<OnClickData>({
             onClick={onlyTitleToggles ? undefined: toggleOpen}
             className={classNames(className, styles.spoiler, {
                 [styles.open]: open ?? isOpen,
-                [styles.noAnimation]: isInitialValue,
+                [styles.noAnimation]: isInitialValue || noAnimation,
                 [styles.noClosingAnimation]: noClosingAnimation,
             })}
             style={style}

package/src/Components/SpoilerList/Spoiler/spoiler.scss

@@ -23,7 +23,7 @@
   }
   100% {
     height: initial;
-    transform: translateY(0%);
+    transform: none !important;
     opacity: 1;
   }
 }
@@ -74,7 +74,7 @@
 
       .body {
         height: initial;
-        transform: translateY(0%);
+        transform: none;
         animation-name: spoilerOpen;
       }
     }

package/src/Components/Text/Text.tsx

@@ -6,6 +6,8 @@ import { WrongChildError } from '../../WrongChildError';
 import withStyles from 'isomorphic-style-loader/withStyles';
 import { Inline, InlineProps } from '../Layout/Inline';
 import { ViewProps } from '../Layout/View';
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
 
 export const TEXT_PRIO = {
     primary: styles.primary,
@@ -23,7 +25,7 @@ export const TEXT_SIZE = {
     xxLarge: styles.xxlarge,
 };
 
-export type TextProps<AsType extends keyof JSX.IntrinsicElements> = {
+export type TextProps<AsType extends keyof IntrinsicElements> = {
     block?: boolean;
     prio?: ValueOf<typeof TEXT_PRIO>;
     size?: ValueOf<typeof TEXT_SIZE>;

package/dist/src/helper/withForwardRef.d.ts

@@ -1,7 +0,0 @@
-import { ForwardRefRenderFunction, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
-import { RESTRICT_CHILDREN } from './withRestrictedChildren';
-export interface RefComponent<PropTypes, ForwardedRefType> {
-    (props: PropsWithoutRef<PropTypes> & RefAttributes<ForwardedRefType>): ReactElement | null;
-    displayName?: string | undefined;
-}
-export declare function withForwardRef<PropTypes, ForwardedRefType>(component: ForwardRefRenderFunction<ForwardedRefType, PropTypes>, styles?: any, defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']): RefComponent<PropTypes, ForwardedRefType>;

package/src/helper/withForwardRef.ts

@@ -1,28 +0,0 @@
-import React, { ForwardedRef, ForwardRefRenderFunction, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
-import withStyles from 'isomorphic-style-loader/withStyles';
-import { RESTRICT_CHILDREN, withRestrictedChildren } from './withRestrictedChildren';
-import { memoComparator } from './memoComparator';
-
-export interface RefComponent<PropTypes, ForwardedRefType> {
-    (props: PropsWithoutRef<PropTypes> & RefAttributes<ForwardedRefType>): ReactElement | null;
-
-    displayName?: string | undefined;
-}
-
-export function withForwardRef<PropTypes, ForwardedRefType>(
-    component: ForwardRefRenderFunction<ForwardedRefType, PropTypes>,
-    styles?: any,
-    defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']
-) {
-    const forwarded = React.forwardRef(component);
-    forwarded.displayName = component.displayName ?? component.name;
-    const forwardedComp = React.forwardRef(withRestrictedChildren(forwarded, defaultAllowChildren));
-    const c: (props: PropTypes, ref: ForwardedRef<ForwardedRefType>) => ReactElement = styles
-        ? withStyles(styles)(forwardedComp)
-        : forwardedComp;
-
-    const memoizedComponent = React.memo(c, memoComparator) as RefComponent<PropTypes, ForwardedRefType>;
-    memoizedComponent.displayName = `Memoized-Forwarded(${component.displayName || component.name})`;
-
-    return memoizedComponent;
-}