@arcblock/ux 0.78.26 → 1.6.60

package/lib/Blocklet/index.js

@@ -0,0 +1,261 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionButton = void 0;
+exports.default = Blocklet;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Portal = _interopRequireDefault(require("@material-ui/core/Portal"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+
+var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Img = _interopRequireDefault(require("../Img"));
+
+const _excluded = ["title", "did", "description", "cover", "type", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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, 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 _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 Div = _styledComponents.default.div.withConfig({
+  displayName: "Blocklet__Div",
+  componentId: "sc-3dga5l-0"
+})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+
+const ActionButton = _styledComponents.default.div.withConfig({
+  displayName: "Blocklet__ActionButton",
+  componentId: "sc-3dga5l-1"
+})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}& >:not(.Mui-disabled){background-color:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+
+exports.ActionButton = ActionButton;
+
+function BlockletIcon(_ref) {
+  let {
+    name
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: name,
+    color: "inherit",
+    size: 15,
+    style: {
+      marginRight: 8
+    }
+  });
+}
+
+BlockletIcon.propTypes = {
+  name: _propTypes.default.string.isRequired
+};
+
+function prettySize(_size) {
+  let size = _size;
+  const list = ['', 'k', 'm', 'b'];
+  let index = 0;
+
+  while (size > 1000 && index < list.length - 1) {
+    size = (size / 1000).toFixed(1);
+    index += 1;
+  }
+
+  return _size && "".concat(size).concat(list[index]);
+}
+
+function Blocklet(_ref2) {
+  let {
+    title,
+    did,
+    description,
+    cover,
+    type,
+    size,
+    addons,
+    button,
+    buttonText,
+    buttonDisabled,
+    buttonLoading,
+    isStickyButton,
+    onButtonClick,
+    onMainClick,
+    onTagClick,
+    className,
+    scaleClickZone
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  const wrapHandler = function wrapHandler(handler) {
+    let stopFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
+    return function (e) {
+      if (stopFn()) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (handler instanceof Function) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+
+        handler(...args);
+      }
+    };
+  };
+
+  const _onButtonClick = wrapHandler(onButtonClick, () => {
+    // stop click while custom button or buttonDisabled or buttondLoading
+    if (button || buttonDisabled || buttonLoading) {
+      return true;
+    }
+
+    return false;
+  });
+
+  const _onMainClick = wrapHandler(onMainClick);
+
+  const theme = (0, _useTheme.default)();
+  const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
+  const isUPLg = (0, _useMediaQuery.default)(theme.breakpoints.up('lg')); // If size is auto, need calculate actual size according to screen size
+  // eslint-disable-next-line no-nested-ternary
+
+  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size; // eslint-disable-next-line no-nested-ternary
+
+  const didAvatarSize = size === 'auto' ? isUPLg ? 80 : 40 : size === 'md' ? 80 : 40;
+  const container = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
+    scaleClickZone: scaleClickZone,
+    className: "".concat(className, " arcblock-blocklet arcblock-blocklet--size-").concat(actualSize)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__content--main",
+    onClick: _onMainClick,
+    ref: container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__content--body"
+  }, cover ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__cover"
+  }, /*#__PURE__*/_react.default.createElement(_Img.default, {
+    src: cover
+  })) : did && /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__cover"
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    did: did,
+    size: didAvatarSize
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__info"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    component: "h3",
+    variant: "h3",
+    className: "arcblock-blocklet__title",
+    title: title
+  }, title), description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    component: "div",
+    variant: "body2",
+    className: "arcblock-blocklet__describe",
+    title: description
+  }, description), ['md', 'sm', 'xs'].includes(actualSize) && /*#__PURE__*/_react.default.createElement(_Portal.default, {
+    container: container.current,
+    disablePortal: actualSize === 'md'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__button",
+    onClick: _onButtonClick,
+    style: {
+      display: isStickyButton ? 'block' : ''
+    }
+  }, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "arcblock-blocklet__button--hover",
+    variant: "outlined",
+    color: "primary",
+    size: "small",
+    disabled: buttonDisabled || buttonLoading,
+    style: actualSize === 'md' ? {
+      padding: '3px 20px',
+      fontSize: '14px'
+    } : {
+      padding: '3px 15px',
+      minWidth: '54px',
+      fontSize: '13px'
+    }
+  }, buttonLoading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+    size: actualSize === 'md' ? 15 : 13,
+    style: {
+      marginRight: 3,
+      color: 'inherit'
+    }
+  }), buttonText))))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__addons"
+  }, addons.map((item, index) => /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    component: "span",
+    variant: "caption",
+    className: "arcblock-blocklet__addons--item" // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: index,
+    title: item.title
+  }, item.empty ? null : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BlockletIcon, {
+    name: item.icon
+  }), item.pretty ? prettySize(item.value) : item.value)))));
+}
+
+Blocklet.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  did: _propTypes.default.string,
+  isStickyButton: _propTypes.default.bool,
+  description: _propTypes.default.string,
+  cover: _propTypes.default.string,
+  buttonText: _propTypes.default.string,
+  buttonDisabled: _propTypes.default.bool,
+  buttonLoading: _propTypes.default.bool,
+  button: _propTypes.default.element,
+  type: _propTypes.default.string,
+  addons: _propTypes.default.arrayOf(_propTypes.default.object),
+  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'auto']),
+  onButtonClick: _propTypes.default.func,
+  onMainClick: _propTypes.default.func,
+  onTagClick: _propTypes.default.func,
+  className: _propTypes.default.string,
+  scaleClickZone: _propTypes.default.number
+};
+Blocklet.defaultProps = {
+  description: null,
+  cover: null,
+  did: null,
+  isStickyButton: false,
+  buttonText: 'Install',
+  buttonDisabled: false,
+  buttonLoading: false,
+  button: null,
+  type: null,
+  size: 'auto',
+  addons: [],
+  onButtonClick: null,
+  onMainClick: null,
+  onTagClick: null,
+  className: null,
+  scaleClickZone: 1.5
+};

package/lib/Button/wrap.js

@@ -9,17 +9,26 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Theme = require("../Theme");
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+
+var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
+const _excluded = ["children", "rounded", "loading", "disabled", "style", "forwardedRef", "color"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
 
-// eslint-disable-next-line space-before-function-paren
 function _default(BaseComponent) {
   function WrappedComponent(props) {
     const newProps = (0, _Util.mergeProps)(props, WrappedComponent, ['style']);
@@ -27,58 +36,102 @@ function _default(BaseComponent) {
     const {
       children,
       rounded,
+      loading,
+      disabled,
       style,
-      forwardedRef
+      forwardedRef,
+      color
     } = newProps,
-          rest = _objectWithoutProperties(newProps, ["children", "rounded", "style", "forwardedRef"]);
+          rest = _objectWithoutProperties(newProps, _excluded);
 
-    const styles = Object.assign({}, style, {
-      boxShadow: 'none',
-      textTransform: 'capitalize'
-    });
-
-    if (rest.color === 'danger') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = _Theme.colors.danger;
-        styles.color = _Theme.colors.white;
-      } else {
-        styles.borderColor = _Theme.colors.danger;
-        styles.color = _Theme.colors.danger;
-      }
-    }
+    const isDisabled = disabled || loading;
+    let loadingSize = 16;
 
-    if (!rest.color || rest.color === 'default') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = rest.disabled ? _Theme.colors.lightGrey : _Theme.colors.primary;
-        styles.color = _Theme.colors.white;
-      } else {
-        styles.borderColor = rest.disabled ? _Theme.colors.lightGrey : _Theme.colors.primary;
-        styles.color = rest.disabled ? _Theme.colors.lightGrey : _Theme.colors.primary;
-      }
+    switch (rest.size) {
+      case 'small':
+        loadingSize = 14;
+        break;
+
+      case 'large':
+        loadingSize = 18;
+        break;
+
+      default:
     }
 
-    if (rest.color === 'reverse') {
-      if (rest.variant === 'contained') {
-        styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-        styles.color = _Theme.colors.primary;
-      } else {
-        styles.borderColor = _Theme.colors.primary;
-        styles.color = _Theme.colors.primary;
-      }
+    const styles = Object.assign({}, style, {
+      boxShadow: 'none',
+      textTransform: 'capitalize'
+    }); // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse 三种 color
+
+    let _rest = rest;
+
+    switch (color) {
+      case 'error':
+      case 'danger':
+        {
+          if (rest.variant === 'contained') {
+            styles.backgroundColor = _Colors.default.error.main;
+            styles.color = _Colors.default.common.white;
+          } else {
+            styles.borderColor = _Colors.default.error.main;
+            styles.color = _Colors.default.error.main;
+          }
+
+          break;
+        }
+
+      case 'warning':
+        {
+          if (rest.variant === 'contained') {
+            styles.backgroundColor = _Colors.default.warning.main;
+            styles.color = _Colors.default.common.white;
+          } else {
+            styles.borderColor = _Colors.default.warning.main;
+            styles.color = _Colors.default.warning.main;
+          }
+
+          break;
+        }
+
+      case 'reverse':
+        {
+          if (rest.variant === 'contained') {
+            styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
+            styles.color = _Colors.default.grey[900];
+          } else {
+            styles.borderColor = _Colors.default.grey[900];
+            styles.color = _Colors.default.grey[900];
+          }
+
+          break;
+        }
+      // 除扩展的几种 color 外, 由 mui button 自己处理 color
+
+      default:
+        {
+          _rest = _objectSpread(_objectSpread({}, _rest), {}, {
+            color
+          });
+        }
     }
 
     if (rounded) {
-      styles.borderRadius = {
-        small: 16,
-        medium: 18,
-        large: 20
-      }[rest.size];
+      // styles.borderRadius = { small: 16, medium: 18, large: 20 }[rest.size];
+      styles.borderRadius = '100vw';
     }
 
-    return _react.default.createElement(BaseComponent, Object.assign({
+    return /*#__PURE__*/_react.default.createElement(BaseComponent, Object.assign({
       style: styles,
-      ref: forwardedRef
-    }, rest), children);
+      ref: forwardedRef,
+      disabled: isDisabled
+    }, _rest), loading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+      size: loadingSize,
+      style: {
+        marginRight: 5
+      }
+    }), children);
   }
 
   WrappedComponent.propTypes = {
@@ -94,7 +147,7 @@ function _default(BaseComponent) {
     forwardedRef: null,
     style: {}
   };
-  return _react.default.forwardRef((props, ref) => _react.default.createElement(WrappedComponent, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(WrappedComponent, Object.assign({}, props, {
     forwardedRef: ref
   })));
 }

package/lib/ButtonGroup/index.js

@@ -5,27 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _ButtonGroup = _interopRequireDefault(require("@material-ui/core/ButtonGroup"));
 
 var _wrap = _interopRequireDefault(require("../Button/wrap"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const sizes = {
-  small: 16,
-  medium: 18,
-  large: 20
-};
-
-const getBorderRadius = size => sizes[size || 'medium'];
-
-const StyledButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default).withConfig({
-  displayName: "ButtonGroup__StyledButtonGroup",
-  componentId: "sc-1popzk9-0"
-})([".MuiButton-root:first-of-type{border-radius:", "px 0 0 ", "px;}.MuiButton-root:last-of-type{border-radius:0 ", "px ", "px 0;}"], props => getBorderRadius(props.size), props => getBorderRadius(props.size), props => getBorderRadius(props.size), props => getBorderRadius(props.size));
-
-var _default = (0, _wrap.default)(StyledButtonGroup);
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
+var _default = (0, _wrap.default)(_ButtonGroup.default);
 
 exports.default = _default;

package/lib/Center/index.js

@@ -9,17 +9,43 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// eslint-disable-next-line react/prop-types
+/**
+ *
+ * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
+ * @returns react component element
+ */
 function Center(_ref) {
   let {
-    children
+    children,
+    relative
   } = _ref;
-  return _react.default.createElement(Div, null, children);
+  let style = {};
+
+  if (relative === 'parent') {
+    style = {
+      width: '100%',
+      height: '100%'
+    };
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Div, {
+    style: style
+  }, children);
 }
 
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Center__Div",
   componentId: "sc-1kmxe8v-0"
-})(["flex:1;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;"]);
+})(["flex:1;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;"]);
+
+Center.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  relative: _propTypes.default.string
+};
+Center.defaultProps = {
+  relative: 'screen'
+};

package/lib/ClickToCopy/index.js

@@ -23,18 +23,20 @@ var _Toast = _interopRequireDefault(require("../Toast"));
 
 var _Util = require("../Util");
 
+const _excluded = ["children", "content", "tip", "copiedTip", "tipPlacement", "style"];
+
 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 _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; }
 
 function ClickToCopy(props) {
-  const newProps = (0, _Util.mergeProps)(props, ClickToCopy, ['style']); // eslint-disable-next-line object-curly-newline
+  const newProps = (0, _Util.mergeProps)(props, ClickToCopy, ['style']);
 
   const {
     children,
@@ -44,11 +46,11 @@ function ClickToCopy(props) {
     tipPlacement,
     style
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["children", "content", "tip", "copiedTip", "tipPlacement", "style"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const [copied, setCopied] = (0, _react.useState)(false);
 
-  const childrenRef = _react.default.createRef();
+  const childrenRef = /*#__PURE__*/_react.default.createRef();
 
   const {
     width
@@ -74,12 +76,12 @@ function ClickToCopy(props) {
       }
     };
   });
-  return _react.default.createElement(_Tooltip.default, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, Object.assign({
     title: copied ? copiedTip : tip
   }, rest, {
     placement: tipPlacement,
     disableFocusListener: true
-  }), _react.default.createElement(Container, {
+  }), /*#__PURE__*/_react.default.createElement(Container, {
     ref: childrenRef,
     component: "span",
     style: Object.assign({
@@ -88,7 +90,7 @@ function ClickToCopy(props) {
       fontWeight: 'inherit'
     }, style),
     onClick: () => onCopy(childrenRef)
-  }, children || content, copied && width < 600 && _react.default.createElement(_Toast.default, {
+  }, children || content, copied && width < 600 && /*#__PURE__*/_react.default.createElement(_Toast.default, {
     variant: "success",
     message: copiedTip
   })));