dtable-ui-component 4.3.9 → 4.3.10-alpha2

package/lib/CTimeFormatter/index.js

@@ -15,7 +15,7 @@ class CTimeFormatter extends React.Component {
       containerClassName
     } = this.props;
     let classname = classnames('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
-    if (date !== '') {
+    if (date) {
       date = this.formatDate(date);
     }
     return /*#__PURE__*/React.createElement("div", {

package/lib/DateEditor/index.js

@@ -4,6 +4,8 @@ import dayjs from 'dayjs';
 import { getDateDisplayString } from 'dtable-utils';
 import PCDateEditorPopover from './pc-date-editor-popover';
 import MBDateEditorPopover from './mb-date-editor-popover';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en-gb';
 import './index.css';
 class DateEditor extends React.Component {
   constructor(props) {
@@ -84,6 +86,7 @@ class DateEditor extends React.Component {
       lang,
       column
     } = this.props;
+    console.log('date editor 98', lang);
     let {
       newValue,
       isPopoverShow,

package/lib/DateEditor/pc-date-editor-popover.js

@@ -50,6 +50,7 @@ class PCDateEditorPopover extends React.Component {
         lang
       } = this.props;
       let defaultValue = dayjs().clone();
+      console.log('pc date editor', 67, getLocale('Please_input'));
       return /*#__PURE__*/React.createElement(Calendar, {
         locale: initDateEditorLanguage(lang),
         style: {

package/lib/MTimeFormatter/index.js

@@ -15,7 +15,7 @@ class MTimeFormatter extends React.Component {
       containerClassName
     } = this.props;
     let classname = classnames('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
-    if (date !== '') {
+    if (date) {
       date = this.formatDate(date);
     }
     return /*#__PURE__*/React.createElement("div", {

package/lib/common/ClickOutside.js

@@ -8,7 +8,7 @@ export default class ClickOutside extends React.Component {
         this.isClickedInside = false;
         return;
       }
-      this.props.onClickOutside(e);
+      this.props.onClickOutside && this.props.onClickOutside(e);
     };
     this.handleMouseDown = () => {
       this.isClickedInside = true;

package/lib/lang/index.js

@@ -14,11 +14,13 @@ export function setLocale(args) {
   let lang = typeof args === 'string' ? args : LANGUAGE;
   LANGUAGE_MAP = langData[lang] || langData[LANGUAGE];
 }
+console.log(22, LANGUAGE_MAP);
 export function getLocale(key, def) {
   if (!key) return def;
   if (!LANGUAGE_MAP[key]) {
     return def || key;
   }
+  console.log(LANGUAGE_MAP[key]);
   return LANGUAGE_MAP[key];
 }
 export function substitute(str, obj) {

package/lib/toaster/alert.js

@@ -1,122 +1,43 @@
 import React from 'react';
-import { css } from 'glamor';
 class Alert extends React.PureComponent {
-  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) {
+  getIconClass(intent) {
     switch (intent) {
       case 'success':
-        return {
-          borderStyle: this.containerBorderSuccess,
-          iconColor: css({
-            color: 'rgb(71, 184, 129)'
-          }),
-          iconClass: 'dtable-font dtable-icon-check-circle'
-        };
+        return 'dtable-font dtable-icon-check-circle';
       case 'warning':
-        return {
-          borderStyle: this.containerBorderWarn,
-          iconColor: css({
-            color: 'rgb(217, 130, 43)'
-          }),
-          iconClass: 'dtable-font dtable-icon-exclamation-triangle'
-        };
+        return 'dtable-font dtable-icon-exclamation-triangle';
       case 'none':
-        return {
-          borderStyle: this.containerBorderNotify,
-          iconColor: css({
-            color: 'rgb(16, 112, 202)'
-          }),
-          iconClass: 'dtable-font dtable-icon-exclamation-circle'
-        };
+        return 'dtable-font dtable-icon-exclamation-circle';
       case 'danger':
-        return {
-          borderStyle: this.containerBorderDanger,
-          iconColor: css({
-            color: 'rgb(236, 76, 71)'
-          }),
-          iconClass: 'dtable-font dtable-icon-exclamation-circle'
-        };
+        return 'dtable-font dtable-icon-exclamation-circle';
       default:
-        return {
-          borderStyle: this.containerBorderSuccess,
-          iconColor: css({
-            color: 'rgb(71, 184, 129)'
-          }),
-          iconClass: 'dtable-font dtable-icon-check-circle'
-        };
+        return 'dtable-font dtable-icon-check-circle';
     }
   }
   render() {
-    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
+    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"
     }, /*#__PURE__*/React.createElement("p", {
-      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
+      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"
     }, /*#__PURE__*/React.createElement("span", null, "\xD7")));
   }
 }

package/lib/toaster/index.css

@@ -0,0 +1,116 @@
+.dtable-toast-manager {
+  position: fixed;
+  margin: 0 auto;
+  max-width: 560px;
+  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;
+}

package/lib/toaster/toast.js

@@ -1,45 +1,7 @@
 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);
@@ -109,7 +71,7 @@ export default class Toast extends React.PureComponent {
       onExited: this.props.onRemove
     }, state => /*#__PURE__*/React.createElement("div", {
       "data-state": state,
-      className: animationStyles,
+      className: "dtable-toast-container ".concat(state),
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       style: {
@@ -126,7 +88,7 @@ export default class Toast extends React.PureComponent {
       intent: this.props.intent,
       title: this.props.title,
       children: this.props.children || '',
-      isRemoveable: this.props.hasCloseButton,
+      isRemovable: this.props.hasCloseButton,
       onRemove: event => this.close(event)
     }))));
   }

package/lib/toaster/toastManager.js

@@ -1,15 +1,5 @@
 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) {
@@ -93,8 +83,8 @@ export default class ToastManager extends React.PureComponent {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement("span", {
-      className: wrapperClass
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dtable-toast-manager"
     }, this.state.toasts.map(_ref => {
       let {
         id,

package/lib/toaster/toaster.js

@@ -1,6 +1,7 @@
 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,18 +1,17 @@
 {
   "name": "dtable-ui-component",
-  "version": "4.3.9",
+  "version": "4.3.10-alpha2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",
     "@seafile/seafile-calendar": "0.0.24",
-    "@seafile/seafile-editor": "0.3.145",
+    "@seafile/seafile-editor": "0.3.146",
     "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",