luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix publish button

Browse Source
This commit is contained in:
Thomas Nordquist
2020-04-20 14:03:03 +02:00
parent 7a91e4dee6
commit 6fc0d3f28d
1 changed files with 23 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/src/components/Sidebar/Publish/Publish.tsx
View File

@@ -102,7 +102,7 @@ function Publish(props: Props) {
) )
} }
function EditorMode(props: { const EditorMode = memo(function EditorMode(props: {
payload?: string payload?: string
editorMode: string editorMode: string
focusEditor: () => void focusEditor: () => void
@@ -127,21 +127,18 @@ function EditorMode(props: {
} }
}, [props.payload]) }, [props.payload])
return useMemo( return (
() => ( <div style={{ marginTop: '16px' }}>
<div style={{ marginTop: '16px' }}> <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
<div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}> <EditorModeSelect value={props.editorMode} onChange={updateMode} focusEditor={props.focusEditor} />
<EditorModeSelect value={props.editorMode} onChange={updateMode} focusEditor={props.focusEditor} /> <FormatJsonButton editorMode={props.editorMode} focusEditor={props.focusEditor} formatJson={formatJson} />
<FormatJsonButton editorMode={props.editorMode} focusEditor={props.focusEditor} formatJson={formatJson} /> <div style={{ float: 'right' }}>
<div style={{ float: 'right' }}> <PublishButton publish={props.publish} focusEditor={props.focusEditor} />
<PublishButton publish={props.publish} focusEditor={props.focusEditor} />
</div>
</div> </div>
</div> </div>
), </div>
[props.editorMode]
) )
} })
const FormatJsonButton = React.memo(function FormatJsonButton(props: { const FormatJsonButton = React.memo(function FormatJsonButton(props: {
editorMode: string editorMode: string
@@ -166,7 +163,7 @@ const FormatJsonButton = React.memo(function FormatJsonButton(props: {
) )
}) })
const PublishButton = (props: { publish: () => void; focusEditor: () => void }) => { const PublishButton = memo(function PublishButton(props: { publish: () => void; focusEditor: () => void }) {
const handleClickPublish = useCallback( const handleClickPublish = useCallback(
(e: React.MouseEvent) => { (e: React.MouseEvent) => {
e.stopPropagation() e.stopPropagation()
@@ -175,22 +172,19 @@ const PublishButton = (props: { publish: () => void; focusEditor: () => void })
[props.publish] [props.publish]
) )
return useMemo( return (
() => ( <Button
<Button variant="contained"
variant="contained" size="small"
size="small" color="primary"
color="primary" onClick={handleClickPublish}
onClick={handleClickPublish} onFocus={props.focusEditor}
onFocus={props.focusEditor} id="publish-button"
id="publish-button" >
> <Navigation style={{ marginRight: '8px' }} /> Publish
<Navigation style={{ marginRight: '8px' }} /> Publish </Button>
</Button>
),
[handleClickPublish]
) )
} })
const mapDispatchToProps = (dispatch: any) => { const mapDispatchToProps = (dispatch: any) => {
return { return {