Facebook
From asd, 9 Months ago, written in JavaScript.
Embed
Download Paste or View Raw
Hits: 393
  1. import { Col, Input, Row, Space } from 'antd'
  2. import React, { useState } from 'react'
  3. import styled from 'styled-components'
  4. import { DndProvider, useDrop } from 'react-dnd'
  5. import { HTML5Backend } from 'react-dnd-html5-backend'
  6. import DraggableButton from './draggable-button'
  7. import { useImmer } from 'use-immer'
  8.  
  9. export const ComponentBuildPage2: React.FC = () => {
  10.  
  11.     const [width, setWidth] = useState(1)
  12.     const [height, setHeight] = useState(1)
  13.  
  14.     const [droppedList, setDroppedList] = useImmer([])
  15.     const [buttons, setButtons] = useImmer([
  16.         {
  17.             label: "Widget",
  18.             id: 1,
  19.             width: 3,
  20.             height: 1,
  21.         },
  22.         {
  23.             label: "Widget",
  24.             id: 2,
  25.             width: 2,
  26.             height: 1,
  27.         },
  28.         {
  29.             label: "Widget",
  30.             id: 3,
  31.             width: 1,
  32.             height: 1,
  33.         },
  34.         {
  35.             label: "Widget",    
  36.             id: 4,
  37.             width: 1,
  38.             height: 1,
  39.         },
  40.  
  41.     ])
  42.  
  43.     const [{ isOver }, drop] = useDrop(() => ({
  44.         accept: "buton",
  45.         drop: (droppedItem) => { dropImageToBoard(droppedItem) },
  46.         collect: (monitor) => ({
  47.             isOver: !!monitor.isOver(),
  48.         })
  49.     }));
  50.  
  51.     let dropImageToBoard = (droppedItem) => {
  52.         if (droppedItem?.id) {
  53.             setButtons(buttons=>{
  54.                 return buttons
  55.             })
  56.             const newButton = buttons.find(b => b.id == droppedItem.id)
  57.             setDroppedList((list) => [...list, newButton])
  58.             setButtons(btns => btns.filter(btn => btn.id !== droppedItem.id))
  59.         }
  60.     }
  61.  
  62.     const createWidget = () => {
  63.         setButtons(btns => [...btns, {
  64.             label: "Widgett",
  65.             id: generateUniqueId(),
  66.             width,
  67.             height,
  68.         }])
  69.  
  70.     }
  71.  
  72.     const generateUniqueId = () => {
  73.         const combinedArray = [...buttons, ...droppedList];
  74.         let id = 1;
  75.         while (combinedArray.some(obj => obj.id === id)) {
  76.             id++;
  77.         }
  78.         return id;
  79.     }
  80.  
  81.  
  82.     return <Wrapper>
  83.  
  84.  
  85.         <div ref={drop} >
  86.             {[...Array(8)].map((e, j) => <Row key={j} gutter={[48, 48]}>
  87.                 {[...Array(24)].map((e, i) => <Col key={i + 1} span={1}>
  88.                     <div className='cell' >
  89.                         {
  90.                             droppedList[(((i + 1) + (j * 24)) - 1)] ? <DraggableButton id={droppedList[(((i + 1) + (j * 24)) - 1)].id} >{`${droppedList[(((i + 1) + (j * 24)) - 1)].width} x ${droppedList[(((i + 1) + (j * 24)) - 1)].height}`}</DraggableButton> : <span>{((i + 1) + (j * 24))}</span>
  91.                         }
  92.                     </div>
  93.                 </Col>)}
  94.             </Row>)}
  95.         </div>
  96.  
  97.         <div className='tools' >
  98.             <div className='d-flex align-items-center'>
  99.                 &lt;Input.Group compact&gt;
  100.                     &lt;Input disabled  width: '15%' }} value={"Width"} /&gt;
  101.                     &lt;Input  =&gt; { setWidth(parseInt(e.target.value)) }}  width: '15%' }} value={width} />
  102.                     &lt;Input disabled  width: '15%' }} value={"Height"} /&gt;
  103.                     &lt;Input  =&gt; { setHeight(parseInt(e.target.value)) }}  width: '15%' }} value={height} />
  104.                 &lt;/Input.Group&gt;
  105.                 <button  >Create Widget</button>
  106.             </div>
  107.             <div className='draggable-items' >
  108.                 {buttons.map((btn, i) => <DraggableButton key={btn.id} id={btn.id} >{`${btn.width} x ${btn.height}`}</DraggableButton>)}
  109.             </div>
  110.         </div>
  111.  
  112.  
  113.     </Wrapper >
  114. }
  115.  
  116. const Wrapper = styled('div')`
  117.     padding: 0 50px;
  118.     font-family: 'Roboto';
  119.  
  120.     .ant-col{
  121.         padding: 0 !important;
  122.     }
  123.  
  124.     .cell{
  125.         width: 100%;
  126.         height: 100%;
  127.         min-height: 60px;
  128.         background-color: aliceblue;
  129.         border: 1px solid lightgrey;
  130.         display: flex;
  131.         align-items: center;
  132.         justify-content: center;
  133.     }
  134.  
  135.     .tools{
  136.         margin-top: 16px;
  137.         display: flex;
  138.         flex-flow: column;
  139.         align-items: start;
  140.         justify-content: start;
  141.         gap: 16px;
  142.     }
  143.  
  144. `