uxcore.js - React UI Component Set

组件演示

[{"title":"基本用法","id":"components-dialog-demo-basic","tags":[],"filepath":"site/components/dialog/demo/basic.md","directory":"components/dialog/demo","filename":"basic","meta":{"title":"基本用法","description":"\n基本用法。\n","order":"0","filepath":"site/components/dialog/demo/basic.md","filename":"basic","directory":"components/dialog/demo","id":"components-dialog-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar BasicDemo = function (_React$Component) {\n _inherits(BasicDemo, _React$Component);\n\n function BasicDemo(props) {\n _classCallCheck(this, BasicDemo);\n\n var _this = _possibleConstructorReturn(this, (BasicDemo.__proto__ || Object.getPrototypeOf(BasicDemo)).call(this, props));\n\n _this.state = {\n visible: false\n };\n return _this;\n }\n\n _createClass(BasicDemo, [{\n key: 'show',\n value: function show() {\n this.setState({\n visible: true\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: this.show.bind(this) },\n '\\u663E\\u793A\\u5BF9\\u8BDD\\u6846'\n ),\n React.createElement(\n _uxcore.Dialog,\n { title: '\\u7B2C\\u4E00\\u4E2A Dialog',\n visible: this.state.visible,\n draggable: true,\n onOk: function onOk() {\n _this2.setState({\n visible: false\n });\n },\n onCancel: function onCancel() {\n _this2.setState({\n visible: false\n });\n }\n },\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n )\n )\n );\n }\n }]);\n\n return BasicDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(BasicDemo, null), document.getElementById('components-dialog-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dialog } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass BasicDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n };\n }\n show() {\n this.setState({\n visible: true,\n });\n }\n render() {\n return (\n <div>\n <Button onClick={this.show.bind(this)}>显示对话框</Button>\n <Dialog title=\"第一个 Dialog\"\n visible={this.state.visible}\n draggable={true}\n onOk={() => {\n this.setState({\n visible: false,\n });\n }}\n onCancel={() => {\n this.setState({\n visible: false,\n });\n }}\n >\n <p>对话框的内容</p>\n <p>对话框的内容</p>\n <p>对话框的内容</p>\n </Dialog>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <BasicDemo />, document.getElementById('components-dialog-demo-basic'));\n</code></pre></div>"},"status":"public","toc":""},{"title":"点击按钮触发","id":"components-dialog-demo-asyncclose","tags":[],"filepath":"site/components/dialog/demo/asyncclose.md","directory":"components/dialog/demo","filename":"asyncclose","meta":{"title":"点击按钮触发","description":"\n点击确定2s后再关闭对话框。\n","order":"1","filepath":"site/components/dialog/demo/asyncclose.md","filename":"asyncclose","directory":"components/dialog/demo","id":"components-dialog-demo-asyncclose","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar AsyncCloseDemo = function (_React$Component) {\n _inherits(AsyncCloseDemo, _React$Component);\n\n function AsyncCloseDemo(props) {\n _classCallCheck(this, AsyncCloseDemo);\n\n var _this = _possibleConstructorReturn(this, (AsyncCloseDemo.__proto__ || Object.getPrototypeOf(AsyncCloseDemo)).call(this, props));\n\n _this.state = {\n ModalText: '对话框的内容',\n visible: false\n };\n return _this;\n }\n\n _createClass(AsyncCloseDemo, [{\n key: 'show',\n value: function show() {\n this.setState({\n visible: true\n });\n }\n }, {\n key: 'handleOk',\n value: function handleOk() {\n var _this2 = this;\n\n this.setState({\n ModalText: '对话框将在两秒后关闭'\n });\n setTimeout(function () {\n _this2.setState({\n visible: false,\n ModalText: '对话框的内容'\n });\n }, 2000);\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n console.log('点击了取消');\n this.setState({\n visible: false\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: this.show.bind(this) },\n '\\u663E\\u793A\\u5BF9\\u8BDD\\u6846'\n ),\n React.createElement(\n _uxcore.Dialog,\n { title: '\\u5BF9\\u8BDD\\u6846\\u6807\\u9898',\n visible: this.state.visible,\n onOk: this.handleOk.bind(this),\n onCancel: this.handleCancel.bind(this)\n },\n React.createElement(\n 'p',\n null,\n this.state.ModalText\n )\n )\n );\n }\n }]);\n\n return AsyncCloseDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(AsyncCloseDemo, null), document.getElementById('components-dialog-demo-asyncclose'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dialog } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass AsyncCloseDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n ModalText: '对话框的内容',\n visible: false,\n };\n }\n show() {\n this.setState({\n visible: true,\n });\n }\n handleOk() {\n this.setState({\n ModalText: '对话框将在两秒后关闭',\n });\n setTimeout(() => {\n this.setState({\n visible: false,\n ModalText: '对话框的内容',\n });\n }, 2000);\n }\n handleCancel() {\n console.log('点击了取消');\n this.setState({\n visible: false,\n });\n }\n render() {\n return (\n <div>\n <Button onClick={this.show.bind(this)}>显示对话框</Button>\n <Dialog title=\"对话框标题\"\n visible={this.state.visible}\n onOk={this.handleOk.bind(this)}\n onCancel={this.handleCancel.bind(this)}\n >\n <p>{this.state.ModalText}</p>\n </Dialog>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <AsyncCloseDemo />,\n document.getElementById('components-dialog-demo-asyncclose')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"自定义","id":"components-dialog-demo-confirm","tags":[],"filepath":"site/components/dialog/demo/confirm.md","directory":"components/dialog/demo","filename":"confirm","meta":{"title":"自定义","description":"\n自定义 & 垂直居中。\n","order":"2","filepath":"site/components/dialog/demo/confirm.md","filename":"confirm","directory":"components/dialog/demo","id":"components-dialog-demo-confirm","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar CustomFooter = function (_React$Component) {\n _inherits(CustomFooter, _React$Component);\n\n function CustomFooter(props) {\n _classCallCheck(this, CustomFooter);\n\n var _this = _possibleConstructorReturn(this, (CustomFooter.__proto__ || Object.getPrototypeOf(CustomFooter)).call(this, props));\n\n _this.state = {\n loading: false,\n visible: false\n };\n return _this;\n }\n\n _createClass(CustomFooter, [{\n key: 'showModal',\n value: function showModal() {\n this.setState({\n visible: true\n });\n }\n }, {\n key: 'handleOk',\n value: function handleOk() {\n var _this2 = this;\n\n this.setState({ loading: true });\n setTimeout(function () {\n _this2.setState({ loading: false, visible: false });\n }, 3000);\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n this.setState({ visible: false });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: this.showModal.bind(this) },\n '\\u663E\\u793A\\u5BF9\\u8BDD\\u6846'\n ),\n React.createElement(\n _uxcore.Dialog,\n {\n wrapClassName: 'vertical-center-dailog',\n visible: this.state.visible,\n title: '\\u5BF9\\u8BDD\\u6846\\u6807\\u9898', onOk: this.handleOk, onCancel: this.handleCancel.bind(this),\n footer: [React.createElement(\n _uxcore.Button,\n { key: 'back', onClick: this.handleCancel.bind(this), size: 'small', type: 'secondary' },\n '\\u8FD4 \\u56DE'\n ), React.createElement(\n _uxcore.Button,\n { key: 'submit', onClick: this.handleOk.bind(this), size: 'small' },\n '\\u63D0 \\u4EA4'\n )]\n },\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n )\n )\n );\n }\n }]);\n\n return CustomFooter;\n}(React.Component);\n\nReactDOM.render(React.createElement(CustomFooter, null), document.getElementById('components-dialog-demo-confirm'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dialog } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass CustomFooter extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n visible: false,\n };\n }\n showModal() {\n this.setState({\n visible: true,\n });\n }\n handleOk() {\n this.setState({ loading: true });\n setTimeout(() => {\n this.setState({ loading: false, visible: false });\n }, 3000);\n }\n handleCancel() {\n this.setState({ visible: false });\n }\n render() {\n return (<div>\n <Button onClick={this.showModal.bind(this)}>\n 显示对话框\n </Button>\n <Dialog\n wrapClassName=\"vertical-center-dailog\"\n visible={this.state.visible}\n title=\"对话框标题\" onOk={this.handleOk} onCancel={this.handleCancel.bind(this)}\n footer={[\n <Button key=\"back\" onClick={this.handleCancel.bind(this)} size=\"small\" type=\"secondary\">返回</Button>,\n <Button key=\"submit\" onClick={this.handleOk.bind(this)} size=\"small\">提交</Button>,\n ]}\n >\n <p>对话框的内容</p>\n <p>对话框的内容</p>\n <p>对话框的内容</p>\n </Dialog>\n </div>);\n }\n}\n\nReactDOM.render(\n <CustomFooter />, document.getElementById('components-dialog-demo-confirm'));</code></pre></div>"},"status":"public","toc":""},{"title":"信息提示","id":"components-dialog-demo-info","tags":[],"filepath":"site/components/dialog/demo/info.md","directory":"components/dialog/demo","filename":"info","meta":{"title":"信息提示","description":"\n信息提示。\n","order":"3","filepath":"site/components/dialog/demo/info.md","filename":"info","directory":"components/dialog/demo","id":"components-dialog-demo-info","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nfunction info() {\n _uxcore.Dialog.info({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息',\n onOk: function onOk() {}\n });\n}\n\nfunction success() {\n _uxcore.Dialog.success({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息'\n });\n}\n\nfunction error() {\n _uxcore.Dialog.error({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息'\n });\n}\n\nvar InfoDemo = function (_React$Component) {\n _inherits(InfoDemo, _React$Component);\n\n function InfoDemo() {\n _classCallCheck(this, InfoDemo);\n\n return _possibleConstructorReturn(this, (InfoDemo.__proto__ || Object.getPrototypeOf(InfoDemo)).apply(this, arguments));\n }\n\n _createClass(InfoDemo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: info },\n '\\u4FE1\\u606F\\u63D0\\u793A'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n { onClick: success },\n '\\u6210\\u529F\\u63D0\\u793A'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n { onClick: error },\n '\\u5931\\u8D25\\u63D0\\u793A'\n )\n );\n }\n }]);\n\n return InfoDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(InfoDemo, null), document.getElementById('components-dialog-demo-info'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dialog } from 'uxcore';\nimport { Button } from 'uxcore';\n\nfunction info() {\n Dialog.info({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息',\n onOk() { },\n });\n}\n\nfunction success() {\n Dialog.success({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息',\n });\n}\n\nfunction error() {\n Dialog.error({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息',\n });\n}\n\nclass InfoDemo extends React.Component {\n render() {\n return (\n <div>\n <Button onClick={info}>信息提示</Button>&nbsp;\n <Button onClick={success}>成功提示</Button>&nbsp;\n <Button onClick={error}>失败提示</Button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <InfoDemo />, document.getElementById('components-dialog-demo-info'));</code></pre></div>"},"status":"public","toc":""},{"title":"确认对话框","id":"components-dialog-demo-custom","tags":[],"filepath":"site/components/dialog/demo/custom.md","directory":"components/dialog/demo","filename":"custom","meta":{"title":"确认对话框","description":"\n确认对话框。\n","order":"4","filepath":"site/components/dialog/demo/custom.md","filename":"custom","directory":"components/dialog/demo","id":"components-dialog-demo-custom","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar confirm = _uxcore.Dialog.confirm;\n\nfunction showConfirm() {\n confirm({\n title: '您是否确认要删除这项内容',\n content: '一些解释',\n onOk: function onOk() {\n alert('确定');\n },\n onCancel: function onCancel() {}\n });\n}\n\nvar ConfirmDemo = function (_React$Component) {\n _inherits(ConfirmDemo, _React$Component);\n\n function ConfirmDemo() {\n _classCallCheck(this, ConfirmDemo);\n\n return _possibleConstructorReturn(this, (ConfirmDemo.__proto__ || Object.getPrototypeOf(ConfirmDemo)).apply(this, arguments));\n }\n\n _createClass(ConfirmDemo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Button,\n { onClick: showConfirm.bind(this) },\n '\\u786E\\u8BA4\\u5BF9\\u8BDD\\u6846'\n );\n }\n }]);\n\n return ConfirmDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(ConfirmDemo, null), document.getElementById('components-dialog-demo-custom'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dialog } from 'uxcore';\nimport { Button } from 'uxcore';\nconst confirm = Dialog.confirm;\n\nfunction showConfirm() {\n confirm({\n title: '您是否确认要删除这项内容',\n content: '一些解释',\n onOk() {\n alert('确定');\n },\n onCancel() { },\n });\n}\n\nclass ConfirmDemo extends React.Component {\n render() {\n return (\n <Button onClick={showConfirm.bind(this)}>\n 确认对话框\n </Button>\n );\n }\n}\n\nReactDOM.render(\n <ConfirmDemo />, document.getElementById('components-dialog-demo-custom'));\n</code></pre></div>"},"status":"public","toc":""},{"title":"动画","id":"components-dialog-demo-animate","tags":[],"filepath":"site/components/dialog/demo/animate.md","directory":"components/dialog/demo","filename":"animate","meta":{"title":"动画","description":"\nCSS3 动画\n","order":"5","filepath":"site/components/dialog/demo/animate.md","filename":"animate","directory":"components/dialog/demo","id":"components-dialog-demo-animate","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar BasicDemo = function (_React$Component) {\n _inherits(BasicDemo, _React$Component);\n\n function BasicDemo(props) {\n _classCallCheck(this, BasicDemo);\n\n var _this = _possibleConstructorReturn(this, (BasicDemo.__proto__ || Object.getPrototypeOf(BasicDemo)).call(this, props));\n\n _this.state = {\n visible: false,\n effect: 'fade'\n };\n return _this;\n }\n\n _createClass(BasicDemo, [{\n key: 'showModal',\n value: function showModal() {\n this.setState({\n visible: true\n });\n }\n }, {\n key: 'handleOk',\n value: function handleOk() {\n console.log('点击了确定');\n this.setState({\n visible: false\n });\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n this.setState({\n visible: false\n });\n }\n }, {\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n effect: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Select,\n { className: 'demo-select', placeholder: '\\u8BF7\\u9009\\u62E9\\u52A8\\u753B\\u6548\\u679C', defaultValue: me.state.effect, onChange: me.handleChange.bind(me) },\n ['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'].map(function (item, index) {\n return React.createElement(\n _uxcore.Select.Option,\n { key: item },\n item\n );\n })\n )\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: this.showModal.bind(this) },\n '\\u663E\\u793A\\u5BF9\\u8BDD\\u6846'\n ),\n React.createElement(\n _uxcore.Dialog,\n { title: '\\u7B2C\\u4E00\\u4E2A Dialog',\n visible: this.state.visible,\n onOk: this.handleOk.bind(this),\n onCancel: this.handleCancel.bind(this),\n transitionName: this.state.effect\n },\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n )\n )\n );\n }\n }]);\n\n return BasicDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(BasicDemo, null), document.getElementById('components-dialog-demo-animate'));\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dialog } from 'uxcore';\nimport { Select } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass BasicDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n effect: 'fade',\n };\n }\n showModal() {\n this.setState({\n visible: true,\n });\n }\n handleOk() {\n console.log('点击了确定');\n this.setState({\n visible: false,\n });\n }\n handleCancel() {\n this.setState({\n visible: false,\n });\n }\n handleChange(value) {\n this.setState({\n effect: value,\n });\n }\n render() {\n const me = this;\n return (\n <div>\n <div>\n <Select className=\"demo-select\" placeholder=\"请选择动画效果\" defaultValue={me.state.effect} onChange={me.handleChange.bind(me)}>\n {['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'].map((item, index) => <Select.Option key={item}>{item}</Select.Option>)}\n </Select>\n </div>\n <Button onClick={this.showModal.bind(this)}>显示对话框</Button>\n <Dialog title=\"第一个 Dialog\"\n visible={this.state.visible}\n onOk={this.handleOk.bind(this)}\n onCancel={this.handleCancel.bind(this)}\n transitionName={this.state.effect}\n >\n 对话框的内容\n 对话框的内容\n 对话框的内容\n </Dialog>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <BasicDemo />, document.getElementById('components-dialog-demo-animate'));\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.demo-select {\n width: 200px;\n margin-bottom: 10px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-select {\n width: 200px;\n margin-bottom: 10px;\n}</code></pre></div>"},"status":"public","toc":""}]

基本用法

基本用法。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';

class BasicDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  show() {
    this.setState({
      visible: true,
    });
  }
  render() {
    return (
      <div>
        <Button onClick={this.show.bind(this)}>显示对话框</Button>
        <Dialog title="第一个 Dialog"
          visible={this.state.visible}
          draggable={true}
          onOk={() => {
            this.setState({
              visible: false,
            });
          }}
          onCancel={() => {
            this.setState({
              visible: false,
            });
          }}
        >
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
        </Dialog>
      </div>
    );
  }
}

ReactDOM.render(
  <BasicDemo />, document.getElementById('components-dialog-demo-basic'));

点击按钮触发

点击确定2s后再关闭对话框。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';

class AsyncCloseDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ModalText: '对话框的内容',
      visible: false,
    };
  }
  show() {
    this.setState({
      visible: true,
    });
  }
  handleOk() {
    this.setState({
      ModalText: '对话框将在两秒后关闭',
    });
    setTimeout(() => {
      this.setState({
        visible: false,
        ModalText: '对话框的内容',
      });
    }, 2000);
  }
  handleCancel() {
    console.log('点击了取消');
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button onClick={this.show.bind(this)}>显示对话框</Button>
        <Dialog title="对话框标题"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          onCancel={this.handleCancel.bind(this)}
        >
          <p>{this.state.ModalText}</p>
        </Dialog>
      </div>
    );
  }
}

ReactDOM.render(
  <AsyncCloseDemo />,
  document.getElementById('components-dialog-demo-asyncclose')
);

自定义

自定义 & 垂直居中。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';

class CustomFooter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
    };
  }
  showModal() {
    this.setState({
      visible: true,
    });
  }
  handleOk() {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  }
  handleCancel() {
    this.setState({ visible: false });
  }
  render() {
    return (<div>
      <Button onClick={this.showModal.bind(this)}>
        显示对话框
      </Button>
      <Dialog
        wrapClassName="vertical-center-dailog"
        visible={this.state.visible}
        title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel.bind(this)}
        footer={[
          <Button key="back" onClick={this.handleCancel.bind(this)} size="small" type="secondary">返 回</Button>,
          <Button key="submit" onClick={this.handleOk.bind(this)} size="small">提 交</Button>,
        ]}
      >
        <p>对话框的内容</p>
        <p>对话框的内容</p>
        <p>对话框的内容</p>
      </Dialog>
    </div>);
  }
}

ReactDOM.render(
  <CustomFooter />, document.getElementById('components-dialog-demo-confirm'));

信息提示

信息提示。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';

function info() {
  Dialog.info({
    title: '这是一条通知信息',
    content: '一些附加信息一些附加信息一些附加信息',
    onOk() { },
  });
}

function success() {
  Dialog.success({
    title: '这是一条通知信息',
    content: '一些附加信息一些附加信息一些附加信息',
  });
}

function error() {
  Dialog.error({
    title: '这是一条通知信息',
    content: '一些附加信息一些附加信息一些附加信息',
  });
}

class InfoDemo extends React.Component {
  render() {
    return (
      <div>
        <Button onClick={info}>信息提示</Button>&nbsp;
        <Button onClick={success}>成功提示</Button>&nbsp;
        <Button onClick={error}>失败提示</Button>
      </div>
    );
  }
}

ReactDOM.render(
  <InfoDemo />, document.getElementById('components-dialog-demo-info'));

确认对话框

确认对话框。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';
const confirm = Dialog.confirm;

function showConfirm() {
  confirm({
    title: '您是否确认要删除这项内容',
    content: '一些解释',
    onOk() {
      alert('确定');
    },
    onCancel() { },
  });
}

class ConfirmDemo extends React.Component {
  render() {
    return (
      <Button onClick={showConfirm.bind(this)}>
        确认对话框
      </Button>
    );
  }
}

ReactDOM.render(
  <ConfirmDemo />, document.getElementById('components-dialog-demo-custom'));

动画

CSS3 动画

import { Dialog } from 'uxcore';
import { Select } from 'uxcore';
import { Button } from 'uxcore';

class BasicDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      effect: 'fade',
    };
  }
  showModal() {
    this.setState({
      visible: true,
    });
  }
  handleOk() {
    console.log('点击了确定');
    this.setState({
      visible: false,
    });
  }
  handleCancel() {
    this.setState({
      visible: false,
    });
  }
  handleChange(value) {
    this.setState({
      effect: value,
    });
  }
  render() {
    const me = this;
    return (
      <div>
        <div>
          <Select className="demo-select" placeholder="请选择动画效果" defaultValue={me.state.effect} onChange={me.handleChange.bind(me)}>
            {['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'].map((item, index) => <Select.Option key={item}>{item}</Select.Option>)}
          </Select>
        </div>
        <Button onClick={this.showModal.bind(this)}>显示对话框</Button>
        <Dialog title="第一个 Dialog"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          onCancel={this.handleCancel.bind(this)}
          transitionName={this.state.effect}
        >
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
        </Dialog>
      </div>
    );
  }
}

ReactDOM.render(
  <BasicDemo />, document.getElementById('components-dialog-demo-animate'));
/* JS END CSS START*/

.demo-select {
    width: 200px;
    margin-bottom: 10px;
}

模态对话框。

何时使用

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Dialog 在当前页面正中打开一个浮层，承载相应的操作。

Usage


const Dialog = require('uxcore-dialog');

ReactDOM.render(
  <Dialog title="第一个 Dialog"
    visible={this.state.visible}
    onOk={this.handleOk.bind(this)}
    onCancel={this.handleCancel.bind(this)}
  >
    <p>对话框的内容</p>
  </Dialog>,
  document.getElementById('content')
);

API

参数	说明	类型	默认值
title	Title of the dialog	String	React.Element	无
visible	current dialog's visible status	Boolean	false
mousePosition	set pageX and pageY of current mouse(it will cause transform origin to be set).	{x:number,y:number}	无
onOk	the callback when ok clicked	function	无
onCancel	the callback when dialog closed	function	无
width	dialog width	String or Number	520
footer	footer of the dialog	React.Element
closable	whether show close button and click mask to close	Boolean	true
maskClosable	whether click mask to close, this prop will be ignored if set closable prop to false	Boolean	true
locale	国际化(包括 `zh-cn`, `en-us`, 和 `pl-pl`)	String	`zh-cn`
className	additional className for dialog	string
wrapClassName	additional className for dialog wrap	string	`vertical-center-dailog` for vertical align the dialog
style	Root style for dialog element.Such as width, height	Object	{}
zIndex		Number
bodyStyle	body style for dialog body element.Such as height	Number	{}
htmlClassName	the className added to html element when dialog is visible	String	''
draggable	support dragging	bool	''

Dialog.xxx()

包括：

Dialog.info
Dialog.success
Dialog.error
Dialog.confirm

以上均为一个函数，参数为 object，具体属性如下：

参数	说明	类型	默认值
title	标题	React.Element or String	无
onOk	点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	function	无
onCancel	取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	function	无
width	宽度	String or Number	416
buttonSize	按钮的尺寸，'small', 'medium', 'large' 三种可选	String	'medium'
iconClassName	图标样式名	String	kuma-icon-caution
icon	自定义图标	Icon Element	uxcore-icon 的实例，http://uxco.re/components/icon/
timer	弹框自动关闭, 2000表示2s以后关闭	Number, false or null	false
htmlClassName	the className added to html element when dialog is visible	String	''
okText	确认按钮文字 , 0.7.1 版本后支持	string	-
cancelText	取消按钮文字 , 0.7.1 版本后支持	string	-