@onepercentio/one-ui 0.19.9 → 0.20.0

package/dist/components/FileInput/FileInput.d.ts

@@ -22,6 +22,7 @@ export declare type FileInputProps = {
     file?: File;
     onFile: (file: File | undefined) => void;
     progress?: number;
+    disabled?: boolean;
 } & React.HTMLProps<HTMLInputElement>;
 /**
  * A component to provide the upload of a file

package/dist/components/FileInput/View/Compact/Compact.d.ts

@@ -2,4 +2,4 @@ import { FileInputViewProps } from "../View.types";
 /**
  * Shows the file submission input in a more compact form
  **/
-export default function Compact({ states, file, footer, inputEl, onAction, progress, className, }: FileInputViewProps): JSX.Element;
+export default function Compact({ states, file, footer, inputEl, onAction, progress, className, disabled, }: FileInputViewProps): JSX.Element;

package/dist/components/FileInput/View/Compact/Compact.js

@@ -23,7 +23,8 @@ function Compact(_ref) {
     inputEl = _ref.inputEl,
     onAction = _ref.onAction,
     progress = _ref.progress,
-    className = _ref.className;
+    className = _ref.className,
+    disabled = _ref.disabled;
   const state = states[file ? "fileProvided" : "waitingFile"];
   const statusClass = progress !== undefined && progress < 100 ? "loading" : file ? "completed" : "waiting";
   const progressDashArray = (0, _react.useMemo)(function () {
@@ -43,7 +44,8 @@ function Compact(_ref) {
     }
   }, [statusClass]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_CompactModule.default.root, " ").concat(className),
+    className: "".concat(_CompactModule.default.root, " ").concat(className, " ").concat(disabled ? _CompactModule.default.disabled : ""),
+    onClick: onAction,
     style: {
       "--progress-stroke-dasharray": progressDashArray
     }
@@ -51,8 +53,7 @@ function Compact(_ref) {
     transitionType: _Transition.TransitionAnimationTypes.COIN_FLIP
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "transparent",
-    key: statusClass,
-    onClick: onAction
+    key: statusClass
   }, /*#__PURE__*/_react.default.createElement("svg", {
     viewBox: "0 0 46 47",
     className: _CompactModule.default[statusClass],
@@ -68,7 +69,21 @@ function Compact(_ref) {
     "stroke-width": "2",
     "stroke-linecap": "round",
     "stroke-linejoin": "round"
-  }), /*#__PURE__*/_react.default.createElement("g", {
+  }), statusClass === "completed" ? /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(11, 11)"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011",
+    stroke: "white",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M22 4L12 14.01L9 11.01",
+    stroke: "white",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  })) : /*#__PURE__*/_react.default.createElement("g", {
     transform: polylines[0]
   }, /*#__PURE__*/_react.default.createElement("polyline", {
     points: polylines[1],

package/dist/components/FileInput/View/Compact/Compact.module.scss

@@ -5,6 +5,11 @@
   background-color: $fileInputBackgroundColor;
   display: flex;
   align-items: center;
+  cursor: pointer;
+  &.disabled {
+    pointer-events: none;
+    cursor: initial;
+  }
   button {
     padding: 0px;
     min-width: initial;
@@ -41,10 +46,8 @@
       }
     }
     &.completed {
-      --svg-color: #{$successDark};
       circle {
-        fill: #{$success};
-        stroke: #{$successDark};
+        fill: var(--svg-color);
       }
       polyline {
         stroke-width: 3;

package/dist/components/FileInput/View/View.types.d.ts

@@ -5,4 +5,4 @@ export declare type FileInputViewProps = {
     onAction: () => void;
     /** A range from 0-100 to indicate some file upload progress */
     progress?: number;
-} & Pick<FileInputProps, "states" | "file" | "footer" | "className">;
+} & Pick<FileInputProps, "states" | "file" | "footer" | "className" | "disabled">;

package/dist/components/Switch/Switch.d.ts

@@ -2,8 +2,9 @@ import { DetailedHTMLProps, HTMLAttributes } from "react";
 /**
  * Switchs between states
  **/
-export default function Switch({ enabled, onToggle, size, ...props }: {
+export default function Switch({ enabled, onToggle, size, disabled, ...props }: {
     enabled: boolean;
     onToggle: (newState: boolean) => void;
     size: number;
+    disabled?: boolean;
 } & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">): JSX.Element;

package/dist/components/Switch/Switch.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Switch;
 var _react = _interopRequireDefault(require("react"));
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.scss"));
-const _excluded = ["enabled", "onToggle", "size"];
+const _excluded = ["enabled", "onToggle", "size", "disabled"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -18,16 +18,20 @@ function Switch(_ref) {
   let enabled = _ref.enabled,
     onToggle = _ref.onToggle,
     size = _ref.size,
+    disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", _extends({
     style: {
       fontSize: "".concat(size, "px")
     },
-    className: "".concat(_SwitchModule.default.root, " ").concat(enabled ? _SwitchModule.default.enabled : ""),
+    className: "".concat(_SwitchModule.default.root, " ").concat(enabled ? _SwitchModule.default.on : "", " ").concat(disabled ? _SwitchModule.default.disabled : ""),
     onClick: function onClick() {
       return onToggle(!enabled);
     }
   }, props), /*#__PURE__*/_react.default.createElement("div", {
     className: _SwitchModule.default.toggler
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    checked: enabled,
+    type: "checkbox"
   })));
 }

package/dist/components/Switch/Switch.module.scss

@@ -8,11 +8,19 @@
   width: 2em + 0.4em;
   padding: 0.1em;
   border-radius: math.div($height, 1);
-  border: .1em solid $digitalBlue;
+  border: 0.1em solid $digitalBlue;
   background-color: white;
   transition: background-color $fast linear;
   cursor: pointer;
 
+  input {
+    max-width: 0px;
+    max-height: 0px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
   .toggler {
     height: 1em;
     width: 1em;
@@ -21,7 +29,11 @@
     transition: transform $fast linear;
   }
 
-  &.enabled {
+  &.disabled {
+    opacity: 0.4;
+    cursor: initial;
+  }
+  &.on {
     background-color: $digitalBlue;
     .toggler {
       transform: translateX(1em);

package/dist/hooks/ui/useSnapToViewport.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
+ */
+export default function useSnapToViewport(defaultPadding: number): import("react").RefObject<HTMLDivElement>;

package/dist/hooks/ui/useSnapToViewport.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSnapToViewport;
+var _react = require("react");
+var _useSnapToViewportModule = _interopRequireDefault(require("./useSnapToViewport.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
+ */
+function useSnapToViewport(defaultPadding) {
+  const elRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    const diff = window.visualViewport.width - elRef.current.clientWidth;
+    const margin = diff / 2;
+    elRef.current.style.setProperty("--overflow-padding", "".concat(margin, "px"));
+    elRef.current.style.setProperty("--overflow-margin", "".concat(-margin, "px"));
+    elRef.current.style.setProperty("--default-padding", "".concat(defaultPadding, "px"));
+    elRef.current.style.setProperty("--default-margin", "".concat(-defaultPadding, "px"));
+    elRef.current.classList.add(_useSnapToViewportModule.default.applySpacings);
+  }, []);
+  return elRef;
+}

package/dist/hooks/ui/useSnapToViewport.module.scss

@@ -0,0 +1,6 @@
+.applySpacings {
+  padding-left: var(--overflow-padding, var(--default-padding));
+  padding-right: var(--overflow-padding, var(--default-padding));
+  margin-left: var(--overflow-margin, var(--default-margin));
+  margin-right: var(--overflow-margin, var(--default-margin));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.19.9",
+  "version": "0.20.0",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",