@arcblock/ux 0.78.26 → 1.6.60

package/lib/Dialog/dialog.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+const _excluded = ["children", "title", "prepend", "toolbar", "actions", "showCloseButton", "actionsPosition", "PaperProps"];
+
+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; }
+
+/**
+ * Dialog
+ *
+ * - 固定尺寸或特殊的尺寸控制需求, 可使用 PaperProps.style (不再提供 width/height 等 props)
+ *   注意: 当设置明确的 width 时, 可能需要同时设置 maxWidth=false (mui dialog 默认 maxWidth=sm, 设置的 width 可能受限)
+ * - 添加默认最小尺寸 (300x300), 在需要 先展示 loading 再展示异步数据 的时候避免 loading 阶段窗口过小
+ */
+const Dialog = _ref => {
+  let {
+    children,
+    title,
+    prepend,
+    toolbar,
+    actions,
+    showCloseButton,
+    actionsPosition,
+    PaperProps
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _styles.useTheme)(); // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
+
+  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+  const showHeader = title || showCloseButton || toolbar;
+
+  const handleOnClose = (e, reason) => {
+    // escapeKeyDown/backdropClick
+    const {
+      onClose
+    } = rest;
+
+    if (onClose) {
+      onClose(e, reason);
+    }
+  }; // 添加默认最小尺寸 (300x300)
+
+
+  PaperProps.style = Object.assign({
+    minWidth: 300,
+    minHeight: 300
+  }, PaperProps.style);
+
+  const closeButton = /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    className: "ux-dialog_closeButton",
+    onClick: e => handleOnClose(e, 'closeButton')
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, null));
+
+  return /*#__PURE__*/_react.default.createElement(StyledMuiDialog, Object.assign({
+    fullScreen: isMobile,
+    onClose: handleOnClose,
+    PaperProps: PaperProps
+  }, rest), showHeader && /*#__PURE__*/_react.default.createElement(Header, {
+    className: "ux-dialog_header",
+    isMobile: isMobile
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ux-dialog_left"
+  }, showCloseButton && isMobile && closeButton, prepend && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ux-dialog_prepend"
+  }, prepend), title && /*#__PURE__*/_react.default.createElement("h6", {
+    className: "ux-dialog_title"
+  }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ux-dialog_right"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ux-dialog_toolbar"
+  }, toolbar), showCloseButton && !isMobile && closeButton)), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, children), actions && /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
+    className: "ux-dialog_actions--".concat(actionsPosition)
+  }, actions));
+};
+
+Dialog.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  title: _propTypes.default.node,
+  // 在 title 之前追加内容, 比如返回按钮
+  prepend: _propTypes.default.node,
+  // 顶部工具栏, 在 close button 另一侧
+  toolbar: _propTypes.default.node,
+  actions: _propTypes.default.node,
+  showCloseButton: _propTypes.default.bool,
+  actionsPosition: _propTypes.default.oneOf(['left', 'center', 'right']),
+  PaperProps: _propTypes.default.object
+};
+Dialog.defaultProps = {
+  showCloseButton: true,
+  title: '',
+  prepend: null,
+  toolbar: null,
+  actions: null,
+  actionsPosition: 'right',
+  PaperProps: {}
+};
+const StyledMuiDialog = (0, _styledComponents.default)(_Dialog.default).withConfig({
+  displayName: "dialog__StyledMuiDialog",
+  componentId: "sc-kt5gv0-0"
+})([".MuiDialog-paper{", ";}.MuiDialogContent-root{padding:16px 24px;}.MuiDialogActions-root{padding:8px 24px 16px 24px;}.MuiDialogActions-root.ux-dialog_actions--left{justify-content:flex-start;}.MuiDialogActions-root.ux-dialog_actions--right{justify-content:flex-end;}.MuiDialogActions-root.ux-dialog_actions--center{justify-content:center;}"], props => props.fullScreen ? 'border-radius: 0;' : '');
+
+const Header = _styledComponents.default.div.withConfig({
+  displayName: "dialog__Header",
+  componentId: "sc-kt5gv0-1"
+})(["display:flex;justify-content:space-between;align-items:center;padding:16px 24px;.ux-dialog_left{display:flex;justify-content:flex-start;align-items:center;min-width:0;}.ux-dialog_right{display:flex;justify-content:flex-end;align-items:center;}.ux-dialog_toolbar{display:flex;align-items:center;}.ux-dialog_title{margin:0;font-size:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.ux-dialog_closeButton{", "}"], props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
+
+var _default = Dialog;
+exports.default = _default;

package/lib/Dialog/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Confirm", {
+  enumerable: true,
+  get: function get() {
+    return _confirm.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dialog.default;
+  }
+});
+
+var _dialog = _interopRequireDefault(require("./dialog"));
+
+var _confirm = _interopRequireDefault(require("./confirm"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Earth/index.js

@@ -25,13 +25,13 @@ var _util = _interopRequireDefault(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; }
 
@@ -60,12 +60,12 @@ const themes = {
 function stateReducer(state, action) {
   switch (action.type) {
     case 'dragEnd':
-      return _objectSpread({}, state, {
+      return _objectSpread(_objectSpread({}, state), {}, {
         isDragging: false
       });
 
     case 'dragStart':
-      return _objectSpread({}, state, {
+      return _objectSpread(_objectSpread({}, state), {}, {
         isDragging: true,
         animationDuration: 1,
         mousePosition: action.payload.mousePosition
@@ -125,7 +125,7 @@ function Earth(_ref) {
   (0, _react.useEffect)(() => {
     // Rotate to active marker
     if (isValid) {
-      // eslint-disable-next-line
+      // eslint-disable-next-line prefer-const
       let {
         p1,
         p2,
@@ -257,18 +257,18 @@ function Earth(_ref) {
     const areaCoords = [x.longitude, x.latitude];
     const distance = d3.geoDistance(areaCoords, projection.invert([width / 2, height / 2]));
     const sphereCoords = projection(areaCoords);
-    const isActive = activeMarkerId === x.id; // eslint-disable-next-line
+    const isActive = activeMarkerId === x.id; // eslint-disable-next-line no-nested-ternary
 
     const fill = distance > 1.57 ? 'none' : isActive ? colors.activeMarker : colors.marker;
     const radius = isActive ? 9 : 6;
-    return _react.default.createElement("g", {
+    return /*#__PURE__*/_react.default.createElement("g", {
       key: x.id,
       className: "marker ".concat(isActive ? 'marker--active' : ''),
       onFocus: event => onShowTooltip(event, i),
       onBlur: onHideTooltip,
       onMouseOver: event => onShowTooltip(event, i),
       onMouseOut: onHideTooltip
-    }, _react.default.createElement("circle", {
+    }, /*#__PURE__*/_react.default.createElement("circle", {
       key: "marker-inner",
       className: "marker__inner",
       r: radius,
@@ -278,7 +278,7 @@ function Earth(_ref) {
       style: {
         fillOpacity: isActive ? 1 : 0.5
       }
-    }), _react.default.createElement("circle", {
+    }), /*#__PURE__*/_react.default.createElement("circle", {
       key: "marker-outer",
       className: "marker__outer",
       r: radius * 2,
@@ -296,16 +296,16 @@ function Earth(_ref) {
   const renderTooltip = () => {
     if (state.tooltipIndex >= 0) {
       const marker = markers[state.tooltipIndex];
-      return _react.default.createElement(Tooltip, {
+      return /*#__PURE__*/_react.default.createElement(Tooltip, {
         style: {
           left: state.mousePosition[0],
           top: state.mousePosition[1]
         }
-      }, _react.default.createElement("p", {
+      }, /*#__PURE__*/_react.default.createElement("p", {
         className: "title"
-      }, marker.title), _react.default.createElement("p", {
+      }, marker.title), /*#__PURE__*/_react.default.createElement("p", {
         className: "description"
-      }, marker.description), _react.default.createElement("p", {
+      }, marker.description), /*#__PURE__*/_react.default.createElement("p", {
         className: "description"
       }, "ID: ", marker.id));
     }
@@ -318,13 +318,13 @@ function Earth(_ref) {
     activeCountry = geoJson.features.findIndex(x => x.properties && x.properties.name && x.properties.name === activeMarker.country);
   }
 
-  return _react.default.createElement(Container, {
+  return /*#__PURE__*/_react.default.createElement(Container, {
     width: width,
     height: height,
     theme: theme,
     colors: colors,
     onMouseLeave: onDragEnd
-  }, renderTooltip(), _react.default.createElement("svg", {
+  }, renderTooltip(), /*#__PURE__*/_react.default.createElement("svg", {
     className: "earth",
     width: width,
     height: height,
@@ -332,64 +332,64 @@ function Earth(_ref) {
     onMouseMove: onDrag,
     onMouseUp: onDragEnd,
     ref: svgRef
-  }, _react.default.createElement("rect", {
+  }, /*#__PURE__*/_react.default.createElement("rect", {
     className: "frame",
     width: width,
     height: height
-  }), _react.default.createElement("circle", {
+  }), /*#__PURE__*/_react.default.createElement("circle", {
     cx: width / 2,
     cy: height / 2,
     r: projection.scale(),
     className: "globe",
     filter: "url(#glow)"
-  }), _react.default.createElement("path", {
+  }), /*#__PURE__*/_react.default.createElement("path", {
     className: "graticule",
     d: pathGenerator(d3.geoGraticule().step([10, 10])())
-  }), _react.default.createElement("g", {
+  }), /*#__PURE__*/_react.default.createElement("g", {
     className: "features"
-  }, geoJson.features.map((x, i) => _react.default.createElement("path", {
+  }, geoJson.features.map((x, i) => /*#__PURE__*/_react.default.createElement("path", {
     key: x.properties.name,
     className: "country ".concat(activeCountry === i ? 'country--active' : ''),
     d: pathGenerator(x)
-  }))), _react.default.createElement("g", {
+  }))), /*#__PURE__*/_react.default.createElement("g", {
     className: "markers"
-  }, renderMarkers()), state.isDragging && state.mousePosition && _react.default.createElement("path", {
+  }, renderMarkers()), state.isDragging && state.mousePosition && /*#__PURE__*/_react.default.createElement("path", {
     className: "point point-mouse",
     d: pathGenerator({
       type: 'Point',
       coordinates: projection.invert(state.mousePosition)
     })
-  })), _react.default.createElement("svg", {
+  })), /*#__PURE__*/_react.default.createElement("svg", {
     className: "defs"
-  }, _react.default.createElement("defs", null, _react.default.createElement("linearGradient", {
+  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "gradBlue",
     x1: "0%",
     y1: "0%",
     x2: "100%",
     y2: "0%"
-  }, _react.default.createElement("stop", {
+  }, /*#__PURE__*/_react.default.createElement("stop", {
     offset: "0%",
     style: {
       stopColor: '#005C99',
       stopOpacity: 1
     }
-  }), _react.default.createElement("stop", {
+  }), /*#__PURE__*/_react.default.createElement("stop", {
     offset: "100%",
     style: {
       stopColor: '#0099FF',
       stopOpacity: 1
     }
-  })), _react.default.createElement("filter", {
+  })), /*#__PURE__*/_react.default.createElement("filter", {
     id: "glow"
-  }, _react.default.createElement("feColorMatrix", {
+  }, /*#__PURE__*/_react.default.createElement("feColorMatrix", {
     type: "matrix",
     values: "0 0 0 0   0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 1   0"
-  }), _react.default.createElement("feGaussianBlur", {
+  }), /*#__PURE__*/_react.default.createElement("feGaussianBlur", {
     stdDeviation: "5.5",
     result: "coloredBlur"
-  }), _react.default.createElement("feMerge", null, _react.default.createElement("feMergeNode", {
+  }), /*#__PURE__*/_react.default.createElement("feMerge", null, /*#__PURE__*/_react.default.createElement("feMergeNode", {
     in: "coloredBlur"
-  }), _react.default.createElement("feMergeNode", {
+  }), /*#__PURE__*/_react.default.createElement("feMergeNode", {
     in: "SourceGraphic"
   }))))));
 }

package/lib/Empty/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+const _excluded = ["name", "color", "size", "children"];
+
+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; }
+
+const Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Empty__Wrapper",
+  componentId: "sc-g0b1j7-0"
+})(["display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;min-height:100px;color:#999;.empty-icon{margin:10px 0;}"]);
+
+function Empty(_ref) {
+  let {
+    name,
+    color,
+    size,
+    children
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Wrapper, rest, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: name,
+    size: size,
+    className: "empty-icon",
+    color: color
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "empty-content"
+  }, children));
+}
+
+Empty.propTypes = {
+  color: _propTypes.default.string,
+  name: _propTypes.default.string,
+  size: _propTypes.default.number,
+  children: _propTypes.default.any
+};
+Empty.defaultProps = {
+  color: 'inherit',
+  name: 'inbox',
+  size: 36,
+  children: null
+};
+var _default = Empty;
+exports.default = _default;

package/lib/Footer/index.js

@@ -20,11 +20,8 @@ var _Logo = _interopRequireDefault(require("../Logo"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable react/no-unused-prop-types */
-
-/* eslint-disable react/jsx-one-expression-per-line */
 function Footer(props) {
-  const newProps = (0, _Util.mergeProps)(props, Footer, ['dark', 'style']); // eslint-disable-next-line object-curly-newline
-
+  const newProps = (0, _Util.mergeProps)(props, Footer, ['dark', 'style']);
   const {
     className,
     copyStart,
@@ -34,30 +31,31 @@ function Footer(props) {
   } = newProps;
   const endYear = new Date().getFullYear();
   const copyYear = endYear === copyStart ? endYear : "".concat(copyStart, "-").concat(endYear);
-  return _react.default.createElement(Container, {
+  return /*#__PURE__*/_react.default.createElement(Container, {
     className: className,
     style: style,
     dark: dark
-  }, _react.default.createElement(_Typography.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "div",
     className: "footer"
-  }, _react.default.createElement(_Typography.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "p",
     className: "footer-item"
-  }, _react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "footer-copy"
-  }, "\xA9 Copyright ", copyYear, " "), _react.default.createElement("span", {
+  }, "\xA9 Copyright ", copyYear, " "), /*#__PURE__*/_react.default.createElement("span", {
     className: "footer-brand"
-  }, brand)), _react.default.createElement(_Typography.default, {
+  }, brand)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "p",
-    className: "footer-item"
-  }, "Powered by", _react.default.createElement(_Logo.default, {
-    mode: dark ? 'light' : 'dark',
-    layout: "horizontal",
+    className: "footer-item",
     style: {
-      transform: 'scale(0.6)',
-      opacity: 0.5
+      justifyContent: 'flex-end',
+      flexShrink: 0
     }
+  }, "Powered by", /*#__PURE__*/_react.default.createElement(_Logo.default, {
+    mode: dark ? 'light' : 'dark',
+    layout: "horizontal",
+    className: "logo-container"
   }))));
 }
 
@@ -71,7 +69,7 @@ Footer.propTypes = {
 Footer.defaultProps = {
   dark: false,
   brand: 'ArcBlock Inc.',
-  copyStart: '2018',
+  copyStart: '2017',
   className: '',
   style: {}
 };
@@ -79,4 +77,4 @@ Footer.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "Footer__Container",
   componentId: "sc-1qpifuv-0"
-})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;.footer{display:flex;align-items:center;justify-content:space-between;@media (max-width:540px){flex-direction:column;align-items:flex-start;justify-content:flex-start;}.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}}"], props => props.dark ? props.theme.colors.minor : '#dee2e7', props => props.theme.colors.minor);
+})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin:0 24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', props => props.theme.palette.grey[900]);

package/lib/Icon/image.js

@@ -11,7 +11,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _reactImage = require("react-image");
+var _Img = _interopRequireDefault(require("../Img"));
+
+const _excluded = ["name", "size", "alt", "color", "style", "prefix", "showBadge"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,7 +21,6 @@ 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; }
 
-// eslint-disable-next-line object-curly-newline
 function ImageIcon(_ref) {
   let {
     name,
@@ -30,27 +31,23 @@ function ImageIcon(_ref) {
     prefix,
     showBadge
   } = _ref,
-      rest = _objectWithoutProperties(_ref, ["name", "size", "alt", "color", "style", "prefix", "showBadge"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
-  const {
-    src,
-    isLoading
-  } = (0, _reactImage.useImage)({
-    srcList: "".concat(prefix, "/").concat(name, "-").concat(color.replace(/^#/, ''), ".png"),
-    useSuspense: false
-  });
-  return _react.default.createElement(Div, {
+  const src = "".concat(prefix, "/").concat(name, "-").concat(color.replace(/^#/, ''), ".png");
+  return /*#__PURE__*/_react.default.createElement(Div, {
     style: {
       width: size,
       height: size
     }
-  }, !isLoading && _react.default.createElement("img", Object.assign({
+  }, /*#__PURE__*/_react.default.createElement(_Img.default, Object.assign({
+    width: size,
+    height: size,
     alt: alt || name,
     src: src,
     style: Object.assign({
       width: size
     }, style)
-  }, rest)), showBadge && _react.default.createElement("i", {
+  }, rest)), showBadge && /*#__PURE__*/_react.default.createElement("i", {
     className: "badge-point"
   }));
 }

package/lib/Icon/index.js

@@ -11,7 +11,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["name", "color", "size", "variant", "rounded", "style", "className", "forwardedRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,9 +25,9 @@ const variants = {
   light: 'fal',
   regular: 'far',
   solid: 'fas'
-}; // eslint-disable-next-line object-curly-newline
+};
 
-const Icon = (_ref) => {
+const Icon = _ref => {
   let {
     name,
     color,
@@ -36,9 +38,9 @@ const Icon = (_ref) => {
     className,
     forwardedRef
   } = _ref,
-      rest = _objectWithoutProperties(_ref, ["name", "color", "size", "variant", "rounded", "style", "className", "forwardedRef"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
-  const content = _react.default.createElement("i", {
+  const content = /*#__PURE__*/_react.default.createElement("i", {
     ref: forwardedRef,
     className: "".concat(variants[variant], " fa-").concat(name, " ").concat(rounded ? '' : className),
     style: Object.assign({
@@ -48,7 +50,7 @@ const Icon = (_ref) => {
   });
 
   if (rounded) {
-    return _react.default.createElement(Span, Object.assign({
+    return /*#__PURE__*/_react.default.createElement(Span, Object.assign({
       ref: forwardedRef,
       size: size,
       color: color,
@@ -71,7 +73,7 @@ Icon.propTypes = {
 Icon.defaultProps = {
   rounded: false,
   variant: 'light',
-  color: _Theme.colors.primary,
+  color: _Colors.default.grey[900],
   className: '',
   size: 24,
   style: {}
@@ -82,7 +84,7 @@ const Span = _styledComponents.default.span.withConfig({
   componentId: "sc-3s68zh-0"
 })(["width:", "px;height:", "px;border-radius:50%;border:1px solid ", ";display:flex;justify-content:center;align-items:center;.fa,.fas,.fal,.far{line-height:", "px;}"], props => props.size * 2, props => props.size * 2, props => props.color, props => props.size);
 
-var _default = _react.default.forwardRef((props, ref) => _react.default.createElement(Icon, Object.assign({}, props, {
+var _default = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(Icon, Object.assign({}, props, {
   forwardedRef: ref
 })));