import React, { FC, useState } from "react" import { toast } from "react-hot-toast" import { Button, Drawer, InputField } from "@kiwicom/orbit-components" import { FaSearch } from "react-icons/fa" import styled from "styled-components" interface Props { show: boolean onConfirm: (url: string) => void onCancel: () => void } const AddReferenceWebDrawer: FC<Props> = ({show, onConfirm, onCancel}) => { const [url, setUrl] = useState('') const clear = () => { setUrl('') } const onClose = () => { clear() onCancel() } const onSubmit = () => { if (url.length === 0) { toast.error('url required') return } if (!url.startsWith('http')) { toast.error('invalid url') return } clear() onConfirm(url) } return ( <> <Drawer shown={show} onClose={onClose} title="Add Web Reference"> <InputField size="small" value={url} onChange={e => setUrl((e.target as any).value)} onKeyDown={e => { if (e.key === 'Enter') { onSubmit() } }} suffix={ <span role="button" onClick={onSubmit} style={{ marginRight: '10px' }}> <FaSearch /> </span> } /> <ButtonWrapper> <Button onClick={onSubmit} size="small">Add</Button> </ButtonWrapper> </Drawer> </> ) } const ButtonWrapper = styled.div` text-align: right; margin-top: 10px; button { display: inline-flex; } ` export default AddReferenceWebDrawer