@arcblock/ux 1.15.33 → 1.16.0

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/Switch/index.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+
+const _excluded = ["classes"],
+      _excluded2 = ["labelProps"];
+
+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; }
+
+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; }
+
+// 参考: https://v4.mui.com/components/switches/
+const IOSSwitch = (0, _styles.withStyles)(theme => ({
+  root: {
+    width: 42,
+    height: 26,
+    padding: 0,
+    margin: theme.spacing(1)
+  },
+  switchBase: {
+    padding: 1,
+    '&$checked': {
+      transform: 'translateX(16px)',
+      color: theme.palette.common.white,
+      '& + $track': {
+        backgroundColor: '#52d869',
+        opacity: 1,
+        border: 'none'
+      }
+    },
+    '&$focusVisible $thumb': {
+      color: '#52d869',
+      border: '6px solid #fff'
+    }
+  },
+  thumb: {
+    width: 24,
+    height: 24
+  },
+  track: {
+    // fix: 下边框截断问题
+    boxSizing: 'border-box',
+    borderRadius: 26 / 2,
+    border: "1px solid ".concat(theme.palette.grey[400]),
+    backgroundColor: theme.palette.grey[50],
+    opacity: 1,
+    transition: theme.transitions.create(['background-color', 'border'])
+  },
+  checked: {},
+  focusVisible: {}
+}))(_ref => {
+  let {
+    classes
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_Switch.default, Object.assign({
+    focusVisibleClassName: classes.focusVisible,
+    disableRipple: true,
+    classes: {
+      root: classes.root,
+      switchBase: classes.switchBase,
+      thumb: classes.thumb,
+      track: classes.track,
+      checked: classes.checked
+    }
+  }, props));
+});
+/**
+ * 抽取 blocklet server 中使用的 iOS 风格的 Switch, 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
+ * 兼容 mui Switch props, 使用 labelProps 控制 FormControlLabel
+ */
+
+function Switch(_ref2) {
+  let {
+    labelProps
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, Object.assign({
+    control: /*#__PURE__*/_react.default.createElement(IOSSwitch, rest)
+  }, labelProps));
+}
+
+Switch.propTypes = {
+  labelProps: _propTypes.default.object
+};
+Switch.defaultProps = {
+  labelProps: {}
+};
+var _default = Switch;
+exports.default = _default;

package/lib/index.js

@@ -75,12 +75,6 @@ Object.defineProperty(exports, "Footer", {
     return _Footer.default;
   }
 });
-Object.defineProperty(exports, "GraphQLPlayground", {
-  enumerable: true,
-  get: function get() {
-    return _GraphQLPlayground.default;
-  }
-});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
@@ -214,8 +208,6 @@ var _Earth = _interopRequireDefault(require("./Earth"));
 
 var _Footer = _interopRequireDefault(require("./Footer"));
 
-var _GraphQLPlayground = _interopRequireDefault(require("./GraphQLPlayground"));
-
 var _Icon = _interopRequireDefault(require("./Icon"));
 
 var _selector = _interopRequireDefault(require("./Locale/selector"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.15.33",
+  "version": "1.16.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "fe1be3671e78e3e985c66ac21d5d10b2a882a133",
+  "gitHead": "e0eb7e0b693d098e3d3139d171bbab02630ea499",
   "dependencies": {
-    "@arcblock/icons": "^1.15.33",
-    "@arcblock/react-hooks": "^1.15.33",
+    "@arcblock/icons": "^1.16.0",
+    "@arcblock/react-hooks": "^1.16.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",
@@ -65,10 +65,6 @@
     "core-js": "^3.6.4",
     "d3-geo": "^1.11.6",
     "devices.css": "^0.1.15",
-    "graphiql": "^0.13.2",
-    "graphiql-code-exporter": "^2.0.5",
-    "graphiql-explorer": "^0.4.3",
-    "graphql": "^14.6.0",
     "highlight.js": "^9.15.8",
     "is-svg": "^4.3.1",
     "js-cookie": "^2.2.0",
@@ -77,7 +73,6 @@
     "react-cookie-consent": "^6.4.1",
     "react-helmet": "^5.2.1",
     "react-intersection-observer": "^8.31.1",
-    "react-load-script": "^0.0.6",
     "react-player": "^1.15.2",
     "react-router-dom": "^5.1.2",
     "react-shadow": "^19.0.2",