react-ui-basics 0.0.175 → 0.0.176

package/src/FormUploadProgress.js

@@ -0,0 +1,87 @@
+import ReactConstants from "./../ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields";
+import React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import './FormUploadProgress.css';
+import ReactCreateElement from './ReactCreateElement';
+import './FormUploadProgress.css'
+import Button from "./Button";
+import Animated from "./Animated";
+import CircleProgress from "./CircleProgress";
+import SpinningProgress from "./SpinningProgress";
+import {formatAbbreviation, formatNumberWithMaxLength} from "./Size";
+import PropTypes from "prop-types";
+import {preventDefault} from "./Tools";
+
+
+const defaultValueFormat = (value, loaded, total) => {
+    if (total == null)
+        return Math.floor(Number.isFinite(value) ? value : 0) + '%';
+
+    const abbreviation = formatAbbreviation(total);
+    return <>
+        {formatNumberWithMaxLength(loaded, 1, abbreviation, 4)}
+        /
+        {formatNumberWithMaxLength(total, 1, abbreviation, 4)}
+        <br/>
+        {abbreviation}
+    </>
+};
+
+const FormUploadProgress = ({
+                                value,
+                                cancel,
+                                loaded,
+                                total,
+                                formatValue,
+                                processingLabel,
+                                cancelLabel,
+                            }) => {
+    return (
+        <Animated value={total > 0}>
+            <div className="FormUploadProgress">
+                <div className="wrapper">
+                    <div className="progress">
+                        {loaded === total && <SpinningProgress/>}
+                        {loaded !== total && <CircleProgress value={value}/>}
+                        <div className={'value'}>{formatValue(value, loaded, total)}</div>
+                    </div>
+                    {cancel && <Button className={"cancel"} disabled={loaded === total} onClick={e => {
+                        preventDefault(e);
+                        cancel();
+                    }}>
+                        {loaded === total && processingLabel}
+                        {loaded !== total && cancelLabel}
+                    </Button>}
+                </div>
+            </div>
+        </Animated>
+    );
+};
+
+FormUploadProgress.defaultProps = {
+    value: 0,
+    formatValue: defaultValueFormat,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+    FormUploadProgress.propTypes = {
+        value: PropTypes.number,
+        loaded: PropTypes.number,
+        total: PropTypes.number,
+        formatValue: PropTypes.func,
+        processingLabel: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        cancelLabel: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        cancel: PropTypes.func,
+    };
+}
+
+export default FormUploadProgress;

package/src/FormUploadProgress.scss

@@ -0,0 +1,78 @@
+@import "./global.scss";
+
+.FormUploadProgress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.6);
+  z-index: 2;
+
+  &.animated {
+    &.mounting, &.mounted {
+      transition-delay: 500ms;
+    }
+  }
+
+  .wrapper {
+    position: sticky;
+    top: 40%;
+    margin-top: 40%;
+    margin-left: 50%;
+    transform: translateX(-50%);
+
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+
+    .CircleProgress, .SpinningProgress {
+      position: absolute;
+      width: 107px;
+      height: 107px;
+      top: 0;
+      left: 0;
+
+      .line {
+        stroke: $colorBlue;
+      }
+    }
+
+    > .progress {
+      width: 107px;
+      height: 107px;
+      min-height: 107px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+      border-radius: 50%;
+      background: white;
+      position: relative;
+
+      > .value {
+        display: inline-block;
+        margin-top: 5px;
+
+        font-weight: bold;
+        line-height: 16px;
+        font-size: 13px;
+        text-align: center;
+
+        color: #818181;
+      }
+    }
+
+    .cancel {
+      min-width: 107px;
+      margin-top: 20px;
+      background-color: white;
+      color: #F96B5C;
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+}

package/src/ImageGallery.css

@@ -0,0 +1,196 @@
+.ImageGallery {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.01);
+  user-select: none;
+}
+.ImageGallery:focus {
+  outline-width: 0px;
+}
+.ImageGallery.animated {
+  transition: background-color 0.25s ease;
+  opacity: 1;
+}
+.ImageGallery.mounting, .ImageGallery.mounted {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.ImageGallery .image {
+  position: absolute;
+  cursor: grab;
+}
+.ImageGallery .image .counter {
+  display: none;
+}
+.ImageGallery .image img {
+  border-radius: 4px;
+  max-width: 100%;
+  min-width: 100%;
+}
+.ImageGallery .image.animated {
+  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
+  will-change: top, left, width, height, opacity;
+}
+.ImageGallery .image.animated.mounting, .ImageGallery .image.animated.mounted, .ImageGallery .image.animated.unmounting {
+  opacity: 1;
+}
+.ImageGallery .image.zoomed {
+  text-align: center;
+  overflow: hidden;
+}
+.ImageGallery .image.dragging {
+  transition: none;
+  cursor: move;
+}
+.ImageGallery .image .close {
+  position: absolute;
+  top: -18px;
+  right: -18px;
+}
+.ImageGallery .image .spinner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.65);
+}
+.ImageGallery .image .spinner .SpinningProgress {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -24px;
+  margin-top: -24px;
+}
+.ImageGallery .image .spinner .SpinningProgress .line {
+  stroke: #2196F3;
+}
+.ImageGallery .Button.animated {
+  transition: all 0.25s ease;
+  opacity: 0;
+  transform: scale(0);
+}
+.ImageGallery .Button.animated.mounted, .ImageGallery .Button.animated.mounting {
+  opacity: 1;
+  transform: scale(1);
+}
+.ImageGallery .Button {
+  color: white;
+  background: rgba(0, 0, 0, 0.4);
+}
+.ImageGallery .Button:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+.ImageGallery > .arrow {
+  position: absolute;
+  top: 50%;
+  height: 76px;
+  width: 76px;
+  margin-top: -38px;
+}
+.ImageGallery > .arrow.left {
+  left: 5%;
+}
+.ImageGallery > .arrow.right {
+  right: 5%;
+}
+.ImageGallery > .arrow .material-icons {
+  font-size: 40px;
+}
+.ImageGallery .counter {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: white;
+  font-size: 13px;
+}
+.ImageGallery .previews {
+  height: 80px;
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0 45px;
+}
+.ImageGallery .previews .viewport {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+.ImageGallery .previews .container {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  height: 100%;
+  transition: left 0.25s ease;
+}
+.ImageGallery .previews .preview {
+  position: relative;
+  height: 100%;
+  display: inline-block;
+  width: 106.66px;
+  overflow: hidden;
+  margin-left: 12px;
+  border-radius: 2px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.ImageGallery .previews .preview:first-child {
+  margin-left: 0;
+}
+.ImageGallery .previews .preview > .border {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 3px;
+}
+.ImageGallery .previews .preview > .border .line {
+  left: 50%;
+  width: 0;
+  height: 3px;
+  min-height: 3px;
+  background-color: #4AC263;
+  transition: all 0.2s ease;
+  position: absolute;
+}
+.ImageGallery .previews .preview:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.35);
+  transition: background 0.2s ease;
+}
+.ImageGallery .previews .preview:hover:after {
+  background: rgba(0, 0, 0, 0.1);
+}
+.ImageGallery .previews .preview.selected .border .line {
+  left: 0;
+  width: 100%;
+}
+.ImageGallery .previews .preview.selected:after {
+  background: rgba(0, 0, 0, 0);
+}
+.ImageGallery .previews > .arrow {
+  position: absolute;
+  top: 50%;
+  height: 30px;
+  width: 30px;
+  min-width: 30px;
+  min-height: 30px;
+  margin-top: -15px;
+}
+.ImageGallery .previews > .arrow.left {
+  left: 0;
+}
+.ImageGallery .previews > .arrow.right {
+  right: 0;
+}
+.ImageGallery .previews > .arrow .material-icons {
+  font-size: 24px;
+}