@arcblock/ux 1.16.1 → 1.16.2

package/src/Blocklet/index.js

@@ -0,0 +1,335 @@
+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 Icon from '../Icon';
+import Button from '../Button';
+import Img from '../Img';
+
+const Div = styled.div`
+  &.arcblock-blocklet {
+    border: 1px solid #f2f2f2;
+    padding: 0 16px;
+    border-radius: 12px;
+    background: #fff;
+    overflow: hidden;
+    &:hover {
+      filter: drop-shadow(0px 4px 12px rgba(92, 92, 92, 0.04));
+    }
+  }
+  .arcblock-blocklet__content {
+    padding: 16px 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;
+    border-top: 1px solid #f2f2f2;
+  }
+  .arcblock-blocklet__cover {
+    width: 100px;
+    height: 100px;
+    margin-right: 16px;
+    overflow: hidden;
+    border-radius: 12px;
+  }
+
+  .arcblock-blocklet__info {
+    flex: 1;
+    overflow: hidden;
+    .arcblock-blocklet__button {
+      margin-top: 16px;
+      display: inline-block;
+    }
+  }
+  .arcblock-blocklet__button {
+    & > * {
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        display: block;
+        left: 50%;
+        top: 50%;
+        height: ${props => props.scaleClickZone * 100}%;
+        width: ${props => props.scaleClickZone * 100}%;
+        transform: translate(-50%, -50%);
+      }
+    }
+    & > *:not(.Mui-disabled) {
+      background-color: rgba(79, 106, 246, 0.06);
+      color: ${props => props.theme.palette.primary.main};
+    }
+  }
+  .arcblock-blocklet__title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .arcblock-blocklet__describe {
+    margin: 2px 0 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 {
+      margin-bottom: 3px;
+    }
+    .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__content {
+      padding: 12px 0;
+    }
+    .arcblock-blocklet__cover {
+      width: 48px;
+      height: 48px;
+      border-radius: 6px;
+    }
+    .arcblock-blocklet__addons {
+      padding: 8px 0;
+      .arcblock-blocklet__addons--item {
+        font-size: 12px;
+      }
+    }
+  }
+  &.arcblock-blocklet--size-xs {
+    .arcblock-blocklet__addons {
+      display: none !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,
+  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'));
+
+  // 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 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>
+            )}
+            <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
+                          rounded
+                          variant="contained"
+                          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>
+  );
+}
+
+Blocklet.propTypes = {
+  title: PropTypes.string.isRequired,
+  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,
+  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,88 @@
+/* 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, ...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',
+    });
+
+    if (rest.color === '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;
+      }
+    }
+    if (!rest.color || rest.color === 'default') {
+      if (rest.variant === 'contained') {
+        styles.backgroundColor = isDisabled ? colors.grey[400] : colors.grey[900];
+        styles.color = colors.common.white;
+      } else {
+        styles.borderColor = isDisabled ? colors.grey[400] : colors.grey[900];
+        styles.color = isDisabled ? colors.grey[400] : colors.grey[900];
+      }
+    }
+    if (rest.color === '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];
+      }
+    }
+    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,19 @@
+import styled from 'styled-components';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import wrap from '../Button/wrap';
+
+const sizes = { small: 16, medium: 18, large: 20 };
+const getBorderRadius = size => sizes[size || 'medium'];
+
+const StyledButtonGroup = styled(ButtonGroup)`
+  .MuiButton-root:first-of-type {
+    border-radius: ${props => getBorderRadius(props.size)}px 0 0
+      ${props => getBorderRadius(props.size)}px;
+  }
+  .MuiButton-root:last-of-type {
+    border-radius: 0 ${props => getBorderRadius(props.size)}px
+      ${props => getBorderRadius(props.size)}px 0;
+  }
+`;
+
+export default wrap(StyledButtonGroup);

package/src/Center/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// eslint-disable-next-line react/prop-types
+export default function Center({ children }) {
+  return <Div>{children}</Div>;
+}
+
+const Div = styled.div`
+  flex: 1;
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

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;
+`;

package/src/CodeBlock/index.js

@@ -0,0 +1,151 @@
+/* eslint-disable react/no-danger */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Copy from 'copy-to-clipboard';
+import Button from '@material-ui/core/IconButton';
+import useMountedState from 'react-use/lib/useMountedState';
+
+import hljs from 'highlight.js/lib/highlight';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import elixir from 'highlight.js/lib/languages/elixir';
+import java from 'highlight.js/lib/languages/java';
+import swift from 'highlight.js/lib/languages/swift';
+import objectivec from 'highlight.js/lib/languages/objectivec';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import protobuf from 'highlight.js/lib/languages/protobuf';
+import python from 'highlight.js/lib/languages/python';
+import yaml from 'highlight.js/lib/languages/yaml';
+import shell from 'highlight.js/lib/languages/shell';
+import diff from 'highlight.js/lib/languages/diff';
+import plaintext from 'highlight.js/lib/languages/plaintext';
+
+import 'highlight.js/styles/atom-one-dark.css';
+
+import CopyIcon from '@material-ui/icons/FileCopy';
+import CheckIcon from '@material-ui/icons/Check';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('elixir', elixir);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('kotlin', kotlin);
+hljs.registerLanguage('kt', kotlin);
+hljs.registerLanguage('protobuf', protobuf);
+hljs.registerLanguage('protobuffer', protobuf);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('py', python);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('yml', yaml);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('sh', shell);
+hljs.registerLanguage('plaintext', plaintext);
+hljs.registerLanguage('text', plaintext);
+hljs.registerLanguage('patch', diff);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('swift', swift);
+hljs.registerLanguage('objectivec', objectivec);
+hljs.registerLanguage('oc', objectivec);
+
+export default function CodeBlock({ code, language, children, ...rest }) {
+  const [copied, setCopied] = useState(false);
+  const isMounted = useMountedState();
+  const source = code || children;
+
+  const onCopy = () => {
+    Copy(source);
+    setCopied(true);
+    // 恢复 copied 状态
+    setTimeout(() => {
+      if (isMounted()) {
+        setCopied(false);
+      }
+    }, 1500);
+  };
+
+  return (
+    <Pre {...rest}>
+      <span className="codeblock__inner">
+        <code
+          className={`hljs ${language}`}
+          dangerouslySetInnerHTML={{ __html: hljs.highlightAuto(source, [language]).value }}
+        />
+      </span>
+      <Button
+        className="copy-button"
+        onClick={onCopy}
+        tabIndex="-1"
+        color="primary"
+        disabled={copied}>
+        {!copied && <CopyIcon style={{ color: '#fff', fontSize: 16 }} />}
+        {copied && <CheckIcon style={{ color: '#fff', fontSize: 16 }} />}
+      </Button>
+    </Pre>
+  );
+}
+
+CodeBlock.propTypes = {
+  code: PropTypes.string,
+  language: PropTypes.string,
+  children: PropTypes.any,
+};
+
+CodeBlock.defaultProps = {
+  code: '',
+  language: 'text',
+  children: null,
+};
+
+const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
+const Pre = styled.pre`
+  font-family: ${fontFamily};
+  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: ${fontFamily};
+    color: #fff;
+    * {
+      font-family: ${fontFamily};
+    }
+  }
+
+  .hljs * {
+    white-space: normal; // autowrap
+  }
+`;

package/src/Colors/index.js

@@ -0,0 +1 @@
+export { default } from './themes/default';