Last active
March 15, 2019 13:22
-
-
Save simonpai/fedbb8142e786b45b903028d22c6b92c to your computer and use it in GitHub Desktop.
useConfirm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useContext } from 'react'; | |
| import { Context } from '../semantic/ConfirmProvider'; | |
| export default function useConfirm() { | |
| return useContext(Context); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState, useCallback } from 'react'; | |
| // import PropTypes from 'prop-types'; | |
| import { Confirm } from 'semantic-ui-react'; | |
| const PureConfirm = React.memo(Confirm); | |
| const CLOSE = [false, undefined, undefined, undefined]; | |
| export const Context = React.createContext(CLOSE); | |
| function ConfirmProvider({children, ...props}) { | |
| const [state, setState] = useState(CLOSE); | |
| const [isOpen, confirm, cancel, extraProps] = state; | |
| const onCancel = useCallback(() => { | |
| setState(CLOSE); | |
| cancel && cancel(); | |
| }, state); | |
| const onConfirm = useCallback(() => { | |
| setState(CLOSE); | |
| confirm && confirm(); | |
| }, state); | |
| const open = useCallback((confirm, cancel, props) => setState([true, confirm, cancel, props])); | |
| return ( | |
| <Context.Provider value={open}> | |
| {children} | |
| <PureConfirm | |
| open={isOpen} | |
| onCancel={onCancel} | |
| onConfirm={onConfirm} | |
| {...props} | |
| {...extraProps} | |
| /> | |
| </Context.Provider> | |
| ); | |
| } | |
| export default ConfirmProvider; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { Confirm } from 'semantic-ui-react'; | |
| import { usePersistentState } from '../hook'; | |
| import AppBar from '../container/AppBar'; | |
| import Inventory from '../container/Inventory'; | |
| import Body from '../container/Body'; | |
| function MainPage() { | |
| const [subject, setSubject] = usePersistentState('subject', {initialValue: []}); | |
| return ( | |
| <div id="root"> | |
| <Confirm.Provider id="confirm"> | |
| <AppBar id="app-bar" /> | |
| <div className="hm"> | |
| <Inventory id="inventory" subject={subject} setSubject={setSubject} /> | |
| <Body id="body" subject={subject} /> | |
| </div> | |
| </Confirm.Provider> | |
| </div> | |
| ); | |
| } | |
| export default MainPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function SessionPanel({session, console}) { | |
| const [section, setSection] = useState('url'); | |
| const id = session.id; | |
| const api = useApi(); | |
| const confirm = useConfirm(); | |
| const close = useCallback(() => confirm(() => api.session.close(id)), [id]); | |
| return ( | |
| <Tab.View | |
| value={section} | |
| sections={sections({session, console, api})} | |
| onSelect={setSection} | |
| > | |
| <Tab.View.Toolbar> | |
| <Button.Ripple | |
| icon | |
| onClick={close} | |
| > | |
| <Icon path={mdiDelete} color="#666" /> | |
| </Button.Ripple> | |
| </Tab.View.Toolbar> | |
| </Tab.View> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment