react-ui-basics 0.0.173 → 0.0.176

package/src/Snackbar.js

@@ -0,0 +1,71 @@
+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 './Snackbar.css';
+import ReactDOM from 'react-dom';
+import ReactCreateElement from './ReactCreateElement';
+import PropTypes from "prop-types";
+import './Snackbar.css'
+import {classNames, setTimeout, clearTimeout} from "./Tools";
+import {componentWillUnmount, render, props, className, PureComponent, stateGSs} from "./ReactConstants";
+
+const shown = 'shown';
+
+class Snackbar extends PureComponent {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+        const [
+            isShow,
+            getText,
+            clazzName
+        ] = stateGSs(this, 3);
+
+        let timeout;
+        that[ReactConstants[1]] = () => {
+            clearTimeout(timeout);
+        };
+        that[ReactConstants[3]] = () => {
+            const _props = props(that);
+            const {container} = _props;
+
+            const el = <div className={classNames(`Snackbar`, _props[ReactConstants[5]], isShow() && shown, clazzName())}>
+                <div className="message">{getText() || _props.text}</div>
+            </div>;
+            return container ? ReactDOM.createPortal(el, container) : el;
+        };
+
+        const hide = ()=>{
+            isShow(false)
+            clazzName(null)
+        }
+
+        that.show = (text, className) => {
+            if (isShow()) {
+                clearTimeout(timeout);
+                isShow(false);
+                timeout = setTimeout(that.show, 260, text, className)
+            } else {
+                isShow(true);
+                getText(text);
+                clazzName(className)
+                timeout = setTimeout(hide, 3000);
+            }
+        }
+    }
+}
+
+if (process.env.NODE_ENV !== 'production') {
+    Snackbar.propTypes = {
+        [ReactConstants[5]]: PropTypes.string,
+        text: PropTypes.string,
+        container: PropTypes.node,
+    };
+}
+
+export default Snackbar;

package/src/Snackbar.scss

@@ -0,0 +1,47 @@
+
+.Snackbar {
+  transform: translateX(-50%);
+  overflow: hidden;
+  background-color: #323232;
+  padding: 14px 24px 14px 24px;
+  color: #fff;
+  min-width: 288px;
+  max-width: 568px;
+  position: fixed;
+  bottom: -50px;
+  left: 50%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  opacity: 0;
+
+  transition: bottom 0.25s ease, opacity 0.2s ease;
+
+  border-radius: 4px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+  &.shown {
+    bottom: 15px;
+    opacity: 1;
+  }
+
+  .message {
+    overflow: hidden;
+    line-height: 1.2em;
+    min-height: 1.2em;
+    max-height: 2.4em;
+    flex: 1;
+  }
+
+  .action {
+    text-transform: uppercase;
+    font-weight: bold;
+    margin-left: 48px;
+    color: #bf3727;
+
+    a {
+      text-decoration: none;
+      color: #bf3727;
+    }
+  }
+}

package/src/SpinningProgress.css

@@ -0,0 +1,49 @@
+.SpinningProgress {
+  width: 48px;
+  height: 48px;
+  position: relative;
+  margin: 0 auto;
+}
+.SpinningProgress:before {
+  content: "";
+  display: block;
+  padding-top: 100%;
+}
+.SpinningProgress .circular {
+  animation: rotate 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.SpinningProgress .line {
+  stroke: black;
+  stroke-width: 2px;
+  stroke-dasharray: 1, 96;
+  stroke-dashoffset: 0;
+  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 96;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 43, 96;
+    stroke-dashoffset: -17px;
+  }
+  100% {
+    stroke-dasharray: 43, 96;
+    stroke-dashoffset: -53px;
+  }
+}

package/src/SpinningProgress.js

@@ -0,0 +1,19 @@
+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 './SpinningProgress.css';
+import ReactCreateElement from './ReactCreateElement';
+import './SpinningProgress.css'
+
+const SpinningProgress = () => (
+    <div className="SpinningProgress">
+        <svg className="circular" viewBox="0 0 24 24">
+            <circle className="line" cx="12" cy="12" r="8.75" fill="none"/>
+        </svg>
+    </div>
+);
+
+export default SpinningProgress;

package/src/SpinningProgress.scss

@@ -0,0 +1,57 @@
+
+.SpinningProgress {
+  width: 48px;
+  height: 48px;
+
+  position: relative;
+  margin: 0 auto;
+
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+
+  .circular {
+    animation: rotate 2s linear infinite;
+    height: 100%;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+
+  }
+
+  .line {
+    stroke: black;
+    stroke-width: 2px;
+    stroke-dasharray: 1, 96;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 96;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 43, 96;
+      stroke-dashoffset: -17px;
+    }
+    100% {
+      stroke-dasharray: 43, 96;
+      stroke-dashoffset: -53px;
+    }
+  }
+}

package/src/Switch.css

@@ -0,0 +1,69 @@
+.Switch {
+  display: inline-flex;
+  padding-top: 5px;
+}
+.Switch .switch-input {
+  display: none;
+}
+.Switch .switch-label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 38px;
+  height: 24px;
+  cursor: pointer;
+  font-weight: 500;
+  text-align: left;
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  padding-left: 44px;
+  box-sizing: border-box;
+}
+.Switch .switch-label:before, .Switch .switch-label:after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  margin: 0;
+  outline: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  transition: all 0.3s ease;
+}
+.Switch .switch-label:before {
+  left: 1px;
+  width: 34px;
+  height: 14px;
+  background-color: #9E9E9E;
+  border-radius: 8px;
+}
+.Switch .switch-label:after {
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background-color: #FAFAFA;
+  border-radius: 50%;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
+}
+.Switch .switch-label .toggle--on {
+  display: none;
+}
+.Switch .switch-label .toggle--off {
+  display: inline-block;
+}
+.Switch .switch-label .label {
+  margin-right: 5px;
+}
+.Switch .switch-input:checked + .switch-label:before {
+  background-color: #A5D6A7;
+}
+.Switch .switch-input:checked + .switch-label:after {
+  background-color: #4CAF50;
+  transform: translate(80%, -50%);
+}
+.Switch .switch-input:checked + .switch-label .toggle--on {
+  display: inline-block;
+}
+.Switch .switch-input:checked + .switch-label .toggle--off {
+  display: none;
+}

package/src/Switch.js

@@ -0,0 +1,54 @@
+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 './Switch.css';
+import ReactCreateElement from './ReactCreateElement';
+import './Switch.css'
+import {getRandomId, classNames} from "./Tools";
+import {PureComponent, render} from "./ReactConstants";
+import PropTypes from "prop-types";
+
+class Switch extends PureComponent {
+
+    constructor(props) {
+        super(props);
+        const randomId = getRandomId('sw-');
+
+        this[ReactConstants[3]] = () => {
+            const {label, className, labelOn, labelOff, onChange, value, onClick} = __props(this);
+            const id = __props(this).id || randomId;
+            return (
+                <div className={classNames("Switch", className)} onClick={onClick}>
+                    <input type="checkbox" id={id} className="switch-input" onChange={onChange} checked={value}/>
+
+                    <label htmlFor={id} className="switch-label">
+                        {label && <span className="label">{label}</span>}
+                        {labelOn && <span className="toggle--on">{labelOn}</span>}
+                        {labelOff && <span className="toggle--off">{labelOff}</span>}
+                    </label>
+                </div>
+            )
+        }
+    }
+}
+
+export default Switch
+
+if (process.env.NODE_ENV !== 'production') {
+    Switch.propTypes = {
+        [ReactConstants[5]]: PropTypes.string,
+        label: PropTypes.string,
+        labelOn: PropTypes.string,
+        labelOff: PropTypes.string,
+        value: PropTypes.bool,
+        [ReactConstants[7]]: PropTypes.func,
+        [ReactConstants[6]]: PropTypes.func,
+        id: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number
+        ]),
+    };
+}

package/src/Switch.scss

@@ -0,0 +1,73 @@
+.Switch {
+  display: inline-flex;
+  padding-top: 5px; // align to center
+
+  .switch-input {
+    display: none;
+  }
+
+  .switch-label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    min-width: 38px;
+    height: 24px;
+    cursor: pointer;
+    font-weight: 500;
+    text-align: left;
+    user-select: none;
+    margin: 0;
+    padding: 0;
+    padding-left: 44px;
+    box-sizing: border-box;
+
+    &:before, &:after {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      margin: 0;
+      outline: 0;
+      top: 50%;
+      transform: translate(0, -50%);
+      transition: all 0.3s ease;
+    }
+    &:before {
+      left: 1px;
+      width: 34px;
+      height: 14px;
+      background-color: #9E9E9E;
+      border-radius: 8px;
+    }
+    &:after {
+      left: 0;
+      width: 20px;
+      height: 20px;
+      background-color: #FAFAFA;
+      border-radius: 50%;
+      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
+    }
+    .toggle--on {
+      display: none;
+    }
+    .toggle--off {
+      display: inline-block;
+    }
+    .label {
+      margin-right: 5px;
+    }
+  }
+  .switch-input:checked + .switch-label:before {
+    background-color: #A5D6A7;
+  }
+  .switch-input:checked + .switch-label:after {
+    background-color: #4CAF50;
+    transform: translate(80%, -50%);
+  }
+  .switch-input:checked + .switch-label .toggle--on {
+    display: inline-block;
+  }
+  .switch-input:checked + .switch-label .toggle--off {
+    display: none;
+  }
+
+}

package/src/Table.css

@@ -0,0 +1,94 @@
+.Table {
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+  color: #1e252d;
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+  position: relative;
+}
+.Table td, .Table th {
+  padding: 5px;
+  font-weight: 500;
+  color: #2e2e2e;
+}
+.Table td {
+  height: 48px;
+  border-bottom: 1px solid #ebebeb;
+  border-top: 1px solid #ebebeb;
+}
+.Table td:first-child {
+  padding-left: 45px;
+}
+.Table td:last-child {
+  padding-right: 45px;
+}
+.Table th {
+  color: #808080;
+  height: 55px;
+  padding: 0px;
+}
+.Table th .sortable {
+  cursor: pointer;
+}
+.Table th .sortable.active {
+  font-weight: bold;
+}
+.Table th .sortable.active .material-icons {
+  font-size: 16px;
+}
+.Table th .sortable.false {
+  padding-right: 22px;
+}
+.Table th:first-child .hidden, .Table th:first-child .fixed {
+  padding-left: 45px;
+}
+.Table th:last-child .hidden, .Table th:last-child .fixed {
+  padding-right: 45px;
+}
+.Table th .hidden {
+  color: transparent;
+  height: 0px;
+  padding: 5px;
+}
+.Table th .fixed {
+  font-weight: normal;
+  display: flex;
+  flex-flow: row;
+  justify-items: center;
+  align-items: center;
+  text-align: left;
+  height: 56px;
+  padding: 0px 5px;
+  background-color: white;
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  box-sizing: border-box;
+  border-bottom: 1px solid #ebebeb;
+  border-top: 1px solid #ebebeb;
+}
+.Table tbody tr:hover {
+  background-color: #f2f2f2;
+}
+.Table tbody tr.disabled td {
+  color: #93a4b7;
+}
+.Table .ro {
+  color: #47576a;
+}
+.Table .editable {
+  cursor: pointer;
+}
+.Table .editable > .TextField {
+  height: 20px !important;
+  margin: 0px;
+  position: relative;
+  display: block;
+}
+.Table .editable > .TextField input {
+  width: 100%;
+  height: 20px;
+  padding: 0px;
+  background-color: #f0f0f0;
+}

package/src/Table.scss

@@ -0,0 +1,121 @@
+@import "./global.scss";
+
+.Table {
+  font-family: $font;
+  font-size: $fontSizeInput;
+  color: $colorInput;
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+  position: relative;
+
+  td, th {
+    padding: 5px;
+    font-weight: 500;
+    color: #2e2e2e;
+  }
+
+  td {
+    height: 48px;
+    border-bottom: 1px solid #ebebeb;
+    border-top: 1px solid #ebebeb;
+
+    &:first-child {
+      padding-left: 45px;
+    }
+
+    &:last-child {
+      padding-right: 45px;
+    }
+  }
+
+  th {
+    color: #808080;
+    height: 55px;
+    padding: 0px;
+
+    .sortable {
+      cursor: pointer;
+
+      &.active {
+        font-weight: bold;
+
+        .material-icons {
+          font-size: 16px;
+        }
+      }
+
+      &.false {
+        padding-right: 22px;
+      }
+    }
+
+    &:first-child {
+      .hidden, .fixed {
+        padding-left: 45px;
+      }
+    }
+
+    &:last-child {
+      .hidden, .fixed {
+        padding-right: 45px;
+      }
+    }
+
+    .hidden {
+      color: transparent;
+      height: 0px;
+      padding: 5px;
+    }
+
+    .fixed {
+      font-weight: normal;
+      display: flex;
+      flex-flow: row;
+      justify-items: center;
+      align-items: center;
+
+      text-align: left;
+      height: 56px;
+      padding: 0px 5px;
+      background-color: white;
+      position: absolute;
+      top: 0px;
+      z-index: 1;
+      box-sizing: border-box;
+      border-bottom: 1px solid #ebebeb;
+      border-top: 1px solid #ebebeb;
+    }
+  }
+
+  tbody tr:hover {
+    background-color: #f2f2f2;
+  }
+
+  tbody tr.disabled td {
+    color: lighten($colorInput, 50%);
+  }
+
+  .ro {
+    color: lighten($colorInput, 20%)
+  }
+
+  .editable {
+    cursor: pointer;
+
+    > .TextField {
+      height: 20px !important;
+      margin: 0px;
+      position: relative;
+      display: block;
+
+      input {
+        width: 100%;
+        height: 20px;
+        padding: 0px;
+        background-color: rgb(240, 240, 240);
+      }
+    }
+  }
+
+}