@kdcloudjs/kdesign 1.0.2

package/es/notification/content.js

@@ -0,0 +1,132 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext } from 'react';
+import { ConfigContext } from '../config-provider';
+import Icon from '../icon';
+import classNames from 'classnames';
+
+var Content = function Content(args) {
+  var _context;
+
+  var title = args.title,
+      footer = args.footer,
+      content = args.content,
+      closable = args.closable,
+      suffixCls = args.suffixCls,
+      contentClose = args.contentClose,
+      showIcon = args.showIcon,
+      type = args.type,
+      icon = args.icon,
+      closeNode = args.closeNode;
+
+  var _useContext = useContext(ConfigContext),
+      prefixCls = _useContext.prefixCls;
+
+  var classPrefix = _concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, suffixCls, "-content");
+
+  var iconMap = {
+    info: /*#__PURE__*/React.createElement(Icon, {
+      type: "warning-solid"
+    }),
+    primary: /*#__PURE__*/React.createElement(Icon, {
+      type: "warning-solid"
+    })
+  };
+
+  var renderIcon = function renderIcon() {
+    if (icon) return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(classPrefix, "-title-left-icon"))
+    }, icon);
+    if (!showIcon) return null;
+    return iconMap[type] ? /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(classPrefix, "-title-left-icon"))
+    }, iconMap[type]) : null;
+  };
+
+  var renderCloseIcon = function renderCloseIcon() {
+    if (!closable) return null;
+
+    if (closeNode) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-title-close"),
+        onClick: contentClose
+      }, closeNode);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-title-close"),
+      onClick: contentClose
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "close"
+    }));
+  };
+
+  var getTitleElement = function getTitleElement() {
+    if (typeof title === null) {
+      return null;
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(title)) {
+      return title;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(classPrefix, "-title"))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(classPrefix, "-title-left"))
+    }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(classPrefix, "-title-left-text"))
+    }, title)), renderCloseIcon());
+  };
+
+  var getFooterElement = function getFooterElement() {
+    if ( /*#__PURE__*/React.isValidElement(footer)) {
+      return footer;
+    }
+
+    if (Array.isArray(footer)) {
+      var arr = footer;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(classPrefix, "-footer"))
+      }, _mapInstanceProperty(arr).call(arr, function (_ref) {
+        var name = _ref.name,
+            _onClick = _ref.onClick;
+
+        if (name) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: name,
+            onClick: function onClick(e) {
+              if (e) {
+                e.stopPropagation();
+              }
+
+              _onClick && _onClick();
+            }
+          }, /*#__PURE__*/React.createElement("div", null, name));
+        }
+
+        return null;
+      }));
+    }
+
+    return null;
+  };
+
+  var getMainElement = function getMainElement() {
+    if (typeof content === 'string') {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(classPrefix, "-main"))
+      }, content);
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(content)) {
+      return content;
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getTitleElement(), getMainElement(), getFooterElement());
+};
+
+export default Content;

package/es/notification/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NotificationProps } from '../notification-base/notification';
+import { NotificationType } from '../notification-base/notice';
+export declare type footerArrayType = {
+    name: string;
+    onClick?: () => void;
+};
+export declare type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export declare type titleType = string | React.ReactNode | undefined;
+export declare type configType = string | React.ReactNode;
+export declare type footerType = footerArrayType[] | React.ReactNode | undefined;
+export interface ContentProps {
+    closable?: boolean;
+    content: configType;
+    title?: titleType;
+    footer?: footerType;
+    suffixCls: string;
+    contentClose: () => void;
+    type: NotificationType;
+    icon?: configType;
+    closeNode?: configType;
+    showIcon?: boolean;
+}
+export interface ArgsProps extends Partial<NotificationProps> {
+    content: configType;
+    title?: titleType;
+    footer?: footerType;
+    placement?: NotificationPlacement;
+    icon?: configType;
+    closeNode?: configType;
+    showIcon?: boolean;
+}
+declare const Notification: any;
+export default Notification;

package/es/notification/index.js

@@ -0,0 +1,149 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import React from 'react';
+import NotificationApi from '../notification-base';
+import Content from './content';
+var defaultPlacement = 'bottomRight';
+var defaultDuration = 0;
+var defaultOffset = '40px';
+var defaultStyle = {};
+var defaultClosable = true;
+var defaultShowIcon = false;
+var defaultSuffixCls = 'notice';
+var defaultType = 'primary';
+var defaultTitle = '系统提示'; // 'notice'
+
+var notificationElements = {};
+var notificationKey = 1;
+
+var getNotificationProps = function getNotificationProps(args) {
+  var _args$placement = args.placement,
+      placement = _args$placement === void 0 ? defaultPlacement : _args$placement,
+      _args$duration = args.duration,
+      duration = _args$duration === void 0 ? defaultDuration : _args$duration,
+      key = args.key,
+      className = args.className,
+      _args$style = args.style,
+      style = _args$style === void 0 ? defaultStyle : _args$style,
+      _args$type = args.type,
+      type = _args$type === void 0 ? defaultType : _args$type,
+      onClose = args.onClose,
+      _args$closable = args.closable,
+      closable = _args$closable === void 0 ? defaultClosable : _args$closable,
+      _args$title = args.title,
+      title = _args$title === void 0 ? defaultTitle : _args$title,
+      footer = args.footer,
+      content = args.content,
+      icon = args.icon,
+      closeNode = args.closeNode,
+      _args$showIcon = args.showIcon,
+      showIcon = _args$showIcon === void 0 ? defaultShowIcon : _args$showIcon;
+
+  var contentClose = function contentClose() {
+    onClose && onClose(key);
+    NotificationApi.destroy(key);
+  };
+
+  var contentProps = {
+    icon: icon,
+    closeNode: closeNode,
+    type: type,
+    title: title,
+    footer: footer,
+    content: content,
+    closable: closable,
+    showIcon: showIcon,
+    suffixCls: defaultSuffixCls,
+    contentClose: contentClose
+  };
+  return {
+    duration: duration,
+    placement: placement,
+    key: key,
+    className: className,
+    style: style,
+    content: /*#__PURE__*/React.createElement(Content, _extends({}, contentProps)),
+    type: type,
+    closable: false,
+    onClose: onClose,
+    suffixCls: defaultSuffixCls
+  };
+};
+
+var setStyleByPlacement = function setStyleByPlacement(placement, el) {
+  switch (placement) {
+    case 'topLeft':
+      el.style.left = defaultOffset;
+      el.style.top = defaultOffset;
+      el.style.bottom = 'auto';
+      break;
+
+    case 'topRight':
+      el.style.right = defaultOffset;
+      el.style.top = defaultOffset;
+      el.style.bottom = 'auto';
+      break;
+
+    case 'bottomLeft':
+      el.style.left = defaultOffset;
+      el.style.top = 'auto';
+      el.style.bottom = defaultOffset;
+      break;
+
+    default:
+      el.style.right = defaultOffset;
+      el.style.top = 'auto';
+      el.style.bottom = defaultOffset;
+      break;
+  }
+};
+
+var getNotificationHTMLElement = function getNotificationHTMLElement(placement) {
+  var prefixCls = 'kd';
+  var suffix = "".concat(prefixCls, "-notice");
+  var htmlElement = document.querySelector("#".concat(suffix, "-").concat(placement));
+
+  if (!htmlElement) {
+    htmlElement = document.createElement('div');
+    htmlElement.id = "".concat(suffix, "-").concat(placement);
+    htmlElement.className = "".concat(suffix, "-box-").concat(placement);
+    setStyleByPlacement(placement, htmlElement);
+    document.body.appendChild(htmlElement);
+  }
+
+  return htmlElement;
+};
+
+var notice = function notice(args) {
+  var key = args.key || notificationKey++;
+  var props = getNotificationProps(_extends(_extends({}, args), {
+    key: key
+  }));
+  var placement = props.placement;
+  var el;
+
+  if (notificationElements[placement]) {
+    el = notificationElements[placement];
+  } else {
+    el = getNotificationHTMLElement(placement);
+  }
+
+  NotificationApi.add(props, el);
+};
+
+var Notification = {
+  open: notice,
+  info: function info(args) {
+    return notice(_extends(_extends({}, args), {
+      type: 'info'
+    }));
+  },
+  primary: function primary(args) {
+    return notice(_extends(_extends({}, args), {
+      type: 'primary'
+    }));
+  },
+  destroy: function destroy(key) {
+    NotificationApi.destroy(key);
+  }
+};
+export default Notification;

package/es/notification/style/css.js

@@ -0,0 +1,2 @@
+import '../../style/index.css';
+import './index.css';

package/es/notification/style/index.css

@@ -0,0 +1,236 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+.kd-notice-box-topRight,
+.kd-notice-box-topLeft,
+.kd-notice-box-bottomLeft,
+.kd-notice-box-bottomRight {
+  position: fixed;
+  z-index: 9999;
+}
+.kd-notice {
+  position: relative;
+  display: block;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 320px;
+  margin: 0 auto 16px;
+  -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  background-color: #fff;
+  -webkit-animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+}
+.kd-notice-content {
+  width: 100%;
+}
+.kd-notice-content-title {
+  height: 40px;
+  line-height: 40px;
+  white-space: nowrap;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 14px;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.kd-notice-content-title-left {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  margin-right: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-notice-content-title-left-icon {
+  margin-right: 5px;
+  font-size: 17px;
+}
+.kd-notice-content-title-left-text {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kd-notice-content-title-close {
+  cursor: pointer;
+}
+.kd-notice-content-main {
+  height: 46px;
+  padding: 10px 20px;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.kd-notice-content-footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 20px 15px 20px;
+  font-size: 12px;
+  color: #0e5fd8;
+  cursor: pointer;
+}
+.kd-notice-content-footer > div {
+  margin-right: 10px;
+}
+.kd-notice-content-footer > div:hover {
+  color: #3987ed;
+}
+.kd-notice-info .kd-notice-content-title {
+  color: #212121;
+  background: #fff;
+}
+.kd-notice-info .kd-notice-content-title-left-icon {
+  color: #5582f3;
+}
+.kd-notice-info .kd-notice-content-title-close {
+  color: #5582f3;
+}
+.kd-notice-info .kd-notice-content-title-close:hover {
+  color: #85b8ff;
+}
+.kd-notice-primary .kd-notice-content-title {
+  color: #fff;
+  background: #5582f3;
+}
+.kd-notice-primary .kd-notice-content-title-close {
+  color: #fff;
+}
+.kd-notice-primary .kd-notice-content-title-close:hover {
+  color: #85b8ff;
+}
+.kd-notice-leave {
+  -webkit-animation: kdNoticeLeaveEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdNoticeLeaveEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+}
+.kd-notice-leave-after {
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  -webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+  transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-notice-leave-after.kd-notice-success,
+.kd-notice-leave-after.kd-notice-warning,
+.kd-notice-leave-after.kd-notice-error {
+  -webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+  transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+  border: none;
+}
+.kd-notice-leave-after div,
+.kd-notice-leave-after i {
+  -webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+  transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+  height: 0;
+  font-size: 0;
+}

package/es/notification/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/notification/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';