github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-18 06:52:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: remove draggable change style

Browse Source
This commit is contained in:
yehuozhili 2020-10-16 13:13:32 +08:00
parent 8fdef66fd4
commit 6f2550a5a5
1 changed files with 36 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/layouts/index.tsx
View File

@ -3,7 +3,6 @@ import { library, generateRespones, RenderList, useRegister } from 'chatbot-antd
import { IRouteComponentProps } from 'umi'; import { IRouteComponentProps } from 'umi';
import { Button } from 'antd'; import { Button } from 'antd';
import { CustomerServiceOutlined } from '@ant-design/icons'; import { CustomerServiceOutlined } from '@ant-design/icons';
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
library.push( library.push(
//语料库，push进去，也可以不用 //语料库，push进去，也可以不用
@ -36,6 +35,7 @@ export const dooringContext = createContext<IdooringContextType>({
export default function Layout({ children }: IRouteComponentProps) { export default function Layout({ children }: IRouteComponentProps) {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [num, setNum] = useState(0);
const callb = useCallback((v: RenderList) => { const callb = useCallback((v: RenderList) => {
setTimeout(() => { setTimeout(() => {
//使用settimeout 更像机器人回话 //使用settimeout 更像机器人回话
@ -52,8 +52,14 @@ export default function Layout({ children }: IRouteComponentProps) {
modalOpen, modalOpen,
callb, callb,
{ {
onOk: () => setModalOpen(false), onOk: () => {
onCancel: () => setModalOpen(false), setModalOpen(false);
setNum(0);
},
onCancel: () => {
setModalOpen(false);
setNum(0);
},
title: 'h5-Dooring机器人客服', title: 'h5-Dooring机器人客服',
width: 400, width: 400,
}, },
@ -88,7 +94,6 @@ export default function Layout({ children }: IRouteComponentProps) {
); );
const [state, setState] = useState<dooringContextType>('h5'); const [state, setState] = useState<dooringContextType>('h5');
const [pos, setPos] = useState({ x: 0, y: 0 });
return ( return (
<dooringContext.Provider <dooringContext.Provider
value={{ value={{
@ -97,26 +102,38 @@ export default function Layout({ children }: IRouteComponentProps) {
}} }}
> >
<div style={{ height: '100%', width: '100%', overflow: 'hidden' }}> <div style={{ height: '100%', width: '100%', overflow: 'hidden' }}>
<Draggable
position={pos}
onStop={(e: DraggableEvent, data: DraggableData) => {
setPos({ x: data.x, y: data.y });
}}
>
<div <div
style={{ style={{
position: 'fixed', position: 'fixed',
right: `${modalOpen ? '-100%' : '10px'}`, right: `${num === 0 ? '-10px' : num === 1 ? '-100%' : '0px'}`,
bottom: '80px', bottom: '80px',
transition: 'all 0.5s ease-in-out', transition: 'all 0.3s ease-in-out',
zIndex: 2, zIndex: 2,
}} }}
onMouseEnter={() => {
//0初始，1点击 2移入
setNum(2);
}}
onMouseLeave={() => {
setNum(pre => (pre === 2 ? 0 : pre));
}}
>
<Button
type="primary"
style={{
transition: 'all 0.3s ease-in-out',
borderRadius: `${num === 0 ? '1000px' : '0px'}`,
transform: `${num === 0 ? 'scale(0.5)' : 'scale(1)'}`,
}}
onClick={() => {
setModalOpen(!modalOpen);
!modalOpen && setNum(1);
}}
> >
<Button type="primary" onClick={() => setModalOpen(!modalOpen)}>
<CustomerServiceOutlined></CustomerServiceOutlined> <CustomerServiceOutlined></CustomerServiceOutlined>
</Button> </Button>
</div> </div>
</Draggable>
{render} {render}
{children} {children}
</div> </div>