From 6afb82b92c7de7a3d5551e721b4c8de39bd7de9d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 30 十二月 2022 13:25:28 +0800
Subject: [PATCH] 2022-12-30
---
src/mob/mobshell/index.jsx | 278 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 205 insertions(+), 73 deletions(-)
diff --git a/src/mob/mobshell/index.jsx b/src/mob/mobshell/index.jsx
index 1d64cca..0063894 100644
--- a/src/mob/mobshell/index.jsx
+++ b/src/mob/mobshell/index.jsx
@@ -1,103 +1,235 @@
-import React from 'react'
-// import React, { useState } from 'react'
+import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
-// import { is, fromJS } from 'immutable'
-// import update from 'immutability-helper'
-// import Utils from '@/utils/utils.js'
+import update from 'immutability-helper'
+import { Empty, notification, Modal } from 'antd'
+
+import Utils from '@/utils/utils.js'
import Card from './card'
import './index.scss'
-const Container = ({list, placeholder, handleList, handleMenu, deleteMenu, doubleClickCard }) => {
- // let target = null
+const { confirm } = Modal
- // const [cards, setCards] = useState(list)
- // const moveCard = (id, atIndex) => {
- // const { card, index } = findCard(id)
- // const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
- // handleList(_cards)
- // }
+const Container = ({menu, handleList }) => {
+ const [cards, setCards] = useState(menu.components)
+ const moveCard = (id, atIndex) => {
+ const { card, index } = findCard(id)
+ const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
+ handleList({...menu, components: _cards})
+ setCards(_cards)
+ }
- // if (!is(fromJS(cards), fromJS(list))) {
- // setCards(list)
- // }
+ if (menu.components.length > cards.length) {
+ setCards(menu.components)
+ }
- // const findCard = id => {
- // const card = cards.filter(c => `${c.uuid}` === id)[0]
- // return {
- // card,
- // index: cards.indexOf(card),
- // }
- // }
+ const findCard = id => {
+ const card = cards.filter(c => `${c.uuid}` === id)[0]
+ return {
+ card,
+ index: cards.indexOf(card),
+ }
+ }
- // const doubleClickBtn = id => {
- // const { card } = findCard(id)
- // doubleClickCard(card)
- // }
+ const updateConfig = (element) => {
+ const _cards = cards.map(item => item.uuid === element.uuid ? element : item)
+ handleList({...menu, components: _cards})
+ setCards(_cards)
+ }
- // const editCard = id => {
- // const { card } = findCard(id)
- // handleMenu(card)
- // }
+ const deleteCard = (id) => {
+ const { card } = findCard(id)
- // const delCard = id => {
- // const { card } = findCard(id)
- // deleteMenu(card)
- // }
+ let hasComponent = false
+ if (card.type === 'tabs') {
+ card.subtabs.forEach(tab => {
+ if (tab.components.length > 0) {
+ hasComponent = true
+ }
+ })
+ }
- // const hasDrop = (item) => {
- // target = item
- // }
+ confirm({
+ title: `纭畾鍒犻櫎${card.name ? `銆�${card.name}銆媊 : '缁勪欢'}鍚楋紵`,
+ content: hasComponent ? '褰撳墠缁勪欢涓惈鏈夊瓙缁勪欢锛�' : '',
+ onOk() {
+ const _cards = cards.filter(item => item.uuid !== card.uuid)
+ handleList({...menu, components: _cards})
+ setCards(_cards)
+ },
+ onCancel() {}
+ })
+ }
const [, drop] = useDrop({
- accept: 'action',
+ accept: 'menu',
drop(item) {
- if (item.hasOwnProperty('originalIndex')) {
+ if (item.hasOwnProperty('originalIndex') || item.added) {
+ delete item.added // 鍒犻櫎缁勪欢娣诲姞鏍囪
return
}
- // let newcard = {}
- // newcard.uuid = Utils.getuuid()
+ let style = null
+
+ if (item.component === 'search') { // 鎼滅储缁勪欢涓嶅彲閲嶅娣诲姞
+ if (cards.filter(card => card.type === 'topbar' && card.wrap.type !== 'navbar').length > 0) {
+ notification.warning({
+ top: 92,
+ message: '瀵艰埅鏍忎娇鐢ㄤ簡鎼滅储锛屼笉鍙坊鍔犳悳绱㈢粍浠讹紒',
+ duration: 5
+ })
+ return
+ }
+ if (cards.filter(card => card.type === 'search').length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鎼滅储鏉′欢涓嶅彲閲嶅娣诲姞锛�',
+ duration: 5
+ })
+ return
+ }
+ } else if (item.component === 'navbar') {
+ if (cards.filter(card => card.type === 'navbar').length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鑿滃崟鏍忎笉鍙噸澶嶆坊鍔狅紒',
+ duration: 5
+ })
+ return
+ }
+ if (!menu.style.paddingBottom) {
+ style = {...menu.style, paddingBottom: '50px'}
+ }
+ } else if (item.component === 'topbar') {
+ if (cards.filter(card => card.type === 'topbar').length > 0) {
+ notification.warning({
+ top: 92,
+ message: '瀵艰埅鏍忎笉鍙噸澶嶆坊鍔狅紒',
+ duration: 5
+ })
+ return
+ }
+ if (!menu.style.paddingTop) {
+ style = {...menu.style, paddingTop: '50px'}
+ }
+ } else if (item.component === 'officialAccount') {
+ if (cards.filter(card => card.type === 'officialAccount').length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鍏虫敞缁勪欢涓嶅彲閲嶅娣诲姞锛�',
+ duration: 5
+ })
+ return
+ }
+ }
+
+ let name = ''
+ let names = {
+ bar: '鏌辩姸鍥�',
+ line: '鎶樼嚎鍥�',
+ tabs: '鏍囩缁�',
+ pie: '楗煎浘',
+ search: '鎼滅储',
+ table: '琛ㄦ牸',
+ group: '鍒嗙粍',
+ editor: '瀵屾枃鏈�',
+ code: '鑷畾涔�',
+ carousel: '杞挱',
+ dashboard: '浠〃鐩�',
+ form: '琛ㄥ崟',
+ card: '鍗＄墖',
+ navbar: '瀵艰埅鏍�',
+ menubar: '鑿滃崟鏍�',
+ balcony: '娴姩鍗�',
+ timeline: '鏃堕棿杞�',
+ officialAccount: '鍏虫敞鍏紬鍙�',
+ sharecode: '鍒嗕韩鐮�',
+ iframe: 'iframe',
+ login: '鐧诲綍'
+ }
+ let i = 1
- // let targetId = cards.length > 0 ? cards[cards.length - 1].uuid : 0
- // if (target) {
- // targetId = target.uuid
- // }
+ while (!name && names[item.component]) {
+ let _name = names[item.component] + i
+ if (menu.components.filter(com => com.name === _name).length === 0) {
+ name = _name
+ }
+ i++
+ }
- // const { index: overIndex } = findCard(`${targetId}`)
- // let targetIndex = overIndex
+ let newcard = {
+ uuid: Utils.getuuid(),
+ type: item.component,
+ subtype: item.subtype,
+ config: item.config,
+ width: item.width || 24,
+ name: name,
+ floor: 1, // 缁勪欢鐨勫眰绾�
+ isNew: true // 鏂版坊鍔犳爣蹇楋紝鐢ㄤ簬鍒濆鍖�
+ }
+
+ let targetId = ''
- // targetIndex++
+ if (item.dropTargetId) {
+ targetId = item.dropTargetId
+ delete item.dropTargetId
+ } else if (cards.length > 0) {
+ targetId = cards.slice(-1)[0].uuid
+ }
- // const _cards = update(cards, { $splice: [[targetIndex, 0, newcard]] })
+ const { index: overIndex } = findCard(`${targetId}`)
+ let _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] })
+ let Topbar = null
+ let Navbar = null
+ _cards = _cards.filter(item => {
+ if (item.type === 'topbar') {
+ Topbar = item
+ } else if (item.type === 'navbar') {
+ Navbar = item
+ }
- // handleList(_cards, newcard)
- // target = null
+ return item.type !== 'topbar' && item.type !== 'navbar'
+ })
+
+ if (Topbar) {
+ _cards.unshift(Topbar)
+ }
+ if (Navbar) {
+ _cards.push(Navbar)
+ }
+
+ if (style) {
+ handleList({...menu, style, components: _cards})
+ } else {
+ handleList({...menu, components: _cards})
+ }
+ setCards(_cards)
}
})
+ let style = JSON.stringify(menu.style || {})
+ style = style.replace(/@mywebsite@\//ig, window.GLOB.baseurl)
+ style = JSON.parse(style)
+
return (
- <div ref={drop} className="mob-shell-inner">
- {/* {cards.map(card => (
- <Card
- id={card.uuid}
- key={card.uuid}
- card={card}
- moveCard={moveCard}
- editCard={editCard}
- delCard={delCard}
- findCard={findCard}
- hasDrop={hasDrop}
- doubleClickCard={doubleClickBtn}
- />
- ))} */}
- <Card />
-
- {/* {cards.length === 0 ?
- <div className="common-drawarea-placeholder">
- {placeholder}
- </div> : null
- } */}
+ <div ref={drop} className="mob-shell-inner" id="menu-shell-inner">
+ <div className="ant-row" style={style}>
+ {cards.map(card => (
+ <Card
+ id={card.uuid}
+ key={card.uuid}
+ card={card}
+ moveCard={moveCard}
+ delCard={deleteCard}
+ findCard={findCard}
+ updateConfig={updateConfig}
+ />
+ ))}
+ {cards.length === 0 ?
+ <Empty description="璇锋坊鍔犵粍浠�" /> : null
+ }
+ </div>
</div>
)
}
export default Container
+
--
Gitblit v1.8.0