@arcblock/ux 0.78.25 → 1.6.59

package/src/Footer/index.js

@@ -0,0 +1,110 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Typography from '@material-ui/core/Typography';
+
+import { mergeProps } from '../Util';
+import Logo from '../Logo';
+
+export default function Footer(props) {
+  const newProps = mergeProps(props, Footer, ['dark', 'style']);
+  const { className, copyStart, style, brand, dark } = newProps;
+
+  const endYear = new Date().getFullYear();
+  const copyYear = endYear === copyStart ? endYear : `${copyStart}-${endYear}`;
+
+  return (
+    <Container className={className} style={style} dark={dark}>
+      <Typography component="div" className="footer">
+        <Typography component="p" className="footer-item">
+          <span className="footer-copy">&copy; Copyright {copyYear} </span>
+          <span className="footer-brand">{brand}</span>
+        </Typography>
+        <Typography
+          component="p"
+          className="footer-item"
+          style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
+          Powered by
+          <Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
+        </Typography>
+      </Typography>
+    </Container>
+  );
+}
+
+Footer.propTypes = {
+  dark: PropTypes.bool,
+  className: PropTypes.string,
+  copyStart: PropTypes.string,
+  brand: PropTypes.string,
+  style: PropTypes.object,
+};
+
+Footer.defaultProps = {
+  dark: false,
+  brand: 'ArcBlock Inc.',
+  copyStart: '2017',
+  className: '',
+  style: {},
+};
+
+const Container = styled.div`
+  margin-top: 64px;
+  padding: 24px 0 32px;
+  border-top: 1px solid ${props => (props.dark ? props.theme.palette.grey[900] : '#dee2e7')};
+  box-sizing: border-box;
+  width: 100%;
+
+  @media (max-width: 540px) {
+    padding: 8px 0;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .footer-item {
+      color: ${props => props.theme.palette.grey[900]};
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      font-size: 0.9rem;
+    }
+
+    .footer-brand {
+      margin-left: 8px;
+      margin-right: 8px;
+    }
+
+    .logo-container {
+      margin: 0 24px;
+      width: 90px;
+      opacity: 0.5;
+    }
+
+    @media (max-width: 540px) {
+      .footer-item {
+        font-size: 0.7rem;
+      }
+
+      .logo-container {
+        margin: 0 0 0 16px;
+        width: 70px;
+        height: 40px;
+      }
+    }
+
+    @media (max-width: 380px) {
+      .footer-item {
+        font-size: 0.65rem;
+      }
+
+      .logo-container {
+        margin: 0 0 0 8px;
+        height: 24px;
+      }
+    }
+  }
+`;

package/src/Icon/image.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Img from '../Img';
+
+export default function ImageIcon({ name, size, alt, color, style, prefix, showBadge, ...rest }) {
+  const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
+  return (
+    <Div style={{ width: size, height: size }}>
+      <Img
+        width={size}
+        height={size}
+        alt={alt || name}
+        src={src}
+        style={Object.assign({ width: size }, style)}
+        {...rest}
+      />
+      {showBadge && <i className="badge-point" />}
+    </Div>
+  );
+}
+
+ImageIcon.propTypes = {
+  name: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  color: PropTypes.string,
+  alt: PropTypes.string,
+  style: PropTypes.object,
+  prefix: PropTypes.string,
+  showBadge: PropTypes.bool,
+};
+
+ImageIcon.defaultProps = {
+  size: 36,
+  color: '#000000',
+  alt: '',
+  style: {},
+  prefix: '/images',
+  showBadge: false,
+};
+
+const Div = styled.div`
+  position: relative;
+  .badge-point {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+    background-color: #fe4e44;
+    right: -2px;
+    top: 0;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+  }
+`;

package/src/Icon/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import colors from '../Colors';
+
+const variants = {
+  light: 'fal',
+  regular: 'far',
+  solid: 'fas',
+};
+
+const Icon = ({ name, color, size, variant, rounded, style, className, forwardedRef, ...rest }) => {
+  const content = (
+    <i
+      ref={forwardedRef}
+      className={`${variants[variant]} fa-${name} ${rounded ? '' : className}`}
+      style={Object.assign({ color, fontSize: `${size}px` }, style || {})}
+    />
+  );
+
+  if (rounded) {
+    return (
+      <Span ref={forwardedRef} size={size} color={color} className={className} {...rest}>
+        {content}
+      </Span>
+    );
+  }
+
+  return content;
+};
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  color: PropTypes.string,
+  rounded: PropTypes.bool,
+  variant: PropTypes.string,
+  size: PropTypes.number,
+  style: PropTypes.object,
+};
+
+Icon.defaultProps = {
+  rounded: false,
+  variant: 'light',
+  color: colors.grey[900],
+  className: '',
+  size: 24,
+  style: {},
+};
+
+const Span = styled.span`
+  width: ${props => props.size * 2}px;
+  height: ${props => props.size * 2}px;
+  border-radius: 50%;
+  border: 1px solid ${props => props.color};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .fa,
+  .fas,
+  .fal,
+  .far {
+    line-height: ${props => props.size}px;
+  }
+`;
+
+export default React.forwardRef((props, ref) => <Icon {...props} forwardedRef={ref} />);

package/src/Img/index.js

@@ -0,0 +1,172 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles, SvgIcon } from '@material-ui/core';
+import { useInView } from 'react-intersection-observer';
+import Alert from 'mdi-material-ui/Alert';
+import ImageIcon from 'mdi-material-ui/Image';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    position: 'relative',
+    overflow: 'hidden',
+    '& .image--state, & .image--img': {
+      minWidth: '100%',
+      minHeight: '100%',
+      position: 'absolute',
+      top: 0,
+      left: '50%',
+      transform: 'translateX(-50%)',
+    },
+    '& .image--state': {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: '#999',
+      background: '#eee',
+      width: '100%',
+      height: '100%',
+    },
+    '& .image--img': {
+      opacity: 0,
+    },
+    '& .image--icon': {
+      fontSize: 30,
+      maxWidth: '80%',
+      maxHeight: '80%',
+    },
+  },
+}));
+
+function Img({
+  lazy,
+  width,
+  height,
+  repeat,
+  ratio,
+  alt,
+  size,
+  position,
+  src,
+  placeholder,
+  fallback,
+  style,
+  className,
+  onError,
+  onSuccess,
+  ...rest
+}) {
+  const classes = useStyles();
+  const [ref, inView] = lazy ? useInView({ threshold: 0, triggerOnce: true }) : [null, true];
+
+  const [imgState, setImgState] = useState('init');
+
+  const actualSrc = useMemo(() => {
+    switch (imgState) {
+      case 'init':
+      case 'loading':
+        return placeholder;
+      case 'error':
+        return fallback;
+      case 'loaded':
+        return src;
+      default:
+        return null;
+    }
+  }, [placeholder, fallback, src, imgState]);
+
+  const actualRatio = useMemo(() => {
+    if (width && height) return (100 * height) / width;
+    return ratio * 100;
+  });
+
+  const mergedStyle = useMemo(
+    () => ({
+      backgroundImage: actualSrc ? `url(${actualSrc})` : '',
+      backgroundPosition: position,
+      backgroundSize: size,
+      backgroundRepeat: repeat,
+      paddingTop: `${actualRatio}%`,
+    }),
+    [actualSrc, position, size, imgState]
+  );
+
+  const outerStyle = {
+    ...style,
+    display: 'inline-block',
+    width: width ? `${width}px` : '100%',
+  };
+
+  function loadImg() {
+    const img = new Image();
+    img.src = src;
+    setImgState('loading');
+    img.onload = () => {
+      setImgState('loaded');
+      onSuccess();
+    };
+    img.onerror = err => {
+      setImgState('error');
+      onError(err);
+    };
+  }
+
+  useEffect(() => {
+    if (inView) loadImg();
+  }, [inView]);
+
+  return (
+    // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
+    <div ref={ref} style={outerStyle} {...rest}>
+      <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
+        {!fallback && imgState === 'error' && (
+          <div className="image--state" title="loading image">
+            <SvgIcon component={Alert} className="image--icon" />
+          </div>
+        )}
+        {!placeholder && imgState === 'loading' && (
+          <div className="image--state" title="Image load error">
+            <SvgIcon component={ImageIcon} className="image--icon" />
+          </div>
+        )}
+        {imgState === 'loaded' && <img className="image--img" src={src} alt={alt} />}
+      </div>
+    </div>
+  );
+}
+
+Img.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  size: PropTypes.string,
+  position: PropTypes.string,
+  style: PropTypes.object,
+  ratio: PropTypes.number,
+  repeat: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  lazy: PropTypes.bool,
+  placeholder: PropTypes.string,
+  fallback: PropTypes.string,
+  className: PropTypes.string,
+  onError: PropTypes.func,
+  onSuccess: PropTypes.func,
+};
+Img.defaultProps = {
+  alt: null,
+  size: 'cover',
+  position: 'top center',
+  repeat: 'no-repeat',
+  style: null,
+  ratio: 1,
+  width: null,
+  height: null,
+  lazy: true,
+  placeholder: null,
+  fallback: null,
+  className: '',
+  onError: () => {},
+  onSuccess: () => {},
+};
+
+export default Img;

package/src/InfoRow/index.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import camelCase from 'lodash/camelCase';
+import upperFirst from 'lodash/upperFirst';
+import styled from 'styled-components';
+import Typography from '@material-ui/core/Typography';
+
+const InfoRow = ({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) => (
+  <Container layout={layout} width={nameWidth} {...rest}>
+    <Typography color="textSecondary" className="info-row__name">
+      {nameFormatter(name)}
+    </Typography>
+
+    {children && (
+      <Typography color="textPrimary" component={valueComponent} className="info-row__value">
+        {children}
+      </Typography>
+    )}
+  </Container>
+);
+
+InfoRow.propTypes = {
+  name: PropTypes.any.isRequired,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  children: PropTypes.any,
+  nameFormatter: PropTypes.func,
+  valueComponent: PropTypes.string,
+  nameWidth: PropTypes.number,
+};
+
+InfoRow.defaultProps = {
+  children: null,
+  nameWidth: 90,
+  nameFormatter: name => {
+    const resetName = name
+      .split(' ')
+      .map(x => upperFirst(camelCase(x)))
+      .join(' ');
+
+    return typeof name === 'string' ? resetName : name;
+  },
+  valueComponent: 'p',
+  layout: 'horizontal',
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: ${props => (props.layout === 'vertical' ? 'column' : 'row')};
+  justify-content: flex-start;
+  align-items: ${props => (props.layout === 'vertical' ? 'flex-start' : 'center')};
+  margin-bottom: 16px;
+
+  .info-row__name {
+    width: ${props => props.width}px;
+    margin-right: ${props => (props.layout === 'vertical' ? '0' : '8px')};
+    margin-bottom: ${props => (props.layout === 'vertical' ? '8px' : '0')};
+    text-transform: capitalize;
+  }
+
+  .info-row__value {
+    flex: 1;
+    overflow: auto;
+    word-wrap: break-word;
+    font-weight: 500;
+  }
+
+  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .info-row__name {
+      font-weight: bold;
+    }
+
+    .info-row__value {
+      width: 100%;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+  }
+`;
+
+export default InfoRow;

package/src/Layout/dashboard/header.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Button from '@material-ui/core/IconButton';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Link } from 'react-router-dom';
+
+import Logo from '../../Logo';
+
+const StyledAppBar = styled(AppBar)`
+  && {
+    z-index: ${props => props.theme.zIndex.drawer + 1};
+    background: ${props => props.theme.palette.background.default};
+    box-shadow: none;
+    top: 0;
+    height: auto;
+  }
+  .header-toolbar {
+    background: ${props => props.theme.palette.background.default};
+    color: ${props => props.theme.palette.text.primary};
+    margin: ${props => props.theme.spacing(1)}px 0;
+  }
+  .header-link {
+    display: flex;
+    text-decoration: none;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+  .header-logo {
+    margin-right: 20px;
+  }
+  .header-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  .header-title__primary {
+    font-size: 24px;
+    font-weight: 800;
+    color: ${props => props.theme.typography.color.main};
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+  }
+  .header-title__secondary {
+    font-size: 14px;
+    line-height: 1.71;
+    color: ${props => props.theme.typography.color.gray};
+  }
+
+  .header-addons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 9999999;
+
+    .user-addon {
+      .header-avatar {
+        width: 32px;
+        border-radius: 16px;
+        height: auto;
+      }
+    }
+  }
+  .header-menu {
+    display: none;
+  }
+  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+    /*
+      以下样式用来替代 display:none, 如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
+      这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
+      当屏幕很窄的情况, header 会通过设置 display:none 将 svg logo 隐藏,
+      这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示
+    */
+    .header-logo {
+      position: absolute;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+    .header-title {
+      display: none;
+    }
+    .header-title__primary {
+      font-size: 20px;
+    }
+    .header-menu {
+      display: block;
+    }
+  }
+`;
+
+export default function Header({
+  children,
+  brand,
+  brandAddon,
+  description,
+  addons,
+  onToggleMenu,
+  homeUrl,
+  logo,
+  ...rest
+}) {
+  return (
+    <StyledAppBar position="sticky" className="header" {...rest}>
+      <Toolbar disableGutters={false} className="header-toolbar">
+        <Button
+          color="inherit"
+          aria-label="open drawer"
+          edge="start"
+          className="header-menu"
+          onClick={onToggleMenu}>
+          <MenuIcon />
+        </Button>
+        <Link to={homeUrl} className="header-link">
+          <div className="header-logo">{logo || <Logo showText={false} />}</div>
+          <div className="header-title">
+            <Typography component="h2" noWrap className="header-title__primary">
+              {brand}
+              {brandAddon}
+            </Typography>
+            <Typography component="p" noWrap className="header-title__secondary">
+              {description}
+            </Typography>
+          </div>
+        </Link>
+        <Box flexGrow={1} />
+        {!!children && <div className="header-children">{children}</div>}
+        <div className="header-addons">{addons}</div>
+      </Toolbar>
+    </StyledAppBar>
+  );
+}
+
+Header.propTypes = {
+  onToggleMenu: PropTypes.func.isRequired,
+  brand: PropTypes.string.isRequired,
+  brandAddon: PropTypes.object,
+  description: PropTypes.string.isRequired,
+  children: PropTypes.any,
+  addons: PropTypes.any,
+  homeUrl: PropTypes.string,
+  logo: PropTypes.any,
+};
+
+Header.defaultProps = {
+  children: null,
+  addons: null,
+  brandAddon: null,
+  homeUrl: '/',
+  logo: null,
+};