@arcblock/ux 0.78.26 → 1.6.60

package/src/TextCollapse/index.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components';
+
+export default function TextCollapse({
+  children,
+  startChars,
+  endChars,
+  scaleFactor,
+  maxWidth,
+  style,
+  fontType,
+  ...rest
+}) {
+  if (typeof children !== 'string') {
+    return null;
+  }
+
+  const isMonospace = fontType === 'monospace';
+
+  // 由于 css 样式产生的省略号长度是不确定的，所以目前 startChars 的长度只能让开发者自己去加上‘省略号’的宽度去设置这个值，要想完美的实现目标功能，最好是改用 js 动态修改文本内容来实现
+  const startWidth = isMonospace ? `${startChars}ch` : `${scaleFactor * (startChars + 3)}em`;
+  const endWidth = isMonospace ? `${endChars}ch` : `${scaleFactor * endChars}em`;
+  const styles = Object.assign(
+    isMonospace ? { fontFamily: '"Courier New", Courier, monospace' } : {},
+    { fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit', maxWidth },
+    style
+  );
+
+  const [startPart, endPart] = [
+    children.slice(0, children.length - endChars),
+    children.slice(children.length - endChars),
+  ];
+
+  return (
+    <Container
+      component="span"
+      style={styles}
+      startwidth={startWidth}
+      endwidth={endWidth}
+      {...rest}>
+      <span className="start-part">{startPart}</span>
+      <span className="end-part">{endPart}</span>
+    </Container>
+  );
+}
+
+TextCollapse.propTypes = {
+  children: PropTypes.string.isRequired,
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  fontType: PropTypes.oneOf(['monospace', 'normal']),
+  style: PropTypes.object,
+  startChars: PropTypes.number,
+  endChars: PropTypes.number,
+  scaleFactor: PropTypes.number,
+};
+
+TextCollapse.defaultProps = {
+  style: {},
+  startChars: 5,
+  endChars: 5,
+  scaleFactor: 0.45,
+  fontType: 'normal',
+};
+
+const Container = styled(Typography)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: start;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .start-part,
+  .end-part {
+    display: inline-block;
+    vertical-align: bottom;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .start-part {
+    max-width: calc(100% - ${props => props.endwidth});
+    min-width: ${props => props.startwidth};
+    text-overflow: ellipsis;
+  }
+  .end-part {
+    max-width: calc(100% - ${props => props.startwidth});
+    direction: rtl;
+  }
+`;

package/src/Theme/index.js

@@ -0,0 +1,184 @@
+// https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
+import { createTheme } from '@material-ui/core/styles';
+import '@fontsource/lato/400.css';
+import '@fontsource/lato/700.css';
+import responsiveFontSizes from './responsiveFontSizes';
+import colors from '../Colors';
+
+// https://material-ui.com/customization/default-theme/
+// eslint-disable-next-line import/prefer-default-export
+export const create = ({
+  mode = 'light',
+  pageWidth = 'md',
+  palette,
+  typography,
+  overrides,
+  ...rest
+} = {}) => {
+  const theme = createTheme({
+    themeName: 'ArcBlock',
+    palette: Object.assign(
+      {
+        ...colors,
+        background: {
+          paper: mode === 'light' ? colors.common.white : colors.grey[900],
+          default: mode === 'light' ? colors.background.default : colors.grey[900],
+        },
+        type: mode,
+      },
+      palette || {}
+    ),
+    typography: Object.assign(
+      {
+        useNextVariants: true,
+        color: {
+          // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
+          // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
+          //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
+          //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
+          main: mode === 'light' ? '#222222' : colors.common.white,
+          gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
+        },
+        fontFamily: [
+          'Lato',
+          'Avenir',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          '"Segoe UI"',
+          'Roboto',
+          '"Helvetica Neue"',
+          'Arial',
+          'sans-serif',
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+        ].join(','),
+        // 按最新设计规范, 只使用 400/700
+        fontWeightLight: 400,
+        fontWeightRegular: 400,
+        fontWeightMedium: 700,
+        fontWeightBold: 700,
+        // button 默认使用粗体
+        button: {
+          fontWeight: 700,
+        },
+      },
+      typography || {}
+    ),
+    overrides: Object.assign(
+      {
+        MuiButton: {
+          root: {
+            boxShadow: 'none',
+          },
+        },
+        MuiButtonGroup: {
+          contained: {
+            boxShadow: 'none',
+          },
+        },
+        MuiAppBar: {
+          root: {
+            height: 80,
+          },
+        },
+        MuiToolbar: {
+          root: {
+            background: mode === 'light' ? colors.background.default : colors.grey[900],
+          },
+        },
+        MuiTableCell: {
+          root: {
+            borderBottomWidth: '0',
+            paddingTop: '14px',
+            paddingBottom: '14px',
+            paddingLeft: 0,
+            paddingRight: '30px',
+          },
+          head: {
+            textTransform: 'uppercase',
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
+          },
+          body: {
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
+          },
+        },
+        MuiChip: {
+          root: {
+            padding: '3px',
+            height: '24px',
+            fontSize: '12px',
+            marginRight: '10px',
+          },
+          label: {
+            paddingLeft: '5px',
+            paddingRight: '5px',
+            marginRight: '5px',
+          },
+        },
+        MuiTooltip: {
+          tooltip: {
+            fontSize: '14px',
+          },
+        },
+        MuiTypography: {
+          body1: {
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
+          },
+          body2: {
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
+          },
+        },
+      },
+      overrides || {}
+    ),
+    pageWidth,
+    // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
+    //       可以从 Colors 模块/theme.palette/mui colors 中取值
+    colors: {
+      white: '#FFFFFF',
+      dark: '#4A707C',
+      gray: '#222222',
+      minor: '#9B9B9B',
+      darkText: '#DCDCDC',
+      background: '#F7F8F8',
+      yellow: '#FFCF71',
+      green: '#44cdc6',
+      red: '#D0021B',
+      blue: '#4E6AF6',
+      primary: '#222222',
+      black: '#222222',
+      secondary: '#44cdc6',
+      mint: '#44cdc6',
+      textSecondary: '#4A4A4A',
+      active: '#5b9025',
+      danger: '#D0021B',
+      lightGrey: '#BCBCBC',
+    },
+    mode,
+    ...rest,
+  });
+
+  const enhanced = responsiveFontSizes(theme, {
+    breakpoints: ['xs', 'sm', 'md', 'lg'],
+    disableAlign: false,
+    factor: 3,
+    variants: [
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'subtitle1',
+      'subtitle2',
+      'body1',
+      'body2',
+      'caption',
+      'button',
+      'overline',
+    ],
+  });
+
+  return enhanced;
+};

package/src/Theme/responsiveFontSizes.js

@@ -0,0 +1,94 @@
+// https://github.com/mui-org/material-ui/blob/f2d74e9144ffec1ba6a098528573c7dfb3957b48/packages/material-ui/src/styles/responsiveFontSizes.js
+import {
+  isUnitless,
+  convertLength,
+  responsiveProperty,
+  alignProperty,
+  fontGrid,
+} from '@material-ui/core/styles/cssUtils';
+
+export default function responsiveFontSizes(themeInput, options = {}) {
+  const {
+    breakpoints = ['sm', 'md', 'lg'],
+    disableAlign = false,
+    factor = 3,
+    maxSize = 2.5,
+    // minSize = 0.8,
+    variants = [
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'subtitle1',
+      'subtitle2',
+      'body1',
+      'body2',
+      'caption',
+      'button',
+      'overline',
+    ],
+  } = options;
+
+  const theme = { ...themeInput };
+  theme.typography = { ...theme.typography };
+  const { typography } = theme;
+
+  // Convert between css lengths e.g. em->px or px->rem
+  // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
+  const convert = convertLength(typography.htmlFontSize);
+  const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
+
+  variants.forEach(variant => {
+    const style = typography[variant];
+    const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
+
+    if (remFontSize <= 1) {
+      return;
+    }
+
+    const maxFontSize = Math.min(remFontSize, maxSize);
+    const minFontSize = 1 + (maxFontSize - 1) / factor;
+
+    let { lineHeight } = style;
+
+    if (!isUnitless(lineHeight) && !disableAlign) {
+      throw new Error(
+        [
+          'Material-UI: unsupported non-unitless line height with grid alignment.',
+          'Use unitless line heights instead.',
+        ].join('\n')
+      );
+    }
+
+    if (!isUnitless(lineHeight)) {
+      // make it unitless
+      lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
+    }
+
+    let transform = null;
+
+    if (!disableAlign) {
+      transform = value =>
+        alignProperty({
+          size: value,
+          grid: fontGrid({ pixels: 4, lineHeight, htmlFontSize: typography.htmlFontSize }),
+        });
+    }
+
+    typography[variant] = {
+      ...style,
+      ...responsiveProperty({
+        cssProperty: 'fontSize',
+        min: minFontSize,
+        max: maxFontSize,
+        unit: 'rem',
+        breakpoints: breakpointValues,
+        transform,
+      }),
+    };
+  });
+
+  return theme;
+}

package/src/Toast/index.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import ErrorIcon from '@material-ui/icons/Error';
+import InfoIcon from '@material-ui/icons/Info';
+import CloseIcon from '@material-ui/icons/Close';
+import WarningIcon from '@material-ui/icons/Warning';
+import IconButton from '@material-ui/core/IconButton';
+import Snackbar from '@material-ui/core/Snackbar';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
+import { amber, green } from '@material-ui/core/colors';
+import { makeStyles } from '@material-ui/core/styles';
+
+const variantIcon = {
+  success: CheckCircleIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  info: InfoIcon,
+};
+
+const useStyles1 = makeStyles(theme => ({
+  success: {
+    backgroundColor: green[600],
+  },
+  error: {
+    backgroundColor: theme.palette.error.dark,
+  },
+  info: {
+    backgroundColor: theme.palette.primary.main,
+  },
+  warning: {
+    backgroundColor: amber[700],
+  },
+  icon: {
+    fontSize: 20,
+  },
+  iconVariant: {
+    opacity: 0.9,
+    marginRight: theme.spacing(1),
+  },
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+}));
+
+function SnackbarContentWrapper(props) {
+  const classes = useStyles1();
+  const { className, message, onClose, variant, ...rest } = props;
+  const Icon = variantIcon[variant];
+
+  return (
+    <SnackbarContent
+      className={[classes[variant], className].join(' ').trim()}
+      message={
+        <span id="client-snackbar" className={classes.message}>
+          <Icon className={[classes.icon, classes.iconVariant].join(' ').trim()} />
+          {message}
+        </span>
+      }
+      action={[
+        <IconButton key="close" aria-label="close" color="inherit" onClick={onClose}>
+          <CloseIcon className={classes.icon} />
+        </IconButton>,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+SnackbarContentWrapper.propTypes = {
+  message: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  variant: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+};
+
+SnackbarContentWrapper.defaultProps = {
+  className: '',
+  variant: 'success',
+};
+
+export default function Toast({ onClose, variant, duration, message }) {
+  const [open, setOpen] = React.useState(true);
+
+  const handleClose = (e, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+    onClose();
+  };
+
+  return (
+    <Snackbar
+      open={open}
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      autoHideDuration={duration}
+      onClose={handleClose}>
+      <SnackbarContentWrapper onClose={handleClose} variant={variant} message={message} />
+    </Snackbar>
+  );
+}
+
+Toast.propTypes = {
+  message: PropTypes.string.isRequired,
+  variant: PropTypes.string,
+  duration: PropTypes.number,
+  onClose: PropTypes.func,
+};
+
+Toast.defaultProps = {
+  variant: 'success',
+  duration: 3000,
+  onClose: () => {},
+};