├── .gitignore
├── app
    ├── components
    │   ├── buttons
    │   │   └── button.jsx
    │   ├── modal
    │   │   ├── dialog.jsx
    │   │   ├── mask.jsx
    │   │   └── modal.jsx
    │   └── test.jsx
    └── main.js
├── dist
    ├── bundle.js
    ├── bundle.js.map
    ├── vendor.js
    └── vendor.js.map
├── index.html
├── package.json
├── readme.md
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/app/components/buttons/button.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from 'react' 
 2 | 
 3 | //button组件
 4 | const buttonCommonStyle = {
 5 |     outline: 'none',
 6 |     padding: '8px 25px',
 7 |     border: '5px solid #ccc',
 8 |     margin: '0 5px'
 9 | }
10 | 
11 | function extend(_super,_cur){
12 |     return Object.assign({},_cur,_super)
13 | }
14 | 
15 | const certainStyle = extend(buttonCommonStyle,{
16 |     background: 'lightblue',
17 |     color: '#fff'
18 | })
19 | 
20 | const cancelStyle = extend(buttonCommonStyle,{
21 |     background: 'pink',
22 |     color: '#fff'
23 | })
24 | 
25 | 
26 | export default class Button extends Component {
27 |     constructor(props) {
28 |         super(props)
29 |         this.close = this.close.bind(this);
30 |     }
31 | 
32 |     close() {
33 |         this.props.callback()
34 |         this.props.close()
35 |     }
36 | 
37 |     render() {
38 |         let type = this.props.type;
39 |         switch (type) {
40 |             case 'certain':
41 |                 return <button className="btn" style={certainStyle} onClick={this.close}>确定</button>
42 |                 break;
43 |             case 'cancel':
44 |                 return <button className="btn" style={cancelStyle} onClick={this.close}>取消</button>
45 |                 break;
46 |             case 'close':
47 |                 return <button className="btn">关闭</button>
48 |                 break;
49 | 
50 |             default:
51 |                 return <button className="btn">确定</button>
52 |                 break;
53 |         }
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/app/components/modal/dialog.jsx:
--------------------------------------------------------------------------------
 1 | import Modal from './modal';
 2 | import { Masker } from './mask';
 3 | import React,{Component} from "react";
 4 | import PropTypes from 'prop-types';
 5 | 
 6 | 
 7 | export default class Dialog extends Component{
 8 |     constructor(props){
 9 |         super(props);
10 |         this.state={
11 |             isVisible:false
12 |         }
13 |         this.show = this.show.bind(this)
14 |         this.hide = this.hide.bind(this)
15 |     }
16 | 
17 |     show(){
18 |         this.setState(function (state) {
19 |             state.isVisible = true
20 |         })
21 |     }
22 | 
23 |     hide(){
24 |         this.setState(function (state) {
25 |             this.props.onclose();
26 |             state.isVisible = false
27 |         })
28 |     }
29 | 
30 |     componentWillMount(){
31 |         this.callbacks = {
32 |             certain:this.props.oncertain,
33 |             cancel:this.props.oncancel,
34 |         }
35 |     }
36 | 
37 |     render(){
38 |         return (
39 |             this.state.isVisible ?
40 |             <Masker>
41 |                 <Modal title={this.props.title} close={this.hide} callbacks={this.callbacks}>
42 |                     {this.props.children}
43 |                 </Modal>
44 |             </Masker>:
45 |             <div />
46 |         )
47 |     }
48 | }
49 | 
50 | 
51 | Dialog.propTypes = {//添加静态属性
52 |     onclose: PropTypes.func,
53 |     oncertaine: PropTypes.func,
54 |     oncancel: PropTypes.func,
55 |     title:PropTypes.string.isRequired,
56 |     children:PropTypes.oneOfType([
57 |         PropTypes.string,
58 |         PropTypes.node,
59 |         PropTypes.element
60 |     ])
61 | }


--------------------------------------------------------------------------------
/app/components/modal/mask.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react";
 2 | //遮罩层组件
 3 | const maskStyle = {
 4 |     position: "fixed",
 5 |     left:0,
 6 |     top:0,
 7 |     width: "100%",
 8 |     height: "100%",
 9 |     background: 'rgba(0,0,0,0.7)',
10 |     zIndex: 98
11 | }
12 | 
13 | class Masker extends Component {
14 |     constructor(props) {
15 |         super(props)
16 |     }
17 | 
18 |     render() {
19 |         return (
20 |             <div className="mask" style={maskStyle}>
21 |                 {this.props.children}
22 |             </div>
23 |         )
24 |     }
25 | }
26 | 
27 | export { Masker }
28 | 


--------------------------------------------------------------------------------
/app/components/modal/modal.jsx:
--------------------------------------------------------------------------------
 1 | import Button from '../buttons/button'
 2 | import React,{Component} from "react";
 3 | 
 4 | //对话框组件
 5 | const modalStlye = {
 6 |             position:'absolute',
 7 |             left:'50%',
 8 |             top:'50%',
 9 |             transform:"translate3d(-50%,-50%,0)",
10 |             background:'#fff',
11 |             color:'#000',
12 |             padding:'10px 0',
13 |             maxWidth:'80%',
14 |             minWidth:'30%',
15 |             wordWrap: 'break-word'
16 |         }
17 | 
18 |         const titleStyle = {
19 |             height:'38px',
20 |             lineHeight:'38px',
21 |             padding:'0 10px'
22 |         }
23 | 
24 |         const contentStyle = {
25 |             padding:"10px 15px 15px",
26 |             lineHeight: '24px',
27 |             textAlign:'center'
28 |         }
29 | 
30 |         const buttonsStyle = {
31 |             display:'flex',
32 |             justifyContent:'center',
33 |             alignItems:'center'
34 |         }
35 | 
36 |        export default class Modal extends Component{
37 |             constructor(props){
38 |                 super(props)
39 |             }
40 | 
41 |             componentWillMount(){
42 |                 const callbacks = this.props.callbacks;
43 |             }
44 | 
45 |             render(){
46 |                 return (
47 |                     <div style={modalStlye}>
48 |                         <div className="title" style={titleStyle}>{this.props.title}</div>
49 |                         <div className="content" style={contentStyle}>{this.props.children}</div>
50 |                         <div className="btns" style={buttonsStyle}>
51 |                             <Button type="certain" close={this.props.close} callback={this.props.callbacks.certain}></Button>
52 |                             <Button type="cancel" close={this.props.close} callback={this.props.callbacks.cancel}></Button>
53 |                         </div>
54 |                     </div>
55 |                 )
56 |             }
57 |         }


--------------------------------------------------------------------------------
/app/components/test.jsx:
--------------------------------------------------------------------------------
 1 | import Dialog from './modal/dialog';
 2 | import React,{Component} from "react";
 3 | 
 4 | const title = '测试Dialog组件的使用'
 5 | 
 6 | function close(){
 7 |     console.log('close')
 8 | }
 9 | 
10 | function certain(){
11 |     console.log('想放什么都可以')
12 | }
13 | function cancel(){
14 |     console.log('不猜')
15 | }
16 | 
17 | function Abc(){
18 |     return <h2>测试react element</h2>
19 | }
20 | 
21 | 
22 | export default class Test extends Component{
23 |     constructor(props){
24 |         super(props);
25 |         this.showDialog= this.showDialog.bind(this)
26 |     }
27 | 
28 |     componentDidMount(){
29 | 
30 |     }
31 | 
32 |     showDialog(){
33 |         this.refs.tips.show()
34 |     }
35 | 
36 |     render(){
37 |         
38 |         return <div>
39 |             <header>头部</header>
40 |             <section>主体 <button onClick={this.showDialog}>对话框</button></section>
41 |             <footer>页脚</footer>
42 |             <Dialog ref="tips" title={title} onclose={close} oncertain={certain} oncancel={cancel}>
43 |                 猜我这里可以放什么？
44 |             </Dialog>
45 |         </div>
46 |     }
47 | }
48 | 
49 | 
50 | 
51 | 
52 | 


--------------------------------------------------------------------------------
/app/main.js:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react";
 2 | import ReactDOM from 'react-dom';
 3 | import Test from './components/test';
 4 | 
 5 | 
 6 | ReactDOM.render(
 7 |     <Test />,
 8 |     document.getElementById('root')
 9 | )
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/dist/bundle.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([0],{184:function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(){console.log("close")}function a(){console.log("想放什么都可以")}function u(){console.log("不猜")}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),f=n(185),p=o(f),d=n(14),b=o(d),y=function(e){function t(e){r(this,t);var n=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.showDialog=n.showDialog.bind(n),n}return i(t,e),s(t,[{key:"componentDidMount",value:function(){}},{key:"showDialog",value:function(){this.refs.tips.show()}},{key:"render",value:function(){return b.default.createElement("div",null,b.default.createElement("header",null,"头部"),b.default.createElement("section",null,"主体 ",b.default.createElement("button",{onClick:this.showDialog},"对话框")),b.default.createElement("footer",null,"页脚"),b.default.createElement(p.default,{ref:"tips",title:"测试Dialog组件的使用",onclose:c,oncertain:a,oncancel:u},"猜我这里可以放什么？"))}}]),t}(d.Component);t.default=y},185:function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(186),u=o(a),s=n(188),f=n(14),p=o(f),d=n(189),b=o(d),y=function(e){function t(e){r(this,t);var n=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={isVisible:!1},n.show=n.show.bind(n),n.hide=n.hide.bind(n),n}return i(t,e),c(t,[{key:"show",value:function(){this.setState(function(e){e.isVisible=!0})}},{key:"hide",value:function(){this.setState(function(e){this.props.onclose(),e.isVisible=!1})}},{key:"componentWillMount",value:function(){this.callbacks={certain:this.props.oncertain,cancel:this.props.oncancel}}},{key:"render",value:function(){return this.state.isVisible?p.default.createElement(s.Masker,null,p.default.createElement(u.default,{title:this.props.title,close:this.hide,callbacks:this.callbacks},this.props.children)):p.default.createElement("div",null)}}]),t}(f.Component);t.default=y,y.propTypes={onclose:b.default.func,oncertaine:b.default.func,oncancel:b.default.func,title:b.default.string.isRequired,children:b.default.oneOfType([b.default.string,b.default.node,b.default.element])}},186:function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(187),u=o(a),s=n(14),f=o(s),p={position:"absolute",left:"50%",top:"50%",transform:"translate3d(-50%,-50%,0)",background:"#fff",color:"#000",padding:"10px 0",maxWidth:"80%",minWidth:"30%",wordWrap:"break-word"},d={height:"38px",lineHeight:"38px",padding:"0 10px"},b={padding:"10px 15px 15px",lineHeight:"24px",textAlign:"center"},y={display:"flex",justifyContent:"center",alignItems:"center"},h=function(e){function t(e){return r(this,t),l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return i(t,e),c(t,[{key:"componentWillMount",value:function(){this.props.callbacks}},{key:"render",value:function(){return f.default.createElement("div",{style:p},f.default.createElement("div",{className:"title",style:d},this.props.title),f.default.createElement("div",{className:"content",style:b},this.props.children),f.default.createElement("div",{className:"btns",style:y},f.default.createElement(u.default,{type:"certain",close:this.props.close,callback:this.props.callbacks.certain}),f.default.createElement(u.default,{type:"cancel",close:this.props.close,callback:this.props.callbacks.cancel})))}}]),t}(s.Component);t.default=h},187:function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e,t){return Object.assign({},t,e)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(14),u=function(e){return e&&e.__esModule?e:{default:e}}(a),s={outline:"none",padding:"8px 25px",border:"5px solid #ccc",margin:"0 5px"},f=i(s,{background:"lightblue",color:"#fff"}),p=i(s,{background:"pink",color:"#fff"}),d=function(e){function t(e){o(this,t);var n=r(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.close=n.close.bind(n),n}return l(t,e),c(t,[{key:"close",value:function(){this.props.callback(),this.props.close()}},{key:"render",value:function(){switch(this.props.type){case"certain":return u.default.createElement("button",{className:"btn",style:f,onClick:this.close},"确定");case"cancel":return u.default.createElement("button",{className:"btn",style:p,onClick:this.close},"取消");case"close":return u.default.createElement("button",{className:"btn"},"关闭");default:return u.default.createElement("button",{className:"btn"},"确定")}}}]),t}(a.Component);t.default=d},188:function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.Masker=void 0;var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),c=n(14),a=function(e){return e&&e.__esModule?e:{default:e}}(c),u={position:"fixed",left:0,top:0,width:"100%",height:"100%",background:"rgba(0,0,0,0.7)",zIndex:98},s=function(e){function t(e){return o(this,t),r(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return l(t,e),i(t,[{key:"render",value:function(){return a.default.createElement("div",{className:"mask",style:u},this.props.children)}}]),t}(c.Component);t.Masker=s},189:function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var o="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,r=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o};e.exports=n(57)(r,!0)}else e.exports=n(190)()}).call(t,n(0))},190:function(e,t,n){"use strict";var o=n(8),r=n(1),l=n(34);e.exports=function(){function e(e,t,n,o,i,c){c!==l&&r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=o,n.PropTypes=n,n}},84:function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var r=n(14),l=o(r),i=n(58),c=o(i),a=n(184),u=o(a);c.default.render(l.default.createElement(u.default,null),document.getElementById("root"))}},[84]);
2 | //# sourceMappingURL=bundle.js.map


--------------------------------------------------------------------------------
/dist/bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"bundle.js","sources":["webpack:///bundle.js"],"sourcesContent":["webpackJsonp([0],{184:function(e,t,n){\"use strict\";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function l(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!=typeof t&&\"function\"!=typeof t?e:t}function i(e,t){if(\"function\"!=typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(){console.log(\"close\")}function a(){console.log(\"想放什么都可以\")}function u(){console.log(\"不猜\")}Object.defineProperty(t,\"__esModule\",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,\"value\"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),f=n(185),p=o(f),d=n(14),b=o(d),y=function(e){function t(e){r(this,t);var n=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.showDialog=n.showDialog.bind(n),n}return i(t,e),s(t,[{key:\"componentDidMount\",value:function(){}},{key:\"showDialog\",value:function(){this.refs.tips.show()}},{key:\"render\",value:function(){return b.default.createElement(\"div\",null,b.default.createElement(\"header\",null,\"头部\"),b.default.createElement(\"section\",null,\"主体 \",b.default.createElement(\"button\",{onClick:this.showDialog},\"对话框\")),b.default.createElement(\"footer\",null,\"页脚\"),b.default.createElement(p.default,{ref:\"tips\",title:\"测试Dialog组件的使用\",onclose:c,oncertain:a,oncancel:u},\"猜我这里可以放什么？\"))}}]),t}(d.Component);t.default=y},185:function(e,t,n){\"use strict\";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function l(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!=typeof t&&\"function\"!=typeof t?e:t}function i(e,t){if(\"function\"!=typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,\"__esModule\",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,\"value\"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(186),u=o(a),s=n(188),f=n(14),p=o(f),d=n(189),b=o(d),y=function(e){function t(e){r(this,t);var n=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={isVisible:!1},n.show=n.show.bind(n),n.hide=n.hide.bind(n),n}return i(t,e),c(t,[{key:\"show\",value:function(){this.setState(function(e){e.isVisible=!0})}},{key:\"hide\",value:function(){this.setState(function(e){this.props.onclose(),e.isVisible=!1})}},{key:\"componentWillMount\",value:function(){this.callbacks={certain:this.props.oncertain,cancel:this.props.oncancel}}},{key:\"render\",value:function(){return this.state.isVisible?p.default.createElement(s.Masker,null,p.default.createElement(u.default,{title:this.props.title,close:this.hide,callbacks:this.callbacks},this.props.children)):p.default.createElement(\"div\",null)}}]),t}(f.Component);t.default=y,y.propTypes={onclose:b.default.func,oncertaine:b.default.func,oncancel:b.default.func,title:b.default.string.isRequired,children:b.default.oneOfType([b.default.string,b.default.node,b.default.element])}},186:function(e,t,n){\"use strict\";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function l(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!=typeof t&&\"function\"!=typeof t?e:t}function i(e,t){if(\"function\"!=typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,\"__esModule\",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,\"value\"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(187),u=o(a),s=n(14),f=o(s),p={position:\"absolute\",left:\"50%\",top:\"50%\",transform:\"translate3d(-50%,-50%,0)\",background:\"#fff\",color:\"#000\",padding:\"10px 0\",maxWidth:\"80%\",minWidth:\"30%\",wordWrap:\"break-word\"},d={height:\"38px\",lineHeight:\"38px\",padding:\"0 10px\"},b={padding:\"10px 15px 15px\",lineHeight:\"24px\",textAlign:\"center\"},y={display:\"flex\",justifyContent:\"center\",alignItems:\"center\"},h=function(e){function t(e){return r(this,t),l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return i(t,e),c(t,[{key:\"componentWillMount\",value:function(){this.props.callbacks}},{key:\"render\",value:function(){return f.default.createElement(\"div\",{style:p},f.default.createElement(\"div\",{className:\"title\",style:d},this.props.title),f.default.createElement(\"div\",{className:\"content\",style:b},this.props.children),f.default.createElement(\"div\",{className:\"btns\",style:y},f.default.createElement(u.default,{type:\"certain\",close:this.props.close,callback:this.props.callbacks.certain}),f.default.createElement(u.default,{type:\"cancel\",close:this.props.close,callback:this.props.callbacks.cancel})))}}]),t}(s.Component);t.default=h},187:function(e,t,n){\"use strict\";function o(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function r(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!=typeof t&&\"function\"!=typeof t?e:t}function l(e,t){if(\"function\"!=typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function i(e,t){return Object.assign({},t,e)}Object.defineProperty(t,\"__esModule\",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,\"value\"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(14),u=function(e){return e&&e.__esModule?e:{default:e}}(a),s={outline:\"none\",padding:\"8px 25px\",border:\"5px solid #ccc\",margin:\"0 5px\"},f=i(s,{background:\"lightblue\",color:\"#fff\"}),p=i(s,{background:\"pink\",color:\"#fff\"}),d=function(e){function t(e){o(this,t);var n=r(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.close=n.close.bind(n),n}return l(t,e),c(t,[{key:\"close\",value:function(){this.props.callback(),this.props.close()}},{key:\"render\",value:function(){switch(this.props.type){case\"certain\":return u.default.createElement(\"button\",{className:\"btn\",style:f,onClick:this.close},\"确定\");case\"cancel\":return u.default.createElement(\"button\",{className:\"btn\",style:p,onClick:this.close},\"取消\");case\"close\":return u.default.createElement(\"button\",{className:\"btn\"},\"关闭\");default:return u.default.createElement(\"button\",{className:\"btn\"},\"确定\")}}}]),t}(a.Component);t.default=d},188:function(e,t,n){\"use strict\";function o(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}function r(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!=typeof t&&\"function\"!=typeof t?e:t}function l(e,t){if(\"function\"!=typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,\"__esModule\",{value:!0}),t.Masker=void 0;var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,\"value\"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),c=n(14),a=function(e){return e&&e.__esModule?e:{default:e}}(c),u={position:\"fixed\",left:0,top:0,width:\"100%\",height:\"100%\",background:\"rgba(0,0,0,0.7)\",zIndex:98},s=function(e){function t(e){return o(this,t),r(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return l(t,e),i(t,[{key:\"render\",value:function(){return a.default.createElement(\"div\",{className:\"mask\",style:u},this.props.children)}}]),t}(c.Component);t.Masker=s},189:function(e,t,n){(function(t){if(\"production\"!==t.env.NODE_ENV){var o=\"function\"==typeof Symbol&&Symbol.for&&Symbol.for(\"react.element\")||60103,r=function(e){return\"object\"==typeof e&&null!==e&&e.$$typeof===o};e.exports=n(57)(r,!0)}else e.exports=n(190)()}).call(t,n(0))},190:function(e,t,n){\"use strict\";var o=n(8),r=n(1),l=n(34);e.exports=function(){function e(e,t,n,o,i,c){c!==l&&r(!1,\"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types\")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=o,n.PropTypes=n,n}},84:function(e,t,n){\"use strict\";function o(e){return e&&e.__esModule?e:{default:e}}var r=n(14),l=o(r),i=n(58),c=o(i),a=n(184),u=o(a);c.default.render(l.default.createElement(u.default,null),document.getElementById(\"root\"))}},[84]);\n\n\n// WEBPACK FOOTER //\n// bundle.js"],"mappings":"AAAA","sourceRoot":""}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div id="root"></div>
11 | 
12 |     <script src="dist/vendor.js"></script>
13 |     <script src="dist/bundle.js"></script>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reactstage",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "prop-types": "^15.5.10",
13 |     "react": "^15.6.1",
14 |     "react-dom": "^15.6.1"
15 |   },
16 |   "devDependencies": {
17 |     "babel-core": "^6.26.0",
18 |     "babel-loader": "^7.1.1",
19 |     "babel-preset-es2015": "^6.24.1",
20 |     "babel-preset-react": "^6.24.1",
21 |     "clean-webpack-plugin": "^0.1.16",
22 |     "webpack": "^3.5.5"
23 |   }
24 | }


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | 
2 | 在项目目录下 
3 | 
4 | - step1: npm install
5 | 
6 | - step2: webpack
7 | 
8 | 暂时未添加  dev-server


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var clean = require('clean-webpack-plugin');
 3 | var webpack = require('webpack');
 4 | 
 5 | module.exports = {
 6 |     entry: {//配置入口
 7 |         bundle: __dirname + '/app/main.js',
 8 |         vendor:['react','react-dom']
 9 |     },
10 |     output: {
11 |         path: __dirname + '/dist',
12 |         filename: '[name].js',
13 |         publicPath: path.resolve(__dirname+'./dist')
14 |     },
15 |     module: {
16 |         rules: [
17 |             {
18 |                 test: /\.jsx?$/,
19 |                 exclude: /node_modules/,
20 |                 loaders: ['babel-loader?presets[]=es2015&presets[]=react']
21 |             }
22 |         ]
23 |     },
24 |     plugins:[
25 |         new clean(['dist']),
26 |         new webpack.optimize.CommonsChunkPlugin({
27 |             name:'vendor',
28 |             minChunks: Infinity
29 |         }),
30 |         new webpack.optimize.UglifyJsPlugin({
31 |             sourceMap:true
32 |         })
33 |     ],
34 |     resolve:{
35 |         extensions:['.js','.jsx']
36 |     },
37 |     devtool: 'cheap-source-map'
38 | }


--------------------------------------------------------------------------------