@arcblock/ux 1.16.0 → 1.16.4

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,145 @@
+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) {
+    .header-logo,
+    .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,
+  ...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 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,
+};
+
+Header.defaultProps = {
+  children: null,
+  addons: null,
+  brandAddon: null,
+  homeUrl: '/',
+};

package/src/Layout/dashboard/index.js

@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import styled from 'styled-components';
+import Container from '@material-ui/core/Container';
+import Box from '@material-ui/core/Box';
+import Drawer from '@material-ui/core/Drawer';
+import useWindowSize from 'react-use/lib/useWindowSize';
+
+import Sidebar from './sidebar';
+import Header from './header';
+import Footer from '../../Footer';
+
+const Wrapper = styled.div`
+  &.dashboard {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+  .dashboard__body {
+    overflow: hidden;
+    flex: 1;
+  }
+  .dashboard__main {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex: 1;
+  }
+  .dashboard__content {
+    flex: 1;
+  }
+  .dashboard__footer {
+    padding-left: 30px;
+  }
+
+  .drawerPaper {
+    position: relative;
+    white-space: nowrap;
+    width: 120px;
+    background: ${props => props.theme.palette.background.default};
+    box-shadow: 2px 16px 10px 0
+      rgba(0, 0, 0, ${props => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+    border: 0;
+  }
+`;
+
+export default function Dashboard({
+  children,
+  title,
+  brand,
+  description,
+  brandAddon,
+  headerAddon,
+  images,
+  links,
+  prefix,
+  fullWidth,
+  contentLayout,
+  className,
+  homeUrl,
+  ...rest
+}) {
+  const breakpoint = 960;
+  const { width } = useWindowSize();
+  const [drawerMode, setDrawerMode] = useState(width > breakpoint ? 'permanent' : 'temporary');
+  const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
+
+  useEffect(() => {
+    const newMode = width > breakpoint ? 'permanent' : 'temporary';
+    setDrawerMode(newMode);
+    setDrawerOpen(newMode !== 'temporary');
+  }, [width]);
+
+  const onToggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+  const isFullWidth = fullWidth || contentLayout === 'row';
+
+  return (
+    <Wrapper className={`dashboard ${className}`} {...rest}>
+      <Helmet title={`${title}-${brand}`} />
+
+      <Header
+        className="dashboard__header"
+        onToggleMenu={onToggleDrawer}
+        brand={brand}
+        brandAddon={brandAddon}
+        description={description}
+        addons={headerAddon}
+        homeUrl={homeUrl}
+      />
+      <Box display="flex" className="dashboard__body">
+        <Drawer
+          variant={drawerMode}
+          className="drawer"
+          classes={{ paper: 'drawerPaper' }}
+          open={drawerOpen}
+          onClose={onToggleDrawer}
+          ModalProps={{ disablePortal: true, keepMounted: true }}>
+          <Sidebar className="dashboard__sidebar" images={images} links={links} prefix={prefix} />
+        </Drawer>
+        <Box className="dashboard__main">
+          <Container maxWidth={isFullWidth ? false : 'lg'} className="dashboard__content">
+            {children}
+          </Container>
+          <Footer className="dashboard__footer" />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+}
+
+Dashboard.propTypes = {
+  children: PropTypes.any.isRequired,
+  title: PropTypes.string,
+  brand: PropTypes.string.isRequired,
+  links: PropTypes.array.isRequired,
+  images: PropTypes.object.isRequired,
+  brandAddon: PropTypes.object,
+  description: PropTypes.string.isRequired,
+  headerAddon: PropTypes.any,
+  prefix: PropTypes.string,
+  // 兼容旧版的设置，新版使用 fullWidth 进行设置
+  contentLayout: PropTypes.oneOf(['row', 'column']),
+  fullWidth: PropTypes.bool,
+  className: PropTypes.string,
+  homeUrl: PropTypes.string,
+};
+
+Dashboard.defaultProps = {
+  title: 'Home',
+  contentLayout: 'column',
+  headerAddon: null,
+  brandAddon: null,
+  prefix: '/images',
+  fullWidth: false,
+  className: '',
+  homeUrl: '/',
+};