@arcblock/ux 1.16.60 → 1.16.63

package/lib/Blocklet/blocklet.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletStore;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Img = _interopRequireDefault(require("../Img"));
+
+const _excluded = ["title", "did", "description", "cover", "version", "button", "buttonText", "buttonDisabled", "buttonLoading", "onButtonClick", "onMainClick", "className"];
+
+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-atxvkd-0"
+})([".arcblock-blocklet__content{padding:24px 16px 0 16px;display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.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__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:24px;}.arcblock-blocklet__text{height:65px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:44px;word-break:break-all;}.arcblock-blocklet__describe{margin:0;color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__version{color:", ";}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
+
+function BlockletStore(_ref) {
+  let {
+    title,
+    did,
+    description,
+    cover,
+    version,
+    button,
+    buttonText,
+    buttonDisabled,
+    buttonLoading,
+    onButtonClick,
+    onMainClick,
+    className
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _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 container = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(Div, rest, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(className, " arcblock-blocklet__content"),
+    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: 64
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__info"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__text"
+  }, /*#__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)), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      marginTop: '12px',
+      flexFlow: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: _onButtonClick,
+    style: {
+      marginRight: '12px'
+    }
+  }, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "arcblock-blocklet__button--hover",
+    variant: "outlined",
+    color: "primary",
+    size: "small",
+    disabled: buttonDisabled || buttonLoading,
+    style: {
+      padding: '3px 6px',
+      fontSize: '14px',
+      minWidth: '92px',
+      textAlign: 'center'
+    }
+  }, buttonLoading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+    size: 15,
+    style: {
+      marginRight: 3,
+      color: 'inherit'
+    }
+  }), buttonText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__version"
+  }, version && "v".concat(version)))))));
+}
+
+BlockletStore.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  did: _propTypes.default.string,
+  description: _propTypes.default.string,
+  cover: _propTypes.default.string,
+  buttonText: _propTypes.default.string,
+  buttonDisabled: _propTypes.default.bool,
+  buttonLoading: _propTypes.default.bool,
+  button: _propTypes.default.element,
+  version: _propTypes.default.string,
+  onButtonClick: _propTypes.default.func,
+  onMainClick: _propTypes.default.func,
+  className: _propTypes.default.string
+};
+BlockletStore.defaultProps = {
+  description: null,
+  cover: null,
+  did: null,
+  buttonText: 'Install',
+  buttonDisabled: false,
+  buttonLoading: false,
+  button: null,
+  version: null,
+  onButtonClick: null,
+  onMainClick: null,
+  className: null
+};

package/lib/Blocklet/index.js

@@ -3,259 +3,19 @@
 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;
+Object.defineProperty(exports, "ActionButton", {
+  enumerable: true,
+  get: function get() {
+    return _utils.default;
   }
+});
+exports.default = void 0;
 
-  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
+var _utils = _interopRequireDefault(require("./utils"));
 
-  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size; // eslint-disable-next-line no-nested-ternary
+var _blocklet = _interopRequireDefault(require("./blocklet"));
 
-  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)))));
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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
-};
+var _default = _blocklet.default;
+exports.default = _default;

package/lib/Blocklet/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ActionButton = _styledComponents.default.div.withConfig({
+  displayName: "utils__ActionButton",
+  componentId: "sc-1po1ir-0"
+})(["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%;border-radius:2px;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);
+
+var _default = ActionButton;
+exports.default = _default;