@arcblock/ux 1.16.0 → 1.16.4

package/src/Dialog/confirm.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../Button';
+import Dialog from './dialog';
+
+// 注意排在 {...rest} 之后的 props 优先级更高
+export default function Confirm({
+  title,
+  children,
+  onConfirm,
+  onCancel,
+  showCancelButton,
+  confirmButton,
+  cancelButton,
+  PaperProps,
+  ...rest
+}) {
+  // 去除 dialog 默认的 300 最小高度
+  PaperProps.style = Object.assign(
+    {
+      minHeight: 0,
+    },
+    PaperProps.style
+  );
+
+  return (
+    <Dialog
+      title={title}
+      PaperProps={PaperProps}
+      {...rest}
+      onClose={() => onCancel()}
+      actions={
+        <>
+          {showCancelButton && (
+            <Button onClick={() => onCancel()} color="primary" {...cancelButton.props}>
+              {cancelButton.text}
+            </Button>
+          )}
+          <Button onClick={() => onConfirm()} color="primary" autoFocus {...confirmButton.props}>
+            {confirmButton.text}
+          </Button>
+        </>
+      }>
+      {children}
+    </Dialog>
+  );
+}
+
+Confirm.propTypes = {
+  title: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  showCancelButton: PropTypes.bool,
+  // 可以传入 {text: ..., props: ...}
+  confirmButton: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    props: PropTypes.object,
+  }),
+  cancelButton: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    props: PropTypes.object,
+  }),
+  PaperProps: PropTypes.object,
+};
+
+Confirm.defaultProps = {
+  showCancelButton: true,
+  confirmButton: {
+    text: 'Confirm',
+  },
+  cancelButton: {
+    text: 'Cancel',
+  },
+  PaperProps: {},
+};

package/src/Dialog/dialog.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import MuiDialog from '@material-ui/core/Dialog';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useTheme } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+
+/**
+ * Dialog
+ *
+ * - 固定尺寸或特殊的尺寸控制需求, 可使用 PaperProps.style (不再提供 width/height 等 props)
+ *   注意: 当设置明确的 width 时, 可能需要同时设置 maxWidth=false (mui dialog 默认 maxWidth=sm, 设置的 width 可能受限)
+ * - 添加默认最小尺寸 (300x300), 在需要 先展示 loading 再展示异步数据 的时候避免 loading 阶段窗口过小
+ */
+const Dialog = ({
+  children,
+  title,
+  prepend,
+  toolbar,
+  actions,
+  showCloseButton,
+  actionsPosition,
+  PaperProps,
+  ...rest
+}) => {
+  const theme = useTheme();
+  // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
+  const isMobile = useMediaQuery(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 = (
+    <IconButton className="ux-dialog_closeButton" onClick={e => handleOnClose(e, 'closeButton')}>
+      <CloseIcon />
+    </IconButton>
+  );
+
+  return (
+    <StyledMuiDialog
+      fullScreen={isMobile}
+      onClose={handleOnClose}
+      PaperProps={PaperProps}
+      {...rest}>
+      {showHeader && (
+        <Header className="ux-dialog_header" isMobile={isMobile}>
+          <div className="ux-dialog_left">
+            {showCloseButton && isMobile && closeButton}
+            {prepend && <div className="ux-dialog_prepend">{prepend}</div>}
+            {title && <h6 className="ux-dialog_title">{title}</h6>}
+          </div>
+
+          <div className="ux-dialog_right">
+            <div className="ux-dialog_toolbar">{toolbar}</div>
+            {showCloseButton && !isMobile && closeButton}
+          </div>
+        </Header>
+      )}
+      <MuiDialogContent>{children}</MuiDialogContent>
+      {actions && (
+        <DialogActions className={`ux-dialog_actions--${actionsPosition}`}>{actions}</DialogActions>
+      )}
+    </StyledMuiDialog>
+  );
+};
+
+Dialog.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.node,
+  // 在 title 之前追加内容, 比如返回按钮
+  prepend: PropTypes.node,
+  // 顶部工具栏, 在 close button 另一侧
+  toolbar: PropTypes.node,
+  actions: PropTypes.node,
+  showCloseButton: PropTypes.bool,
+  actionsPosition: PropTypes.oneOf(['left', 'center', 'right']),
+  PaperProps: PropTypes.object,
+};
+
+Dialog.defaultProps = {
+  showCloseButton: true,
+  title: '',
+  prepend: null,
+  toolbar: null,
+  actions: null,
+  actionsPosition: 'right',
+  PaperProps: {},
+};
+
+const StyledMuiDialog = styled(MuiDialog)`
+  .MuiDialog-paper {
+    border-radius: ${props => (props.fullScreen ? 0 : 12)}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;
+  }
+`;
+
+const Header = styled.div`
+  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 {
+    /* 使 closeButton 与 content 左/右对齐 */
+    ${props => (props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;')}
+  }
+`;
+
+export default Dialog;

package/src/Dialog/index.js

@@ -0,0 +1,2 @@
+export { default } from './dialog';
+export { default as Confirm } from './confirm';

package/src/DriftBot/index.js

@@ -0,0 +1,81 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { mergeProps } from '../Util';
+
+export default class DriftBot extends React.Component {
+  constructor(props) {
+    super(mergeProps(props, DriftBot, ['attributes']));
+
+    this.addMainScript = this.addMainScript.bind(this);
+    this.addIdentityVariables = this.addIdentityVariables.bind(this);
+    this.insertScript = this.insertScript.bind(this);
+  }
+
+  insertScript(scriptText) {
+    const script = document.createElement('script');
+    script.innerText = scriptText;
+    script.async = true;
+    document.body.appendChild(script);
+  }
+
+  addMainScript() {
+    const scriptText = `!function() {
+        var t = window.driftt = window.drift = window.driftt || [];
+        if (!t.init) {
+          if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
+          t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ],
+          t.factory = function(e) {
+            return function() {
+              var n = Array.prototype.slice.call(arguments);
+              return n.unshift(e), t.push(n), t;
+            };
+          }, t.methods.forEach(function(e) {
+            t[e] = t.factory(e);
+          }), t.load = function(t) {
+            var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
+            o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
+            var i = document.getElementsByTagName("script")[0];
+            i.parentNode.insertBefore(o, i);
+          };
+        }
+      }();
+      drift.SNIPPET_VERSION = '0.3.1';
+      drift.load('${this.props.appId}');`;
+
+    this.insertScript(scriptText);
+  }
+
+  addIdentityVariables() {
+    if (typeof this.props.userId !== 'undefined') {
+      const scriptText = `
+        var t = window.driftt = window.drift = window.driftt || [];
+        drift.identify('${this.props.userId}', ${JSON.stringify(this.props.attributes)})
+      `;
+      this.insertScript(scriptText);
+    }
+  }
+
+  componentDidMount() {
+    if (typeof window !== 'undefined') {
+      this.addMainScript();
+      this.addIdentityVariables();
+    }
+  }
+
+  render() {
+    return '';
+  }
+}
+
+DriftBot.propTypes = {
+  appId: PropTypes.string.isRequired,
+  userId: PropTypes.string,
+  attributes: PropTypes.object,
+};
+
+DriftBot.defaultProps = {
+  userId: '',
+  attributes: {},
+};