index.js 4.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. "use strict";
  2. var __extends = (this && this.__extends) || (function () {
  3. var extendStatics = Object.setPrototypeOf ||
  4. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  5. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  6. return function (d, b) {
  7. extendStatics(d, b);
  8. function __() { this.constructor = d; }
  9. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  10. };
  11. })();
  12. var __assign = (this && this.__assign) || Object.assign || function(t) {
  13. for (var s, i = 1, n = arguments.length; i < n; i++) {
  14. s = arguments[i];
  15. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  16. t[p] = s[p];
  17. }
  18. return t;
  19. };
  20. Object.defineProperty(exports, "__esModule", { value: true });
  21. var React = require("react");
  22. var HistoryLayout_1 = require("./HistoryLayout");
  23. var largedata_1 = require("./largedata");
  24. require("./index.css");
  25. var fakeData = function () {
  26. var Y = 0;
  27. return largedata_1.Words.map(function (item, index) {
  28. if (index % 4 === 0)
  29. Y++;
  30. return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '' });
  31. });
  32. };
  33. exports.Card = function (_a) {
  34. var item = _a.item, provided = _a.provided;
  35. return (React.createElement("div", __assign({ className: 'layout-Item' }, provided.props, provided.dragHandle, { style: __assign({}, provided.props.style, { background: "" + (provided.isDragging ? '#eaff8f' : 'white') }) }),
  36. React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } },
  37. React.createElement("span", null, "title"),
  38. React.createElement("div", { style: { borderBottom: '1px solid rgba(120,120,120,0.1)' } }),
  39. item.content),
  40. React.createElement("span", __assign({}, provided.resizeHandle, { style: {
  41. position: 'absolute',
  42. width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
  43. borderRight: '2px solid rgba(15,15,15,0.2)',
  44. borderBottom: '2px solid rgba(15,15,15,0.2)'
  45. } }))));
  46. };
  47. var HistoryDemo = /** @class */ (function (_super) {
  48. __extends(HistoryDemo, _super);
  49. function HistoryDemo() {
  50. return _super !== null && _super.apply(this, arguments) || this;
  51. }
  52. HistoryDemo.prototype.render = function () {
  53. var _this = this;
  54. var margin = [5, 5];
  55. var dragactInit = {
  56. width: 600,
  57. col: 16,
  58. rowHeight: 40,
  59. margin: margin,
  60. className: 'normal-layout',
  61. layout: fakeData()
  62. };
  63. return (React.createElement("div", { style: {
  64. display: 'flex',
  65. justifyContent: 'center'
  66. } },
  67. React.createElement("div", null,
  68. React.createElement("h1", { style: { textAlign: 'center' } }, "\u590D\u539F\u64CD\u4F5Cdemo"),
  69. React.createElement("button", { onClick: function () {
  70. if (_this.drag) {
  71. _this.drag.goBack();
  72. }
  73. } }, "back"),
  74. React.createElement("button", { onClick: function () {
  75. if (_this.drag) {
  76. _this.drag.reset();
  77. }
  78. } }, "reset"),
  79. React.createElement("button", { onClick: function () {
  80. if (_this.drag) {
  81. _this.drag.clear();
  82. }
  83. } }, "clear"),
  84. React.createElement(HistoryLayout_1.HistoryDragact, __assign({}, dragactInit, { placeholder: true, ref: function (n) { return _this.drag = n; }, style: {
  85. background: '#003A8C'
  86. } }), function (item, provided) {
  87. return React.createElement(exports.Card, { item: item, provided: provided });
  88. }))));
  89. };
  90. return HistoryDemo;
  91. }(React.Component));
  92. exports.HistoryDemo = HistoryDemo;