react-ui-basics 0.0.173 → 0.0.176

package/src/Button.scss

@@ -0,0 +1,177 @@
+@import "./global.scss";
+
+.Button {
+  position: relative;
+  min-width: 64px;
+  min-height: 36px;
+  height: 24px;
+  margin: 0px;
+  padding: 0px 16px;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 1.25px;
+  background: #dfdfdf;
+  text-transform: uppercase;
+  font-family: $font;
+  -webkit-tap-highlight-color: transparent;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+  overflow: hidden;
+  user-select: none;
+  border-radius: 3px;
+
+  transition: all 0.2s ease;
+
+  &.flat {
+    background-color: transparent;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .05);
+    }
+  }
+
+  &.green {
+    background-color: #43a047;
+    color: white;
+
+    &:hover {
+      background-color: darken(#43a047, 5%);
+    }
+  }
+
+  &.blue {
+    background-color: #039be5;
+    color: white;
+
+    &:hover {
+      background-color: darken(#039be5, 5%);
+    }
+  }
+
+  &.red {
+    background-color: #e53935;
+    color: white;
+
+    &:hover {
+      background-color: darken(#e53935, 5%);
+    }
+  }
+
+  &.black {
+    background-color: #1e252d;
+    color: white;
+
+    &:hover {
+      background-color: darken(#1e252d, 5%);
+    }
+  }
+
+  &.gray {
+    background: #D9D9D9;
+    color: #999999;
+
+    &:hover {
+      background-color: darken(#D9D9D9, 5%);
+    }
+  }
+
+  &.small {
+    padding: 0px 8px;
+    min-height: 16px;
+    min-width: 16px;
+  }
+
+  > .material-icons {
+    margin-right: 10px;
+  }
+
+  &.round {
+    padding: 0px;
+    min-width: 36px;
+    border-radius: 50%;
+
+    > .material-icons {
+      margin: 0px;
+    }
+  }
+
+  .ripple {
+    position: absolute;
+    background: rgba(0, 0, 0, .1);
+    border-radius: 100%;
+    transform: scale(0);
+    pointer-events: none;
+    transition: opacity 0.2s ease-out;
+  }
+
+  .ripple.show {
+    animation: ripple .35s ease-out;
+  }
+
+  &:active .ripple.showed {
+    opacity: 1;
+  }
+
+  &:focus .ripple.focused {
+    opacity: 1;
+    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+    transform: scale(1);
+    animation: resize 1.25s ease-out infinite;
+    animation-delay: 0.2s;
+    animation-direction: alternate;
+  }
+
+  .ripple.showed {
+    transform: scale(2);
+    opacity: 0;
+  }
+
+  @keyframes ripple {
+    to {
+      transform: scale(2);
+    }
+  }
+
+  @keyframes resize {
+    to {
+      transform: scale(0.9);
+    }
+  }
+
+  &.raised {
+    //box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    transition: color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
+    }
+
+    &:active {
+      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
+    }
+
+    //&:focus, &:hover {
+    //  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+    //}
+  }
+
+  &.disabled {
+    box-shadow: none;
+    background: #D9D9D9;
+    color: #999999;
+
+    &:hover {
+      background-color: darken(#D9D9D9, 5%);
+    }
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}

package/src/Checkbox.css

@@ -0,0 +1,56 @@
+.Checkbox {
+  position: relative;
+  white-space: pre;
+}
+.Checkbox *, .Checkbox *:before, .Checkbox *:after {
+  box-sizing: border-box;
+}
+.Checkbox label {
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+  color: #1e252d;
+  cursor: pointer;
+}
+.Checkbox label:before, .Checkbox label:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.Checkbox label:before {
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border: 2px solid #252525;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+.Checkbox input[type=checkbox] {
+  outline: 0;
+  margin-right: 10px;
+  visibility: hidden;
+}
+.Checkbox input[type=checkbox]:checked + label:before {
+  background: #4AC263;
+  border: none;
+}
+.Checkbox input[type=checkbox]:checked + label:after {
+  transform: rotate(-45deg);
+  top: 6px;
+  left: 4px;
+  width: 12px;
+  height: 6px;
+  border: 2px solid #fff;
+  border-top-style: none;
+  border-right-style: none;
+}
+.Checkbox input[type=checkbox]:disabled + label {
+  color: gray;
+}
+.Checkbox input[type=checkbox]:disabled + label:before {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+.Checkbox input[type=checkbox]:disabled:checked + label:before {
+  background: rgba(0, 0, 0, 0.26);
+}

package/src/Checkbox.js

@@ -0,0 +1,52 @@
+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 './Checkbox.css';
+import ReactCreateElement from './ReactCreateElement';
+import './Checkbox.css'
+import {classNames, getRandomId} from "./Tools";
+import {PureComponent, render, propsGetter} from "./ReactConstants";
+import PropTypes from "prop-types";
+
+class Checkbox extends PureComponent {
+
+    constructor(properties) {
+        super(properties);
+        const randomId = getRandomId('cb-');
+        const props = propsGetter(this);
+
+        this[ReactConstants[3]] = () => {
+            const {label, name, onChange, value, className, disabled} = props();
+            const id = props().id || randomId;
+            return (
+                <div className={classNames("Checkbox", className)}>
+                    <input name={name} id={id} type="checkbox" onChange={onChange} checked={value} disabled={disabled}/>
+                    <label htmlFor={id}>{label}</label>
+                </div>
+            )
+        }
+    }
+}
+
+if (process.env.NODE_ENV !== 'production') {
+    Checkbox.propTypes = {
+        [ReactConstants[7]]: PropTypes.func.isRequired,
+        value: PropTypes.bool,
+        disabled: PropTypes.bool,
+        [ReactConstants[5]]: PropTypes.string,
+        label: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        name: PropTypes.string,
+        id: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number
+        ]),
+    };
+}
+
+export default Checkbox

package/src/Checkbox.scss

@@ -0,0 +1,87 @@
+@use "sass:math";
+@import "./global.scss";
+
+$checkedColor: #4AC263;
+$borderColor: #252525;
+
+$size: 20px;
+$padding: 4px;
+
+$checkMarkWidth: 2px;
+$checkMarkColor: #fff;
+$checkMarkSize: $size - 2*$padding;
+
+.Checkbox {
+  position: relative;
+  white-space: pre;
+
+  *, *:before, *:after {
+    box-sizing: border-box;
+  }
+
+  label {
+    font-family: $font;
+    font-size: $fontSizeInput;
+    color: $colorInput;
+    cursor: pointer;
+
+    &:before, &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    &:before {
+      width: $size;
+      height: $size;
+      background: #fff;
+      border: 2px solid $borderColor;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: background .3s;
+    }
+  }
+
+  input[type="checkbox"] {
+    outline: 0;
+    margin-right: $size - 10px;
+    visibility: hidden;
+
+    &:checked {
+      + label:before {
+        background: $checkedColor;
+        border: none;
+      }
+
+      + label:after {
+        transform: rotate(-45deg);
+
+        top: math.div($size, 2) - math.div($checkMarkSize, 4) - math.div($size, 10) + 1;
+        left: $padding;
+        width: $checkMarkSize;
+        height: math.div($checkMarkSize, 2);
+
+        border: $checkMarkWidth solid $checkMarkColor;
+        border-top-style: none;
+        border-right-style: none;
+      }
+    }
+
+    &:disabled {
+      + label {
+        color: gray;
+
+        &:before {
+          border-color: rgba(0, 0, 0, .26);
+        }
+      }
+
+      &:checked {
+        + label:before {
+          background: rgba(0, 0, 0, .26);
+        }
+      }
+    }
+  }
+}

package/src/CircleProgress.css

@@ -0,0 +1,11 @@
+.CircleProgress {
+  width: 48px;
+  height: 48px;
+}
+.CircleProgress .line {
+  stroke-width: 2px;
+  stroke: black;
+  stroke-linecap: square;
+  fill: none;
+  transition: stroke-dashoffset 0.2s ease;
+}

package/src/CircleProgress.js

@@ -0,0 +1,38 @@
+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 './CircleProgress.css';
+import ReactCreateElement from './ReactCreateElement';
+import PropTypes from "prop-types";
+import './CircleProgress.css'
+
+const radius = 8.75;
+const length = 2 * Math.PI * radius;
+
+const dashoffset = (percent) => length * (100 - percent) / 100;
+
+const CircleProgress = ({value}) => {
+    value = Number.parseFloat(value);
+    return (
+        <div className="CircleProgress">
+            <svg viewBox="0 0 24 24">
+                <path className="line" style={{strokeDashoffset: dashoffset(Number.isFinite(value) ? value : 0), strokeDasharray: length}}
+                      d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75,8.75 0 0 1 12,3.25"/>
+            </svg>
+        </div>
+    );
+};
+
+CircleProgress.defaultProps = {
+    value: 0,
+};
+if (process.env.NODE_ENV !== 'production') {
+    CircleProgress.propTypes = {
+        value: PropTypes.number,
+    };
+}
+
+export default CircleProgress;

package/src/CircleProgress.scss

@@ -0,0 +1,13 @@
+.CircleProgress {
+  width: 48px;
+  height: 48px;
+
+  .line {
+    stroke-width: 2px;
+    stroke: black;
+    stroke-linecap: square;
+    fill: none;
+
+    transition: stroke-dashoffset 0.2s ease;
+  }
+}

package/src/CommonFields.js

@@ -0,0 +1,21 @@
+export const createAccessor = (field) => (o) => {
+    return o[field];
+}
+
+export const width = createAccessor('width')
+export const height = createAccessor('height')
+export const top = createAccessor('top')
+export const left = createAccessor('left')
+export const style = createAccessor('style')
+export const length = createAccessor('length')
+export const pageX = createAccessor('pageX')
+export const pageY = createAccessor('pageY')
+export const value = createAccessor('value')
+export const clientHeight = createAccessor('clientHeight')
+export const clientWidth = createAccessor('clientWidth')
+export const scrollTop = createAccessor('scrollTop')
+export const scrollLeft = createAccessor('scrollLeft')
+export const target = createAccessor('target')
+export const data = createAccessor('data')
+export const state = createAccessor('state')
+export const props = createAccessor('props')

package/src/DNDContainer.css

@@ -0,0 +1,26 @@
+.DNDContainer {
+  position: relative;
+}
+.DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
+  cursor: pointer;
+}
+.DNDContainer .Draggable.placeholder {
+  opacity: 0.2;
+}
+.DNDContainer .Draggable.copy {
+  position: absolute;
+  box-sizing: border-box;
+  will-change: transform;
+  opacity: 0;
+}
+.DNDContainer .Draggable.dragged {
+  z-index: 10;
+}
+.DNDContainer .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}