@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/List/List.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { ComponentType, CSSProperties, ForwardedRef, ReactElement, ReactNode, useCallback, useState } from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-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 { withMemo } from "../../helper/withMemo";
-
-export type ListProps<ItemType> = RbmComponentProps<{
-    renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
-    itemHeight?: number;
-    items: ItemType[];
-    renderBefore?: (item: ItemType, index: number) => ReactNode;
-    keyExtractor?: (item: ItemType, index: number) => string;
-    onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
-    autoSizeClassName?: string;
-    ref?: ForwardedRef<FixedSizeList<ItemType>>
-}>;
-
-export const List = withMemo(function List<ItemType>({
-    items,
-    renderItem,
-    itemHeight: initialItemHeight = 0,
-    className,
-    style,
-    onItemsRendered,
-    autoSizeClassName,
-    ref,
-}: ListProps<ItemType>) {
-    // Variables
-
-    // States
-    const [itemHeight, setItemHeight] = useState(initialItemHeight);
-
-    // Refs
-
-    // Callbacks
-    const renderItemInner = useCallback<ComponentType<ListChildComponentProps>>(
-        ({ index, style: itemStyle }) => renderItem(items[index], itemStyle, index),
-        [items, renderItem]
-    );
-
-    const setHeight = useCallback<SizeCalculatorProps['onSize']>((_, height) => setItemHeight(height), []);
-
-    // Effects
-
-    // Other
-
-    // Render Functions
-
-    return (
-        <AutoSizer className={autoSizeClassName}>
-            {({ height, width }: { height?: number; width?: number }) => {
-                return (
-                    <>
-                        {initialItemHeight === 0 && items.length > 0 && (
-                            <SizeCalculator onSize={setHeight} absolute={true}>
-                                {renderItem(
-                                    items[0],
-                                    {
-                                        visibility: 'hidden',
-                                        pointerEvents: 'none',
-                                        position: 'relative',
-                                        top: '0px',
-                                        left: '0px',
-                                        width: '100%',
-                                        zIndex: -1,
-                                    },
-                                    0
-                                )}
-                            </SizeCalculator>
-                        )}
-                        {height !== undefined && width !== undefined && (
-                            <FixedSizeList
-                                onItemsRendered={onItemsRendered}
-                                ref={ref}
-                                height={height}
-                                itemCount={items.length}
-                                width={width}
-                                itemSize={itemHeight}
-                                style={style}
-                                className={className}
-                                itemData={items}
-                            >
-                                {renderItemInner}
-                            </FixedSizeList>
-                        )}
-                    </>
-                );
-            }}
-        </AutoSizer>
-    );
-},
-styles);

package/src/Components/List/list.scss

@@ -1,30 +0,0 @@
-.list {
-  width: 100%;
-  background-color: white;
-  list-style-type: none;
-  background-image: linear-gradient(var(--border-light), var(--border-light)),
-  linear-gradient(var(--border-light), var(--border-light));
-  background-size: 100% 1px, 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom, top;
-  padding: 0;
-  margin: 0;
-
-  .item {
-    position: relative;
-    width: 100%;
-    list-style: none;
-    display: flex;
-    padding: 0 0 0 0.9rem;
-
-    .itemMain {
-      flex-grow: 1;
-      display: flex;
-      background-image: linear-gradient(0deg, var(--border-light), var(--border-light) 100%);
-      background-size: 100% 1px;
-      background-position: bottom;
-      background-repeat: no-repeat;
-      padding: 0.75rem 0 0.75rem 0;
-    }
-  }
-}

package/src/Components/TabBar/tabBar.scss

@@ -1,108 +0,0 @@
-@import "../../scss/variables";
-@import "../../scss/designMixin";
-
-.tabBar {
-  height: 60px;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-
-  .buttonContainer {
-    padding: 0;
-    display: flex;
-  }
-
-  &.underlined {
-    .buttonActive {
-      @include design($flat) {
-        border-bottom: 4px solid var(--flavor-accent);
-      }
-    }
-  }
-
-  &.transparent {
-    opacity: 0.65;
-  }
-
-  @include design($material) {
-    background-color: #ffffff;
-    box-shadow: 0 -2px 2px 0px rgb(0 0 0 / 14%), 0 -1px 5px 0px rgb(0 0 0 / 12%), 0 -1px 1px 0px rgb(0 0 0 / 20%);
-  }
-
-  @include design($flat) {
-    background-color: #fafafa;
-    border-top: 1px solid var(--border-light);
-  }
-}
-
-.button {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  flex-basis: 0;
-  flex-grow: 1;
-  text-align: center;
-  text-decoration: none;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-
-  > span {
-    width: 100%;
-    display: inline-block;
-  }
-
-  .buttonIcon {
-    display: block;
-    font-size: 24px;
-    line-height: 26px;
-    height: 28px;
-    margin: auto;
-
-    + .buttonTitle {
-      font-size: 10px;
-      line-height: 1;
-    }
-  }
-
-  .buttonTitle {
-    display: block;
-    margin: auto;
-    font-size: 16px;
-    line-height: 49px;
-  }
-
-  @include design($flat) {
-    color: #999;
-    &.buttonActive {
-      color: var(--flavor-accent);
-    }
-  }
-
-
-  @include design($material) {
-    color: #31313a;
-    position: relative;
-    text-transform: uppercase;
-
-    &::after {
-      content: ' ';
-      display: block;
-      width: 0;
-      height: 2px;
-      bottom: 0;
-      position: absolute;
-      margin-top: -2px;
-      background-color: #31313a;
-
-    }
-    &.buttonActive {
-      &::after {
-        width: 100%;
-        transition: width 0.2s ease-in-out;
-      }
-    }
-  }
-}

package/src/Components/Toast/toast.scss

@@ -1,55 +0,0 @@
-@import "../../scss/variables";
-@import "../../scss/designMixin";
-
-.toastContainer {
-  pointer-events: none;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 3rem;
-  margin: auto;
-  max-width: map-get($grid-breakpoints, "sm");
-  z-index: 1001;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.toast {
-  pointer-events: auto;
-  background-color: rgba(0, 0, 0, 0.8);
-  min-height: 48px;
-  line-height: 1.5;
-  --text-primary-default-color: white;
-  color: white;
-  font-size: 0.77rem;
-  letter-spacing: normal;
-  transition-duration: 0.25s;
-  margin: 8px;
-
-  &.hiding {
-    opacity: 0;
-  }
-
-  @include design($material) {
-    padding: 16px 24px;
-  }
-
-  @include design($flat) {
-    border-radius: 0.5rem;
-    padding: 16px;
-  }
-
-  .action {
-    text-transform: uppercase;
-    margin-left: 24px;
-
-    @include design($material) {
-      color: #bbdefb
-    }
-    @include design($flat) {
-      color: #ffffff;
-    }
-  }
-
-}

package/src/ListRow/ListRow.tsx

@@ -1,20 +0,0 @@
-import {withMemo} from "../helper/withMemo";
-
-
-export const ListRow = withMemo(function ListRow() {
-    // Refs
-
-    // States/Variables/Selectors
-
-    // Dispatch
-
-    // Callbacks
-
-    // Effects
-
-    // Other
-
-    // RenderFunctions
-
-    return null;
-});

package/src/StyleProvider.ts

@@ -1,4 +0,0 @@
-import StyleContext from 'isomorphic-style-loader/StyleContext';
-
-const provider = StyleContext.Provider;
-export { provider as StyleProvider };

package/src/scss/_baseClasses.scss

@@ -1,23 +0,0 @@
-.full-height {
-  height: 100%;
-}
-
-.full-min-height {
-  min-height: 100%;
-}
-
-.scrollable {
-  overflow-y: auto;
-}
-
-:global(.full-width) {
-  width: 100%;
-}
-
-.#{$flat} .#{$flat}-hidden {
-  display: none;
-}
-
-.#{$material} .#{$material}-hidden {
-  display: none;
-}

package/src/types/isomorphic-style-loader.d.ts

@@ -1,3 +0,0 @@
-declare module 'isomorphic-style-loader/useStyles';
-declare module 'isomorphic-style-loader/withStyles';
-declare module 'isomorphic-style-loader/StyleContext';

package/webpack.config.js

@@ -1,95 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-// const PrettierPlugin = require('prettier-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const getPackageJson = require('./scripts/getPackageJson');
-const {CSSLayeringPlugin} = require('css-layering-webpack-plugin');
-
-
-const { version, name, license, repository, author } = getPackageJson(
-    'version',
-    'name',
-    'license',
-    'repository',
-    'author'
-);
-
-const banner = `
-  ${name} v${version}
-  ${repository.url}
-  Copyright (c) ${author.replace(/ *<[^)]*> */g, ' ')} and project contributors.
-  This source code is licensed under the ${license} license found in the
-  LICENSE file in the root directory of this source tree.
-`;
-
-module.exports = (env) => {
-    return {
-        mode: env.production ? 'production' : 'development',
-        devtool: env.production ? 'source-map' : 'eval-source-map',
-        entry: './bootstrapReactMobile.ts',
-        output: {
-            filename: 'bootstrapReactMobile.js',
-            path: path.resolve(__dirname, 'dist'),
-            library: { type: 'commonjs-static' },
-            clean: true,
-            globalObject: 'this',
-        },
-        externals: {
-            react: 'commonjs react',
-            'react-dom': 'commonjs react-dom',
-            'isomorphic-style-loader': 'commonjs2 isomorphic-style-loader',
-            '@fortawesome/react-fontawesome': 'commonjs2 @fortawesome/react-fontawesome',
-            '@fortawesome/fontawesome-svg-core': 'commonjs2 @fortawesome/fontawesome-svg-core',
-            '@fortawesome/free-solid-svg-icons': 'commonjs2 @fortawesome/free-solid-svg-icons',
-            'react-beautiful-dnd': 'commonjs2 react-beautiful-dnd',
-            'react-hook-form': 'commonjs2 react-hook-form',
-        },
-        optimization: {
-            minimize: false,
-            minimizer: [new TerserPlugin({ extractComments: false })],
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.(ts|tsx)?$/,
-                    exclude: /(node_modules)/,
-                    use: [{ loader: 'babel-loader' }, { loader: 'ts-loader' }],
-                },
-                {
-                    //Compiliert SASS zu CSS und speichert es in Datei
-                    test: /\.scss$/,
-                    use: [
-                        { loader: 'isomorphic-style-loader' },
-                        {
-                            loader: 'css-loader',
-                            options: {
-                                esModule: false,
-                                modules: {
-                                    localIdentName: '[local]__[hash:base64:5]',
-                                    exportLocalsConvention: 'camel-case'
-                                },
-                            },
-                        },
-                        { loader: 'sass-loader' },
-                    ],
-                },
-            ],
-        },
-        plugins: [
-            // new PrettierPlugin(),
-            // new MiniCssExtractPlugin({
-            //     filename: 'css/index.css',
-            // }),
-            new webpack.BannerPlugin(banner),
-            new CSSLayeringPlugin({
-                layers: [
-                    { path: "**/src/**/*.scss", name: "rbm" },
-                ],
-                injectOrderAs: "none"
-            }),
-        ],
-        resolve: {
-            extensions: ['.ts', '.tsx', '.js', '.json'],
-        },
-    };
-};