@arcblock/ux 0.78.25 → 1.6.59

package/lib/Switch/index.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+
+const _excluded = ["classes"],
+      _excluded2 = ["labelProps"];
+
+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; }
+
+// 参考: https://v4.mui.com/components/switches/
+const IOSSwitch = (0, _styles.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 ".concat(theme.palette.grey[400]),
+    backgroundColor: theme.palette.grey[50],
+    opacity: 1,
+    transition: theme.transitions.create(['background-color', 'border'])
+  },
+  checked: {},
+  focusVisible: {}
+}))(_ref => {
+  let {
+    classes
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_Switch.default, Object.assign({
+    focusVisibleClassName: classes.focusVisible,
+    disableRipple: true,
+    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(_ref2) {
+  let {
+    labelProps
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, Object.assign({
+    control: /*#__PURE__*/_react.default.createElement(IOSSwitch, rest)
+  }, labelProps));
+}
+
+Switch.propTypes = {
+  labelProps: _propTypes.default.object
+};
+Switch.defaultProps = {
+  labelProps: {}
+};
+var _default = Switch;
+exports.default = _default;

package/lib/Tabs/index.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = CustomizedTabs;
+exports.default = Tabs;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _core = require("@material-ui/core");
 
 var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
 
 var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
 
-var _Theme = require("../Theme");
+const _excluded = ["tabs", "current", "onChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,66 +23,43 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-const AntTabs = (0, _styles.withStyles)({
-  root: {
-    borderBottom: "1px solid ".concat(_Theme.colors.lightGrey)
-  },
-  indicator: {
-    height: 3,
-    backgroundColor: _Theme.colors.primary
-  }
-})(_Tabs.default);
-const AntTab = (0, _styles.withStyles)(theme => ({
-  root: {
-    textTransform: 'uppercase',
-    fontSize: 16,
-    fontWeight: theme.typography.fontWeightMedium,
-    marginRight: theme.spacing(3),
-    '&:hover': {
-      color: _Theme.colors.primary,
-      opacity: 1
-    },
-    '&$selected': {
-      color: _Theme.colors.primary,
-      fontWeight: theme.typography.fontWeightMedium
-    },
-    '&:focus': {
-      color: _Theme.colors.primary
-    }
-  },
-  '@media (max-width: 767px)': {
-    root: {
-      fontSize: 14,
-      marginRight: theme.spacing(1)
+const useStyles = (0, _core.makeStyles)(theme => ({
+  tabs: {},
+  tab: {
+    fontSize: '0.875rem',
+    [theme.breakpoints.up('md')]: {
+      fontSize: '1rem'
     }
-  },
-  selected: {}
-}))(props => _react.default.createElement(_Tab.default, Object.assign({
-  disableRipple: true,
-  variant: "scrollable"
-}, props))); // eslint-disable-next-line object-curly-newline
+  }
+}));
 
-function CustomizedTabs(_ref) {
+function Tabs(_ref) {
   let {
     tabs,
     current,
     onChange: _onChange
   } = _ref,
-      rest = _objectWithoutProperties(_ref, ["tabs", "current", "onChange"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
-  return _react.default.createElement(AntTabs, Object.assign({
+  const classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement(_Tabs.default, Object.assign({
     scrollButtons: "on",
     variant: "scrollable",
     value: current,
-    onChange: (_, newValue) => _onChange(newValue)
-  }, rest), tabs.map(x => _react.default.createElement(AntTab, {
+    onChange: (_, newValue) => _onChange(newValue),
+    indicatorColor: "primary"
+  }, rest, {
+    className: [classes.tabs, rest.className || ''].join(' ')
+  }), tabs.map(x => /*#__PURE__*/_react.default.createElement(_Tab.default, {
+    className: classes.tab,
     key: x.value,
     value: x.value,
-    label: x.label
+    label: x.label,
+    icon: x.icon || null
   })));
 }
 
-CustomizedTabs.propTypes = {
+Tabs.propTypes = {
   tabs: _propTypes.default.array.isRequired,
   current: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func.isRequired

package/lib/Tag/index.js

@@ -13,10 +13,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _Theme = require("../Theme");
-
 var _Util = require("../Util");
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["type", "content", "children", "style", "className", "forwardedRef"];
+
 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; }
@@ -25,29 +27,29 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 const types = {
   error: {
-    color: _Theme.colors.red,
+    color: _Colors.default.error.main,
     backgroundColor: 'rgba(227, 91, 84, 0.2)'
   },
   warning: {
-    color: _Theme.colors.yellow,
+    color: _Colors.default.warning.main,
     backgroundColor: 'rgba(247, 208, 64, 0.2)'
   },
   success: {
-    color: '#5b9025',
+    color: _Colors.default.success.main,
     backgroundColor: '#eafbd9'
   },
   primary: {
-    color: _Theme.colors.blue,
+    color: _Colors.default.primary.main,
     backgroundColor: '#ECEFFF'
   },
   reverse: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.primary
+    color: '#fff',
+    backgroundColor: '#222'
   }
 };
 
 function Tag(props) {
-  const newProps = (0, _Util.mergeProps)(props, Tag, ['style']); // eslint-disable-next-line object-curly-newline
+  const newProps = (0, _Util.mergeProps)(props, Tag, ['style']);
 
   const {
     type,
@@ -57,10 +59,10 @@ function Tag(props) {
     className,
     forwardedRef
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["type", "content", "children", "style", "className", "forwardedRef"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const styles = Object.assign({}, types[type] || types.primary, style);
-  return _react.default.createElement(Span, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Span, Object.assign({
     ref: forwardedRef,
     component: "span",
     className: className,
@@ -82,12 +84,12 @@ Tag.defaultProps = {
   style: {}
 };
 
-var _default = _react.default.forwardRef((props, ref) => _react.default.createElement(Tag, Object.assign({}, props, {
+var _default = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(Tag, Object.assign({}, props, {
   forwardedRef: ref
 })));
 
 exports.default = _default;
 const Span = (0, _styledComponents.default)(_Typography.default).withConfig({
   displayName: "Tag__Span",
-  componentId: "wqpeo3-0"
+  componentId: "sc-wqpeo3-0"
 })(["&&{display:inline-flex;justify-content:center;align-items:center;padding:2px 10px;height:20px;line-height:20px;font-size:12px;font-weight:500;}"]);

package/lib/Terminal/Player.js

@@ -21,13 +21,13 @@ var _util = require("./util");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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; }
 
@@ -54,47 +54,47 @@ function Player(props) {
     // console.log(`dispatch.${action.type}`, action.payload);
     switch (action.type) {
       case 'jump':
-        return _objectSpread({}, state, {
+        return _objectSpread(_objectSpread({}, state), {}, {
           isPlaying: false
         }, action.payload);
 
       case 'start':
-        return _objectSpread({}, state, {
+        return _objectSpread(_objectSpread({}, state), {}, {
           isStarted: true,
           lastTickTime: Date.now()
         });
 
       case 'play':
-        return _objectSpread({}, state, {
+        return _objectSpread(_objectSpread({}, state), {}, {
           isPlaying: true,
           lastTickTime: Date.now()
         }, action.payload);
 
       case 'pause':
-        return _objectSpread({}, state, {
+        return _objectSpread(_objectSpread({}, state), {}, {
           isPlaying: false
         }, action.payload);
 
       case 'tickStart':
-        return _objectSpread({}, state, {
+        return _objectSpread(_objectSpread({}, state), {}, {
           isRendering: true,
           lastTickTime: Date.now()
         }, action.payload);
 
       case 'tickEnd':
-        return _objectSpread({}, state, {
+        return _objectSpread(_objectSpread({}, state), {}, {
           isRendering: false,
           lastTickTime: Date.now()
         }, action.payload);
 
       case 'reset':
-        return _objectSpread({}, state, {
+        return _objectSpread(_objectSpread({}, state), {}, {
           currentFrame: 0,
           currentTime: 0
         }, action.payload);
 
       default:
-        return _objectSpread({}, state, {
+        return _objectSpread(_objectSpread({}, state), {}, {
           lastTickTime: Date.now()
         }, action.payload);
     }
@@ -179,10 +179,8 @@ function Player(props) {
     }
 
     if (options.autoplay) {
-      // eslint-disable-next-line no-use-before-define
       onStart();
     } else {
-      // eslint-disable-next-line no-use-before-define
       doJump(Math.min(Math.abs(options.thumbnailTime), totalDuration));
     }
   }, []); // Tick intervals
@@ -277,7 +275,7 @@ function Player(props) {
 
   const doJump = time => {
     terminal.current.reset();
-    const toFrameIndex = (0, _util.findFrameAt)(frames, time); // eslint-disable-next-line no-plusplus
+    const toFrameIndex = (0, _util.findFrameAt)(frames, time);
 
     for (let i = 0; i < toFrameIndex; i++) {
       renderFrame(i);
@@ -339,87 +337,87 @@ function Player(props) {
     return onStart();
   };
 
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _util.getPlayerClass)(options, state),
     ref: container
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "cover",
     onClick: onStart
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "start",
     onClick: onStart
-  }, _react.default.createElement("svg", {
+  }, /*#__PURE__*/_react.default.createElement("svg", {
     style: {
       enableBackground: 'new 0 0 30 30'
     },
     viewBox: "0 0 30 30"
-  }, _react.default.createElement("polygon", {
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
     points: "6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 "
-  }), _react.default.createElement("polygon", {
+  }), /*#__PURE__*/_react.default.createElement("polygon", {
     points: "6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 "
-  }), _react.default.createElement("circle", {
+  }), /*#__PURE__*/_react.default.createElement("circle", {
     cx: "26",
     cy: "15",
     r: "1"
-  }), _react.default.createElement("circle", {
+  }), /*#__PURE__*/_react.default.createElement("circle", {
     cx: "6",
     cy: "4",
     r: "1"
-  }), _react.default.createElement("circle", {
+  }), /*#__PURE__*/_react.default.createElement("circle", {
     cx: "6",
     cy: "26",
     r: "1"
-  }))), _react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "terminal"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _util.getFrameClass)(options),
     style: options.frameBox.style || {}
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "terminal-titlebar"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "buttons"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "close-button"
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "minimize-button"
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "maximize-button"
-  })), _react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "title"
-  }, options.frameBox.title || '')), _react.default.createElement("div", {
+  }, options.frameBox.title || '')), /*#__PURE__*/_react.default.createElement("div", {
     className: "terminal-body"
-  }, _react.default.createElement(_index.default, {
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
     ref: terminal,
     options: terminalOptions
-  })))), _react.default.createElement("div", {
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "controller"
-  }, state.isPlaying && _react.default.createElement("div", {
+  }, state.isPlaying && /*#__PURE__*/_react.default.createElement("div", {
     className: "pause",
     onClick: onPause,
     title: "Pause"
-  }, _react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon"
-  })), !state.isPlaying && state.isStarted && _react.default.createElement("div", {
+  })), !state.isPlaying && state.isStarted && /*#__PURE__*/_react.default.createElement("div", {
     className: "play",
     onClick: onPlay,
     title: "Play"
-  }, _react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon"
-  })), !state.isPlaying && !state.isStarted && _react.default.createElement("div", {
+  })), !state.isPlaying && !state.isStarted && /*#__PURE__*/_react.default.createElement("div", {
     className: "play",
     onClick: onStart,
     title: "Start"
-  }, _react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "icon"
-  })), _react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "timer"
-  }, (0, _util.formatTime)(state.currentTime)), _react.default.createElement("div", {
+  }, (0, _util.formatTime)(state.currentTime)), /*#__PURE__*/_react.default.createElement("div", {
     className: "progressbar-wrapper"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "progressbar",
     ref: progress,
     onClick: onJump
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "progress",
     style: {
       width: "".concat(state.currentTime / totalDuration * 100, "%")

package/lib/Terminal/index.js

@@ -143,7 +143,9 @@ class Terminal extends _react.default.Component {
 
   render() {
     const className = ['react-xterm', this.props.className].filter(Boolean).join(' ');
-    return (// eslint-disable-next-line no-return-assign
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line no-return-assign
       _react.default.createElement("div", {
         ref: _ref => this.container = _ref,
         className: className,

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);