@arcblock/ux 0.78.25 → 1.6.59

package/src/Blocklet/index.js

@@ -0,0 +1,424 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Portal from '@material-ui/core/Portal';
+import Typography from '@material-ui/core/Typography';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import useTheme from '@material-ui/core/styles/useTheme';
+import Avatar from '@arcblock/did-connect/lib/Avatar';
+
+import Icon from '../Icon';
+import Button from '../Button';
+import Img from '../Img';
+
+const Div = styled.div`
+  &.arcblock-blocklet {
+    padding: 0 16px;
+    background: ${props => props.theme.palette.common.white};
+    overflow: hidden;
+    box-shadow: 0px 0px 8px #f0f0f0;
+    &:hover {
+      box-shadow: 0px 2px 12px #f0f0f0;
+    }
+  }
+  .arcblock-blocklet__content {
+    padding: 16px 0 0 0;
+  }
+  .arcblock-blocklet__content--main {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .arcblock-blocklet__content--body {
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+  }
+  .arcblock-blocklet__addons {
+    padding: 16px 0;
+  }
+  .arcblock-blocklet__cover {
+    width: 80px;
+    height: 80px;
+    margin-right: 12px;
+    overflow: hidden;
+    border-radius: 12px;
+    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
+    transform: translateZ(0);
+  }
+
+  .arcblock-blocklet__info {
+    flex: 1;
+    overflow: hidden;
+    .arcblock-blocklet__button {
+      margin-top: 16px;
+      display: inline-block;
+    }
+  }
+  // 覆盖 mui-button 的样式 做成 blocklet 内部 button 的专有样式
+  .arcblock-blocklet__button--hover {
+    &:not(.Mui-disabled) {
+      position: relative;
+      z-index: 1;
+      &::before {
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+        transition: opacity 0.3s;
+      }
+      &:hover::before {
+        opacity: 0;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: ${props => props.theme.palette.primary.main};
+        transform: scale(0.1);
+        opacity: 0;
+        z-index: -1;
+        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
+      }
+      &:hover::after {
+        opacity: 1;
+        transform-origin: center;
+        transform: scale(1);
+      }
+    }
+
+    &:not(.Mui-disabled) {
+      background-color: transparent !important;
+      color: ${props => props.theme.palette.primary.main};
+    }
+    &:not(.Mui-disabled) {
+      &:hover {
+        color: ${props => props.theme.palette.common.white};
+      }
+    }
+  }
+
+  .arcblock-blocklet__title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .arcblock-blocklet__describe {
+    margin: 0 0 2px 0;
+    color: #999;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .arcblock-blocklet__addons {
+    display: flex;
+    justify-content: space-between;
+    color: #999;
+    font-size: 14px;
+    position: relative;
+  }
+  .arcblock-blocklet__addons--item {
+    white-space: nowrap;
+  }
+  &.arcblock-blocklet--size-md {
+    &:hover {
+      position: relative;
+    }
+    .arcblock-blocklet__title {
+      height: 2.3em;
+      margin-bottom: 3px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+      text-overflow: initial;
+      white-space: initial;
+      word-break: break-all;
+    }
+    .arcblock-blocklet__describe {
+      white-space: normal;
+      height: 2.86em;
+    }
+    .arcblock-blocklet__button {
+      margin-top: 5px;
+    }
+  }
+  &.arcblock-blocklet--size-sm,
+  &.arcblock-blocklet--size-xs {
+    .arcblock-blocklet__cover {
+      width: 40px;
+      height: 40px;
+      border-radius: 6px;
+    }
+    .arcblock-blocklet__content {
+      padding: 16px 0;
+    }
+    .arcblock-blocklet__addons {
+      padding: 8px 0;
+      .arcblock-blocklet__addons--item {
+        font-size: 12px;
+      }
+    }
+  }
+  &.arcblock-blocklet--size-xs {
+    .arcblock-blocklet__addons {
+      display: none !important;
+    }
+  }
+`;
+const ActionButton = styled.div`
+  background-color: transparent !important;
+  & > :not(.Mui-disabled) {
+    position: relative;
+    z-index: 1;
+    &::before {
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      top: 0;
+      transition: opacity 0.3s;
+    }
+    &:hover::before {
+      opacity: 0;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      background-color: ${props => props.theme.palette.primary.main};
+      transform: scale(0.1);
+      opacity: 0;
+      z-index: -1;
+      transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
+    }
+    &:hover::after {
+      opacity: 1;
+      transform-origin: center;
+      transform: scale(1);
+    }
+  }
+  & > :not(.Mui-disabled) {
+    background-color: transparent !important;
+    color: ${props => props.theme.palette.primary.main}!important;
+  }
+  & > :not(.Mui-disabled) {
+    &:hover {
+      color: ${props => props.theme.palette.common.white}!important;
+    }
+  }
+`;
+function BlockletIcon({ name }) {
+  return <Icon name={name} color="inherit" size={15} style={{ marginRight: 8 }} />;
+}
+BlockletIcon.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+function prettySize(_size) {
+  let size = _size;
+  const list = ['', 'k', 'm', 'b'];
+  let index = 0;
+  while (size > 1000 && index < list.length - 1) {
+    size = (size / 1000).toFixed(1);
+    index += 1;
+  }
+  return _size && `${size}${list[index]}`;
+}
+
+export default function Blocklet({
+  title,
+  did,
+  description,
+  cover,
+  type,
+  size,
+  addons,
+  button,
+  buttonText,
+  buttonDisabled,
+  buttonLoading,
+  isStickyButton,
+  onButtonClick,
+  onMainClick,
+  onTagClick,
+  className,
+  scaleClickZone,
+  ...rest
+}) {
+  const wrapHandler =
+    (handler, stopFn = () => false) =>
+    (e, ...args) => {
+      if (stopFn()) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (handler instanceof Function) {
+        e.preventDefault();
+        e.stopPropagation();
+        handler(...args);
+      }
+    };
+  const _onButtonClick = wrapHandler(onButtonClick, () => {
+    // stop click while custom button or buttonDisabled or buttondLoading
+    if (button || buttonDisabled || buttonLoading) {
+      return true;
+    }
+    return false;
+  });
+  const _onMainClick = wrapHandler(onMainClick);
+
+  const theme = useTheme();
+  const isDownSm = useMediaQuery(theme.breakpoints.down('sm'));
+  const isDownMd = useMediaQuery(theme.breakpoints.down('md'));
+  const isUPLg = useMediaQuery(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;
+  // eslint-disable-next-line no-nested-ternary
+  const didAvatarSize = size === 'auto' ? (isUPLg ? 80 : 40) : size === 'md' ? 80 : 40;
+  const container = useRef(null);
+
+  return (
+    <Div
+      {...rest}
+      scaleClickZone={scaleClickZone}
+      className={`${className} arcblock-blocklet arcblock-blocklet--size-${actualSize}`}>
+      <div className="arcblock-blocklet__content">
+        <div className="arcblock-blocklet__content--main" onClick={_onMainClick} ref={container}>
+          <div className="arcblock-blocklet__content--body">
+            {cover ? (
+              <div className="arcblock-blocklet__cover">
+                <Img src={cover} />
+              </div>
+            ) : (
+              did && (
+                <div className="arcblock-blocklet__cover">
+                  <Avatar did={did} size={didAvatarSize} />
+                </div>
+              )
+            )}
+            <div className="arcblock-blocklet__info">
+              <Typography
+                component="h3"
+                variant="h3"
+                className="arcblock-blocklet__title"
+                title={title}>
+                {title}
+              </Typography>
+              {description && (
+                <Typography
+                  component="div"
+                  variant="body2"
+                  className="arcblock-blocklet__describe"
+                  title={description}>
+                  {description}
+                </Typography>
+              )}
+              {['md', 'sm', 'xs'].includes(actualSize) && (
+                <Portal container={container.current} disablePortal={actualSize === 'md'}>
+                  <div
+                    className="arcblock-blocklet__button"
+                    onClick={_onButtonClick}
+                    style={{ display: isStickyButton ? 'block' : '' }}>
+                    {button ||
+                      (onButtonClick && (
+                        <Button
+                          className="arcblock-blocklet__button--hover"
+                          variant="outlined"
+                          color="primary"
+                          size="small"
+                          disabled={buttonDisabled || buttonLoading}
+                          style={
+                            actualSize === 'md'
+                              ? { padding: '3px 20px', fontSize: '14px' }
+                              : { padding: '3px 15px', minWidth: '54px', fontSize: '13px' }
+                          }>
+                          {buttonLoading && (
+                            <CircularProgress
+                              size={actualSize === 'md' ? 15 : 13}
+                              style={{ marginRight: 3, color: 'inherit' }}
+                            />
+                          )}
+                          {buttonText}
+                        </Button>
+                      ))}
+                  </div>
+                </Portal>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="arcblock-blocklet__addons">
+        {addons.map((item, index) => (
+          <Typography
+            component="span"
+            variant="caption"
+            className="arcblock-blocklet__addons--item"
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            title={item.title}>
+            {item.empty ? null : (
+              <>
+                <BlockletIcon name={item.icon} />
+                {item.pretty ? prettySize(item.value) : item.value}
+              </>
+            )}
+          </Typography>
+        ))}
+      </div>
+    </Div>
+  );
+}
+export { ActionButton };
+Blocklet.propTypes = {
+  title: PropTypes.string.isRequired,
+  did: PropTypes.string,
+  isStickyButton: PropTypes.bool,
+  description: PropTypes.string,
+  cover: PropTypes.string,
+  buttonText: PropTypes.string,
+  buttonDisabled: PropTypes.bool,
+  buttonLoading: PropTypes.bool,
+  button: PropTypes.element,
+  type: PropTypes.string,
+  addons: PropTypes.arrayOf(PropTypes.object),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'auto']),
+  onButtonClick: PropTypes.func,
+  onMainClick: PropTypes.func,
+  onTagClick: PropTypes.func,
+  className: PropTypes.string,
+  scaleClickZone: PropTypes.number,
+};
+
+Blocklet.defaultProps = {
+  description: null,
+  cover: null,
+  did: null,
+  isStickyButton: false,
+  buttonText: 'Install',
+  buttonDisabled: false,
+  buttonLoading: false,
+  button: null,
+  type: null,
+  size: 'auto',
+  addons: [],
+  onButtonClick: null,
+  onMainClick: null,
+  onTagClick: null,
+  className: null,
+  scaleClickZone: 1.5,
+};

package/src/Button/index.js

@@ -0,0 +1,4 @@
+import Button from '@material-ui/core/Button';
+import wrap from './wrap';
+
+export default wrap(Button);

package/src/Button/wrap.js

@@ -0,0 +1,101 @@
+/* eslint-disable prefer-destructuring */
+/* eslint-disable func-names */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Spinner from '../Spinner';
+import colors from '../Colors';
+import { mergeProps } from '../Util';
+
+export default function (BaseComponent) {
+  function WrappedComponent(props) {
+    const newProps = mergeProps(props, WrappedComponent, ['style']);
+    const { children, rounded, loading, disabled, style, forwardedRef, color, ...rest } = newProps;
+
+    const isDisabled = disabled || loading;
+
+    let loadingSize = 16;
+    switch (rest.size) {
+      case 'small':
+        loadingSize = 14;
+        break;
+      case 'large':
+        loadingSize = 18;
+        break;
+      default:
+    }
+    const styles = Object.assign({}, style, {
+      boxShadow: 'none',
+      textTransform: 'capitalize',
+    });
+
+    // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse 三种 color
+    let _rest = rest;
+    switch (color) {
+      case 'error':
+      case 'danger': {
+        if (rest.variant === 'contained') {
+          styles.backgroundColor = colors.error.main;
+          styles.color = colors.common.white;
+        } else {
+          styles.borderColor = colors.error.main;
+          styles.color = colors.error.main;
+        }
+        break;
+      }
+      case 'warning': {
+        if (rest.variant === 'contained') {
+          styles.backgroundColor = colors.warning.main;
+          styles.color = colors.common.white;
+        } else {
+          styles.borderColor = colors.warning.main;
+          styles.color = colors.warning.main;
+        }
+        break;
+      }
+      case 'reverse': {
+        if (rest.variant === 'contained') {
+          styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
+          styles.color = colors.grey[900];
+        } else {
+          styles.borderColor = colors.grey[900];
+          styles.color = colors.grey[900];
+        }
+        break;
+      }
+      // 除扩展的几种 color 外, 由 mui button 自己处理 color
+      default: {
+        _rest = { ..._rest, color };
+      }
+    }
+    if (rounded) {
+      // styles.borderRadius = { small: 16, medium: 18, large: 20 }[rest.size];
+      styles.borderRadius = '100vw';
+    }
+
+    return (
+      <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {..._rest}>
+        {loading && <Spinner size={loadingSize} style={{ marginRight: 5 }} />}
+        {children}
+      </BaseComponent>
+    );
+  }
+
+  WrappedComponent.propTypes = {
+    children: PropTypes.any.isRequired,
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    size: PropTypes.oneOf(['large', 'medium', 'small']),
+    forwardedRef: PropTypes.any,
+    rounded: PropTypes.bool,
+  };
+
+  WrappedComponent.defaultProps = {
+    rounded: false,
+    size: 'medium',
+    forwardedRef: null,
+    style: {},
+  };
+
+  return React.forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
+}

package/src/ButtonGroup/index.js

@@ -0,0 +1,6 @@
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import wrap from '../Button/wrap';
+
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
+export default wrap(ButtonGroup);

package/src/Center/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+/**
+ *
+ * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
+ * @returns react component element
+ */
+export default function Center({ children, relative }) {
+  let style = {};
+
+  if (relative === 'parent') {
+    style = {
+      width: '100%',
+      height: '100%',
+    };
+  }
+
+  return <Div style={style}>{children}</Div>;
+}
+
+const Div = styled.div`
+  flex: 1;
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+Center.propTypes = {
+  children: PropTypes.any.isRequired,
+  relative: PropTypes.string,
+};
+
+Center.defaultProps = {
+  relative: 'screen',
+};

package/src/ClickToCopy/index.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import Copy from 'copy-to-clipboard';
+import PropTypes from 'prop-types';
+import useWindowSize from 'react-use/lib/useWindowSize';
+
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components';
+
+import Toast from '../Toast';
+import { mergeProps } from '../Util';
+
+export default function ClickToCopy(props) {
+  const newProps = mergeProps(props, ClickToCopy, ['style']);
+  const { children, content, tip, copiedTip, tipPlacement, style, ...rest } = newProps;
+
+  const [copied, setCopied] = useState(false);
+  const childrenRef = React.createRef();
+  const { width } = useWindowSize();
+
+  const onCopy = e => {
+    Copy(content || e.current.textContent);
+    setCopied(true);
+  };
+
+  useEffect(() => {
+    let timer = null;
+    if (copied) {
+      timer = setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    }
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  });
+
+  return (
+    <Tooltip
+      title={copied ? copiedTip : tip}
+      {...rest}
+      placement={tipPlacement}
+      disableFocusListener>
+      <Container
+        ref={childrenRef}
+        component="span"
+        style={Object.assign(
+          { fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit' },
+          style
+        )}
+        onClick={() => onCopy(childrenRef)}>
+        {children || content}
+        {copied && width < 600 && <Toast variant="success" message={copiedTip} />}
+      </Container>
+    </Tooltip>
+  );
+}
+
+ClickToCopy.propTypes = {
+  children: PropTypes.any.isRequired,
+  content: PropTypes.string,
+  tip: PropTypes.string,
+  tipPlacement: PropTypes.string,
+  copiedTip: PropTypes.string,
+  style: PropTypes.object,
+};
+
+ClickToCopy.defaultProps = {
+  content: '',
+  tip: 'Click To Copy',
+  copiedTip: 'Copied',
+  tipPlacement: 'right',
+  style: {},
+};
+
+const Container = styled(Typography)`
+  display: inline;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  align-items: center;
+  justify-content: start;
+  border-radius: 15px;
+  padding: 1px 12px;
+  background-color: rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+`;