feat: Modal Drawer 组件增加无标题模式

cuke-ui · Sep 28, 2018 · de4c406 · de4c406
1 parent 65a493a
commit de4c406
Show file tree

Hide file tree

Showing 21 changed files with 525 additions and 447 deletions.
diff --git a/components/alert/index.js b/components/alert/index.js
@@ -11,8 +11,10 @@ import {
 
 export default class Alert extends PureComponent {
 	state = {
-		visible: true
+		visible: true,
+		animation: false
 	};
+	ANIMATE_END_TIME = 500;
 	static defaultProps = {
 		prefixCls: "cuke-alert",
 		closeText: <CloseIcon />,
@@ -25,9 +27,9 @@ export default class Alert extends PureComponent {
 	};
 	static propTypes = {
 		prefixCls: PropTypes.string.isRequired,
-		message: PropTypes.element,
-		closeText: PropTypes.element,
-		description: PropTypes.element,
+		message: PropTypes.oneOfType([ 			PropTypes.element, 			PropTypes.string, 			PropTypes.object, 		]),
+		closeText: PropTypes.oneOfType([ 			PropTypes.element, 			PropTypes.string, 			PropTypes.object, 		]),
+		description: PropTypes.oneOfType([ 			PropTypes.element, 			PropTypes.string, 			PropTypes.object, 		]),
 		closable: PropTypes.bool,
 		showIcon: PropTypes.bool,
 		onClose: PropTypes.func,
@@ -43,7 +45,12 @@ export default class Alert extends PureComponent {
 		};
 	}
 	onClose = () => {
-		this.setState({ visible: false }, this.props.onClose);
+		this.setState({ animation: true }, () => {
+			setTimeout(() => {
+				this.setState({ visible: false });
+				this.props.onClose();
+			}, this.ANIMATE_END_TIME);
+		});
 	};
 	renderIcon = type => {
 		switch (type) {
@@ -72,15 +79,16 @@ export default class Alert extends PureComponent {
 			...attr
 		} = this.props;
 
-		const { visible } = this.state;
+		const { visible, animation } = this.state;
 
 		if (!visible) {
 			return null;
 		}
 		return (
 			<div
 				className={cls(prefixCls, className, `${prefixCls}-${type}`, {
-					"has-description": !!description
+					"has-description": !!description,
+					[`${prefixCls}-hide`]: animation
 				})}
 				{...attr}
 			>

diff --git a/components/alert/styles.less b/components/alert/styles.less
@@ -18,6 +18,10 @@
       margin-top: -3px;
     }
   }
+  &.@{prefixCls}-hide {
+    animation: cuke-hide @default-transition forwards;
+  }
+
   &-close {
     position: absolute;
     right: 15px;

diff --git a/components/breadcrumb/Breadcrumb.js b/components/breadcrumb/Breadcrumb.js
@@ -10,7 +10,7 @@ export default class Breadcrumb extends PureComponent {
 
 	static propTypes = {
 		prefixCls: PropTypes.string.isRequired,
-		separator: PropTypes.element
+		separator: PropTypes.oneOfType([ 			PropTypes.element, 			PropTypes.string, 			PropTypes.object, 		])
 	};
 
 	render() {

diff --git a/components/drawer/__tests__/__snapshots__/index.test.js.snap b/components/drawer/__tests__/__snapshots__/index.test.js.snap
@@ -195,7 +195,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
       tabIndex="-1"
     >
       <div
-        className="cuke-drawer cuke-drawer-open cuke-drawer-left"
+        className="cuke-drawer cuke-drawer-open cuke-drawer-left no-title"
         style={
           Object {
             "width": 300,
@@ -310,7 +310,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
       tabIndex="-1"
     >
       <div
-        className="cuke-drawer cuke-drawer-open cuke-drawer-top"
+        className="cuke-drawer cuke-drawer-open cuke-drawer-top no-title"
         style={
           Object {
             "width": 300,
@@ -425,7 +425,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
       tabIndex="-1"
     >
       <div
-        className="cuke-drawer cuke-drawer-open cuke-drawer-right"
+        className="cuke-drawer cuke-drawer-open cuke-drawer-right no-title"
         style={
           Object {
             "width": 300,
@@ -540,7 +540,7 @@ exports[`<Drawer/> should render custom direction 1`] = `
       tabIndex="-1"
     >
       <div
-        className="cuke-drawer cuke-drawer-open cuke-drawer-bottom"
+        className="cuke-drawer cuke-drawer-open cuke-drawer-bottom no-title"
         style={
           Object {
             "width": 300,

diff --git a/components/drawer/index.js b/components/drawer/index.js
@@ -23,8 +23,16 @@ export default class Drawer extends PureComponent {
 		placement: placements[0]
 	};
 	static propTypes = {
-		title: PropTypes.element,
-		content: PropTypes.element,
+		title: PropTypes.oneOfType([
+			PropTypes.element,
+			PropTypes.string,
+			PropTypes.object
+		]),
+		content: PropTypes.oneOfType([
+			PropTypes.element,
+			PropTypes.string,
+			PropTypes.object
+		]),
 		confirmLoading: PropTypes.bool,
 		visible: PropTypes.bool,
 		closable: PropTypes.bool,
@@ -109,7 +117,8 @@ export default class Drawer extends PureComponent {
 							prefixCls,
 							className,
 							initModalAnimate,
-							`${prefixCls}-${placement}`
+							`${prefixCls}-${placement}`,
+							{"no-title": !title}
 						)}
 						ref={node => (this.modal = node)}
 						style={{