react-antd-modular-prompt.md

React + Ant modular prompt approach

This example shows how to trigger a simple prompt, but with a very modular approach.

/* eslint-disable react/prop-types */
import * as React from 'react';
import styled from 'styled-components';

import { Popconfirm as PopconfirmAnt, Button } from 'antd';

const Popconfirm = styled(PopconfirmAnt)`
	position: fixed;
	bottom: 0;
	right: 0;
`;

const Prompt = props => {
	const { children, ...rest } = props;
	return (
		<Popconfirm
			placement="topLeft"
			title={
				<div>
					<h1>Hello World!</h1>
				</div>
			}
			// onConfirm={confirm}
			okText="Yes"
			cancelText="No"
			{...rest}
		/>
	);
};

const Face = styled.div`
	position: fixed;
	width: 50px;
	height: 50px;
	background-color: red;
	bottom: 0;
	right: 0;
`;

const PromptContext = React.createContext();
const usePrompt = () => React.useContext(PromptContext);
const withPrompt = ComposedComponent => {
	const WithPrompt = () => {
		const [visible, setVisible] = React.useState(false);
		const togglePrompt = () => setVisible(!visible);
		return (
			<PromptContext.Provider value={{ togglePrompt, visiblePrompt: visible }}>
				<ComposedComponent />
				<Face>{visible ? 'HAPPY FACE' : 'NEUTRAL FACE'}</Face>
			</PromptContext.Provider>
		);
	};

	return WithPrompt;
};

const MyPage = () => {
	const { togglePrompt, visiblePrompt } = usePrompt();
	return (
		<>
			<h1>I am the page</h1>
			<Prompt visible={visiblePrompt} />
			<Button onClick={togglePrompt}>TL</Button>
		</>
	);
};

export default withPrompt(MyPage);