[Work in progress] A Reactjs-based web app to help with ricing: designing beautiful unix desktop environments.
git clone https://mcol.xyz/code/unix.sexy
Log | Files | Refs

commit a742078f805a546ddb115937db6bd51dbddf18b7
parent 8939f6c87c4156cb86c6058294cb1b6123ce37b8
Author: mcol <mcol@posteo.net>
Date:   Sat, 27 Jun 2020 13:45:01 +0100

move button logic into single Button component

Diffstat:
Asrc/components/button/index.css | 3+++
Asrc/components/button/index.js | 20++++++++++++++++++++
Msrc/features/reset/panel.js | 11++++-------
Msrc/features/windows/panel.js | 14++++----------
4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/button/index.css b/src/components/button/index.css @@ -0,0 +1,3 @@ +button { + width: 60px; +} diff --git a/src/components/button/index.js b/src/components/button/index.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { useDispatch } from 'react-redux'; + +import { fixColour } from 'features/helpers'; +import './index.css'; + + +export default function Button(props) { + const dispatch = useDispatch(); + + return ( + <> + <button + onClick={() => dispatch(props.callback())} + > + {props.text} + </button> + </> + ); +} diff --git a/src/features/reset/panel.js b/src/features/reset/panel.js @@ -1,19 +1,16 @@ import React from 'react'; -import { useDispatch } from 'react-redux'; import reset from './slice.js'; +import Button from 'components/button'; import OptBox from 'components/optbox'; export function ResetCtl() { - const dispatch = useDispatch(); return ( - <OptBox className="ResetCtl" label="Reset state"> - <div> - <button onClick={() => dispatch(reset())}> - Reset - </button> + <OptBox className="ResetCtl" label="State" width="100px"> + <div > + <Button callback={reset} text={"Reset"} /> </div> </OptBox> ) diff --git a/src/features/windows/panel.js b/src/features/windows/panel.js @@ -2,6 +2,7 @@ import React from 'react'; import { useDispatch } from 'react-redux'; import { addWindow, delWindow } from './slice'; +import Button from 'components/button'; import OptBox from 'components/optbox'; @@ -9,17 +10,10 @@ export function WindowCtl() { const dispatch = useDispatch(); return ( - <OptBox className="WindowCtl" label="Todos"> + <OptBox className="WindowCtl" label="Number" width="100px"> <div> - <ul> - <li>Transparency + blur</li> - </ul> - </div> - - <div> - Number - <button onClick={() => dispatch(addWindow())}> + </button> - <button onClick={() => dispatch(delWindow())}> - </button> + <Button text={"+"} callback={addWindow} /> + <Button text={"-"} callback={delWindow} /> </div> </OptBox> );