Yang Pei
4 years ago
committed by
GitHub
9 changed files with 163 additions and 100 deletions
@ -0,0 +1,10 @@ |
|||||
|
.editModal { |
||||
|
|
||||
|
width: 450px; |
||||
|
|
||||
|
:global { |
||||
|
.ant-form-item:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,35 @@ |
|||||
|
import React, { useState, useCallback } from 'react'; |
||||
|
import { Button } from 'antd'; |
||||
|
import { SettingOutlined } from '@ant-design/icons'; |
||||
|
import EditModal from './editModal'; |
||||
|
|
||||
|
interface IProps { |
||||
|
confirmToSync: () => Promise<void>; |
||||
|
} |
||||
|
|
||||
|
const Configuration: React.FC<IProps> = (props: IProps) => { |
||||
|
const [visible, setVisible] = useState<boolean>(false); |
||||
|
|
||||
|
// events
|
||||
|
const onOpenEditModal = useCallback(() => { |
||||
|
setVisible(true); |
||||
|
}, [setVisible]); |
||||
|
const onCloseEditModal = useCallback(() => { |
||||
|
setVisible(false); |
||||
|
}, []); |
||||
|
const onOk = useCallback(() => { |
||||
|
onCloseEditModal(); |
||||
|
props.confirmToSync(); |
||||
|
}, [onCloseEditModal]); |
||||
|
|
||||
|
return ( |
||||
|
<div> |
||||
|
<Button size="small" type="text" onClick={onOpenEditModal}> |
||||
|
<SettingOutlined /> |
||||
|
</Button> |
||||
|
<EditModal visible={visible} onOk={onOk} onCancel={onCloseEditModal} /> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Configuration; |
@ -1,22 +1,6 @@ |
|||||
.container { |
.container { |
||||
|
|
||||
display: flex; |
display: flex; |
||||
flex-direction: row; |
flex-direction: row; |
||||
align-items: center; |
align-items: center; |
||||
margin-left: 20px; |
margin-left: 20px; |
||||
|
|
||||
.tag { |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
.editModal { |
|
||||
|
|
||||
width: 450px; |
|
||||
|
|
||||
:global { |
|
||||
.ant-form-item:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
Loading…
Reference in new issue