index.js 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. var __assign = (this && this.__assign) || Object.assign || function(t) {
  12. for (var s, i = 1, n = arguments.length; i < n; i++) {
  13. s = arguments[i];
  14. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  15. t[p] = s[p];
  16. }
  17. return t;
  18. };
  19. import * as React from 'react';
  20. import { Dragact } from '../lib/dragact';
  21. import './index.css';
  22. var Words = [
  23. { content: 'You can do anything, but not everything.' },
  24. { content: 'Those who dare to fail miserably can achieve greatly.' },
  25. { content: 'You miss 100 percent of the shots you never take.', handle: true },
  26. { content: 'Those who believe in telekinetics, raise my hand.' },
  27. { content: 'I’d rather live with a good question than a bad answer.' }
  28. ];
  29. var fakeData = function () {
  30. var Y = 0;
  31. return Words.map(function (item, index) {
  32. if (index % 4 === 0)
  33. Y++;
  34. return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 2, key: index + '' });
  35. });
  36. };
  37. var Card = function (props) {
  38. var item = props.item;
  39. return (React.createElement("div", { className: 'layout-Item' },
  40. React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } }, item.handle ? React.createElement("div", { className: 'card-handle', id: "dragact-handle" }, "\u70B9\u6211\u62D6\u52A8") : item.content)));
  41. };
  42. var HandleLayout = /** @class */ (function (_super) {
  43. __extends(HandleLayout, _super);
  44. function HandleLayout() {
  45. return _super !== null && _super.apply(this, arguments) || this;
  46. }
  47. HandleLayout.prototype.render = function () {
  48. var margin = [5, 5];
  49. var dragactInit = {
  50. width: 600,
  51. col: 12,
  52. rowHeight: 800 / 12,
  53. margin: margin,
  54. className: 'normal-layout',
  55. layout: fakeData(),
  56. placeholder: true
  57. };
  58. return (React.createElement("div", null,
  59. React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
  60. React.createElement("div", null,
  61. React.createElement("h1", { style: { textAlign: 'center' } }, "\u62D6\u62FD\u628A\u624B Demo"),
  62. React.createElement(Dragact, __assign({}, dragactInit), function (item, isDragging) {
  63. return React.createElement(Card, { item: item });
  64. })))));
  65. };
  66. return HandleLayout;
  67. }(React.Component));
  68. export { HandleLayout };