index.tsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import * as React from 'react'
  2. import { Dragact } from '../../src/lib/dragact'
  3. const Words = [
  4. { content: 'You can do anything, but not everything.' },
  5. { content: 'Those who dare to fail miserably can achieve greatly.' },
  6. { content: 'You miss 100 percent of the shots you never take.' },
  7. { content: 'Those who believe in telekinetics, raise my hand.' },
  8. { content: 'I’d rather live with a good question than a bad answer.' }
  9. ]
  10. const Card = ({ item, provided, onDelete }: any) => {
  11. return (
  12. <div
  13. className="layout-Item"
  14. {...provided.props}
  15. {...provided.dragHandle}
  16. >
  17. <div
  18. style={{
  19. position: 'absolute',
  20. width: 10,
  21. height: 10,
  22. right: 15,
  23. top: 5,
  24. cursor: 'pointer'
  25. }}
  26. onClick={() => onDelete(item.key)}
  27. >
  28. </div>
  29. <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>
  30. {item.content}
  31. </div>
  32. </div>
  33. )
  34. }
  35. const fakeData = () => {
  36. var Y = 0
  37. return Words.map((item, index) => {
  38. if (index % 4 === 0) Y++
  39. return {
  40. ...item,
  41. GridX: (index % 4) * 4,
  42. GridY: Y * 4,
  43. w: 4,
  44. h: 3,
  45. key: index
  46. }
  47. })
  48. }
  49. const makeOne = () => {
  50. return { content: 'added', GridX: 0, GridY: 0, w: 4, h: 3, key: Date.now() }
  51. }
  52. export class AddRemove extends React.Component<{}, {}> {
  53. state = {
  54. layout: fakeData()
  55. }
  56. componentDidMount() {}
  57. handleClick = () => {
  58. const change = this.state.layout.map(item => {
  59. return { ...item, content: '21312' }
  60. })
  61. this.setState({
  62. layout: [...change, makeOne()]
  63. })
  64. }
  65. hanldeOnDelete = (key: any) => {
  66. const layout = this.state.layout.filter(item => {
  67. if (item.key !== key) {
  68. return item
  69. }
  70. })
  71. this.setState({
  72. layout: layout
  73. })
  74. }
  75. render() {
  76. const margin: [number, number] = [5, 5]
  77. const dragactInit = {
  78. width: 600,
  79. col: 12,
  80. rowHeight: 800 / 12,
  81. margin: margin,
  82. className: 'normal-layout',
  83. layout: this.state.layout,
  84. placeholder: true
  85. }
  86. return (
  87. <div>
  88. <div style={{ display: 'flex', justifyContent: 'center' }}>
  89. <div>
  90. <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
  91. <h3 style={{ textAlign: 'center' }}>在这个布局中,新增一个布局,会新加入一个布局</h3>
  92. <button onClick={this.handleClick}>新增</button>
  93. <Dragact {...dragactInit}>
  94. {(item, provided) => {
  95. return (
  96. <Card
  97. item={item}
  98. provided={provided}
  99. onDelete={this.hanldeOnDelete}
  100. />
  101. )
  102. }}
  103. </Dragact>
  104. </div>
  105. </div>
  106. </div>
  107. )
  108. }
  109. }