Commit 4e3b12f6 authored by wty's avatar wty

test

parent f72de40c
import './ContentItem.scss' import './ContentItem.scss'
import notFollow from '../../static/notFollow.png'
import followed from '../../static/followed.png'
import setting from '../../static/setting.svg' import setting from '../../static/setting.svg'
import trash from '../../static/trash.svg' import trash from '../../static/trash.svg'
import dragIcon from '../../static/dragIcon.svg' import dragIcon from '../../static/dragIcon.svg'
...@@ -24,7 +22,7 @@ function ContentItemAdmin(props) { ...@@ -24,7 +22,7 @@ function ContentItemAdmin(props) {
} }
const deleteItem = toolbox_id => { const deleteItem = toolbox_id => {
fetchData('/delete/deleteToolBoxById', {toolbox_id}) fetchData('/delete/deleteToolBoxById', {toolbox_id})
.then(dispatch(NEED_UPDATE_INDEX())) .then(() => dispatch(NEED_UPDATE_INDEX()))
} }
return ( return (
......
import {useContext} from "react";
import {PopContext} from "../../dataCenter/Root";
function PopConfirm(props){
const {hidePop} = useContext(PopContext)
const {submit, title} = props
return (
<div className="Pop-container">
<div className="Pop-tool">
<button className="close" onClick={() => hidePop()}>X</button>
</div>
<h2 className='Pop-title'>{title}</h2>
<div className="Pop-bottom">
<button className='btn-submit-addToolBox' onClick={() => submit()}>确定</button>
<button className='btn-submit-addToolBox' onClick={() => submit()}>取消</button>
</div>
</div>
)
}
export default PopConfirm
@import "../../common/popStyle";
.Pop-container{
position: absolute;
}
import {useContext, useRef, useState} from "react";
import {PopContext} from "../../dataCenter/Root";
import closeIcon from '../../static/closeIcon.svg'
function PopContainer(props) {
const dragRef = useRef()
const {hidePop} = useContext(PopContext)
const [offset, setOffset] = useState({x: 0, y: 0})
const [draggable, setDraggable] = useState(false)
const handleMouseDown = e => {
e.stopPropagation()
setDraggable(true)
setOffset({
x: e.clientX - dragRef.current['getBoundingClientRect']().x,
y: e.clientY - dragRef.current['getBoundingClientRect']().y
})
}
const handleMouseUp = () => setDraggable(false)
const handleMouseMove = e => {
if (draggable) {
let x = e.clientX - offset.x
let y = e.clientY - offset.y
// console.log(x, y)
if (x < 0) x = 0
if (y < 0) y = 0
if (x + dragRef.current['offsetWidth'] > document.body.offsetWidth) x = document.body.offsetWidth - dragRef.current['offsetWidth']
if (y + dragRef.current['offsetHeight'] > document.body.offsetHeight) y = document.body.offsetHeight - dragRef.current['offsetHeight']
dragRef.current.style.transform = `translate(${x}px,${y}px)`
}
}
return (
<div className="drag-Container"
onMouseUp={() => handleMouseUp()}
onMouseMove={(e) => handleMouseMove(e)}>
<div className="Pop-container"
ref={dragRef}
>
<div className="Pop-tool" onMouseDown={e => handleMouseDown(e)}>
<button className="close" onClick={() => hidePop()}><img src={closeIcon} alt=''/></button>
</div>
{props.children}
</div>
</div>
)
}
export default PopContainer
import {useContext} from "react";
import {Root} from "../../dataCenter/Root";
import {useFormState} from "../../utils/hook";
import PopContainer from "../PopContainer/PopContainer";
import {NEED_UPDATE_INDEX} from "../../dataCenter/action";
function Pop_toolBoxConfig(props) {
const {toolbox_name, toolbox_icon, toolbox_desc, toolbox_url, toolbox_id} = props.value
const {fetchData, dispatch} = useContext(Root)
const [input, setInput] = useFormState({
toolbox_name,
toolbox_icon,
toolbox_desc,
toolbox_url
})
const updateToolBox = () => {
fetchData('/update/updateToolBox', Object.assign({}, input, {toolbox_id}))
.then(() => dispatch(NEED_UPDATE_INDEX()))
}
return (
<PopContainer>
<h2 className='Pop-title'>{toolbox_name}</h2>
<div className="formArea">
<div className="input-group ">
<input type="text" onChange={e => setInput('toolbox_name', e.target.value)}
defaultValue={input?.['toolbox_name']}
min={1} required/>
<span> 名称</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolbox_icon', e.target.value)}
defaultValue={input?.['toolbox_icon']}
min={1} required/>
<span> 图标</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolbox_desc', e.target.value)}
defaultValue={input?.['toolbox_desc']}
min={1} required/>
<span> 描述</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolbox_url', e.target.value)}
defaultValue={input?.['toolbox_url']} min={1}
required/>
<span> 链接</span>
</div>
</div>
<div className="Pop-bottom">
<button className='btn-submit-addToolBox'
onClick={() => updateToolBox()}>提交
</button>
</div>
</PopContainer>
)
}
export default Pop_toolBoxConfig
@import "../../common/popStyle";
.Pop-container{
position: absolute;
}
import './Pop_addToolBox.scss'
import {useContext} from "react";
import {Root} from "../../dataCenter/Root";
import {useFormState} from "../../utils/hook";
import PopContainer from "../PopContainer/PopContainer";
function Pop_addToolBox() {
const {fetchData, updateIndex, dataCenter} = useContext(Root)
const [input, setInput] = useFormState()
const addToolBox = () => {
fetchData('/add/addToolBox', input)
.then(() => updateIndex())
}
return (
<PopContainer>
<h2 className='Pop-title'>新建工具盒</h2>
<div className="formArea">
<div className="input-group ">
<input type="text" onChange={e => setInput('toolbox_name', e.target.value)}
defaultValue={input?.['toolbox_name']}
min={1} required/>
<span> 名称</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolbox_icon', e.target.value)}
defaultValue={input?.['toolbox_icon']}
min={1} required/>
<span> 图标</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolbox_desc', e.target.value)}
defaultValue={input?.['toolbox_desc']}
min={1} required/>
<span> 描述</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolbox_url', e.target.value)}
defaultValue={input?.['toolbox_url']} min={1}
required/>
<span> 链接</span>
</div>
<div className="input-group ">
<select onChange={(e)=> setInput('type_id',e.target.value)}>
{
dataCenter?.type?.length && dataCenter?.type.map(v=>{
return (
<option key={v.type_id} value={v.type_id}>{v.type_name}</option>
)
})
}
</select>
<span> 类型</span>
</div>
</div>
<div className="Pop-bottom">
<button className='btn-submit-addToolBox' onClick={() => addToolBox()}>提交</button>
</div>
</PopContainer>
)
}
export default Pop_addToolBox
@import "../../common/popStyle";
.Pop-container{
position: absolute;
top: 100px;
left: 200px;
}
import {useContext} from "react";
import {Root} from "../../dataCenter/Root";
import {useFormState} from "../../utils/hook";
import PopContainer from "../PopContainer/PopContainer";
import './Pop_addType.scss'
import {NEED_UPDATE_INDEX} from "../../dataCenter/action";
function Pop_addType(props) {
const {fetchData, dispatch} = useContext(Root)
const [input, setInput] = useFormState()
const addType = () => {
fetchData('/add/addType', input)
.then(() => dispatch(NEED_UPDATE_INDEX()))
}
return (
<PopContainer>
<h2 className='Pop-title'>新建类型</h2>
<div className="formArea">
<div className="input-group ">
<input type="text" onChange={e => setInput('type_name', e.target.value)}
defaultValue={input?.type_name}
min={1} required/>
<span> 类型名称</span>
</div>
</div>
<div className="Pop-bottom">
<button className='btn-submit-addToolBox' onClick={() => addType()}>提交</button>
</div>
</PopContainer>
)
}
export default Pop_addType
@import "../../common/popStyle";
.drag-Container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Pop-container{
position: absolute;
top: 0;
left: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment