✨[Notification]新增消息通知组件

Author: liyuan-meng

src/components/index.js

@@ -75,6 +75,8 @@ export { default as Message } from './message';
 
 export { default as Modal } from './modal';
 
+export { default as Notification } from './notification';
+
 export { default as PageHeader } from './pageHeader';
 
 export { default as Pagination } from './pagination';

src/components/notification/constant.js

@@ -5,34 +5,18 @@ desc: 抽屉组件基础用法
 ---
 
 ```jsx
-import React from 'react';
-import { Notification, Button, Message } from 'cloud-react';
-
-const placementList = [
-  { label: '左上', value: 'top-left' },
-  { label: '右上', value: 'top-right' },
-  { label: '左下', value: 'bottom-left' },
-  { label: '右下', value: 'bottom-right' },
-];
+import React, { useState } from 'react';
+import { Notification, Button } from 'cloud-react';
 
 export default function NotificationDemo() {
   const open = () => {
     Notification.open({
       title: '这里是标题',
-      content: '消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息',
-      showIcon: true,
-      showCancelBtn: true,
-      showConfirmBtn: true,
-      // showDetailBtn: true,
-      // duration: 3000,
-      onConfirm: id => {
-        Message.info('点击确定关闭了！')
-        Notification.close(id);
-      },
+      content: '消息通知内容消息通知内容消息',
     });
   }
   return (
-    <Button onClick={open}>打开消息通知</Button>
+    <Button onClick={open}>打开消息</Button>
   );
 }
 ```

src/components/notification/demos/basic.md

@@ -0,0 +1,36 @@
+---
+order: 1
+title: Drawer
+desc: 抽屉组件基础用法
+---
+
+```jsx
+import React, { useState } from 'react';
+import { Notification, Button, Message, Icon, Radio, Checkbox } from 'cloud-react';
+
+export default function NotificationDemo() {
+  const open = (props = {}) => {
+    Notification.open({
+      title: '这里是标题',
+      content: '消息通知内容消息通知内容消息',
+      showIcon: true,
+      duration: 0,
+      ...props
+    });
+  }
+  return (
+    <div style={{ display: 'flex', gap: 20, marginBottom: 20, marginTop: 15 }}>
+      <Button
+        onClick={() => open({
+          style: {
+            border: '1px solid #496BF5',
+            background: '#F5F7FF'
+          }
+        })}>
+        自定义边框
+      </Button>
+      <Button onClick={() => open({ isLightTheme: true, style: { background: '#496BF5' } })}>自定义背景</Button>
+    </div>
+  );
+}
+```

src/components/notification/demos/custom.md

@@ -8,38 +8,28 @@ desc: 使用 placement 可以配置通知从右上角、右下角、左下角、
 import React from 'react';
 import { Notification, Button, Message } from 'cloud-react';
 
-const placementList = [
-  { label: '左上', value: 'top-left' },
-  { label: '右上', value: 'top-right' },
-  { label: '左下', value: 'bottom-left' },
-  { label: '右下', value: 'bottom-right' },
-];
-
 export default function NotificationDemo() {
   const open = placement => {
     Notification.open({
       title: '这里是标题',
       content: '消息通知内容消息通知内容消息',
       showIcon: true,
       placement,
-      // showCancelBtn: true,
-      // showConfirmBtn: true,
-      // showDetailBtn: true,
       duration: 0,
-      // onConfirm: id => {
-      //   Message.info('点击确定关闭了！')
-      //   Notification.close(id);
-      // },
     });
   }
   return (
-    <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
-      <Button onClick={() => open('top-left')}>从左上打开</Button>
-      <Button onClick={() => open('top-right')}>从右上打开</Button>
-      <Button onClick={() => open('bottom-left')}>从左下打开</Button>
-      <Button onClick={() => open('bottom-right')}>从右下打开</Button>
-      <Button onClick={() => open('top')}>从上打开</Button>
-      <Button onClick={() => open('bottom')}>从下打开</Button>
+    <div>
+      <div style={{ display: 'flex', gap: 20, marginBottom: 20 }}>
+        <Button onClick={() => open('top-left')}>从左上打开</Button>
+        <Button onClick={() => open('top')}>从上打开</Button>
+        <Button onClick={() => open('top-right')}>从右上打开</Button>
+      </div>
+      <div style={{ display: 'flex', gap: 20 }}>
+        <Button onClick={() => open('bottom-left')}>从左下打开</Button>
+        <Button onClick={() => open('bottom')}>从下打开</Button>
+        <Button onClick={() => open('bottom-right')}>从右下打开</Button>
+      </div>
     </div>
   );
 }

src/components/notification/demos/placement.md

@@ -0,0 +1,55 @@
+---
+order: 1
+title: Drawer
+desc: 抽屉组件基础用法
+---
+
+```jsx
+import React, { useState } from 'react';
+import { Notification, Button, Message, Icon, Radio, Checkbox } from 'cloud-react';
+
+export default function NotificationDemo() {
+  const [borderRadiusSize, setBorderRadiusSize] = useState('default');
+  const open = (iconType, icon) => {
+    Notification.open({
+      title: '这里是标题',
+      content: '消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息消息通知内容消息通知内容消息通知内容消息',
+      showIcon: true,
+      showCancelBtn: true,
+      showConfirmBtn: true,
+      iconType,
+      icon,
+      borderRadiusSize,
+      onConfirm: id => {
+        Message.info('点击确定关闭了！')
+        Notification.close(id);
+      },
+    });
+  }
+  return (
+    <div>
+      <Radio.Group
+        value={borderRadiusSize}
+        onChange={v => {
+          setBorderRadiusSize(v);
+        }}>
+        <Radio value="small">圆角：3px</Radio>
+        <Radio value="middle">圆角：6px</Radio>
+        <Radio value="default">圆角：12px</Radio>
+      </Radio.Group>
+      <div style={{ display: 'flex', gap: 20, marginBottom: 20, marginTop: 15 }}>
+        <Button onClick={() => open('info')}>提示类消息</Button>
+        <Button onClick={() => open('success')}>成功类消息</Button>
+        <Button onClick={() => open('warn')}>警告类消息</Button>
+        <Button onClick={() => open('fail')}>失败类消息</Button>
+        <Button
+          onClick={() => {
+            open('', <Icon type="question-circle-solid" style={{ color: '#FFBB00', fontSize: 20, position: 'relative', top: 1 }}/>);
+          }}
+        >自定义图标
+        </Button>
+      </div>
+    </div>
+  );
+}
+```

src/components/notification/demos/type.md

@@ -3,46 +3,78 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import NotificationBody from './notification-body';
 import './index.less';
-import { DEFAULT_BODY_PROPS, NOTIFICATION_BODY_PROPS } from './constant';
 import { getRootWindow, prefixCls } from '../../utils';
 
 const CONTAINER_CLS = `${prefixCls}-notification-container`;
 const WRAPPER_CLS = `${prefixCls}-notification-wrapper`;
 
 const PLACEMENT_LIST = [ 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top', 'bottom' ];
 
+const DEFAULT_BODY_PROPS = {
+  placement: 'top-right',
+  container: null,
+  duration: 4500,
+  showCloseIcon: null,
+  btn: null,
+  className: '',
+  borderRadiusSize: 'default',
+  showIcon: false,
+  iconType: 'info',
+  icon: null,
+  showCancelBtn: false,
+  showConfirmBtn: false,
+  showDetailBtn: false,
+  onConfirm: () => {},
+  style: {},
+  isLightTheme: false,
+}
+
 /**
  * 更新各条信息提示的样式
  */
-function updateNotifyStyle(excludeId = null) {
+function updateNotifyStyle(placement, excludeId = null) {
   const rootDocument = getRootWindow().document;
-  const wrapperContainer = rootDocument.querySelector(`.${CONTAINER_CLS}`);
+  const wrapperContainer = rootDocument.querySelector(`.${CONTAINER_CLS}.${placement}`);
   const wrapperNodes = Array.from(wrapperContainer.childNodes);
 
-  wrapperNodes
-    .filter(node => node.dataset.id !== excludeId)
-    .forEach((node, index) => {
-      const yHeight = wrapperNodes.slice(0, index).reduce((sum, n) => {
-        sum += n.clientHeight;
-        return sum;
-      }, 0) + 20 * index;
-      node.style.transform = `translate3d(0px, ${yHeight}px, 0px) scaleX(1)`;
-    });
+  if (placement.includes('top')) {
+    wrapperNodes
+      .filter(node => node.dataset.id !== excludeId)
+      .forEach((node, index) => {
+        const yHeight = wrapperNodes.slice(0, index).reduce((sum, n) => {
+          sum += n.clientHeight;
+          return sum;
+        }, 0) + 20 * index;
+        node.style.transform = `translate3d(0px, ${yHeight}px, 0px) scaleX(1)`;
+      });
+  } else {
+    wrapperNodes
+      .filter(node => node.dataset.id !== excludeId)
+      .reverse()
+      .forEach((node, index) => {
+        const yHeight = wrapperNodes.slice(0, index).reduce((sum, n) => {
+          sum += n.clientHeight;
+          return sum;
+        }, 0) + 20 * index;
+        node.style.transform = `translate3d(0px, -${yHeight}px, 0px) scaleX(1)`;
+      });
+  }
 }
 
 /**
  * 关闭信息提示
  * @param dataSetId
+ * @param placement
  */
-function closeNotification(dataSetId) {
+function closeNotification(dataSetId, placement) {
   const rootDocument = getRootWindow().document;
-  const wrapperContainer = rootDocument.querySelector(`.${CONTAINER_CLS}`);
+  const wrapperContainer = rootDocument.querySelector(`.${CONTAINER_CLS}.${placement}`);
   const wrapperNodes = Array.from(wrapperContainer.childNodes);
   const wrapper = wrapperNodes.find(node => node.dataset.id === dataSetId);
   if (wrapper) {
     wrapper.classList.add('fade-out');
 
-    updateNotifyStyle(dataSetId);
+    updateNotifyStyle(placement, dataSetId);
 
     setTimeout(() => {
       wrapperContainer.removeChild(wrapper);
@@ -55,29 +87,37 @@ function closeNotification(dataSetId) {
  * @param props
  */
 function openNotification(props) {
+  const _props = { ...DEFAULT_BODY_PROPS, ...props };
   const rootDocument = getRootWindow().document;
-  const rootContainer = props.container || rootDocument.body;
+  const rootContainer = _props.container || rootDocument.body;
 
   // wrapperContainer：所有提示信息外层的 div
-  let wrapperContainer = rootDocument.querySelector(`.${CONTAINER_CLS}`);
+  let wrapperContainer = rootDocument.querySelector(`.${CONTAINER_CLS}.${_props.placement}`);
   if (!wrapperContainer) {
     wrapperContainer = rootDocument.createElement('div');
-    wrapperContainer.className = CONTAINER_CLS;
+    wrapperContainer.classList.add(CONTAINER_CLS);
+    wrapperContainer.classList.add(_props.placement);
     rootContainer.appendChild(wrapperContainer);
   }
 
   // wrapper：每个提示信息外层的 div
   const wrapper = rootDocument.createElement('div');
   wrapper.classList.add(WRAPPER_CLS);
   wrapper.dataset.id = `${new Date().getTime()}`;
-  wrapperContainer.insertBefore(wrapper, wrapperContainer.firstChild); // 将新的消息放在最上方
+  if (_props.placement.includes('top')) {
+    // 将新的消息放在最上方
+    wrapperContainer.insertBefore(wrapper, wrapperContainer.firstChild);
+  } else {
+    wrapperContainer.appendChild(wrapper);
+  }
+
   setTimeout(() => {
     wrapper.classList.add('fade-in');
-    updateNotifyStyle();
+    updateNotifyStyle(_props.placement);
   })
 
   ReactDOM.render(
-    <NotificationBody {...props} dataSetId={wrapper.dataset.id} close={closeNotification} />,
+    <NotificationBody {..._props} dataSetId={wrapper.dataset.id} close={closeNotification} />,
     wrapper,
   );
   return new Promise(resolve => {
@@ -87,18 +127,29 @@ function openNotification(props) {
 
 const Notification = {
   open: openNotification,
-  close: dataSetId => closeNotification(dataSetId)
+  close: (dataSetId, placement) => closeNotification(dataSetId, placement)
 };
 
 export default Notification;
 
 Notification.propTypes = {
-  ...NOTIFICATION_BODY_PROPS,
+  title: PropTypes.any.isRequired,
+  content: PropTypes.any.isRequired,
+  duration: PropTypes.number,
+  showCloseIcon: PropTypes.bool,
+  btn: PropTypes.any,
+  className: PropTypes.string,
+  borderRadiusSize: PropTypes.oneOf([ 'small', 'default', 'large' ]),
+  showIcon: PropTypes.bool,
+  iconType: PropTypes.oneOf(['info', 'success', 'warn', 'fail']),
+  icon: PropTypes.any,
+  showCancelBtn: PropTypes.bool,
+  showConfirmBtn: PropTypes.bool,
+  showDetailBtn: PropTypes.bool,
+  onConfirm: PropTypes.func,
   placement: PropTypes.oneOf(PLACEMENT_LIST),
   container: PropTypes.any,
+  style: PropTypes.object,
+  isLightTheme: PropTypes.bool,
 };
-Notification.defaultProps = {
-  ...DEFAULT_BODY_PROPS,
-  placement: 'top-left',
-  container: null,
-};
+Notification.defaultProps = DEFAULT_BODY_PROPS;