uxcore.js - React UI Component Set

组件演示

[{"title":"区块信息展示","id":"scene-card-demo-basic","tags":[],"filepath":"site/scene/card/demo/basic.md","directory":"scene/card/demo","filename":"basic","meta":{"title":"区块信息展示","description":"\n","order":"0","filepath":"site/scene/card/demo/basic.md","filename":"basic","directory":"scene/card/demo","id":"scene-card-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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\nvar Input = _uxcore.Form.InputFormField,\n FormRow = _uxcore.Form.FormRow,\n FormRowTitle = _uxcore.Form.FormRowTitle,\n Validators = _uxcore.Form.Validators,\n OtherFormField = _uxcore.Form.OtherFormField,\n DateFormField = _uxcore.Form.DateFormField,\n CascadeSelectFormField = _uxcore.Form.CascadeSelectFormField,\n SelectFormField = _uxcore.Form.SelectFormField,\n CheckboxGroupFormField = _uxcore.Form.CheckboxGroupFormField;\n\n\nvar Item = CheckboxGroupFormField.Item;\n\nvar CardItem = function (_React$Component) {\n _inherits(CardItem, _React$Component);\n\n function CardItem(props) {\n _classCallCheck(this, CardItem);\n\n var _this = _possibleConstructorReturn(this, (CardItem.__proto__ || Object.getPrototypeOf(CardItem)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(CardItem, [{\n key: 'componentDidMount',\n value: function componentDidMount() {}\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n var data = this.props.data;\n return React.createElement(\n 'div',\n { className: 'templateCardItemWrap' },\n React.createElement(\n 'div',\n { className: 'templateCardItemTitle' },\n data.title\n ),\n React.createElement(\n 'div',\n { className: 'templateCardItemContent' },\n data.content\n )\n );\n }\n }]);\n\n return CardItem;\n}(React.Component);\n\nvar Card = function (_React$Component2) {\n _inherits(Card, _React$Component2);\n\n function Card(props) {\n _classCallCheck(this, Card);\n\n var _this2 = _possibleConstructorReturn(this, (Card.__proto__ || Object.getPrototypeOf(Card)).call(this, props));\n\n _this2.state = {\n cardValues: {},\n showCardDialog: false,\n cardList: [{\n title: '阿里巴巴(中国)有限公司',\n content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',\n id: new Date().getTime(),\n active: true\n }, {\n title: '阿里巴巴(中国)有限公司阿里巴巴(中国)有限公司',\n content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',\n id: new Date().getTime() + 1\n }]\n };\n return _this2;\n }\n\n _createClass(Card, [{\n key: 'componentDidMount',\n value: function componentDidMount() {}\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {}\n }, {\n key: 'showNewCardDialog',\n value: function showNewCardDialog() {\n this.setState({\n action: 'add',\n showCardDialog: true,\n cardValues: {}\n });\n }\n }, {\n key: 'handleCard',\n value: function handleCard() {\n var data = this.refs.form.getValues();\n\n if (!data.pass) {\n return;\n }\n\n if (this.state.action === 'add') {\n this.state.cardList.push({\n title: data.values.cardTitle,\n content: data.values.cardContent,\n id: new Date().getTime()\n });\n } else {\n var editData = this.state.editData;\n this.state.cardList.map(function (item) {\n if (item.id === editData.id) {\n item.content = data.values.cardContent;\n item.title = data.values.cardTitle;\n return true;\n }\n });\n }\n\n this.state.showCardDialog = false;\n this.setState(this.state);\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n this.setState({\n showCardDialog: false\n });\n }\n }, {\n key: 'onEditCard',\n value: function onEditCard(data) {\n this.state.cardValues.cardTitle = data.title;\n this.state.cardValues.cardContent = data.content;\n this.state.showCardDialog = true;\n this.state.action = 'edit';\n this.state.editData = data;\n this.setState(this.state);\n }\n }, {\n key: 'onRemoveCard',\n value: function onRemoveCard(data) {\n var _this3 = this;\n\n _uxcore.Dialog.confirm({\n title: '确定删除?',\n onOk: function onOk() {\n _this3.state.cardList.some(function (item, i) {\n if (item.id === data.id) {\n _this3.state.cardList.splice(i, 1);\n return true;\n }\n });\n _this3.setState(_this3.state);\n }\n });\n }\n }, {\n key: 'renderCardDialog',\n value: function renderCardDialog() {\n return React.createElement(\n _uxcore.Dialog,\n { ref: 'modal',\n visible: true,\n className: 'newCardDialog',\n title: '\\u6DFB\\u52A0\\u5361\\u7247', onCancel: this.handleCancel.bind(this),\n footer: [React.createElement(\n _uxcore.Button,\n { onClick: this.handleCard.bind(this) },\n '\\u63D0 \\u4EA4'\n ), React.createElement(\n _uxcore.Button,\n { onClick: this.handleCancel.bind(this) },\n '\\u53D6 \\u6D88'\n )]\n },\n React.createElement(\n _uxcore.Form,\n { ref: 'form', jsxvalues: this.state.cardValues },\n React.createElement(FormRowTitle, { jsxtitle: '\\u5361\\u7247\\u4FE1\\u606F' }),\n React.createElement(Input, {\n required: true,\n jsxname: 'cardTitle',\n jsxlabel: '\\u6807\\u9898',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '请填写标题' }]\n }),\n React.createElement(Input, {\n required: true,\n jsxname: 'cardContent',\n jsxlabel: '\\u5185\\u5BB9',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '请填写内容' }]\n })\n )\n );\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n { className: 'pageDemo' },\n React.createElement(\n 'div',\n { className: 'templateCardWrap' },\n React.createElement(\n 'ul',\n { className: 'templateCardList clearfix' },\n me.state.cardList.map(function (item, i) {\n return React.createElement(\n 'li',\n { className: 'templateCardItem ' + (item.active ? 'active' : ''), key: 'templateCardItem' + i },\n React.createElement(CardItem, { data: item }),\n React.createElement(\n 'div',\n { className: 'templateCardEdit' },\n React.createElement(\n 'a',\n { href: 'javascript:void(0);', onClick: me.onEditCard.bind(me, item) },\n '\\u4FEE\\u6539'\n ),\n React.createElement(\n 'a',\n { href: 'javascript:void(0);', onClick: me.onRemoveCard.bind(me, item) },\n '\\u5220\\u9664'\n )\n )\n );\n }),\n React.createElement(\n 'li',\n { className: 'templateCardItem templateAddCard', onClick: me.showNewCardDialog.bind(this) },\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tps/TB14qDfPFXXXXclXXXXXXXXXXXX-200-200.png', className: 'templateAddCardBtn' })\n ),\n React.createElement(\n 'p',\n { className: 'templateCardTxt' },\n '\\u6DFB\\u52A0\\u5361\\u7247'\n )\n )\n )\n ),\n me.state.showCardDialog ? me.renderCardDialog() : null\n );\n }\n }]);\n\n return Card;\n}(React.Component);\n\nvar Demo = function (_React$Component3) {\n _inherits(Demo, _React$Component3);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this4 = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this4.state = {};\n return _this4;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n { className: 'pageDemo' },\n React.createElement(Card, null)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-card-demo-basic'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\nimport { Form } from 'uxcore';\nimport { Button } from 'uxcore';\nimport { Dialog } from 'uxcore';\nconst {\n InputFormField: Input,\n FormRow,\n FormRowTitle,\n Validators,\n OtherFormField,\n DateFormField,\n CascadeSelectFormField,\n SelectFormField,\n CheckboxGroupFormField,\n} = Form;\n\nconst Item = CheckboxGroupFormField.Item;\n\n\nclass CardItem extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n componentDidMount() {\n }\n\n render() {\n const me = this;\n const data = this.props.data;\n return (\n <div className=\"templateCardItemWrap\">\n <div className=\"templateCardItemTitle\">{data.title}</div>\n <div className=\"templateCardItemContent\">{data.content}</div>\n </div>\n );\n }\n}\n\nclass Card extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n cardValues: {},\n showCardDialog: false,\n cardList: [{\n title: '阿里巴巴(中国)有限公司',\n content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',\n id: (new Date()).getTime(),\n active: true,\n }, {\n title: '阿里巴巴(中国)有限公司阿里巴巴(中国)有限公司',\n content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',\n id: (new Date()).getTime() + 1,\n }],\n };\n }\n\n componentDidMount() {\n }\n\n componentWillUnmount() {\n }\n\n showNewCardDialog() {\n this.setState({\n action: 'add',\n showCardDialog: true,\n cardValues: {},\n });\n }\n\n handleCard() {\n const data = this.refs.form.getValues();\n\n if (!data.pass) {\n return;\n }\n\n if (this.state.action === 'add') {\n this.state.cardList.push({\n title: data.values.cardTitle,\n content: data.values.cardContent,\n id: (new Date()).getTime(),\n });\n } else {\n const editData = this.state.editData;\n this.state.cardList.map((item) => {\n if (item.id === editData.id) {\n item.content = data.values.cardContent;\n item.title = data.values.cardTitle;\n return true;\n }\n });\n }\n\n this.state.showCardDialog = false;\n this.setState(this.state);\n }\n\n handleCancel() {\n this.setState({\n showCardDialog: false,\n });\n }\n\n onEditCard(data) {\n this.state.cardValues.cardTitle = data.title;\n this.state.cardValues.cardContent = data.content;\n this.state.showCardDialog = true;\n this.state.action = 'edit';\n this.state.editData = data;\n this.setState(this.state);\n }\n\n onRemoveCard(data) {\n Dialog.confirm({\n title: '确定删除?',\n onOk: () => {\n this.state.cardList.some((item, i) => {\n if (item.id === data.id) {\n this.state.cardList.splice(i, 1);\n return true;\n }\n });\n this.setState(this.state);\n },\n });\n }\n\n renderCardDialog() {\n return (<Dialog ref=\"modal\"\n visible\n className=\"newCardDialog\"\n title=\"添加卡片\" onCancel={this.handleCancel.bind(this)}\n footer={[\n <Button onClick={this.handleCard.bind(this)}>提交</Button>,\n <Button onClick={this.handleCancel.bind(this)}>取消</Button>,\n ]}\n >\n <Form ref=\"form\" jsxvalues={this.state.cardValues}>\n <FormRowTitle jsxtitle=\"卡片信息\" />\n <Input\n required\n jsxname=\"cardTitle\"\n jsxlabel=\"标题\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '请填写标题' },\n ]}\n />\n <Input\n required\n jsxname=\"cardContent\"\n jsxlabel=\"内容\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '请填写内容' },\n ]}\n />\n </Form>\n </Dialog>);\n }\n\n render() {\n const me = this;\n return (\n <div className=\"pageDemo\">\n <div className=\"templateCardWrap\">\n <ul className=\"templateCardList clearfix\">\n {\n me.state.cardList.map((item, i) => (<li className={`templateCardItem ${item.active ? 'active' : ''}`} key={`templateCardItem${i}`}>\n <CardItem data={item} />\n <div className=\"templateCardEdit\">\n <a href=\"javascript:void(0);\" onClick={me.onEditCard.bind(me, item)}>修改</a>\n <a href=\"javascript:void(0);\" onClick={me.onRemoveCard.bind(me, item)}>删除</a>\n </div>\n </li>))\n }\n <li className=\"templateCardItem templateAddCard\" onClick={me.showNewCardDialog.bind(this)}>\n <div>\n <img src={'https://img.alicdn.com/tps/TB14qDfPFXXXXclXXXXXXXXXXXX-200-200.png'} className=\"templateAddCardBtn\" />\n </div>\n <p className=\"templateCardTxt\">添加卡片</p>\n </li>\n </ul>\n </div>\n {\n me.state.showCardDialog ? me.renderCardDialog() : null\n }\n </div>\n );\n }\n}\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const me = this;\n return (<div className=\"pageDemo\">\n <Card />\n </div>);\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-card-demo-basic'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.pageDemo {\n width: 1000px;\n margin: 0 auto;\n background: white;\n min-height: 300px;\n}\n\n.templateCardWrap {\n overflow: hidden;\n}\n.templateCardWrap .clearfix:after {\n content: \"\";\n display: block;\n clear: both;\n width: 0; \n}\n.templateCardWrap .templateCardList {\n width: calc(100% + 10px);\n margin-left: -10px;\n margin-top: -10px;\n}\n.templateCardWrap .templateCardItem {\n float: left;\n width: 270px;\n height: 158px;\n border: 1px solid #ccc;\n position: relative;\n margin-left: 20px;\n margin-top: 20px;\n padding: 20px 16px;\n}\n\n.templateCardWrap .templateCardItem.active {\n box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);\n}\n.templateCardWrap .templateAddCardBtn {\n display: block;\n width: 66px;\n height: 66px;\n margin: 24px auto 12px;\n}\n.templateCardWrap .templateCardTxt {\n text-align: center;\n}\n.templateCardWrap .templateAddCard {\n cursor: pointer;\n}\n.templateCardWrap .templateCardEdit {\n position: absolute;\n bottom: 10px;\n right: 0;\n line-height: 1;\n}\n.templateCardWrap .templateCardEdit a {\n text-decoration: none;\n margin-right: 10px;\n color: #2599F2;\n}\n\n.templateCardItemTitle {\n color: #333;\n font-size: 14px;\n line-height: 1.5;\n}\n.templateCardItemContent {\n color: #999;\n margin-top: 10px;\n line-height: 1.5;\n}\n.templateCardItemWrap {\n height: calc(100% - 10px);\n overflow: hidden;\n}\n</style><div class=\"highlight\"><pre><code class=\"css\">.pageDemo {\n width: 1000px;\n margin: 0 auto;\n background: white;\n min-height: 300px;\n}\n\n.templateCardWrap {\n overflow: hidden;\n}\n.templateCardWrap .clearfix:after {\n content: \"\";\n display: block;\n clear: both;\n width: 0; \n}\n.templateCardWrap .templateCardList {\n width: calc(100% + 10px);\n margin-left: -10px;\n margin-top: -10px;\n}\n.templateCardWrap .templateCardItem {\n float: left;\n width: 270px;\n height: 158px;\n border: 1px solid #ccc;\n position: relative;\n margin-left: 20px;\n margin-top: 20px;\n padding: 20px 16px;\n}\n\n.templateCardWrap .templateCardItem.active {\n box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);\n}\n.templateCardWrap .templateAddCardBtn {\n display: block;\n width: 66px;\n height: 66px;\n margin: 24px auto 12px;\n}\n.templateCardWrap .templateCardTxt {\n text-align: center;\n}\n.templateCardWrap .templateAddCard {\n cursor: pointer;\n}\n.templateCardWrap .templateCardEdit {\n position: absolute;\n bottom: 10px;\n right: 0;\n line-height: 1;\n}\n.templateCardWrap .templateCardEdit a {\n text-decoration: none;\n margin-right: 10px;\n color: #2599F2;\n}\n\n.templateCardItemTitle {\n color: #333;\n font-size: 14px;\n line-height: 1.5;\n}\n.templateCardItemContent {\n color: #999;\n margin-top: 10px;\n line-height: 1.5;\n}\n.templateCardItemWrap {\n height: calc(100% - 10px);\n overflow: hidden;\n}\n</code></pre></div>"},"status":"public","toc":""},{"title":"区块信息展示(可拖动)","id":"scene-card-demo-draggable","tags":[],"filepath":"site/scene/card/demo/draggable.md","directory":"scene/card/demo","filename":"draggable","meta":{"title":"区块信息展示(可拖动)","description":"\n","order":"1","filepath":"site/scene/card/demo/draggable.md","filename":"draggable","directory":"scene/card/demo","id":"scene-card-demo-draggable","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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\nvar Input = _uxcore.Form.InputFormField,\n FormRow = _uxcore.Form.FormRow,\n FormRowTitle = _uxcore.Form.FormRowTitle,\n Validators = _uxcore.Form.Validators,\n OtherFormField = _uxcore.Form.OtherFormField,\n DateFormField = _uxcore.Form.DateFormField,\n CascadeSelectFormField = _uxcore.Form.CascadeSelectFormField,\n SelectFormField = _uxcore.Form.SelectFormField,\n CheckboxGroupFormField = _uxcore.Form.CheckboxGroupFormField;\n\n\nvar Item = CheckboxGroupFormField.Item;\n\nvar CardItem = function (_React$Component) {\n _inherits(CardItem, _React$Component);\n\n function CardItem(props) {\n _classCallCheck(this, CardItem);\n\n var _this = _possibleConstructorReturn(this, (CardItem.__proto__ || Object.getPrototypeOf(CardItem)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(CardItem, [{\n key: 'componentDidMount',\n value: function componentDidMount() {}\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n var data = this.props.data;\n return React.createElement(\n 'div',\n { className: 'templateCardItemWrap' },\n React.createElement(\n 'div',\n { className: 'templateCardItemTitle' },\n data.title\n ),\n React.createElement(\n 'div',\n { className: 'templateCardItemContent' },\n data.content\n )\n );\n }\n }]);\n\n return CardItem;\n}(React.Component);\n\nvar Card = function (_React$Component2) {\n _inherits(Card, _React$Component2);\n\n function Card(props) {\n _classCallCheck(this, Card);\n\n var _this2 = _possibleConstructorReturn(this, (Card.__proto__ || Object.getPrototypeOf(Card)).call(this, props));\n\n _this2.state = {\n cardValues: {},\n showCardDialog: false,\n cardList: [{\n title: '阿里巴巴(中国)有限公司',\n content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',\n id: new Date().getTime()\n }, {\n title: '阿里巴巴(中国)有限公司阿里巴巴(中国)有限公司',\n content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',\n id: new Date().getTime() + 1\n }]\n };\n return _this2;\n }\n\n _createClass(Card, [{\n key: 'componentDidMount',\n value: function componentDidMount() {}\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {}\n }, {\n key: 'showNewCardDialog',\n value: function showNewCardDialog() {\n this.setState({\n action: 'add',\n showCardDialog: true,\n cardValues: {}\n });\n }\n }, {\n key: 'handleCard',\n value: function handleCard() {\n var data = this.refs.form.getValues();\n\n if (!data.pass) {\n return;\n }\n\n if (this.state.action === 'add') {\n this.state.cardList.push({\n title: data.values.cardTitle,\n content: data.values.cardContent,\n id: new Date().getTime()\n });\n } else {\n var editData = this.state.editData;\n this.state.cardList.map(function (item) {\n if (item.id === editData.id) {\n item.title = data.values.cardTitle;\n item.content = data.values.cardContent;\n return true;\n }\n });\n }\n\n this.state.showCardDialog = false;\n this.setState(this.state);\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n this.setState({\n showCardDialog: false\n });\n }\n }, {\n key: 'onEditCard',\n value: function onEditCard(data) {\n this.state.cardValues.cardTitle = data.title;\n this.state.cardValues.cardContent = data.content;\n this.state.showCardDialog = true;\n this.state.action = 'edit';\n this.state.editData = data;\n this.setState(this.state);\n }\n }, {\n key: 'onRemoveCard',\n value: function onRemoveCard(data) {\n var _this3 = this;\n\n _uxcore.Dialog.confirm({\n title: '确定删除?',\n onOk: function onOk() {\n _this3.state.cardList.some(function (item, i) {\n if (item.id === data.id) {\n _this3.state.cardList.splice(i, 1);\n return true;\n }\n });\n _this3.setState(_this3.state);\n }\n });\n }\n }, {\n key: 'onDragStart',\n value: function onDragStart(data) {\n this.state.dragItemData = data;\n }\n }, {\n key: 'onDrop',\n value: function onDrop(data) {\n this.switchItem(this.state.dragItemData, data);\n }\n }, {\n key: 'onDragEnter',\n value: function onDragEnter(e) {\n e.target.classList.add('dragOver');\n }\n }, {\n key: 'onDragOver',\n value: function onDragOver(e) {\n e.preventDefault();\n }\n }, {\n key: 'onDragLeave',\n value: function onDragLeave(e) {\n e.preventDefault();\n e.target.classList.remove('dragOver');\n }\n }, {\n key: 'findItem',\n value: function findItem(data) {\n var index = -1;\n this.state.cardList.some(function (item, i) {\n if (item.id === data.id) {\n index = i;\n return true;\n }\n });\n return index;\n }\n }, {\n key: 'switchItem',\n value: function switchItem(dragItem, dropItem) {\n var cardList = this.state.cardList;\n var dragIndex = this.findItem(dragItem);\n var dropIndex = this.findItem(dropItem);\n\n if (dragIndex < 0 || dropIndex < 0) {\n // 'error';\n return;\n }\n\n var item = cardList[dragIndex];\n cardList.splice(dragIndex, 1);\n cardList.splice(dropIndex, 0, item);\n\n this.setState(this.state);\n }\n }, {\n key: 'renderCardDialog',\n value: function renderCardDialog() {\n return React.createElement(\n _uxcore.Dialog,\n { ref: 'modal',\n visible: true,\n className: 'newCardDialog',\n title: '\\u6DFB\\u52A0\\u5361\\u7247', onCancel: this.handleCancel.bind(this),\n footer: [React.createElement(\n _uxcore.Button,\n { onClick: this.handleCard.bind(this) },\n '\\u63D0 \\u4EA4'\n ), React.createElement(\n _uxcore.Button,\n { onClick: this.handleCancel.bind(this) },\n '\\u53D6 \\u6D88'\n )]\n },\n React.createElement(\n _uxcore.Form,\n { ref: 'form', jsxvalues: this.state.cardValues },\n React.createElement(FormRowTitle, { jsxtitle: '\\u5361\\u7247\\u4FE1\\u606F' }),\n React.createElement(Input, {\n required: true,\n jsxname: 'cardTitle',\n jsxlabel: '\\u6807\\u9898',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '请填写标题' }]\n }),\n React.createElement(Input, {\n required: true,\n jsxname: 'cardContent',\n jsxlabel: '\\u5185\\u5BB9',\n jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '请填写内容' }]\n })\n )\n );\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n { className: 'pageDemo1' },\n React.createElement(\n 'div',\n { className: 'templateCardWrap' },\n React.createElement(\n 'ul',\n { className: 'templateCardList clearfix' },\n me.state.cardList.map(function (item, i) {\n return React.createElement(\n 'li',\n { className: 'templateCardItem', draggable: true, onDragStart: me.onDragStart.bind(me, item), onDragEnter: me.onDragEnter, onDragOver: me.onDragOver, onDrop: me.onDrop.bind(me, item), onDragLeave: me.onDragLeave, key: 'templateCardItem' + i },\n React.createElement(CardItem, { data: item }),\n React.createElement(\n 'div',\n { className: 'templateCardEdit' },\n React.createElement(\n 'a',\n { href: 'javascript:void(0);', onClick: me.onEditCard.bind(me, item) },\n '\\u4FEE\\u6539'\n ),\n React.createElement(\n 'a',\n { href: 'javascript:void(0);', onClick: me.onRemoveCard.bind(me, item) },\n '\\u5220\\u9664'\n )\n )\n );\n }),\n React.createElement(\n 'li',\n { className: 'templateCardItem templateAddCard', onClick: me.showNewCardDialog.bind(this) },\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tps/TB14qDfPFXXXXclXXXXXXXXXXXX-200-200.png', className: 'templateAddCardBtn' })\n ),\n React.createElement(\n 'p',\n { className: 'templateCardTxt' },\n '\\u6DFB\\u52A0\\u5361\\u7247'\n )\n )\n )\n ),\n me.state.showCardDialog ? me.renderCardDialog() : null\n );\n }\n }]);\n\n return Card;\n}(React.Component);\n\nvar Demo = function (_React$Component3) {\n _inherits(Demo, _React$Component3);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this4 = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this4.state = {};\n return _this4;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n { className: 'pageDemo' },\n React.createElement(Card, null)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-card-demo-draggable'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\nimport { Form } from 'uxcore';\nimport { Button } from 'uxcore';\nimport { Dialog } from 'uxcore';\nconst {\n InputFormField: Input,\n FormRow,\n FormRowTitle,\n Validators,\n OtherFormField,\n DateFormField,\n CascadeSelectFormField,\n SelectFormField,\n CheckboxGroupFormField,\n} = Form;\n\nconst Item = CheckboxGroupFormField.Item;\n\n\nclass CardItem extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n componentDidMount() {\n }\n\n render() {\n const me = this;\n const data = this.props.data;\n return (\n <div className=\"templateCardItemWrap\">\n <div className=\"templateCardItemTitle\">{data.title}</div>\n <div className=\"templateCardItemContent\">{data.content}</div>\n </div>\n );\n }\n}\n\nclass Card extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n cardValues: {},\n showCardDialog: false,\n cardList: [{\n title: '阿里巴巴(中国)有限公司',\n content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',\n id: (new Date()).getTime(),\n }, {\n title: '阿里巴巴(中国)有限公司阿里巴巴(中国)有限公司',\n content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',\n id: (new Date()).getTime() + 1,\n }],\n };\n }\n\n componentDidMount() {\n }\n\n componentWillUnmount() {\n }\n\n showNewCardDialog() {\n this.setState({\n action: 'add',\n showCardDialog: true,\n cardValues: {},\n });\n }\n\n handleCard() {\n const data = this.refs.form.getValues();\n\n if (!data.pass) {\n return;\n }\n\n if (this.state.action === 'add') {\n this.state.cardList.push({\n title: data.values.cardTitle,\n content: data.values.cardContent,\n id: (new Date()).getTime(),\n });\n } else {\n const editData = this.state.editData;\n this.state.cardList.map((item) => {\n if (item.id === editData.id) {\n item.title = data.values.cardTitle;\n item.content = data.values.cardContent;\n return true;\n }\n });\n }\n\n this.state.showCardDialog = false;\n this.setState(this.state);\n }\n\n handleCancel() {\n this.setState({\n showCardDialog: false,\n });\n }\n\n onEditCard(data) {\n this.state.cardValues.cardTitle = data.title;\n this.state.cardValues.cardContent = data.content;\n this.state.showCardDialog = true;\n this.state.action = 'edit';\n this.state.editData = data;\n this.setState(this.state);\n }\n\n onRemoveCard(data) {\n Dialog.confirm({\n title: '确定删除?',\n onOk: () => {\n this.state.cardList.some((item, i) => {\n if (item.id === data.id) {\n this.state.cardList.splice(i, 1);\n return true;\n }\n });\n this.setState(this.state);\n },\n });\n }\n\n onDragStart(data) {\n this.state.dragItemData = data;\n }\n\n onDrop(data) {\n this.switchItem(this.state.dragItemData, data);\n }\n\n onDragEnter(e) {\n e.target.classList.add('dragOver');\n }\n onDragOver(e) {\n e.preventDefault();\n }\n\n onDragLeave(e) {\n e.preventDefault();\n e.target.classList.remove('dragOver');\n }\n\n findItem(data) {\n let index = -1;\n this.state.cardList.some((item, i) => {\n if (item.id === data.id) {\n index = i;\n return true;\n }\n });\n return index;\n }\n\n switchItem(dragItem, dropItem) {\n const cardList = this.state.cardList;\n const dragIndex = this.findItem(dragItem);\n const dropIndex = this.findItem(dropItem);\n\n if (dragIndex < 0 || dropIndex < 0) {\n // 'error';\n return;\n }\n\n const item = cardList[dragIndex];\n cardList.splice(dragIndex, 1);\n cardList.splice(dropIndex, 0, item);\n\n this.setState(this.state);\n }\n\n renderCardDialog() {\n return (<Dialog ref=\"modal\"\n visible\n className=\"newCardDialog\"\n title=\"添加卡片\" onCancel={this.handleCancel.bind(this)}\n footer={[\n <Button onClick={this.handleCard.bind(this)}>提交</Button>,\n <Button onClick={this.handleCancel.bind(this)}>取消</Button>,\n ]}\n >\n <Form ref=\"form\" jsxvalues={this.state.cardValues}>\n <FormRowTitle jsxtitle=\"卡片信息\" />\n <Input\n required\n jsxname=\"cardTitle\"\n jsxlabel=\"标题\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '请填写标题' },\n ]}\n />\n <Input\n required\n jsxname=\"cardContent\"\n jsxlabel=\"内容\"\n jsxrules={[\n { validator: Validators.isNotEmpty, errMsg: '请填写内容' },\n ]}\n />\n </Form>\n </Dialog>);\n }\n\n render() {\n const me = this;\n return (\n <div className=\"pageDemo1\">\n <div className=\"templateCardWrap\">\n <ul className=\"templateCardList clearfix\">\n {\n me.state.cardList.map((item, i) => (<li className=\"templateCardItem\" draggable onDragStart={me.onDragStart.bind(me, item)} onDragEnter={me.onDragEnter} onDragOver={me.onDragOver} onDrop={me.onDrop.bind(me, item)} onDragLeave={me.onDragLeave} key={`templateCardItem${i}`}>\n <CardItem data={item} />\n <div className=\"templateCardEdit\">\n <a href=\"javascript:void(0);\" onClick={me.onEditCard.bind(me, item)}>修改</a>\n <a href=\"javascript:void(0);\" onClick={me.onRemoveCard.bind(me, item)}>删除</a>\n </div>\n </li>))\n }\n <li className=\"templateCardItem templateAddCard\" onClick={me.showNewCardDialog.bind(this)}>\n <div>\n <img src={'https://img.alicdn.com/tps/TB14qDfPFXXXXclXXXXXXXXXXXX-200-200.png'} className=\"templateAddCardBtn\" />\n </div>\n <p className=\"templateCardTxt\">添加卡片</p>\n </li>\n </ul>\n </div>\n {\n me.state.showCardDialog ? me.renderCardDialog() : null\n }\n </div>\n );\n }\n}\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const me = this;\n return (<div className=\"pageDemo\">\n <Card />\n </div>);\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-card-demo-draggable'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.pageDemo1 {\n width: 1000px;\n margin: 0 auto;\n background: white;\n min-height: 300px;\n}\n\n.templateCardWrap {\n overflow: hidden;\n}\n.templateCardWrap .clearfix:after {\n content: \"\";\n display: block;\n clear: both;\n width: 0; \n}\n.templateCardWrap .templateCardList {\n width: calc(100% + 10px);\n margin-left: -10px;\n margin-top: -10px;\n}\n.templateCardWrap .templateCardItem {\n float: left;\n width: 270px;\n height: 158px;\n border: 1px solid #ccc;\n position: relative;\n margin-left: 20px;\n margin-top: 20px;\n padding: 20px 16px;\n}\n.templateCardWrap .templateAddCardBtn {\n display: block;\n width: 66px;\n height: 66px;\n margin: 24px auto 12px;\n}\n.templateCardWrap .templateCardTxt {\n text-align: center;\n}\n.templateCardWrap .templateAddCard {\n cursor: pointer;\n}\n.templateCardWrap .templateCardEdit {\n position: absolute;\n bottom: 10px;\n right: 0;\n line-height: 1;\n}\n.templateCardWrap .templateCardEdit a {\n text-decoration: none;\n margin-right: 10px;\n color: #2599F2;\n}\n\n.templateCardItemWrap {\n height: calc(100% - 10px);\n overflow: hidden;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.pageDemo1 {\n width: 1000px;\n margin: 0 auto;\n background: white;\n min-height: 300px;\n}\n\n.templateCardWrap {\n overflow: hidden;\n}\n.templateCardWrap .clearfix:after {\n content: \"\";\n display: block;\n clear: both;\n width: 0; \n}\n.templateCardWrap .templateCardList {\n width: calc(100% + 10px);\n margin-left: -10px;\n margin-top: -10px;\n}\n.templateCardWrap .templateCardItem {\n float: left;\n width: 270px;\n height: 158px;\n border: 1px solid #ccc;\n position: relative;\n margin-left: 20px;\n margin-top: 20px;\n padding: 20px 16px;\n}\n.templateCardWrap .templateAddCardBtn {\n display: block;\n width: 66px;\n height: 66px;\n margin: 24px auto 12px;\n}\n.templateCardWrap .templateCardTxt {\n text-align: center;\n}\n.templateCardWrap .templateAddCard {\n cursor: pointer;\n}\n.templateCardWrap .templateCardEdit {\n position: absolute;\n bottom: 10px;\n right: 0;\n line-height: 1;\n}\n.templateCardWrap .templateCardEdit a {\n text-decoration: none;\n margin-right: 10px;\n color: #2599F2;\n}\n\n.templateCardItemWrap {\n height: calc(100% - 10px);\n overflow: hidden;\n}</code></pre></div>"},"status":"public","toc":""}]

区块信息展示

import classnames from 'classnames';;
import { Form } from 'uxcore';
import { Button } from 'uxcore';
import { Dialog } from 'uxcore';
const {
    InputFormField: Input,
    FormRow,
    FormRowTitle,
    Validators,
    OtherFormField,
    DateFormField,
    CascadeSelectFormField,
    SelectFormField,
    CheckboxGroupFormField,
} = Form;

const Item = CheckboxGroupFormField.Item;


class CardItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
  }

  render() {
    const me = this;
    const data = this.props.data;
    return (
      <div className="templateCardItemWrap">
        <div className="templateCardItemTitle">{data.title}</div>
        <div className="templateCardItemContent">{data.content}</div>
      </div>
    );
  }
}

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cardValues: {},
      showCardDialog: false,
      cardList: [{
        title: '阿里巴巴(中国)有限公司',
        content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',
        id: (new Date()).getTime(),
        active: true,
      }, {
        title: '阿里巴巴(中国)有限公司阿里巴巴(中国)有限公司',
        content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',
        id: (new Date()).getTime() + 1,
      }],
    };
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  showNewCardDialog() {
    this.setState({
      action: 'add',
      showCardDialog: true,
      cardValues: {},
    });
  }

  handleCard() {
    const data = this.refs.form.getValues();

    if (!data.pass) {
      return;
    }

    if (this.state.action === 'add') {
      this.state.cardList.push({
        title: data.values.cardTitle,
        content: data.values.cardContent,
        id: (new Date()).getTime(),
      });
    } else {
      const editData = this.state.editData;
      this.state.cardList.map((item) => {
        if (item.id === editData.id) {
          item.content = data.values.cardContent;
          item.title = data.values.cardTitle;
          return true;
        }
      });
    }

    this.state.showCardDialog = false;
    this.setState(this.state);
  }

  handleCancel() {
    this.setState({
      showCardDialog: false,
    });
  }

  onEditCard(data) {
    this.state.cardValues.cardTitle = data.title;
    this.state.cardValues.cardContent = data.content;
    this.state.showCardDialog = true;
    this.state.action = 'edit';
    this.state.editData = data;
    this.setState(this.state);
  }

  onRemoveCard(data) {
    Dialog.confirm({
      title: '确定删除?',
      onOk: () => {
        this.state.cardList.some((item, i) => {
          if (item.id === data.id) {
            this.state.cardList.splice(i, 1);
            return true;
          }
        });
        this.setState(this.state);
      },
    });
  }

  renderCardDialog() {
    return (<Dialog ref="modal"
      visible
      className="newCardDialog"
      title="添加卡片" onCancel={this.handleCancel.bind(this)}
      footer={[
        <Button onClick={this.handleCard.bind(this)}>提 交</Button>,
        <Button onClick={this.handleCancel.bind(this)}>取 消</Button>,
      ]}
    >
      <Form ref="form" jsxvalues={this.state.cardValues}>
        <FormRowTitle jsxtitle="卡片信息" />
        <Input
          required
          jsxname="cardTitle"
          jsxlabel="标题"
          jsxrules={[
                                { validator: Validators.isNotEmpty, errMsg: '请填写标题' },
          ]}
        />
        <Input
          required
          jsxname="cardContent"
          jsxlabel="内容"
          jsxrules={[
                                { validator: Validators.isNotEmpty, errMsg: '请填写内容' },
          ]}
        />
      </Form>
    </Dialog>);
  }

  render() {
    const me = this;
    return (
      <div className="pageDemo">
        <div className="templateCardWrap">
          <ul className="templateCardList clearfix">
            {
                            me.state.cardList.map((item, i) => (<li className={`templateCardItem ${item.active ? 'active' : ''}`} key={`templateCardItem${i}`}>
                              <CardItem data={item} />
                              <div className="templateCardEdit">
                                <a href="javascript:void(0);" onClick={me.onEditCard.bind(me, item)}>修改</a>
                                <a href="javascript:void(0);" onClick={me.onRemoveCard.bind(me, item)}>删除</a>
                              </div>
                            </li>))
                        }
            <li className="templateCardItem templateAddCard" onClick={me.showNewCardDialog.bind(this)}>
              <div>
                <img src={'https://img.alicdn.com/tps/TB14qDfPFXXXXclXXXXXXXXXXXX-200-200.png'} className="templateAddCardBtn" />
              </div>
              <p className="templateCardTxt">添加卡片</p>
            </li>
          </ul>
        </div>
        {
                    me.state.showCardDialog ? me.renderCardDialog() : null
                }
      </div>
    );
  }
}

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const me = this;
    return (<div className="pageDemo">
      <Card />
    </div>);
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('scene-card-demo-basic'));

/* JS END CSS START*/

.pageDemo {
  width: 1000px;
  margin: 0 auto;
  background: white;
  min-height: 300px;
}

.templateCardWrap {
    overflow: hidden;
}
.templateCardWrap .clearfix:after {
    content: "";
    display: block;
    clear: both;
    width: 0; 
}
.templateCardWrap .templateCardList {
    width: calc(100% + 10px);
    margin-left: -10px;
    margin-top: -10px;
}
.templateCardWrap .templateCardItem {
    float: left;
    width: 270px;
    height: 158px;
    border: 1px solid #ccc;
    position: relative;
    margin-left: 20px;
    margin-top: 20px;
    padding: 20px 16px;
}

.templateCardWrap .templateCardItem.active {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
}
.templateCardWrap .templateAddCardBtn {
    display: block;
    width: 66px;
    height: 66px;
    margin: 24px auto 12px;
}
.templateCardWrap .templateCardTxt {
    text-align: center;
}
.templateCardWrap .templateAddCard {
    cursor: pointer;
}
.templateCardWrap .templateCardEdit {
    position: absolute;
    bottom: 10px;
    right: 0;
    line-height: 1;
}
.templateCardWrap .templateCardEdit a {
    text-decoration: none;
    margin-right: 10px;
    color: #2599F2;
}

.templateCardItemTitle {
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}
.templateCardItemContent {
    color: #999;
    margin-top: 10px;
    line-height: 1.5;
}
.templateCardItemWrap {
    height: calc(100% - 10px);
    overflow: hidden;
}

区块信息展示(可拖动)

import classnames from 'classnames';;
import { Form } from 'uxcore';
import { Button } from 'uxcore';
import { Dialog } from 'uxcore';
const {
    InputFormField: Input,
    FormRow,
    FormRowTitle,
    Validators,
    OtherFormField,
    DateFormField,
    CascadeSelectFormField,
    SelectFormField,
    CheckboxGroupFormField,
} = Form;

const Item = CheckboxGroupFormField.Item;


class CardItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
  }

  render() {
    const me = this;
    const data = this.props.data;
    return (
      <div className="templateCardItemWrap">
        <div className="templateCardItemTitle">{data.title}</div>
        <div className="templateCardItemContent">{data.content}</div>
      </div>
    );
  }
}

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cardValues: {},
      showCardDialog: false,
      cardList: [{
        title: '阿里巴巴(中国)有限公司',
        content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',
        id: (new Date()).getTime(),
      }, {
        title: '阿里巴巴(中国)有限公司阿里巴巴(中国)有限公司',
        content: '浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号浙江省杭州市余杭区文一西路969号',
        id: (new Date()).getTime() + 1,
      }],
    };
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  showNewCardDialog() {
    this.setState({
      action: 'add',
      showCardDialog: true,
      cardValues: {},
    });
  }

  handleCard() {
    const data = this.refs.form.getValues();

    if (!data.pass) {
      return;
    }

    if (this.state.action === 'add') {
      this.state.cardList.push({
        title: data.values.cardTitle,
        content: data.values.cardContent,
        id: (new Date()).getTime(),
      });
    } else {
      const editData = this.state.editData;
      this.state.cardList.map((item) => {
        if (item.id === editData.id) {
          item.title = data.values.cardTitle;
          item.content = data.values.cardContent;
          return true;
        }
      });
    }

    this.state.showCardDialog = false;
    this.setState(this.state);
  }

  handleCancel() {
    this.setState({
      showCardDialog: false,
    });
  }

  onEditCard(data) {
    this.state.cardValues.cardTitle = data.title;
    this.state.cardValues.cardContent = data.content;
    this.state.showCardDialog = true;
    this.state.action = 'edit';
    this.state.editData = data;
    this.setState(this.state);
  }

  onRemoveCard(data) {
    Dialog.confirm({
      title: '确定删除?',
      onOk: () => {
        this.state.cardList.some((item, i) => {
          if (item.id === data.id) {
            this.state.cardList.splice(i, 1);
            return true;
          }
        });
        this.setState(this.state);
      },
    });
  }

  onDragStart(data) {
    this.state.dragItemData = data;
  }

  onDrop(data) {
    this.switchItem(this.state.dragItemData, data);
  }

  onDragEnter(e) {
    e.target.classList.add('dragOver');
  }
  onDragOver(e) {
    e.preventDefault();
  }

  onDragLeave(e) {
    e.preventDefault();
    e.target.classList.remove('dragOver');
  }

  findItem(data) {
    let index = -1;
    this.state.cardList.some((item, i) => {
      if (item.id === data.id) {
        index = i;
        return true;
      }
    });
    return index;
  }

  switchItem(dragItem, dropItem) {
    const cardList = this.state.cardList;
    const dragIndex = this.findItem(dragItem);
    const dropIndex = this.findItem(dropItem);

    if (dragIndex < 0 || dropIndex < 0) {
            // 'error';
      return;
    }

    const item = cardList[dragIndex];
    cardList.splice(dragIndex, 1);
    cardList.splice(dropIndex, 0, item);

    this.setState(this.state);
  }

  renderCardDialog() {
    return (<Dialog ref="modal"
      visible
      className="newCardDialog"
      title="添加卡片" onCancel={this.handleCancel.bind(this)}
      footer={[
        <Button onClick={this.handleCard.bind(this)}>提 交</Button>,
        <Button onClick={this.handleCancel.bind(this)}>取 消</Button>,
      ]}
    >
      <Form ref="form" jsxvalues={this.state.cardValues}>
        <FormRowTitle jsxtitle="卡片信息" />
        <Input
          required
          jsxname="cardTitle"
          jsxlabel="标题"
          jsxrules={[
                                { validator: Validators.isNotEmpty, errMsg: '请填写标题' },
          ]}
        />
        <Input
          required
          jsxname="cardContent"
          jsxlabel="内容"
          jsxrules={[
                                { validator: Validators.isNotEmpty, errMsg: '请填写内容' },
          ]}
        />
      </Form>
    </Dialog>);
  }

  render() {
    const me = this;
    return (
      <div className="pageDemo1">
        <div className="templateCardWrap">
          <ul className="templateCardList clearfix">
            {
                            me.state.cardList.map((item, i) => (<li className="templateCardItem" draggable onDragStart={me.onDragStart.bind(me, item)} onDragEnter={me.onDragEnter} onDragOver={me.onDragOver} onDrop={me.onDrop.bind(me, item)} onDragLeave={me.onDragLeave} key={`templateCardItem${i}`}>
                              <CardItem data={item} />
                              <div className="templateCardEdit">
                                <a href="javascript:void(0);" onClick={me.onEditCard.bind(me, item)}>修改</a>
                                <a href="javascript:void(0);" onClick={me.onRemoveCard.bind(me, item)}>删除</a>
                              </div>
                            </li>))
                        }
            <li className="templateCardItem templateAddCard" onClick={me.showNewCardDialog.bind(this)}>
              <div>
                <img src={'https://img.alicdn.com/tps/TB14qDfPFXXXXclXXXXXXXXXXXX-200-200.png'} className="templateAddCardBtn" />
              </div>
              <p className="templateCardTxt">添加卡片</p>
            </li>
          </ul>
        </div>
        {
                    me.state.showCardDialog ? me.renderCardDialog() : null
                }
      </div>
    );
  }
}

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const me = this;
    return (<div className="pageDemo">
      <Card />
    </div>);
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('scene-card-demo-draggable'));

/* JS END CSS START*/

.pageDemo1 {
  width: 1000px;
  margin: 0 auto;
  background: white;
  min-height: 300px;
}

.templateCardWrap {
    overflow: hidden;
}
.templateCardWrap .clearfix:after {
    content: "";
    display: block;
    clear: both;
    width: 0; 
}
.templateCardWrap .templateCardList {
    width: calc(100% + 10px);
    margin-left: -10px;
    margin-top: -10px;
}
.templateCardWrap .templateCardItem {
    float: left;
    width: 270px;
    height: 158px;
    border: 1px solid #ccc;
    position: relative;
    margin-left: 20px;
    margin-top: 20px;
    padding: 20px 16px;
}
.templateCardWrap .templateAddCardBtn {
    display: block;
    width: 66px;
    height: 66px;
    margin: 24px auto 12px;
}
.templateCardWrap .templateCardTxt {
    text-align: center;
}
.templateCardWrap .templateAddCard {
    cursor: pointer;
}
.templateCardWrap .templateCardEdit {
    position: absolute;
    bottom: 10px;
    right: 0;
    line-height: 1;
}
.templateCardWrap .templateCardEdit a {
    text-decoration: none;
    margin-right: 10px;
    color: #2599F2;
}

.templateCardItemWrap {
    height: calc(100% - 10px);
    overflow: hidden;
}