@arcblock/ux 1.16.0 → 1.16.4

package/src/Screenshot/index.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { mergeProps } from '../Util';
+
+import './devices.css';
+
+const types = {
+  'iphone-x': {
+    borderRadius: 32,
+    width: 342,
+    scale: 0.78,
+  },
+  'iphone-8': {
+    borderRadius: 0,
+    width: 336,
+    scale: 0.78,
+  },
+  'ipad-pro': {
+    borderRadius: 0,
+    width: 560,
+    scale: 0.62,
+  },
+  'imac-pro': {
+    borderRadius: 0,
+    width: 624,
+    scale: 0.56,
+  },
+  macbook: {
+    borderRadius: 0,
+    width: 740,
+    scale: 0.47,
+  },
+  'macbook-pro': {
+    borderRadius: 0,
+    width: 740,
+    scale: 0.47,
+  },
+  'surface-pro': {
+    borderRadius: 0,
+    width: 561,
+    scale: 0.62,
+  },
+  'surface-book': {
+    borderRadius: 0,
+    width: 728,
+    scale: 0.47,
+  },
+  'surface-studio': {
+    borderRadius: 0,
+    width: 640,
+    scale: 0.55,
+  },
+  'galaxy-s8': {
+    borderRadius: 0,
+    width: 321,
+    scale: 0.8,
+  },
+  'google-pixel': {
+    borderRadius: 0,
+    width: 360,
+    scale: 0.72,
+  },
+  'google-pixel-2-xl': {
+    borderRadius: 0,
+    width: 360,
+    scale: 0.72,
+  },
+  'apple-watch': {
+    borderRadius: 0,
+    width: 200,
+    scale: 1,
+  },
+};
+
+const childProps = {
+  img: ['alt', 'title', 'src', 'srcSet', 'sizes', 'loading', 'key', 'children'],
+  video: ['alt', 'title', 'muted', 'autoplay', 'loop', 'key', 'children'],
+};
+
+const createChild = child => [
+  React.createElement(
+    child.type,
+    childProps[child.type].reduce((acc, x) => {
+      acc[x] = child.props[x];
+      return acc;
+    }, {})
+  ),
+];
+
+const findChildren = (children, returnArgWhenNotFound = true) => {
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+
+    if (['img', 'video'].includes(child.type)) {
+      return createChild(child);
+    }
+
+    if (child.props && child.props.children) {
+      const subChildren = React.Children.toArray(child.props.children);
+      const result = findChildren(subChildren, false);
+      if (result) {
+        return result;
+      }
+    }
+  }
+
+  if (returnArgWhenNotFound) {
+    return children;
+  }
+
+  return null;
+};
+
+// This component is built upon the awesome device.css lib
+// By default it will find and only render img/video tags in the children
+// If neither of them are found, the whole child tree is rendered
+const Screenshot = props => {
+  const newProps = mergeProps(props, Screenshot, ['style', 'width', 'height']);
+  const { type, children, style, className, width, height, ...rest } = newProps;
+  const { zIndex = 0, borderRadius = 0 } = types[type] || {};
+
+  return (
+    <Div
+      {...rest}
+      type={type}
+      className={`device device-${type} ${className}`.trim()}
+      style={style}
+      contentRadius={borderRadius}
+      contentZIndex={zIndex}>
+      <div className="device-frame">
+        <div className="device-content">{findChildren(React.Children.toArray(children))}</div>
+      </div>
+      <div className="device-stripe" />
+      <div className="device-header" />
+      <div className="device-sensors" />
+      <div className="device-btns" />
+      <div className="device-power" />
+    </Div>
+  );
+};
+
+const Div = styled.div`
+  @media (max-width: ${props => types[props.type].width}px) {
+    transform-origin: 0 0;
+    transform: scale(${props => types[props.type].scale});
+  }
+  .device-content {
+    overflow: hidden;
+  }
+  .device-content video,
+  .device-content img {
+    border-radius: ${props => props.contentRadius}px;
+    background-color: #fff;
+    background-position: center center;
+    background-size: cover;
+    object-fit: cover;
+    width: 100.1%;
+    height: 100.1%;
+  }
+`;
+
+Screenshot.propTypes = {
+  type: PropTypes.oneOf(Object.keys(types)),
+  children: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+};
+
+Screenshot.defaultProps = {
+  type: 'iphone-x',
+  className: '',
+  style: '{}',
+  width: 0,
+  height: 0,
+};
+
+export default Screenshot;

package/src/Spinner/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+/**
+ * Spinner
+ *
+ * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @material-ui/core/CircularProgress 的实现
+ *
+ * - 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容
+ * - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖
+ */
+export default function Spinner(props) {
+  const _props = { ...props };
+  // 兼容之前的 size prop (设置外圈/内圈的尺寸)
+  if (_props.size && Array.isArray(_props.size)) {
+    [_props.size] = _props.size;
+  }
+  // 默认 color: #4598fa
+  if (!(_props.color || _props.style?.color)) {
+    _props.style = { ..._props.style, color: '#4598fa' };
+  }
+  return <CircularProgress {..._props} />;
+}
+
+Spinner.propTypes = {
+  // 改为基于 @material-ui/core/CircularProgress 的实现后, 该 prop 将被废弃
+  duration: PropTypes.array,
+};
+
+Spinner.defaultProps = {
+  duration: [1, 1.6],
+};

package/src/Switch/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import MuiSwitch from '@material-ui/core/Switch';
+
+// 参考: https://v4.mui.com/components/switches/
+const IOSSwitch = withStyles(theme => ({
+  root: {
+    width: 42,
+    height: 26,
+    padding: 0,
+    margin: theme.spacing(1),
+  },
+  switchBase: {
+    padding: 1,
+    '&$checked': {
+      transform: 'translateX(16px)',
+      color: theme.palette.common.white,
+      '& + $track': {
+        backgroundColor: '#52d869',
+        opacity: 1,
+        border: 'none',
+      },
+    },
+    '&$focusVisible $thumb': {
+      color: '#52d869',
+      border: '6px solid #fff',
+    },
+  },
+  thumb: {
+    width: 24,
+    height: 24,
+  },
+  track: {
+    // fix: 下边框截断问题
+    boxSizing: 'border-box',
+    borderRadius: 26 / 2,
+    border: `1px solid ${theme.palette.grey[400]}`,
+    backgroundColor: theme.palette.grey[50],
+    opacity: 1,
+    transition: theme.transitions.create(['background-color', 'border']),
+  },
+  checked: {},
+  focusVisible: {},
+}))(({ classes, ...props }) => {
+  return (
+    <MuiSwitch
+      focusVisibleClassName={classes.focusVisible}
+      disableRipple
+      classes={{
+        root: classes.root,
+        switchBase: classes.switchBase,
+        thumb: classes.thumb,
+        track: classes.track,
+        checked: classes.checked,
+      }}
+      {...props}
+    />
+  );
+});
+
+/**
+ * 抽取 blocklet server 中使用的 iOS 风格的 Switch, 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
+ * 兼容 mui Switch props, 使用 labelProps 控制 FormControlLabel
+ */
+function Switch({ labelProps, ...rest }) {
+  return <FormControlLabel control={<IOSSwitch {...rest} />} {...labelProps} />;
+}
+
+Switch.propTypes = {
+  labelProps: PropTypes.object,
+};
+Switch.defaultProps = {
+  labelProps: {},
+};
+
+export default Switch;

package/src/Tabs/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core';
+import MuiTabs from '@material-ui/core/Tabs';
+import MuiTab from '@material-ui/core/Tab';
+
+const useStyles = makeStyles(theme => ({
+  tabs: {},
+  tab: {
+    fontSize: '0.875rem',
+    [theme.breakpoints.up('md')]: {
+      fontSize: '1rem',
+    },
+  },
+}));
+
+export default function Tabs({ tabs, current, onChange, ...rest }) {
+  const classes = useStyles();
+
+  return (
+    <MuiTabs
+      scrollButtons="on"
+      variant="scrollable"
+      value={current}
+      onChange={(_, newValue) => onChange(newValue)}
+      indicatorColor="primary"
+      {...rest}
+      className={[classes.tabs, rest.className || ''].join(' ')}>
+      {tabs.map(x => (
+        <MuiTab
+          className={classes.tab}
+          key={x.value}
+          value={x.value}
+          label={x.label}
+          icon={x.icon || null}
+        />
+      ))}
+    </MuiTabs>
+  );
+}
+
+Tabs.propTypes = {
+  tabs: PropTypes.array.isRequired,
+  current: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};

package/src/Tag/index.js

@@ -0,0 +1,73 @@
+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 colors from '../Colors';
+
+const types = {
+  error: {
+    color: colors.error.main,
+    backgroundColor: 'rgba(227, 91, 84, 0.2)',
+  },
+  warning: {
+    color: colors.warning.main,
+    backgroundColor: 'rgba(247, 208, 64, 0.2)',
+  },
+  success: {
+    color: colors.success.main,
+    backgroundColor: '#eafbd9',
+  },
+  primary: {
+    color: colors.primary.main,
+    backgroundColor: '#ECEFFF',
+  },
+  reverse: {
+    color: '#fff',
+    backgroundColor: '#222',
+  },
+};
+
+function Tag(props) {
+  const newProps = mergeProps(props, Tag, ['style']);
+  const { type, content, children, style, className, forwardedRef, ...rest } = newProps;
+  const styles = Object.assign({}, types[type] || types.primary, style);
+
+  return (
+    <Span ref={forwardedRef} component="span" className={className} style={styles} {...rest}>
+      {content || children}
+    </Span>
+  );
+}
+
+Tag.propTypes = {
+  children: PropTypes.any.isRequired,
+  type: PropTypes.oneOf(Object.keys(types)),
+  content: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+};
+
+Tag.defaultProps = {
+  type: 'primary',
+  content: '',
+  className: '',
+  style: {},
+};
+
+export default React.forwardRef((props, ref) => <Tag {...props} forwardedRef={ref} />);
+
+const Span = styled(Typography)`
+  && {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2px 10px;
+    height: 20px;
+    line-height: 20px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+`;