core:change api

lijinke666 · Aug 14, 2017 · ffc22f9 · ffc22f9
1 parent 02db1c5
commit ffc22f9
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,9 @@ npm install rc-message --save
 ```
 
 ## Example
- - `git clone https://github.com/lijinke666/rc-message`
+```
+git clone https://github.com/lijinke666/rc-message
+```
  - `yarn` of `npm install`
  - `npm run demo`   run example
 
@@ -19,16 +21,59 @@ import Message from "rc-message"
 import Button from "rc-button"
 
 
+const success = () => Message.success({ content: 'success' })
+const warning = () => Message.warning({ content: 'warning' })
+const info = () => Message.info({ content: 'info' })
+const error = () => Message.error({ content: 'error' })
+const loading = () => (
+    Message.loading({
+        content: 'loading',
+        duration: 100
+    })
+)
+const duration = () => (
+    Message.success({
+        content: '10s duration',
+        duration: 10
+    })
+)
+const onClose = () => (
+    Message.info({
+        content: 'are you ready?',
+        duration: 3,
+        onClose(){
+            Message.info({content:"i am callback :)"})
+        }
+    })
+)
+
+const lightTheme = () => (
+    Message.success({
+        conten: "i am light",
+        theme: "light"
+    })
+)
+
+const darkTheme = () => (
+    Message.success({
+        conten: "i am dark",
+        theme: "dark"
+    })
+)
 const Demo = () => (
     <div>
         <h2>Example</h2>
-        <p><Button type="success" onClick={() => Message.success('success')}>success</Button></p>
-        <p><Button type="warning" onClick={() => Message.warning('warning')}>primary</Button></p>
-        <p><Button type="primary" onClick={() => Message.info('info')}>info</Button></p>
-        <p><Button type="error" onClick={() => Message.error('error')}>error</Button></p>
-        <p><Button type="primary" onClick={() => Message.loading('loading', 10)}>loading</Button></p>
-        <p><Button type="primary" onClick={() => Message.info('duration', 100)}>10s duration</Button></p>
-        <p><Button type="primary" onClick={() => Message.info('are you ready?', 3, () => Message.info('i am callback'))}>callback</Button></p>
+        <p><Button type="success" onClick={success}>success</Button></p>
+        <p><Button type="warning" onClick={warning}>warning</Button></p>
+        <p><Button type="primary" onClick={info}>info</Button></p>
+        <p><Button type="error" onClick={error}>error</Button></p>
+        <p><Button type="primary" onClick={loading}>loading</Button></p>
+        <p><Button type="primary" onClick={duration}>10s duration</Button></p>
+        <p><Button type="primary" onClick={onClose}>onClose</Button></p>
+
+        <h2>Theme (dark | light)</h2>
+        <p><Button type="primary" onClick={lightTheme}>light theme</Button></p>
+        <p><Button type="primary" onClick={darkTheme}>dark theme</Button></p>
     </div>
 )
 ReactDOM.render(
@@ -37,3 +82,30 @@ ReactDOM.render(
 )
 ```
 
+## API 
+- `Message.success(options)`
+- `Message.error(options)`
+- `Message.info(options)`
+- `Message.warning(options)`
+- `Message.loading(options)`
+
+## Options 
+- options.content
+  - `Desc` : `content of the message`
+  - `Type` : `string | ReactNode`
+  - `Default` : `Balabala`
+
+- options.duration 
+  - `Desc` : `time before auto-dismiss,in seconds`
+  - `Type` : `number`
+  - `Default` : `2`
+
+- options.theme 
+  - `Desc` : `theme of the message`
+  - `Type` : `string`
+  - `Default` : `light`
+
+- options.onClose 
+  - `Desc` : `Specify a function that will be called after the message closed`
+  - `Type` : `Function`
+  - `Default` : `-`
diff --git a/example/example.js b/example/example.js
@@ -3,17 +3,59 @@ import ReactDOM from "react-dom"
 import Message from "../src/index"
 import Button from "rc-button"
 
+const success = () => Message.success({ content: 'success' })
+const warning = () => Message.warning({ content: 'warning' })
+const info = () => Message.info({ content: 'info' })
+const error = () => Message.error({ content: 'error' })
+const loading = () => (
+    Message.loading({
+        content: 'loading',
+        duration: 100
+    })
+)
+const duration = () => (
+    Message.success({
+        content: '10s duration',
+        duration: 10
+    })
+)
+const onClose = () => (
+    Message.info({
+        content: 'are you ready?',
+        duration: 3,
+        onClose(){
+            Message.info({content:"i am callback :)"})
+        }
+    })
+)
 
+const lightTheme = () => (
+    Message.success({
+        conten: "i am light",
+        theme: "light"
+    })
+)
+
+const darkTheme = () => (
+    Message.success({
+        conten: "i am dark",
+        theme: "dark"
+    })
+)
 const Demo = () => (
     <div>
         <h2>Example</h2>
-        <p><Button type="success" onClick={() => Message.success('success')}>success</Button></p>
-        <p><Button type="warning" onClick={() => Message.warning('warning')}>primary</Button></p>
-        <p><Button type="primary" onClick={() => Message.info('info')}>info</Button></p>
-        <p><Button type="error" onClick={() => Message.error('error')}>error</Button></p>
-        <p><Button type="primary" onClick={() => Message.loading('loading', 10)}>loading</Button></p>
-        <p><Button type="primary" onClick={() => Message.info('duration', 100)}>10s duration</Button></p>
-        <p><Button type="primary" onClick={() => Message.info('are you ready?', 3, () => Message.info('i am callback'))}>callback</Button></p>
+        <p><Button type="success" onClick={success}>success</Button></p>
+        <p><Button type="warning" onClick={warning}>warning</Button></p>
+        <p><Button type="primary" onClick={info}>info</Button></p>
+        <p><Button type="error" onClick={error}>error</Button></p>
+        <p><Button type="primary" onClick={loading}>loading</Button></p>
+        <p><Button type="primary" onClick={duration}>10s duration</Button></p>
+        <p><Button type="primary" onClick={onClose}>onClose</Button></p>
+
+        <h2>Theme (dark | light)</h2>
+        <p><Button type="primary" onClick={lightTheme}>light theme</Button></p>
+        <p><Button type="primary" onClick={darkTheme}>dark theme</Button></p>
     </div>
 )
 ReactDOM.render(

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-message",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "main": "src/index.js",
   "scripts": {
     "start": "npm run demo",

diff --git a/src/index.js b/src/index.js
@@ -1,25 +1,34 @@
-import React, { propTypes } from "react"
+import React, { PropTypes } from "react"
 import ReactDOM from "react-dom"
-import classNames from "classnames"
+import classnames from "classnames"
 import Success from "react-icons/lib/fa/check-circle"
 import Error from "react-icons/lib/ti/delete"
 import Warning from "react-icons/lib/ti/warning"
 import Info from "react-icons/lib/ti/pin"
 import Loading from "react-icons/lib/md/loop"
+
 import "./styles.less"
 
 export default class Message extends React.PureComponent {
     state = {
         remove: false
     }
     _container;         
-    _dom;             
+    _dom;               
     constructor(props) {
         super(props)
     }
+    static propTypes = {
+        content:PropTypes.string.isRequired,
+        duration:PropTypes.number.isRequired,
+        theme:PropTypes.oneOf(['light','dark']),
+        onClose:PropTypes.func
+    }
     static defaultProps = {
-        defaultDuration: 2,
-        defaultContent: "提示"
+        type:"info",
+        content:"balabala",
+        duration: 2,
+        theme:"light",
     }
     componentWillUnMount() {
         document.body.removeChild(document.querySelector('.rc-message'))
@@ -45,13 +54,14 @@ export default class Message extends React.PureComponent {
         ReactDOM.unmountComponentAtNode(this._container)
         this._dom.remove()
     }
-    static renderElement = (type, content = "提示", duration = 2, onClose) => {
+    static renderElement = (type, {content ,duration  ,theme,onClose}) => {
         let div = document.createElement('div')
         let _message = ReactDOM.render(
             <Message
                 type={type}
                 content={content}
                 duration={duration}
+                theme={theme}
                 onClose={onClose}
             />,
             div
@@ -60,25 +70,26 @@ export default class Message extends React.PureComponent {
         _message._container = div
         _message._dom = dom
     }
-    static error(content, duration, onClose) {
-        this.renderElement("error", content, duration, onClose)
+    static error(options) {
+        this.renderElement("error", options)
     }
-    static info(content, duration, onClose) {
-        this.renderElement("info", content, duration, onClose)
+    static info(options) {
+        this.renderElement("info", options)
     }
-    static success(content, duration, onClose) {
-        this.renderElement("success", content, duration, onClose)
+    static success(options) {
+        this.renderElement("success", options)
     }
-    static warning(content, duration, onClose) {
-        this.renderElement("warning", content, duration, onClose)
+    static warning(options) {
+        this.renderElement("warning",options)
     }
-    static loading(content, duration, onClose) {
-        this.renderElement("loading", content, duration, onClose)
+    static loading(options) {
+        this.renderElement("loading", options)
     }
 
     render() {
         const {
-             type,
+            theme,
+            type,
             content,
             duration
          } = this.props
@@ -95,11 +106,17 @@ export default class Message extends React.PureComponent {
         const isShowClassName = type === typeConfig
 
         return (
-            <div key="message" className="rc-message-notice-content">
+            <div key="message" className={
+                classnames(
+                    "rc-message-notice-content",
+                    {"theme-dark":theme === "dark"},
+                    {"theme-light":theme === "light"}
+                )
+            }>
                 <div
                     className={
-                        classNames(
-                            'rc-message-notice-content-custom',
+                        classnames(
+                            "rc-message-notice-content-custom",
                             `message-${typeConfig[type]}`
                         )
                     }