|
|
@@ -1,72 +1,98 @@
|
|
|
-"use strict";
|
|
|
-// import *as React from 'react';
|
|
|
-// import { Dragact } from '../lib/dragact';
|
|
|
-// const Words = [
|
|
|
-// { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
|
|
|
-// { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
|
|
|
-// { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
|
|
|
-// { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
|
|
|
-// { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
|
|
|
-// ]
|
|
|
-// const Card = (props: any) => {
|
|
|
-// const item: any = props.item;
|
|
|
-// const dataSet: any = props['data-set'];
|
|
|
-// return (
|
|
|
-// <div className='layout-Item' >
|
|
|
-// <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
|
|
|
-// <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{dataSet.handle ? <div className='card-handle' id="dragact-handle">点我拖动</div> : item.content}</div>
|
|
|
-// </div>
|
|
|
-// )
|
|
|
-// }
|
|
|
-// export class AddRemove extends React.Component<{}, {}> {
|
|
|
-// layoutWrap: HTMLDivElement | null
|
|
|
-// dragactNode: Dragact;
|
|
|
-// state = {
|
|
|
-// layout: [1]
|
|
|
-// }
|
|
|
-// componentDidMount() {
|
|
|
-// this.setState({
|
|
|
-// layout: this.dragactNode.getLayout()
|
|
|
-// })
|
|
|
-// }
|
|
|
-// handleClick = () => {
|
|
|
-// this.setState({
|
|
|
-// layout: [...this.state.layout, 1]
|
|
|
-// })
|
|
|
-// console.log(this.state.layout)
|
|
|
-// }
|
|
|
-// handleDeleteClick = () => {
|
|
|
-// this.state.layout.shift()
|
|
|
-// this.setState({
|
|
|
-// layout: [...this.state.layout]
|
|
|
-// })
|
|
|
-// }
|
|
|
-// render() {
|
|
|
-// const margin: [number, number] = [5, 5];
|
|
|
-// const dragactInit = {
|
|
|
-// width: 800,
|
|
|
-// col: 12,
|
|
|
-// rowHeight: 800 / 12,
|
|
|
-// margin: margin,
|
|
|
-// className: 'normal-layout'
|
|
|
-// }
|
|
|
-// return (
|
|
|
-// <div>
|
|
|
-// <div style={{ display: 'flex', justifyContent: 'center' }} >
|
|
|
-// <div>
|
|
|
-// <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
|
|
|
-// <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
|
|
|
-// {this.state.layout.map((el, i) => {
|
|
|
-// return (
|
|
|
-// <Card item={Words[0]} key={i} data-set={{ GridX: i * 3, GridY: 0, w: 3, h: 3 }} />
|
|
|
-// )
|
|
|
-// })}
|
|
|
-// </Dragact>
|
|
|
-// <button onClick={this.handleClick}>新增</button>
|
|
|
-// <button onClick={this.handleDeleteClick}>删除</button>
|
|
|
-// </div>
|
|
|
-// </div>
|
|
|
-// </div>
|
|
|
-// )
|
|
|
-// }
|
|
|
-// }
|
|
|
+var __extends = (this && this.__extends) || (function () {
|
|
|
+ var extendStatics = Object.setPrototypeOf ||
|
|
|
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
|
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
|
+ return function (d, b) {
|
|
|
+ extendStatics(d, b);
|
|
|
+ function __() { this.constructor = d; }
|
|
|
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
|
+ };
|
|
|
+})();
|
|
|
+var __assign = (this && this.__assign) || Object.assign || function(t) {
|
|
|
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
|
+ s = arguments[i];
|
|
|
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
|
+ t[p] = s[p];
|
|
|
+ }
|
|
|
+ return t;
|
|
|
+};
|
|
|
+import * as React from 'react';
|
|
|
+import { Dragact } from '../lib/dragact';
|
|
|
+var Words = [
|
|
|
+ { content: 'You can do anything, but not everything.' },
|
|
|
+ { content: 'Those who dare to fail miserably can achieve greatly.' },
|
|
|
+ { content: 'You miss 100 percent of the shots you never take.' },
|
|
|
+ { content: 'Those who believe in telekinetics, raise my hand.' },
|
|
|
+ { content: 'I’d rather live with a good question than a bad answer.' }
|
|
|
+];
|
|
|
+var Card = function (_a) {
|
|
|
+ var item = _a.item, provided = _a.provided, onDelete = _a.onDelete;
|
|
|
+ return (React.createElement("div", __assign({ className: 'layout-Item' }, provided.props, provided.dragHandle),
|
|
|
+ React.createElement("div", { style: {
|
|
|
+ position: 'absolute',
|
|
|
+ width: 10, height: 10, right: 15, top: 5, cursor: 'pointer'
|
|
|
+ }, onClick: function () { return onDelete(item.key); } }, "\u274C"),
|
|
|
+ React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } }, item.content)));
|
|
|
+};
|
|
|
+var fakeData = function () {
|
|
|
+ var Y = 0;
|
|
|
+ return Words.map(function (item, index) {
|
|
|
+ if (index % 4 === 0)
|
|
|
+ Y++;
|
|
|
+ return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index });
|
|
|
+ });
|
|
|
+};
|
|
|
+var makeOne = function () {
|
|
|
+ return { content: 'added', GridX: 0, GridY: 0, w: 4, h: 3, key: Date.now() };
|
|
|
+};
|
|
|
+var AddRemove = /** @class */ (function (_super) {
|
|
|
+ __extends(AddRemove, _super);
|
|
|
+ function AddRemove() {
|
|
|
+ var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
|
+ _this.state = {
|
|
|
+ layout: fakeData()
|
|
|
+ };
|
|
|
+ _this.handleClick = function () {
|
|
|
+ _this.setState({
|
|
|
+ layout: _this.state.layout.concat([makeOne()])
|
|
|
+ });
|
|
|
+ console.log(_this.state.layout);
|
|
|
+ };
|
|
|
+ _this.hanldeOnDelete = function (key) {
|
|
|
+ var layout = _this.state.layout.filter(function (item) {
|
|
|
+ if (item.key !== key) {
|
|
|
+ return item;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this.setState({
|
|
|
+ layout: layout
|
|
|
+ });
|
|
|
+ };
|
|
|
+ return _this;
|
|
|
+ }
|
|
|
+ AddRemove.prototype.componentDidMount = function () {
|
|
|
+ };
|
|
|
+ AddRemove.prototype.render = function () {
|
|
|
+ var _this = this;
|
|
|
+ var margin = [5, 5];
|
|
|
+ var dragactInit = {
|
|
|
+ width: 800,
|
|
|
+ col: 12,
|
|
|
+ rowHeight: 800 / 12,
|
|
|
+ margin: margin,
|
|
|
+ className: 'normal-layout',
|
|
|
+ layout: this.state.layout,
|
|
|
+ placeholder: true
|
|
|
+ };
|
|
|
+ return (React.createElement("div", null,
|
|
|
+ React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
|
|
|
+ React.createElement("div", null,
|
|
|
+ React.createElement("h1", { style: { textAlign: 'center' } }, "AddRemove Demo"),
|
|
|
+ React.createElement("button", { onClick: this.handleClick }, "\u65B0\u589E"),
|
|
|
+ React.createElement(Dragact, __assign({}, dragactInit), function (item, provided) {
|
|
|
+ return React.createElement(Card, { item: item, provided: provided, onDelete: _this.hanldeOnDelete });
|
|
|
+ })))));
|
|
|
+ };
|
|
|
+ return AddRemove;
|
|
|
+}(React.Component));
|
|
|
+export { AddRemove };
|
Z F
