@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/FormElements/FormError.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { withMemo } from "../../helper/withMemo";
-import styles from "./formError.scss";
-import { Text } from "../Text/Text";
-import { Block } from "../Layout/Block";
-
-export type FormErrorProps = {error?: string};
-
-export const FormError = withMemo(function FormError({error}: FormErrorProps) {
-    // Refs
-
-    // States/Variables/Selectors
-
-    // Dispatch
-
-    // Callbacks
-
-    // Effects
-
-    // Other
-
-    // RenderFunctions
-
-	if (!error){
-		return null;
-	}
-
-	return <Block className={styles.error}><Text>{error}</Text></Block>;
-}, styles);

package/src/Components/FormElements/Input/input.scss

@@ -1,83 +0,0 @@
-@import "../../../scss/variables";
-@import "../../../scss/designMixin";
-
-.input {
-  width: 100%;
-
-  &.inline {
-    --basis: 50%;
-    display: flex;
-    .label {
-      display: inline-block;
-      flex-grow: 1;
-      flex-shrink: 0;
-      flex-basis: var(--basis);
-      font-weight: normal;
-    }
-    .text {
-      // 3 numbers
-      min-width: 41px;
-    }
-  }
-
-  .label {
-    display: block;
-    font-weight: bold;
-  }
-
-  .text {
-    width: 100%;
-    background-color: transparent;
-    border: 0;
-    outline: none;
-    padding: 0;
-    font-size: 1rem;
-
-    @include design($material) {
-      color: var(--input-text-color, #212121);
-      background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);
-      background-size: 100% 2px;
-      background-repeat: no-repeat;
-      background-position: center bottom;
-      padding-bottom: 2px;
-
-      &:read-only, &:read-only:focus {
-        background-image: none;
-        border-bottom: 1px solid transparent;
-      }
-
-      &:focus {
-        background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)),
-        linear-gradient(to top, transparent 1px, #afafaf 1px);
-      }
-    }
-
-    @include design($flat) {
-      color: var(--input-text-color, #1f1f21);
-      &, &:focus {
-        border-bottom: 1px solid var(--border-light);
-      }
-    }
-  }
-
-  &.hiddenInput {
-    .text {
-      background-image: none;
-      border-bottom: 1px solid transparent;
-    }
-
-    &.noFocusHint {
-      .text {
-        &:focus {
-          background-image: none;
-          border-bottom: 1px solid transparent;
-        }
-      }
-    }
-  }
-
-  .error {
-    font-size: 0.7rem;
-    --text-primary-default-color: var(--text-error)
-  }
-}

package/src/Components/FormElements/SearchSelectInput/seachSelectInput.scss

@@ -1,97 +0,0 @@
-@import "../../../scss/variables";
-@import "../../../scss/designMixin";
-
-.input {
-  display: inline-block;
-  width: 100%;
-  position: relative;
-  padding-bottom: 0.1rem;
-
-  &:focus-within {
-    .selectableOptionContainer {
-      display: inherit;
-    }
-  }
-
-  @include design($material) {
-    background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);
-    background-size: 100% 2px;
-    background-repeat: no-repeat;
-    background-position: center bottom;
-    padding-bottom: 2px;
-
-    &:focus {
-      background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)),
-      linear-gradient(to top, transparent 1px, #afafaf 1px);
-    }
-  }
-
-  @include design($flat) {
-    &, &:focus {
-      border-bottom: 1px solid var(--border-light);
-    }
-  }
-
-  .label {
-    display: block;
-    font-weight: var(--label-font-weight, bold);
-  }
-
-  .text {
-    &.disabled {
-      caret-color: transparent;
-      cursor: pointer;
-    }
-
-    width: 100%;
-    background-color: transparent;
-    border: 0;
-    outline: none;
-    padding: 0;
-    background-image: none;
-
-    @include design($material) {
-      color: #212121;
-    }
-
-    @include design($flat) {
-      color: #1f1f21;
-    }
-  }
-}
-
-.inputContainer {
-  display: flex;
-
-}
-
-.tag {
-  --text-primary-default-color: white;
-  color: white;
-  background-color: var(--flavor-accent);
-  padding: 0.1rem 0.2rem;
-  margin-right: 0.1rem;
-  margin-bottom: 0.1rem;
-  border-radius: 4px;
-}
-
-.selectableOptionContainer {
-  display: none;
-  position: fixed;
-  background-color: white;
-  z-index: 1100;
-  border: 1px solid var(--border-light);
-
-
-  .selectableOption {
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-    cursor: pointer;
-
-    &.active {
-      --text-primary-default-color: white;
-      color: white;
-      background-color: var(--flavor-accent);
-    }
-  }
-}

package/src/Components/FormElements/Select/select.scss

@@ -1,61 +0,0 @@
-@import "../../../scss/variables";
-@import "../../../scss/designMixin";
-
-.select {
-  width: 100%;
-
-  .label {
-    font-weight: bold;
-    display: block;
-  }
-
-  .input {
-    outline: none;
-    background-color: transparent;
-    height: 2rem;
-    line-height: 2rem;
-    color: #1f1f21;
-    appearance: none;
-    border: none;
-    border-radius: 0;
-    padding: 0 20px 0 0;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
-    background-repeat: no-repeat;
-
-    &:focus {
-      outline: none;
-    }
-
-    @include design($material) {
-      -webkit-font-smoothing: antialiased;
-      font-size: 15px;
-      background-size: auto, 100% 1px;
-      background-position: right center, left bottom;
-    }
-
-    @include design($flat) {
-      font-size: 17px;
-      background-position: right center;
-    }
-  }
-
-  &.inline {
-    display: flex;
-    align-items: center;
-
-    .label {
-      padding-right: 4px;
-      flex: 1;
-    }
-  }
-
-  &.small .input {
-    height: initial;
-    line-height: 1.5rem;
-  }
-
-  .error {
-    font-size: 0.7rem;
-    --text-primary-default-color: var(--text-error)
-  }
-}

package/src/Components/FormElements/Slider/slider.scss

@@ -1,92 +0,0 @@
-$thumbWidth: 16;
-$thumbHeight: 16;
-$trackHeight: calc($thumbHeight / 4);
-$maxScreenSize: 10000;
-
-.slider {
-  --thumb-height: #{$thumbHeight}px;
-  --thumb-width: #{$thumbWidth}px;
-  --track-height: #{$trackHeight}px;
-  --clip-edges: 0.125rem;
-
-  width: 100%;
-
-  .input {
-    position: relative;
-    cursor: pointer;
-    overflow: hidden;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 100%;
-    background: transparent;
-
-    transition: all ease 100ms;
-    height: var(--thumb-height);
-
-    &:active {
-      cursor: grabbing;
-    }
-
-    @mixin track {
-      -webkit-appearance: none;
-      appearance: none;
-      transition: all ease 100ms;
-      height: var(--thumb-height);
-      position: relative;
-      width: 100%;
-      border-radius: var(--track-height);
-      background: linear-gradient(var(--border-light) 0 0) scroll no-repeat center /
-		100% calc(var(--track-height) + 1px);
-    }
-
-    @mixin thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: var(--thumb-width);
-      transition: all ease 100ms;
-      height: var(--thumb-height);
-      background: var(--flavor-accent);
-      position: relative;
-      border: 0;
-      border-radius: var(--thumb-width);
-
-    }
-
-    &::-webkit-slider-runnable-track {
-      @include track;
-    }
-
-    &::-webkit-slider-thumb {
-      @include thumb;
-
-      box-shadow: calc(-100vmax - (var(--thumb-width, var(--thumb-height)) / 2)) 0 0 100vmax var(--flavor-accent);
-      $clipTop: calc(($thumbHeight - $trackHeight) / 2);
-      $clipBottom: $thumbHeight - $clipTop;
-      clip-path: path("M 0, #{0.5*$thumbHeight} \
-      a #{0.5*$thumbWidth} #{0.5*$thumbHeight}, 0 1 0, #{$thumbWidth} 0 \
-      a #{0.5*$thumbWidth} #{0.5*$thumbHeight}, 0 1 0, #{-1*$thumbWidth} 0 \
-      L  #{0.5*$thumbWidth} #{$clipTop} \
-      L  #{-1*$maxScreenSize} #{$clipTop} \
-      L  #{-1*$maxScreenSize} #{$clipBottom} \
-      L  #{0.5*$thumbWidth} #{$clipBottom} \
-      z");
-    }
-
-    &::-moz-range-thumb {
-      @include thumb;
-    }
-
-    &::-moz-range-track {
-      @include track;
-    }
-
-    &::-moz-range-progress {
-      background: transparent;
-      appearance: none;
-      background: var(--flavor-accent);
-      transition-delay: 30ms;
-      height: var(--track-height);
-      border-radius: var(--track-height);
-    }
-  }
-}

package/src/Components/FormElements/Switch/switch.scss

@@ -1,152 +0,0 @@
-@import "../../../scss/variables";
-@import "../../../scss/designMixin";
-
-.switch {
-  cursor: pointer;
-  position: relative;
-  display: inline-block;
-
-  > label {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-  }
-
-  .label {
-    &:not(:empty) {
-      margin-left: 0.2rem;
-      margin-right: 0.2rem;
-    }
-  }
-
-  input {
-    display: none;
-  }
-
-  .toggle {
-    flex-shrink: 0;
-    width: 40px;
-    display: inline-block;
-    position: relative;
-    transition-property: all;
-    transition-duration: 0.35s;
-    transition-timing-function: ease-out;
-    border-radius: 30px;
-
-    .handle {
-      left: var(--switch-handle-offset, 0);
-      transition-property: all;
-      transition-duration: 0.35s;
-      transition-timing-function: cubic-bezier(.59, .01, .5, .99);
-      border-radius: 100%;
-      background-clip: padding-box;
-      position: absolute;
-      content: '';
-    }
-  }
-
-  %dual-handle-material {
-    background-color: var(--flavor-accent);
-    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
-  }
-
-  %dual-toggle-flat {
-    background-color: #44db5e;
-    box-shadow: inset 0 0 0 2px #44db5e;
-  }
-
-  %dual-handle-flat {
-    background-color: #ffffff;
-    top: 2px;
-    box-shadow: 0 3px 2px rgb(0 0 0 / 25%);
-  }
-
-  @include design($material) {
-    --switch-handle-checked-offset: 18px;
-    --switch-handle-offset: 0px;
-
-    input:checked + .toggle {
-      --switch-handle-offset: var(--switch-handle-checked-offset);
-
-      .handle {
-        @extend %dual-handle-material;
-      }
-    }
-
-    .toggle {
-      background-color: rgba(55, 71, 79, 0.5);
-
-      margin-top: 4px;
-      height: 15px;
-
-      .handle {
-        margin-top: -4px;
-        width: 22px;
-        height: 22px;
-        background-color: #f1f1f1;
-        box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 40%);
-
-        &:before {
-          background: transparent;
-          content: '';
-          display: block;
-          width: 100%;
-          height: 100%;
-          border-radius: 50%;
-          z-index: 0;
-          box-shadow: 0 0 0 0 rgb(0 0 0 / 12%);
-          transition: box-shadow 0.1s linear;
-        }
-      }
-    }
-  }
-
-  @include design($flat) {
-    --switch-handle-offset: 2px;
-    --switch-handle-checked-offset: 19px;
-
-    input:checked + .toggle {
-      @extend %dual-toggle-flat;
-      --switch-handle-offset: var(--switch-handle-checked-offset);
-
-      .handle {
-        @extend %dual-handle-flat;
-      }
-
-    }
-
-    .toggle {
-      height: 23px;
-
-      background-color: white;
-      box-shadow: inset 0 0 0 2px #e5e5e5;
-
-      .handle {
-        height: 19px;
-        width: 19px;
-        background-color: #ffffff;
-        top: 2px;
-        box-shadow: 0 0 1px 0 rgb(0 0 0 / 25%), 0 3px 2px rgb(0 0 0 / 25%);
-      }
-    }
-  }
-
-  &.dual {
-    @include design($material) {
-      .toggle {
-        .handle {
-          @extend %dual-handle-material;
-        }
-      }
-    }
-    @include design($flat) {
-      .toggle {
-        @extend %dual-toggle-flat;
-
-        .handle {
-          @extend %dual-handle-flat;
-        }
-      }
-    }
-  }
-}

package/src/Components/FormElements/Textarea/textarea.scss

@@ -1,31 +0,0 @@
-.container {
-  width: 100%;
-  min-height: 10rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .label {
-    display: block;
-  }
-
-  textarea {
-    flex: 1;
-    background-color: #efeff4;
-    color: #1f1f21;
-    box-shadow: none;
-    appearance: none;
-    width: 100%;
-    height: 100%;
-    resize: none;
-    outline: none;
-    padding: 5px;
-    border-radius: 4px;
-    border: 1px solid var(--border-light);
-  }
-
-  .error {
-    font-size: 0.7rem;
-    --text-primary-default-color: var(--text-error)
-  }
-}

package/src/Components/FormElements/formError.scss

@@ -1,4 +0,0 @@
-.error {
-  font-size: 0.7rem;
-  --text-primary-default-color: var(--text-error)
-}

package/src/Components/Layout/container.scss

@@ -1,12 +0,0 @@
-@import "../../scss/variables";
-@import "bootstrap/scss/mixins/container";
-@import "bootstrap/scss/mixins/breakpoints";
-
-@import "bootstrap/scss/containers";
-
-
-@media (min-width: 1400px) {
-  .container-xxl {
-    max-width: 1400px;
-  }
-}

package/src/Components/List/BulletList/BulletList.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { withMemo } from '../../../helper/withMemo';
-import { RbmComponentProps } from '../../RbmComponentProps';
-
-export type BulletListProps = RbmComponentProps<{ numbered?: boolean }>;
-
-function BulletList({ numbered = false, className, children, style }: BulletListProps) {
-    // Variables
-
-    // Refs
-
-    // States
-
-    // Selectors
-
-    // Callbacks
-
-    // Effects
-
-    // Other
-    const props = { className, style };
-
-    // Render Functions
-    if (numbered) {
-        return <ol {...props}>{children}</ol>;
-    }
-
-    return <ul {...props}>{children}</ul>;
-}
-
-// Need BulletListMemo for autocompletion of phpstorm
-const BulletListMemo = withMemo(BulletList);
-export { BulletListMemo as BulletList };

package/src/Components/List/BulletList/ListItem.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { withMemo } from '../../../helper/withMemo';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { EmptyProps } from '../../../helper/EmptyProps';
-
-export type ListItemProps = RbmComponentProps<EmptyProps>;
-
-function ListItem({ className, children, style }: ListItemProps) {
-    // Variables
-
-    // Refs
-
-    // States
-
-    // Selectors
-
-    // Callbacks
-
-    // Effects
-
-    // Other
-
-    // Render Functions
-
-    return (
-        <li className={className} style={style}>
-            {children}
-        </li>
-    );
-}
-
-// Need ListItemMemo for autocompletion of phpstorm
-const ListItemMemo = withMemo(ListItem);
-export { ListItemMemo as ListItem };

package/src/Components/List/InfiniteList.tsx

@@ -1,56 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import InfiniteLoader from "react-window-infinite-loader";
-import { List, ListProps } from "./List";
-import { withMemo } from "../../helper/withMemo";
-
-export type InfiniteListProps<ItemType> = ListProps<ItemType> &{
-    hasNextPage: boolean,
-    loadNextPage: () => unknown | Promise<unknown>,
-};
-
-export const InfiniteList = withMemo(function InfiniteList<ItemType>({
-                                                                         renderItem,
-                                                                         itemHeight,
-                                                                         items,
-                                                                         renderBefore,
-                                                                         keyExtractor,
-                                                                         hasNextPage,
-                                                                         loadNextPage,
-                                                                         style,
-                                                                         className
-                                                                     }: InfiniteListProps<ItemType>) {
-    // Refs
-
-    // States/Variables/Selectors
-    const [isPageLoading, setIsPageLoading] = useState(false);
-
-    // Dispatch
-
-    // Callbacks
-    const isItemLoaded = useCallback((index: number) => !hasNextPage || index < items.length, [hasNextPage, items]);
-
-    const loadMore = useCallback(async () => {
-        if (!isPageLoading) {
-            setIsPageLoading(true);
-            try {
-                loadNextPage();
-            } finally {
-                setIsPageLoading(false);
-            }
-        }
-    }, [isPageLoading, loadNextPage]);
-
-    // Effects
-
-    // Other
-
-    // RenderFunctions
-
-    return <InfiniteLoader isItemLoaded={isItemLoaded} loadMoreItems={loadMore}
-                           itemCount={hasNextPage ? items.length + 1 : items.length}>{({onItemsRendered, ref}) => (
-        <List
-            items={items} renderItem={renderItem} style={style} className={className} itemHeight={itemHeight}
-            renderBefore={renderBefore} keyExtractor={keyExtractor} ref={ref} onItemsRendered={onItemsRendered}/>
-    )}
-    </InfiniteLoader>;
-});