@arcblock/ux 0.78.26 → 1.6.60

package/lib/Terminal/util.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultOptions = exports.defaultState = exports.getFrameClass = exports.getPlayerClass = exports.formatTime = exports.isFrameAt = exports.findFrameAt = exports.formatFrames = void 0;
+exports.isFrameAt = exports.getPlayerClass = exports.getFrameClass = exports.formatTime = exports.formatFrames = exports.findFrameAt = exports.defaultState = exports.defaultOptions = void 0;
 
 /**
  * Adjust the delays of the frames, considering to the options
@@ -71,8 +71,7 @@ const findFrameAt = (frames, time, fromIndex) => {
   if (typeof fromIndex === 'undefined') {
     // eslint-disable-next-line no-param-reassign
     fromIndex = 0;
-  } // eslint-disable-next-line no-plusplus
-
+  }
 
   for (let i = fromIndex; i < frames.length; i++) {
     frame = frames[i];

package/lib/TextCollapse/index.js

@@ -13,13 +13,14 @@ var _Typography = _interopRequireDefault(require("@material-ui/core/Typography")
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+const _excluded = ["children", "startChars", "endChars", "scaleFactor", "maxWidth", "style", "fontType"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-// eslint-disable-next-line object-curly-newline
 function TextCollapse(_ref) {
   let {
     children,
@@ -27,32 +28,36 @@ function TextCollapse(_ref) {
     endChars,
     scaleFactor,
     maxWidth,
-    style
+    style,
+    fontType
   } = _ref,
-      rest = _objectWithoutProperties(_ref, ["children", "startChars", "endChars", "scaleFactor", "maxWidth", "style"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   if (typeof children !== 'string') {
     return null;
   }
 
-  const startWidth = scaleFactor * (startChars + 3);
-  const endWidth = scaleFactor * endChars;
-  const styles = Object.assign( // eslint-disable-next-line object-curly-newline
-  {
+  const isMonospace = fontType === 'monospace'; // 由于 css 样式产生的省略号长度是不确定的，所以目前 startChars 的长度只能让开发者自己去加上‘省略号’的宽度去设置这个值，要想完美的实现目标功能，最好是改用 js 动态修改文本内容来实现
+
+  const startWidth = isMonospace ? "".concat(startChars, "ch") : "".concat(scaleFactor * (startChars + 3), "em");
+  const endWidth = isMonospace ? "".concat(endChars, "ch") : "".concat(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 _react.default.createElement(Container, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
     component: "span",
     style: styles,
-    startWidth: startWidth,
-    endWidth: endWidth
-  }, rest), _react.default.createElement("span", {
+    startwidth: startWidth,
+    endwidth: endWidth
+  }, rest), /*#__PURE__*/_react.default.createElement("span", {
     className: "start-part"
-  }, startPart), _react.default.createElement("span", {
+  }, startPart), /*#__PURE__*/_react.default.createElement("span", {
     className: "end-part"
   }, endPart));
 }
@@ -60,6 +65,7 @@ function TextCollapse(_ref) {
 TextCollapse.propTypes = {
   children: _propTypes.default.string.isRequired,
   maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  fontType: _propTypes.default.oneOf(['monospace', 'normal']),
   style: _propTypes.default.object,
   startChars: _propTypes.default.number,
   endChars: _propTypes.default.number,
@@ -69,9 +75,10 @@ TextCollapse.defaultProps = {
   style: {},
   startChars: 5,
   endChars: 5,
-  scaleFactor: 0.45
+  scaleFactor: 0.45,
+  fontType: 'normal'
 };
 const Container = (0, _styledComponents.default)(_Typography.default).withConfig({
   displayName: "TextCollapse__Container",
   componentId: "sc-1u3qfqq-0"
-})(["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% - ", "em);min-width:", "em;text-overflow:ellipsis;}.end-part{max-width:calc(100% - ", "em);direction:rtl;}"], props => props.endWidth, props => props.startWidth, props => props.startWidth);
+})(["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% - ", ");min-width:", ";text-overflow:ellipsis;}.end-part{max-width:calc(100% - ", ");direction:rtl;}"], props => props.endwidth, props => props.startwidth, props => props.startwidth);

package/lib/Theme/index.js

@@ -3,88 +3,83 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.create = exports.colors = void 0;
+exports.create = void 0;
 
 var _styles = require("@material-ui/core/styles");
 
+require("@fontsource/lato/400.css");
+
+require("@fontsource/lato/700.css");
+
 var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable implicit-arrow-linebreak */
-
-/* eslint-disable object-curly-newline */
-// https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-const 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'
-}; // https://material-ui.com/customization/default-theme/
-
-exports.colors = colors;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+// https://material-ui.com/customization/default-theme/
+// eslint-disable-next-line import/prefer-default-export
 const create = function create() {
-  let {
+  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      {
     mode = 'light',
     pageWidth = 'md',
     palette,
     typography,
     overrides
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const theme = (0, _styles.createMuiTheme)({
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _styles.createTheme)(_objectSpread({
     themeName: 'ArcBlock',
-    palette: Object.assign({
-      primary: {
-        main: colors.blue,
-        contrastText: colors.white
-      },
-      secondary: {
-        main: colors.mint,
-        contrastText: colors.white
-      },
-      danger: {
-        main: colors.danger,
-        contrastText: colors.white
-      },
-      text: {
-        primary: '#404040',
-        contrast: colors.white
-      },
+    palette: Object.assign(_objectSpread(_objectSpread({}, _Colors.default), {}, {
       background: {
-        paper: mode === 'light' ? colors.white : colors.gray,
-        default: mode === 'light' ? colors.background : colors.gray
+        paper: mode === 'light' ? _Colors.default.common.white : _Colors.default.grey[900],
+        default: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
       },
       type: mode
-    }, palette || {}),
+    }), palette || {}),
     typography: Object.assign({
       useNextVariants: true,
       color: {
-        main: mode === 'light' ? colors.gray : colors.white,
-        gray: mode === 'light' ? colors.minor : colors.darkText,
-        blue: colors.blue
+        // 此处 #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.default.common.white,
+        gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
       },
-      fontSize: 16,
-      fontFamily: ['Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
+      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: {
-          borderRadius: 0,
+          boxShadow: 'none'
+        }
+      },
+      MuiButtonGroup: {
+        contained: {
           boxShadow: 'none'
         }
       },
@@ -95,7 +90,7 @@ const create = function create() {
       },
       MuiToolbar: {
         root: {
-          background: mode === 'light' ? colors.background : colors.gray
+          background: mode === 'light' ? _Colors.default.background.default : _Colors.default.grey[900]
         }
       },
       MuiTableCell: {
@@ -108,10 +103,10 @@ const create = function create() {
         },
         head: {
           textTransform: 'uppercase',
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         },
         body: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         }
       },
       MuiChip: {
@@ -134,17 +129,38 @@ const create = function create() {
       },
       MuiTypography: {
         body1: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         },
         body2: {
-          color: mode === 'light' ? colors.gray : colors.darkText
+          color: mode === 'light' ? _Colors.default.grey[900] : _Colors.default.grey[300]
         }
       }
     }, overrides || {}),
     pageWidth,
-    colors,
+    // 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 = (0, _responsiveFontSizes.default)(theme, {
     breakpoints: ['xs', 'sm', 'md', 'lg'],
     disableAlign: false,

package/lib/Theme/responsiveFontSizes.js

@@ -7,9 +7,9 @@ exports.default = responsiveFontSizes;
 
 var _cssUtils = require("@material-ui/core/styles/cssUtils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -26,9 +26,10 @@ function responsiveFontSizes(themeInput) {
 
   const theme = _objectSpread({}, themeInput);
 
-  theme.typography = _objectSpread({}, theme.typography); // eslint-disable-next-line prefer-destructuring
-
-  const typography = theme.typography; // Convert between css lengths e.g. em->px or px->rem
+  theme.typography = _objectSpread({}, 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 = (0, _cssUtils.convertLength)(typography.htmlFontSize);
@@ -59,8 +60,7 @@ function responsiveFontSizes(themeInput) {
     let transform = null;
 
     if (!disableAlign) {
-      transform = value => // eslint-disable-next-line implicit-arrow-linebreak
-      (0, _cssUtils.alignProperty)({
+      transform = value => (0, _cssUtils.alignProperty)({
         size: value,
         grid: (0, _cssUtils.fontGrid)({
           pixels: 4,
@@ -70,7 +70,7 @@ function responsiveFontSizes(themeInput) {
       });
     }
 
-    typography[variant] = _objectSpread({}, style, {}, (0, _cssUtils.responsiveProperty)({
+    typography[variant] = _objectSpread(_objectSpread({}, style), (0, _cssUtils.responsiveProperty)({
       cssProperty: 'fontSize',
       min: minFontSize,
       max: maxFontSize,

package/lib/Toast/index.js

@@ -29,6 +29,8 @@ var _colors = require("@material-ui/core/colors");
 
 var _styles = require("@material-ui/core/styles");
 
+const _excluded = ["className", "message", "onClose", "variant"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -68,7 +70,7 @@ const useStyles1 = (0, _styles.makeStyles)(theme => ({
 }));
 
 function SnackbarContentWrapper(props) {
-  const classes = useStyles1(); // eslint-disable-next-line object-curly-newline
+  const classes = useStyles1();
 
   const {
     className,
@@ -76,24 +78,23 @@ function SnackbarContentWrapper(props) {
     onClose,
     variant
   } = props,
-        rest = _objectWithoutProperties(props, ["className", "message", "onClose", "variant"]);
+        rest = _objectWithoutProperties(props, _excluded);
 
   const Icon = variantIcon[variant];
-  return _react.default.createElement(_SnackbarContent.default, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_SnackbarContent.default, Object.assign({
     className: [classes[variant], className].join(' ').trim(),
-    message: // eslint-disable-next-line react/jsx-wrap-multilines
-    _react.default.createElement("span", {
+    message: /*#__PURE__*/_react.default.createElement("span", {
       id: "client-snackbar",
       className: classes.message
-    }, _react.default.createElement(Icon, {
+    }, /*#__PURE__*/_react.default.createElement(Icon, {
       className: [classes.icon, classes.iconVariant].join(' ').trim()
     }), message),
-    action: [_react.default.createElement(_IconButton.default, {
+    action: [/*#__PURE__*/_react.default.createElement(_IconButton.default, {
       key: "close",
       "aria-label": "close",
       color: "inherit",
       onClick: onClose
-    }, _react.default.createElement(_Close.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Close.default, {
       className: classes.icon
     }))]
   }, rest));
@@ -108,7 +109,7 @@ SnackbarContentWrapper.propTypes = {
 SnackbarContentWrapper.defaultProps = {
   className: '',
   variant: 'success'
-}; // eslint-disable-next-line object-curly-newline
+};
 
 function Toast(_ref) {
   let {
@@ -129,7 +130,7 @@ function Toast(_ref) {
     onClose();
   };
 
-  return _react.default.createElement(_Snackbar.default, {
+  return /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
     open: open,
     anchorOrigin: {
       vertical: 'top',
@@ -137,7 +138,7 @@ function Toast(_ref) {
     },
     autoHideDuration: duration,
     onClose: handleClose
-  }, _react.default.createElement(SnackbarContentWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(SnackbarContentWrapper, {
     onClose: handleClose,
     variant: variant,
     message: message