@arcblock/ux 1.16.1 → 1.16.5

package/lib/Blocklet/index.js

@@ -21,13 +21,15 @@ var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQ
 
 var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
 
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _Img = _interopRequireDefault(require("../Img"));
 
-const _excluded = ["title", "description", "cover", "type", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
+const _excluded = ["title", "did", "description", "cover", "type", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -78,6 +80,7 @@ function prettySize(_size) {
 function Blocklet(_ref2) {
   let {
     title,
+    did,
     description,
     cover,
     type,
@@ -128,10 +131,13 @@ function Blocklet(_ref2) {
 
   const theme = (0, _useTheme.default)();
   const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
-  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('md')); // If size is auto, need calculate actual size according to screen size
+  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
+  const isUPLg = (0, _useMediaQuery.default)(theme.breakpoints.up('lg')); // If size is auto, need calculate actual size according to screen size
   // eslint-disable-next-line no-nested-ternary
 
-  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size;
+  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size; // eslint-disable-next-line no-nested-ternary
+
+  const didAvatarSize = size === 'auto' ? isUPLg ? 100 : 48 : size === 'md' ? 100 : 48;
   const container = (0, _react.useRef)(null);
   return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
     scaleClickZone: scaleClickZone,
@@ -144,10 +150,15 @@ function Blocklet(_ref2) {
     ref: container
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__content--body"
-  }, cover && /*#__PURE__*/_react.default.createElement("div", {
+  }, cover ? /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__cover"
   }, /*#__PURE__*/_react.default.createElement(_Img.default, {
     src: cover
+  })) : did && /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__cover"
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    did: did,
+    size: didAvatarSize
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__info"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -205,6 +216,7 @@ function Blocklet(_ref2) {
 
 Blocklet.propTypes = {
   title: _propTypes.default.string.isRequired,
+  did: _propTypes.default.string,
   isStickyButton: _propTypes.default.bool,
   description: _propTypes.default.string,
   cover: _propTypes.default.string,
@@ -224,6 +236,7 @@ Blocklet.propTypes = {
 Blocklet.defaultProps = {
   description: null,
   cover: null,
+  did: null,
   isStickyButton: false,
   buttonText: 'Install',
   buttonDisabled: false,

package/lib/CodeBlock/index.js

@@ -51,6 +51,8 @@ var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
 
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
 const _excluded = ["code", "language", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -171,4 +173,4 @@ const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monos
 const Pre = _styledComponents.default.pre.withConfig({
   displayName: "CodeBlock__Pre",
   componentId: "sc-1bpapaq-0"
-})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;}&:hover{.copy-button{display:block;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, fontFamily, fontFamily);
+})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;padding:4px;border-radius:4px;&,&:hover,&.Mui-disabled{background:", ";}}&:hover{.copy-button{display:block;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.1",
+  "version": "1.16.5",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -12,7 +12,8 @@
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "repository": {
     "type": "git",
@@ -52,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "ca18ee446fff68422a8414dd6d4eb8b724e7ac40",
+  "gitHead": "15f756e061f6cf2f8bbaea06ffaed0bff3b3ed33",
   "dependencies": {
-    "@arcblock/icons": "^1.16.1",
-    "@arcblock/react-hooks": "^1.16.1",
+    "@arcblock/icons": "^1.16.5",
+    "@arcblock/react-hooks": "^1.16.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",

package/src/ActionButton/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Button from '../Button';
+import { mergeProps } from '../Util';
+
+const ActionButton = props => {
+  const newProps = mergeProps(props, ActionButton);
+  const { href, icon, size, color, theme, variant, gradient, children, text, ...rest } = newProps;
+  const styles = {};
+  if (gradient) {
+    styles.backgroundImage = gradient;
+    styles.borderColor = 'transparent';
+  }
+  const attrs = ['color', 'border', 'width'];
+  attrs.forEach(x => {
+    if (newProps[x]) {
+      styles[x] = newProps[x];
+    }
+  });
+
+  return (
+    <Button
+      color={theme}
+      href={href}
+      target="_blank"
+      variant={variant}
+      style={styles}
+      size={size}
+      className="action-button"
+      {...rest}>
+      {!!icon && <i className={icon} />}
+      {text || children}
+    </Button>
+  );
+};
+
+ActionButton.propTypes = {
+  href: PropTypes.string.isRequired,
+  children: PropTypes.any,
+  gradient: PropTypes.string,
+  color: PropTypes.string,
+  icon: PropTypes.string,
+  border: PropTypes.string,
+  text: PropTypes.string,
+  theme: PropTypes.string,
+  variant: PropTypes.string,
+  size: PropTypes.string,
+  width: PropTypes.string,
+};
+
+ActionButton.defaultProps = {
+  gradient: '',
+  icon: '',
+  text: '',
+  color: '',
+  border: '',
+  width: '',
+  theme: 'default',
+  variant: 'outlined',
+  size: 'large',
+  children: null,
+};
+
+export default ActionButton;

package/src/ActivityIndicator/index.js

@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import green from '@material-ui/core/colors/green';
+import blue from '@material-ui/core/colors/blue';
+
+import Logo from '../Logo';
+import colors from '../Colors';
+
+// inspired by: https://codepen.io/wangshijun/pen/oQvwdX?editors=1100
+export default function ActivityIndicator({ messages, interval, ...rest }) {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIndex((index + 1) % messages.length);
+    }, interval);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+
+  return (
+    <Div {...rest}>
+      <div className="pm-loader-container">
+        <div className="pm-loader-text">
+          <p>{messages[index]}</p>
+        </div>
+        <div className="pm-loader-atoms">
+          <Logo style={{ transform: 'scale(0.6)' }} showText={false} />
+          <div className="pm-loader-orbit-1">
+            <div className="pm-loader-atom-1" />
+          </div>
+          <div className="pm-loader-orbit-2">
+            <div className="pm-loader-atom-2" />
+          </div>
+          <div className="pm-loader-orbit-3">
+            <div className="pm-loader-atom-3" />
+          </div>
+        </div>
+      </div>
+    </Div>
+  );
+}
+
+ActivityIndicator.propTypes = {
+  interval: PropTypes.number,
+  messages: PropTypes.arrayOf(PropTypes.string.isRequired),
+};
+
+ActivityIndicator.defaultProps = {
+  interval: 3000,
+  messages: ['Loading data...'],
+};
+
+const Div = styled.div`
+  && {
+    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: ${colors.grey[900]};
+    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 ${green[500]};
+  }
+
+  .pm-loader-orbit-2 {
+    top: 8px;
+    left: 8px;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    position: absolute;
+    border: 1px solid ${blue[800]};
+  }
+
+  .pm-loader-orbit-3 {
+    top: -4px;
+    left: -4px;
+    width: 104px;
+    height: 104px;
+    position: absolute;
+    border-radius: 50%;
+    border: 1px solid ${colors.grey[900]};
+  }
+
+  .pm-loader-atom-1 {
+    width: 7px;
+    height: 7px;
+    margin-top: 4px;
+    margin-left: 4px;
+    border-radius: 50%;
+    background-color: ${green[500]};
+    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: ${blue[800]};
+    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: ${colors.grey[900]};
+    transform-origin: 41px 41px;
+    animation: orbit 3s infinite;
+    animation-timing-function: linear;
+    -webkit-transform-origin: 41px 41px;
+  }
+`;

package/src/Alert/index.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Typography from '@material-ui/core/Typography';
+import blueGrey from '@material-ui/core/colors/blueGrey';
+
+import Icon from '../Icon';
+import { mergeProps } from '../Util';
+import colors from '../Colors';
+
+const types = {
+  error: {
+    icon: 'exclamation-circle',
+    color: colors.error.main,
+    borderColor: '#e35b54',
+    backgroundColor: 'rgba(227, 91, 84, 0.2)',
+  },
+  warning: {
+    icon: 'exclamation-triangle',
+    color: colors.warning.main,
+    borderColor: '#f7d040',
+    backgroundColor: 'rgba(247, 208, 64, 0.2)',
+  },
+  success: {
+    icon: 'check-circle',
+    color: colors.success.main,
+    borderColor: '#89ddd9',
+    backgroundColor: 'rgba(137, 221, 217, 0.2)',
+  },
+  tip: {
+    icon: 'info-circle',
+    color: colors.grey[500],
+    borderColor: '#222222',
+    backgroundColor: '#EEEEEE',
+  },
+};
+
+const Alert = props => {
+  const newProps = mergeProps(props, Alert, ['style']);
+  const { type, children, style, className, variant, ...rest } = newProps;
+  const { icon, color, backgroundColor, borderColor } = types[type] || types.success;
+  const styles = Object.assign(
+    {
+      color: blueGrey[500],
+      backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
+      borderLeft: variant === 'border' ? `5px solid ${borderColor}` : 'none',
+    },
+    style
+  );
+
+  return (
+    <Container
+      {...rest}
+      className={`alert alert--${type} alert--${variant} ${className}`.trim()}
+      style={styles}>
+      {variant === 'icon' && (
+        <Icon className="alert-icon" name={icon} size={24} style={{ color }} />
+      )}
+      <Typography component="div" className="alert-content">
+        {children}
+      </Typography>
+    </Container>
+  );
+};
+
+Alert.propTypes = {
+  type: PropTypes.oneOf(Object.keys(types)),
+  children: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  variant: PropTypes.oneOf(['border', 'icon']),
+};
+
+Alert.defaultProps = {
+  type: 'tip',
+  className: '',
+  style: '{}',
+  variant: 'border',
+};
+
+export default Alert;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  margin: 0;
+  padding: 16px;
+  margin: 16px 0;
+
+  strong {
+    margin: 0 5px;
+  }
+
+  .alert-icon {
+    margin-right: 16px;
+  }
+
+  .alert-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+`;

package/src/Async/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+export default function LoadAsyncComponent(importComponent, key = 'default', showProgress = true) {
+  class AsyncComponent extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        Component: null,
+        error: null,
+      };
+    }
+
+    componentDidMount() {
+      importComponent()
+        .then(asyncModule => this.setState({ Component: asyncModule[key] }))
+        .catch(err => this.setState({ error: `Failed to load async component: ${err.message}` }));
+    }
+
+    render() {
+      const { Component, error } = this.state;
+
+      if (error) {
+        return error;
+      }
+
+      // eslint-disable-next-line no-nested-ternary
+      return Component ? (
+        <Component {...this.props} />
+      ) : showProgress ? (
+        <CircularProgress color="primary" />
+      ) : null;
+    }
+  }
+
+  return AsyncComponent;
+}

package/src/Badge/index.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Typography from '@material-ui/core/Typography';
+
+import colors from '../Colors';
+import { mergeProps } from '../Util';
+
+const types = {
+  error: {
+    color: colors.common.white,
+    backgroundColor: colors.error.main,
+  },
+  warning: {
+    color: colors.common.white,
+    backgroundColor: colors.warning.main,
+  },
+  success: {
+    color: colors.common.white,
+    backgroundColor: colors.success.main,
+  },
+  primary: {
+    color: colors.common.white,
+    backgroundColor: colors.primary.main,
+  },
+  reverse: {
+    color: colors.common.white,
+    backgroundColor: colors.grey[900],
+  },
+};
+
+function Badge(props) {
+  const newProps = mergeProps(props, Badge, ['style']);
+  const { type, content, children, style, className, forwardedRef, ...rest } = newProps;
+  const styles = Object.assign(types[type] || types.primary, style);
+
+  return (
+    <Span ref={forwardedRef} component="span" className={className} style={styles} {...rest}>
+      {content || children}
+    </Span>
+  );
+}
+
+Badge.propTypes = {
+  children: PropTypes.any.isRequired,
+  content: PropTypes.string,
+  type: PropTypes.oneOf(Object.keys(types)),
+  className: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+};
+
+Badge.defaultProps = {
+  type: 'primary',
+  content: '',
+  className: '',
+  style: '{}',
+};
+
+export default React.forwardRef((props, ref) => <Badge {...props} forwardedRef={ref} />);
+
+const Span = styled(Typography)`
+  && {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2px 10px;
+    height: 24px;
+    line-height: 24px;
+  }
+`;