authscape 1.0.638 → 1.0.642

package/index.js

@@ -556,7 +556,6 @@ exports.ColorPicker = ColorPicker;
 var _react = _interopRequireWildcard(require("react"));
 var _reactColor = require("react-color");
 var _reactcss = _interopRequireDefault(require("reactcss"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -570,7 +569,7 @@ function ColorPicker(_ref) {
   var name = _ref.name,
     defaultColor = _ref.defaultColor,
     onColorChanged = _ref.onColorChanged;
-  var _useState = (0, _react.useState)(defaultColor != null ? defaultColor : "#ffffff"),
+  var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     rgbColor = _useState2[0],
     setColor = _useState2[1];
@@ -580,8 +579,8 @@ function ColorPicker(_ref) {
     setDisplayColorPicker = _useState4[1];
   var _useState5 = (0, _react.useState)(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    selectedColor = _useState6[0],
-    setSelectedColor = _useState6[1];
+    completedColor = _useState6[0],
+    setCompletedColor = _useState6[1];
   var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
     timeoutToken = _useState8[0],
@@ -592,7 +591,7 @@ function ColorPicker(_ref) {
         width: '36px',
         height: '14px',
         borderRadius: '2px',
-        background: rgbColor
+        background: rgbColor != null ? "rgba(".concat(rgbColor.r, ", ").concat(rgbColor.g, ", ").concat(rgbColor.b, ", ").concat(rgbColor.a, ")") : defaultColor
       },
       swatch: {
         padding: '5px',
@@ -615,35 +614,41 @@ function ColorPicker(_ref) {
       }
     }
   });
+  var handleClick = function handleClick() {
+    setDisplayColorPicker(!displayColorPicker);
+  };
+  var handleClose = function handleClose() {
+    setDisplayColorPicker(false);
+  };
+  var handleChange = function handleChange(color) {
+    setColor(color.rgb);
+  };
   (0, _react.useEffect)(function () {
-    if (!displayColorPicker && selectedColor != null) {
+    if (!displayColorPicker && completedColor != null) {
       clearTimeout(timeoutToken);
       setTimeoutToken(setTimeout(function () {
-        onColorChanged(name, selectedColor);
+        onColorChanged(name, completedColor);
       }, 500));
     }
-  }, [displayColorPicker, selectedColor]);
-  return /*#__PURE__*/_react["default"].createElement(_Box["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.swatch,
-    onClick: function onClick() {
-      setDisplayColorPicker(!displayColorPicker);
+    if (!displayColorPicker && completedColor == null && defaultColor != null) {
+      setColor(defaultColor);
     }
+  }, [displayColorPicker, completedColor, defaultColor]);
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.swatch,
+    onClick: handleClick
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.color
   })), displayColorPicker ? /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.popover
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.cover,
-    onClick: function onClick() {
-      setDisplayColorPicker(false);
-    }
+    onClick: handleClose
   }), /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
     color: rgbColor,
-    onChange: function onChange(color) {
-      setColor(color.hex);
-    },
-    onChangeComplete: function onChangeComplete(color) {
-      setSelectedColor(color.hex);
+    onChange: handleChange,
+    onChangeComplete: function onChangeComplete() {
+      setCompletedColor("rgba(".concat(rgbColor.r, ", ").concat(rgbColor.g, ", ").concat(rgbColor.b, ", ").concat(rgbColor.a, ")"));
     }
   })) : null);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.638",
+  "version": "1.0.642",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/ColorPicker.js

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { SketchPicker } from 'react-color';
 import reactCSS from 'reactcss';
-import Box from '@mui/material/Box';
 
 export function ColorPicker({name, defaultColor, onColorChanged}) {
-  
-    const [rgbColor, setColor] = useState(defaultColor != null ? defaultColor : "#ffffff");
-      
+
+    const [rgbColor, setColor] = useState(null);
     const [displayColorPicker, setDisplayColorPicker] = useState(false);
-    const [selectedColor, setSelectedColor] = useState(null);
+    const [completedColor, setCompletedColor] = useState(null);
     const [timeoutToken, setTimeoutToken] = useState(null);
 
     const styles = reactCSS({
@@ -17,7 +15,7 @@ export function ColorPicker({name, defaultColor, onColorChanged}) {
             width: '36px',
             height: '14px',
             borderRadius: '2px',
-            background: rgbColor,
+            background: rgbColor != null ? `rgba(${ rgbColor.r }, ${ rgbColor.g }, ${ rgbColor.b }, ${ rgbColor.a })` : defaultColor,
           },
           swatch: {
             padding: '5px',
@@ -41,42 +39,51 @@ export function ColorPicker({name, defaultColor, onColorChanged}) {
         },
     });
 
+    const handleClick = () => {
+        setDisplayColorPicker(!displayColorPicker);
+    };
+
+    const handleClose = () => {
+        setDisplayColorPicker(false);
+    };
+
+    const handleChange = (color) => {
+        setColor(color.rgb);
+    };
+
+
     useEffect(() => {
 
-      if (!displayColorPicker && selectedColor != null)
+      if (!displayColorPicker && completedColor != null)
       {
         clearTimeout(timeoutToken);
         setTimeoutToken(setTimeout(() => {
           
-          onColorChanged(name, selectedColor);
+          onColorChanged(name, completedColor);
 
         }, 500));
       }
 
-    }, [displayColorPicker, selectedColor]);
-
-    return (
-        <Box>
-            <div style={ styles.swatch } onClick={() => {
-                setDisplayColorPicker(!displayColorPicker);
-            }}>
-                <div style={ styles.color } />
-            </div>
+      if (!displayColorPicker && completedColor == null && defaultColor != null)
+      {
+        setColor(defaultColor);
+      }
 
-            { displayColorPicker ? <div style={ styles.popover }>
-            <div style={ styles.cover } onClick={() => {
-                setDisplayColorPicker(false);
-            }}/>
-            <SketchPicker color={ rgbColor } onChange={(color) => {
-                
-                setColor(color.hex);
+    }, [displayColorPicker, completedColor, defaultColor]);
 
-            }} onChangeComplete={(color) => {
 
-              setSelectedColor(color.hex);
+    return (
+        <div>
+        <div style={ styles.swatch } onClick={ handleClick }>
+          <div style={ styles.color } />
+        </div>
+        { displayColorPicker ? <div style={ styles.popover }>
+          <div style={ styles.cover } onClick={ handleClose }/>
+          <SketchPicker color={ rgbColor } onChange={ handleChange } onChangeComplete={() => {
+            setCompletedColor(`rgba(${ rgbColor.r }, ${ rgbColor.g }, ${ rgbColor.b }, ${ rgbColor.a })`);
+          }} />
+        </div> : null }
 
-            }} />
-            </div> : null }
-        </Box>
+      </div>
     );
 }