@arcblock/ux 0.78.26 → 1.6.60

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2018-2019 ArcBlock
+Copyright 2018-2022 ArcBlock
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -16,59 +16,3 @@ import ClickToCopy from '@arcblock/ux/lib/ClickToCopy';
 import Icon from '@arcblock/ux/lib/Icon';
 import ActivityIndicator from '@arcblock/ux/lib/ActivityIndicator';
 ```
-
-## FAQ
-
-### How to use `GraphQLPlayground` comonent in SSR env such as gatsby?
-
-Because `graphiql` and `graphiql-code-exporter` uses browser globals such as `window`, we need to mock them both during building time for gatsby.
-
-First we need to create an mock for `graphqil`, `src/mocks/graphiql`:
-
-```javascript
-function graphiql() {
-  return null;
-}
-
-graphiql.Logo = () => null;
-graphiql.Toolbar = () => null;
-graphiql.QueryEditor = () => null;
-graphiql.VariableEditor = () => null;
-graphiql.ResultViewer = () => null;
-graphiql.Button = () => null;
-graphiql.ToolbarButton = () => null;
-graphiql.Group = () => null;
-graphiql.Menu = () => null;
-graphiql.MenuItem = () => null;
-graphiql.Select = () => null;
-graphiql.SelectOption = () => null;
-graphiql.Footer = () => null;
-
-module.exports = graphiql;
-```
-
-Then, in `gatsby-node.js`, use the mocks:
-
-```javascript
-const path = require('path');
-
-exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-  if (stage === 'build-html') {
-    actions.setWebpackConfig({
-      resolve: {
-        alias: {
-          graphiql: path.resolve(__dirname, './src/mocks/graphiql.js'),
-        },
-      },
-      module: {
-        rules: [
-          {
-            test: /node_modules\/codemirror\//,
-            use: loaders.null(),
-          },
-        ],
-      },
-    });
-  }
-};
-```

package/lib/ActionButton/index.js

@@ -13,6 +13,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Util = require("../Util");
 
+const _excluded = ["href", "icon", "size", "color", "theme", "variant", "gradient", "children", "text"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -20,7 +22,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 const ActionButton = props => {
-  const newProps = (0, _Util.mergeProps)(props, ActionButton); // eslint-disable-next-line object-curly-newline
+  const newProps = (0, _Util.mergeProps)(props, ActionButton);
 
   const {
     href,
@@ -33,7 +35,7 @@ const ActionButton = props => {
     children,
     text
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["href", "icon", "size", "color", "theme", "variant", "gradient", "children", "text"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const styles = {};
 
@@ -48,7 +50,7 @@ const ActionButton = props => {
       styles[x] = newProps[x];
     }
   });
-  return _react.default.createElement(_Button.default, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({
     color: theme,
     href: href,
     target: "_blank",
@@ -56,7 +58,7 @@ const ActionButton = props => {
     style: styles,
     size: size,
     className: "action-button"
-  }, rest), !!icon && _react.default.createElement("i", {
+  }, rest), !!icon && /*#__PURE__*/_react.default.createElement("i", {
     className: icon
   }), text || children);
 };

package/lib/ActivityIndicator/index.js

@@ -11,15 +11,22 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _green = _interopRequireDefault(require("@material-ui/core/colors/green"));
+
+var _blue = _interopRequireDefault(require("@material-ui/core/colors/blue"));
+
 var _Logo = _interopRequireDefault(require("../Logo"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["messages", "interval"],
+      _excluded2 = ["size", "orbitColor", "atomColor", "duration"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 
 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; }
 
@@ -31,7 +38,7 @@ function ActivityIndicator(_ref) {
     messages,
     interval
   } = _ref,
-      rest = _objectWithoutProperties(_ref, ["messages", "interval"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   const [index, setIndex] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
@@ -42,30 +49,32 @@ function ActivityIndicator(_ref) {
       clearTimeout(timer);
     };
   });
-  return _react.default.createElement(Div, rest, _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(Div, rest, /*#__PURE__*/_react.default.createElement("div", {
     className: "pm-loader-container"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "pm-loader-text"
-  }, _react.default.createElement("p", null, messages[index])), _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("p", null, messages[index])), /*#__PURE__*/_react.default.createElement("div", {
     className: "pm-loader-atoms"
-  }, _react.default.createElement(_Logo.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
     style: {
       transform: 'scale(0.6)'
     },
     showText: false
-  }), _react.default.createElement("div", {
-    className: "pm-loader-orbit-1"
-  }, _react.default.createElement("div", {
-    className: "pm-loader-atom-1"
-  })), _react.default.createElement("div", {
-    className: "pm-loader-orbit-2"
-  }, _react.default.createElement("div", {
-    className: "pm-loader-atom-2"
-  })), _react.default.createElement("div", {
-    className: "pm-loader-orbit-3"
-  }, _react.default.createElement("div", {
-    className: "pm-loader-atom-3"
-  })))));
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 56,
+    orbitColor: _green.default[500],
+    atomColor: _green.default[500],
+    duration: 1
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 80,
+    orbitColor: _blue.default[800],
+    atomColor: _blue.default[800],
+    duration: 1.5
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 100,
+    orbitColor: _Colors.default.grey[900],
+    atomColor: _Colors.default.grey[900]
+  }))));
 }
 
 ActivityIndicator.propTypes = {
@@ -79,5 +88,48 @@ ActivityIndicator.defaultProps = {
 
 const Div = _styledComponents.default.div.withConfig({
   displayName: "ActivityIndicator__Div",
-  componentId: "rsk6jb-0"
-})(["&&{padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.pm-loader-text{color:", ";font-size:14px;text-align:center;position:relative;height:70px;-webkit-user-select:none;}.pm-loader-container{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;}.pm-loader-atoms{width:100px;height:100px;display:flex;position:relative;align-items:center;justify-content:center;}.pm-loader-center-atom{top:32px;left:32px;width:32px;height:32px;position:absolute;border-radius:50%;}.pm-loader-orbit-1{top:20px;left:20px;width:56px;height:56px;position:absolute;border-radius:50%;border:1px solid ", ";}.pm-loader-orbit-2{top:8px;left:8px;width:80px;height:80px;border-radius:50%;position:absolute;border:1px solid ", ";}.pm-loader-orbit-3{top:-4px;left:-4px;width:104px;height:104px;position:absolute;border-radius:50%;border:1px solid ", ";}.pm-loader-atom-1{width:7px;height:7px;margin-top:4px;margin-left:4px;border-radius:50%;background-color:", ";transform-origin:24px 24px;animation:orbit 1s infinite;animation-timing-function:linear;-webkit-transform-origin:24px 24px;}.pm-loader-atom-2{width:7px;height:7px;margin-top:8px;margin-left:8px;border-radius:50%;background-color:", ";transform-origin:32px 32px;animation:orbit 2s infinite;animation-timing-function:linear;-webkit-transform-origin:32px 32px;}.pm-loader-atom-3{width:7px;height:7px;margin-top:11px;margin-left:11px;border-radius:50%;background-color:", ";transform-origin:41px 41px;animation:orbit 3s infinite;animation-timing-function:linear;-webkit-transform-origin:41px 41px;}"], _Theme.colors.primary, _Theme.colors.green, _Theme.colors.blue, _Theme.colors.primary, _Theme.colors.green, _Theme.colors.blue, _Theme.colors.primary);
+  componentId: "sc-rsk6jb-0"
+})(["&&{box-sizing:border-box;padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}.pm-loader-text{color:", ";font-size:14px;text-align:center;position:relative;height:70px;-webkit-user-select:none;}.pm-loader-container{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;}.pm-loader-atoms{width:100px;height:100px;display:flex;position:relative;align-items:center;justify-content:center;}"], _Colors.default.grey[900]);
+
+const Orbit = _ref2 => {
+  let {
+    size,
+    orbitColor,
+    atomColor,
+    duration
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(OrbitRoot, Object.assign({
+    $duration: duration,
+    style: {
+      width: size,
+      height: size,
+      border: "1px solid ".concat(orbitColor)
+    }
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      background: atomColor
+    }
+  }));
+};
+
+Orbit.propTypes = {
+  size: _propTypes.default.number.isRequired,
+  orbitColor: _propTypes.default.string.isRequired,
+  atomColor: _propTypes.default.string.isRequired,
+  duration: _propTypes.default.number
+};
+Orbit.defaultProps = {
+  duration: 2
+};
+
+const OrbitRoot = _styledComponents.default.div.withConfig({
+  displayName: "ActivityIndicator__OrbitRoot",
+  componentId: "sc-rsk6jb-1"
+})(["@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}position:absolute;border-radius:50%;animation:orbit ", "s infinite;animation-timing-function:linear;transform-origin:center;> div{position:absolute;top:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;}"], _ref3 => {
+  let {
+    $duration
+  } = _ref3;
+  return $duration;
+});

package/lib/Alert/index.js

@@ -13,12 +13,16 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _blueGrey = _interopRequireDefault(require("@material-ui/core/colors/blueGrey"));
 
-var _Theme = require("../Theme");
+var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Util = require("../Util");
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["type", "children", "style", "className", "variant"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -28,25 +32,25 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const types = {
   error: {
     icon: 'exclamation-circle',
-    color: _Theme.colors.red,
+    color: _Colors.default.error.main,
     borderColor: '#e35b54',
     backgroundColor: 'rgba(227, 91, 84, 0.2)'
   },
   warning: {
     icon: 'exclamation-triangle',
-    color: _Theme.colors.yellow,
+    color: _Colors.default.warning.main,
     borderColor: '#f7d040',
     backgroundColor: 'rgba(247, 208, 64, 0.2)'
   },
   success: {
     icon: 'check-circle',
-    color: _Theme.colors.green,
+    color: _Colors.default.success.main,
     borderColor: '#89ddd9',
     backgroundColor: 'rgba(137, 221, 217, 0.2)'
   },
   tip: {
     icon: 'info-circle',
-    color: _Theme.colors.minor,
+    color: _Colors.default.grey[500],
     borderColor: '#222222',
     backgroundColor: '#EEEEEE'
   }
@@ -62,7 +66,7 @@ const Alert = props => {
     className,
     variant
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["type", "children", "style", "className", "variant"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const {
     icon,
@@ -71,21 +75,21 @@ const Alert = props => {
     borderColor
   } = types[type] || types.success;
   const styles = Object.assign({
-    color: _Theme.colors.dark,
+    color: _blueGrey.default[500],
     backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
     borderLeft: variant === 'border' ? "5px solid ".concat(borderColor) : 'none'
   }, style);
-  return _react.default.createElement(Container, Object.assign({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({}, rest, {
     className: "alert alert--".concat(type, " alert--").concat(variant, " ").concat(className).trim(),
     style: styles
-  }), variant === 'icon' && _react.default.createElement(_Icon.default, {
+  }), variant === 'icon' && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     className: "alert-icon",
     name: icon,
     size: 24,
     style: {
       color
     }
-  }), _react.default.createElement(_Typography.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "div",
     className: "alert-content"
   }, children));

package/lib/Async/index.js

@@ -43,7 +43,7 @@ function LoadAsyncComponent(importComponent) {
       } // eslint-disable-next-line no-nested-ternary
 
 
-      return Component ? _react.default.createElement(Component, this.props) : showProgress ? _react.default.createElement(_CircularProgress.default, {
+      return Component ? /*#__PURE__*/_react.default.createElement(Component, this.props) : showProgress ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
         color: "primary"
       }) : null;
     }

package/lib/Badge/index.js

@@ -13,10 +13,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
+const _excluded = ["type", "content", "children", "style", "className", "forwardedRef"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -25,29 +27,29 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 const types = {
   error: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.red
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.error.main
   },
   warning: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.yellow
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.warning.main
   },
   success: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.green
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.success.main
   },
   primary: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.blue
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.primary.main
   },
   reverse: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.primary
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.grey[900]
   }
 };
 
 function Badge(props) {
-  const newProps = (0, _Util.mergeProps)(props, Badge, ['style']); // eslint-disable-next-line object-curly-newline
+  const newProps = (0, _Util.mergeProps)(props, Badge, ['style']);
 
   const {
     type,
@@ -57,10 +59,10 @@ function Badge(props) {
     className,
     forwardedRef
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["type", "content", "children", "style", "className", "forwardedRef"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const styles = Object.assign(types[type] || types.primary, style);
-  return _react.default.createElement(Span, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Span, Object.assign({
     ref: forwardedRef,
     component: "span",
     className: className,
@@ -82,7 +84,7 @@ Badge.defaultProps = {
   style: '{}'
 };
 
-var _default = _react.default.forwardRef((props, ref) => _react.default.createElement(Badge, Object.assign({}, props, {
+var _default = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(Badge, Object.assign({}, props, {
   forwardedRef: ref
 })));