dtable-ui-component 4.3.9-alpha1 → 4.3.9

package/lib/toaster/alert.js

@@ -1,43 +1,122 @@
 import React from 'react';
+import { css } from 'glamor';
 class Alert extends React.PureComponent {
-  getIconClass(intent) {
+  constructor(props) {
+    super(props);
+    this.containerStyle = css({
+      borderRadius: '3px',
+      backgroundColor: '#fff',
+      padding: '10px 16px',
+      display: 'flex',
+      boxSizing: 'border-box',
+      boxShadow: 'rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 8px 10px -4px',
+      justifyContent: 'space-between',
+      flexDirection: 'row'
+    });
+    this.containerBorderSuccess = css({
+      borderLeft: '3px solid rgb(71, 184, 129)'
+    });
+    this.containerBorderWarn = css({
+      borderLeft: '3px solid rgb(217, 130, 43)'
+    });
+    this.containerBorderDanger = css({
+      borderLeft: '3px solid rgb(236, 76, 71)'
+    });
+    this.containerBorderNotify = css({
+      borderLeft: '3px solid rgb(16, 112, 202)'
+    });
+    this.toastTextTitle = css({
+      fontWeight: '600',
+      fontSize: '14px',
+      color: '#435a6f',
+      margin: '0'
+    });
+    this.toastTextChild = css({
+      fontSize: '14px',
+      color: '#999',
+      margin: '0'
+    });
+    this.toastClose = css({
+      marginLeft: '15px',
+      height: '24px',
+      width: '24px',
+      lineHeight: '22px',
+      fontWeight: '700',
+      textAlign: 'center',
+      fontSize: '20px',
+      color: '#000',
+      cursor: 'pointer',
+      opacity: '0.5',
+      ':hover': {
+        opacity: 1
+      }
+    });
+    this.toastIcon = css({
+      marginRight: '10px',
+      width: '14px',
+      height: '20px',
+      lineHeight: '20px'
+    });
+  }
+  getContainerStyle(intent) {
     switch (intent) {
       case 'success':
-        return 'dtable-font dtable-icon-check-circle';
+        return {
+          borderStyle: this.containerBorderSuccess,
+          iconColor: css({
+            color: 'rgb(71, 184, 129)'
+          }),
+          iconClass: 'dtable-font dtable-icon-check-circle'
+        };
       case 'warning':
-        return 'dtable-font dtable-icon-exclamation-triangle';
+        return {
+          borderStyle: this.containerBorderWarn,
+          iconColor: css({
+            color: 'rgb(217, 130, 43)'
+          }),
+          iconClass: 'dtable-font dtable-icon-exclamation-triangle'
+        };
       case 'none':
-        return 'dtable-font dtable-icon-exclamation-circle';
+        return {
+          borderStyle: this.containerBorderNotify,
+          iconColor: css({
+            color: 'rgb(16, 112, 202)'
+          }),
+          iconClass: 'dtable-font dtable-icon-exclamation-circle'
+        };
       case 'danger':
-        return 'dtable-font dtable-icon-exclamation-circle';
+        return {
+          borderStyle: this.containerBorderDanger,
+          iconColor: css({
+            color: 'rgb(236, 76, 71)'
+          }),
+          iconClass: 'dtable-font dtable-icon-exclamation-circle'
+        };
       default:
-        return 'dtable-font dtable-icon-check-circle';
+        return {
+          borderStyle: this.containerBorderSuccess,
+          iconColor: css({
+            color: 'rgb(71, 184, 129)'
+          }),
+          iconClass: 'dtable-font dtable-icon-check-circle'
+        };
     }
   }
   render() {
-    const {
-      intent,
-      title,
-      children,
-      isRemovable,
-      onRemove
-    } = this.props;
-    const iconClass = this.getIconClass(intent);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "dtable-toast-alert-container ".concat(intent || 'success')
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "toast-alert-icon"
-    }, /*#__PURE__*/React.createElement("i", {
-      className: iconClass
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "toast-text-container"
+    const toastStyle = this.getContainerStyle(this.props.intent);
+    return /*#__PURE__*/React.createElement("div", css(toastStyle.borderStyle, this.containerStyle), /*#__PURE__*/React.createElement("div", {
+      className: this.toastIcon
+    }, /*#__PURE__*/React.createElement("i", Object.assign({
+      className: toastStyle.iconClass
+    }, toastStyle.iconColor))), /*#__PURE__*/React.createElement("div", {
+      className: this.toastTextContainer
     }, /*#__PURE__*/React.createElement("p", {
-      className: "toast-text-title"
-    }, title), children ? /*#__PURE__*/React.createElement("p", {
-      className: "toast-text-child"
-    }, children) : null), isRemovable && /*#__PURE__*/React.createElement("div", {
-      onClick: onRemove,
-      className: "toast-close"
+      className: this.toastTextTitle
+    }, this.props.title), this.props.children ? /*#__PURE__*/React.createElement("p", {
+      className: this.toastTextChild
+    }, this.props.children) : null), this.props.isRemoveable && /*#__PURE__*/React.createElement("div", {
+      onClick: this.props.onRemove,
+      className: this.toastClose
     }, /*#__PURE__*/React.createElement("span", null, "\xD7")));
   }
 }

package/lib/toaster/toast.js

@@ -1,7 +1,45 @@
 import React from 'react';
+import { css } from 'glamor';
 import Transition from 'react-transition-group/Transition';
 import Alert from './alert';
+const animationEasing = {
+  deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+  acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)',
+  spring: 'cubic-bezier(0.175, 0.885, 0.320, 1.175)'
+};
 const ANIMATION_DURATION = 240;
+const openAnimation = css.keyframes('openAnimation', {
+  from: {
+    opacity: 0,
+    transform: 'translateY(-120%)'
+  },
+  to: {
+    transform: 'translateY(0)'
+  }
+});
+const closeAnimation = css.keyframes('closeAnimation', {
+  from: {
+    transform: 'scale(1)',
+    opacity: 1
+  },
+  to: {
+    transform: 'scale(0.9)',
+    opacity: 0
+  }
+});
+const animationStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  height: 0,
+  transition: "all ".concat(ANIMATION_DURATION, "ms ").concat(animationEasing.deceleration),
+  '&[data-state="entering"], &[data-state="entered"]': {
+    animation: "".concat(openAnimation, " ").concat(ANIMATION_DURATION, "ms ").concat(animationEasing.spring, " both")
+  },
+  '&[data-state="exiting"]': {
+    animation: "".concat(closeAnimation, " 120ms ").concat(animationEasing.acceleration, " both")
+  }
+});
 export default class Toast extends React.PureComponent {
   constructor() {
     super(...arguments);
@@ -71,7 +109,7 @@ export default class Toast extends React.PureComponent {
       onExited: this.props.onRemove
     }, state => /*#__PURE__*/React.createElement("div", {
       "data-state": state,
-      className: "dtable-toast-container ".concat(state),
+      className: animationStyles,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       style: {
@@ -88,7 +126,7 @@ export default class Toast extends React.PureComponent {
       intent: this.props.intent,
       title: this.props.title,
       children: this.props.children || '',
-      isRemovable: this.props.hasCloseButton,
+      isRemoveable: this.props.hasCloseButton,
       onRemove: event => this.close(event)
     }))));
   }

package/lib/toaster/toastManager.js

@@ -1,5 +1,15 @@
 import React from 'react';
+import { css } from 'glamor';
 import Toast from './toast';
+const wrapperClass = css({
+  maxWidth: 560,
+  margin: '0 auto',
+  top: 0,
+  left: 0,
+  right: 0,
+  position: 'fixed',
+  zIndex: 999999
+});
 const hasCustomId = settings => Object.hasOwnProperty.call(settings, 'id');
 export default class ToastManager extends React.PureComponent {
   constructor(props, context) {
@@ -83,8 +93,8 @@ export default class ToastManager extends React.PureComponent {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "dtable-toast-manager"
+    return /*#__PURE__*/React.createElement("span", {
+      className: wrapperClass
     }, this.state.toasts.map(_ref => {
       let {
         id,

package/lib/toaster/toaster.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ToastManager from './toastManager';
-import './index.css';
 const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
 
 /**

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "dtable-ui-component",
-  "version": "4.3.9-alpha1",
+  "version": "4.3.9",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",
     "@seafile/seafile-calendar": "0.0.24",
-    "@seafile/seafile-editor": "0.3.146",
+    "@seafile/seafile-editor": "0.3.145",
     "antd-mobile": "2.3.1",
     "bail": "1.0.5",
     "classnames": "^2.3.2",
     "dayjs": "1.10.7",
     "deepmerge": "^2.1.0",
     "dtable-utils": "~4.3.5",
+    "glamor": "^2.20.40",
     "hast-util-sanitize": "^1.1.2",
     "hast-util-to-html": "3.1.0",
     "is-hotkey": "0.2.0",

package/lib/toaster/index.css

@@ -1,116 +0,0 @@
-.dtable-toast-manager {
-  position: fixed;
-  margin: 0 auto;
-  max-width: 560;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999999;
-}
-
-.dtable-toast-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 0;
-  transition: all 240ms cubic-bezier(0.0, 0.0, 0.2, 1);
-}
-
-@keyframes openAnimation {
-  from {
-    opacity: 0;
-    transform: translateY(-120%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes closeAnimation {
-  from {
-    transform: scale(1);
-    opacity: 1;
-  }
-  to {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
-
-.dtable-toast-container.entering,
-.dtable-toast-container.entered {
-  animation: openAnimation 240ms cubic-bezier(0.175, 0.885, 0.320, 1.175) both;
-}
-
-.dtable-toast-container.exiting {
-  animation: closeAnimation 120ms cubic-bezier(0.4, 0.0, 1, 1) both;
-}
-
-.dtable-toast-alert-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  border-radius: 3px;
-  box-shadow: rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 8px 10px -4px;
-  padding: 10px 16px;
-  background-color: #fff;
-}
-
-.dtable-toast-alert-container.success {
-  border-left: 3px solid rgb(71, 184, 129);
-  color: rgb(71, 184, 129);
-}
-
-.dtable-toast-alert-container.warning {
-  border-left: 3px solid rgb(217, 130, 43);
-  color: rgb(217, 130, 43);
-}
-
-.dtable-toast-alert-container.none {
-  border-left: 3px solid rgb(16, 112, 202);
-  color: rgb(16, 112, 202);
-}
-
-.dtable-toast-alert-container.danger {
-  border-left: 3px solid rgb(236, 76, 71);
-  color: rgb(236, 76, 71);
-}
-
-.dtable-toast-alert-container .toast-alert-icon {
-  margin-right: 10px;
-  width: 14px;
-  height: 20px;
-  line-height: 20px;
-}
-
-.dtable-toast-alert-container .toast-text-title {
-  margin: 0;
-  font-weight: 600;
-  font-size: 14px;
-  color: #435a6f;
-}
-
-.dtable-toast-alert-container .toast-text-child {
-  font-size: 14px;
-  color: #999;
-  margin: 0;
-}
-
-.dtable-toast-alert-container .toast-close {
-  text-align: center;
-  cursor: pointer;
-  height: 24px;
-  width: 24px;
-  margin-left: 15px;
-  line-height: 22px;
-  font-weight: 700;
-  font-size: 20px;
-  color: #000;
-  opacity: 0.5;
-}
-
-.dtable-toast-alert-container .toast-close:hover { 
-  opacity: 1;
-}