@arcblock/ux 1.14.44 → 1.14.48

package/lib/Dialog/confirm.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Confirm;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _dialog = _interopRequireDefault(require("./dialog"));
+
+const _excluded = ["title", "children", "onConfirm", "onCancel", "showCancelButton", "confirmButton", "cancelButton", "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; }
+
+// 注意排在 {...rest} 之后的 props 优先级更高
+function Confirm(_ref) {
+  let {
+    title,
+    children,
+    onConfirm,
+    onCancel,
+    showCancelButton,
+    confirmButton,
+    cancelButton,
+    PaperProps
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  // 去除 dialog 默认的 300 最小高度
+  PaperProps.style = Object.assign({
+    minHeight: 0
+  }, PaperProps.style);
+  return /*#__PURE__*/_react.default.createElement(_dialog.default, Object.assign({
+    title: title,
+    PaperProps: PaperProps
+  }, rest, {
+    onClose: () => onCancel(),
+    actions: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showCancelButton && /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({
+      onClick: () => onCancel(),
+      color: "primary"
+    }, cancelButton.props), cancelButton.text), /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({
+      onClick: () => onConfirm(),
+      color: "primary",
+      autoFocus: true
+    }, confirmButton.props), confirmButton.text))
+  }), children);
+}
+
+Confirm.propTypes = {
+  title: _propTypes.default.node.isRequired,
+  children: _propTypes.default.node.isRequired,
+  onConfirm: _propTypes.default.func.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  showCancelButton: _propTypes.default.bool,
+  // 可以传入 {text: ..., props: ...}
+  confirmButton: _propTypes.default.shape({
+    text: _propTypes.default.string.isRequired,
+    props: _propTypes.default.object
+  }),
+  cancelButton: _propTypes.default.shape({
+    text: _propTypes.default.string.isRequired,
+    props: _propTypes.default.object
+  }),
+  PaperProps: _propTypes.default.object
+};
+Confirm.defaultProps = {
+  showCancelButton: true,
+  confirmButton: {
+    text: 'Confirm'
+  },
+  cancelButton: {
+    text: 'Cancel'
+  },
+  PaperProps: {}
+};

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{border-radius:", "px;}.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 ? 0 : 12);
+
+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, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dialog.default;
+  }
+});
+Object.defineProperty(exports, "Confirm", {
+  enumerable: true,
+  get: function get() {
+    return _confirm.default;
+  }
+});
+
+var _dialog = _interopRequireDefault(require("./dialog"));
+
+var _confirm = _interopRequireDefault(require("./confirm"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Screenshot/index.js

@@ -174,7 +174,7 @@ const Screenshot = props => {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Screenshot__Div",
   componentId: "sc-el6nkq-0"
-})(["@media (max-width:", "px){transform-origin:0 0;transform:scale(", ");}.device-content video,.device-content img{border-radius:", "px;background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;width:100.1%;height:100.1%;}"], props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
+})(["@media (max-width:", "px){transform-origin:0 0;transform:scale(", ");}.device-content{overflow:hidden;}.device-content video,.device-content img{border-radius:", "px;background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;width:100.1%;height:100.1%;}"], props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
 
 Screenshot.propTypes = {
   type: _propTypes.default.oneOf(Object.keys(types)),

package/lib/Spinner/index.js

@@ -7,6 +7,8 @@ exports.default = Spinner;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _icons = require("@arcblock/icons");
@@ -16,15 +18,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * Spinner
  */
-function Spinner() {
-  return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_icons.SpinnerOuter, {
+function Spinner(props) {
+  return /*#__PURE__*/_react.default.createElement(Root, props, /*#__PURE__*/_react.default.createElement(_icons.SpinnerOuter, {
     className: "scanned-spinner_outer"
   }), /*#__PURE__*/_react.default.createElement(_icons.SpinnerInner, {
     className: "scanned-spinner_inner"
   }));
 }
 
+Spinner.propTypes = {
+  size: _propTypes.default.array,
+  duration: _propTypes.default.array
+};
+Spinner.defaultProps = {
+  // 外圈/内圈 尺寸
+  size: [56, 32],
+  // 外圈/内圈 动画 duration
+  duration: [1, 1.6]
+};
+
 const Root = _styledComponents.default.div.withConfig({
   displayName: "Spinner__Root",
   componentId: "sc-r57khp-0"
-})(["display:inline-block;position:relative;width:56px;height:56px;.scanned-spinner_outer{width:100%;height:100%;animation:rota 0.6s linear infinite;}.scanned-spinner_inner{position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;animation:rota 1.2s linear infinite;}@keyframes rota{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"]);
+})(["display:inline-block;position:relative;width:", "px;height:", "px;.scanned-spinner_outer{width:100%;height:100%;animation:rota ", "s linear infinite;}.scanned-spinner_inner{position:absolute;top:50%;left:50%;width:", "px;height:", "px;margin:", ";animation:rota ", "s linear infinite;}@keyframes rota{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"], props => props.size[0], props => props.size[0], props => props.duration[0], props => props.size[1], props => props.size[1], props => "-".concat(props.size[1] / 2, "px 0 0 -").concat(props.size[1] / 2, "px"), props => props.duration[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.14.44",
+  "version": "1.14.48",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "0180a8731c8f9387543860013aff7596e643eb80",
+  "gitHead": "81301da8867ca981dbf7b6d8c422b7aba4e1ca7b",
   "dependencies": {
-    "@arcblock/icons": "^1.14.44",
-    "@arcblock/react-hooks": "^1.14.44",
+    "@arcblock/icons": "^1.14.48",
+    "@arcblock/react-hooks": "^1.14.48",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "4.5.1",