@chakra-ui/react#DrawerOverlay JavaScript Examples
The following examples show how to use
@chakra-ui/react#DrawerOverlay.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: components.js From idena-web with MIT License | 6 votes |
|
export function Drawer({isCloseable = true, children, ...props}) {
const maxWidth = useBreakpointValue(['auto', 360])
const drawerSize = useBreakpointValue(['full', 'xs'])
const closeButtonSize = useBreakpointValue(['lg', 'md'])
const drawerPromotion = React.useState()
return (
<DrawerPromotionContext.Provider value={drawerPromotion}>
<ChakraDrawer placement="right" {...props}>
<DrawerOverlay bg="xblack.080" />
<DrawerContent
px={8}
pt={[4, 12]}
pb={4}
size={drawerSize}
maxW={maxWidth}
>
{isCloseable && (
<DrawerCloseButton
size={closeButtonSize}
color={['brandBlue.100', 'initial']}
/>
)}
{children}
</DrawerContent>
<DrawerPromotion
left={maxWidth > 0 ? `calc(50% - ${maxWidth / 2}px)` : '50%'}
/>
</ChakraDrawer>
</DrawerPromotionContext.Provider>
)
}
Example #2
| Source File: ConferenceCard.js From codeursenseine.com with MIT License | 4 votes |
|
ConferenceCard = ({ conference, speakers }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const capitalizeFirstLetter = (string) =>
string.charAt(0).toUpperCase() + string.slice(1);
if (conference?.childMdx?.frontmatter?.type === "break") {
return (
<Card variant="primary" mt={2}>
<Stack align="center">
<Text>{conference?.childMdx?.frontmatter?.title}</Text>
</Stack>
</Card>
);
}
return (
<Stack>
<Grid
templateColumns={["repeat(1, 1fr)", "repeat(1, 1fr) repeat(1, 4fr)"]}
mt={3}
>
<Stack mr={3}>
<Flex
display={["none", "flex"]}
flexDirection="column"
justifyContent="space-between"
h="100%"
borderColor="blue.50"
borderStyle="solid"
borderTopWidth={1}
borderBottomWidth={1}
>
<Text color="blue.600">
{conference.childMdx.frontmatter.startHour}
</Text>
<Text color="blue.600">
{conference.childMdx.frontmatter.endHour}
</Text>
</Flex>
<Stack display={["block", "none"]} mb={2}>
<Text color="blue.600">
{`${conference.childMdx.frontmatter.startHour} - ${conference.childMdx.frontmatter.endHour}`}
</Text>
</Stack>
{conference.childMdx.frontmatter.isKeynote && (
<Badge colorScheme="brand" width="fit-content">
Keynote
</Badge>
)}
</Stack>
<Card
borderLeftWidth={2}
borderLeftColor="brand.600"
onClick={onOpen}
w="full"
isLink
>
<Heading fontSize="md">
{conference.childMdx.frontmatter.title}
</Heading>
{speakers?.map((speaker) => (
<SpeakerPreview
key={speaker.childMdx.frontmatter.slug}
speaker={speaker}
/>
))}
<Center>
<Button
colorScheme="brand"
variant="link"
width="fit-content"
mt={2}
>
Voir les détails et s'inscrire
</Button>
</Center>
</Card>
</Grid>
<Drawer size="md" isOpen={isOpen} placement="right" onClose={onClose}>
<DrawerOverlay>
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>
<Stack alignItems="center" display="flex" flexDirection="row">
<Text fontSize="sm" mt={2}>
{capitalizeFirstLetter(
dayjs(conference.childMdx.frontmatter.eventDate).format(
"dddd D MMM"
)
)}{" "}
{`${conference.childMdx.frontmatter.startHour} - ${conference.childMdx.frontmatter.endHour}`}
</Text>
{conference.childMdx.frontmatter.isKeynote && (
<Badge
ml={3}
h="fit-content"
colorScheme="brand"
width="fit-content"
>
Keynote
</Badge>
)}
</Stack>
<Text>{conference.childMdx.frontmatter.title}</Text>
<Stack mt={3}>
{speakers?.map((speaker) => (
<SpeakerPreview
key={speaker.childMdx.frontmatter.slug}
speaker={speaker}
/>
))}
</Stack>
</DrawerHeader>
<DrawerBody overflow="auto">
<MDXRenderer>{conference.childMdx.body}</MDXRenderer>
</DrawerBody>
{conference.childMdx.frontmatter.meetupLink && (
<DrawerFooter display="flex" flexDirection="column">
<Button isFullWidth variant="outline" mb={3} onClick={onClose}>
Fermer
</Button>
<Button
colorScheme="brand"
as={Link}
target="_blank"
to={conference.childMdx.frontmatter.meetupLink}
isFullWidth
>
S'inscrire
</Button>
</DrawerFooter>
)}
</DrawerContent>
</DrawerOverlay>
</Drawer>
</Stack>
);
}
Example #3
| Source File: rent.js From idena-web with MIT License | 4 votes |
|
function ProviderInfoDrawer({p, identity, onClose, onSubmit, ...props}) {
const {t} = useTranslation()
return (
<Drawer placement="right" size="full" {...props}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader>
<AngleArrowBackIcon
stroke="#578FFF"
position="absolute"
left={4}
top={4}
onClick={onClose}
/>
<Flex
direction="column"
textAlign="center"
fontWeight="normal"
align="center"
mt="2px"
>
<Text fontSize="base" fontWeight="bold" color="gray.500">
{p.data.url}
</Text>
<ProviderStatusLabel
status={p.status}
blocksLeft={p.blocksLeft}
fontSize="mdx"
/>
</Flex>
</DrawerHeader>
<DrawerBody pt={0} px={8}>
<ProviderInfoRow title="Node URL">
<Text color="brandBlue.500">{p.data.url}</Text>
</ProviderInfoRow>
<ProviderInfoRow display="none" title="Website">
<Text color="brandBlue.500">FILL_WEBSITE</Text>
</ProviderInfoRow>
<ProviderInfoRow title="Owner">
<Link
target="_blank"
rel="noreferrer"
color="brandBlue.500"
href={`https://t.me/${p.data.ownerName}`}
>
{p.data.ownerName}
</Link>
</ProviderInfoRow>
<ProviderInfoRow title="Location">
<Text color="muted">{p.data.location}</Text>
</ProviderInfoRow>
<Flex justify="space-between">
<ProviderInfoRow title="Slots available" w="46%">
<Flex>
<Text color="gray.500" mr={1}>
{p.slots}
</Text>
<Text display="none" color="muted">
/ FILL
</Text>
</Flex>
</ProviderInfoRow>
<ProviderInfoRow title="Price per validation" w="50%">
<Text color="muted">
{GetProviderPrice(p.data, identity?.state, identity?.age)} iDNA
</Text>
</ProviderInfoRow>
</Flex>
<ProviderInfoRow display="none" title="Users for the last validation">
<Text color="muted">FILL_USERS</Text>
</ProviderInfoRow>
<Flex display="none" justify="space-between">
<ProviderInfoRow title="Success ratio" w="47%">
<Text color="muted">FILL_RATIO</Text>
</ProviderInfoRow>
<ProviderInfoRow title="Rating" w="47%">
<Text color="muted">FILL_RATING</Text>
</ProviderInfoRow>
</Flex>
<Button
variant="primary"
size="lg"
mt={6}
w="100%"
onClick={onSubmit}
>
{t('Continue with this node')}
</Button>
</DrawerBody>
</DrawerContent>
</Drawer>
)
}
Example #4
| Source File: containers.js From idena-web with MIT License | 4 votes |
|
export function VotingInspector({onTerminate, ...contract}) {
const [result, setResult] = React.useState({})
const {isOpen, onOpen, onClose} = useDisclosure()
const {isOpen: isOpenContract, onToggle: onToggleContract} = useDisclosure()
return (
<>
<Button
bg="blue.50"
rightIcon="info"
variant="ghost"
colorScheme="blue"
onClick={onOpen}
>
Open inspector
</Button>
<ChakraDrawer isOpen={isOpen} size="lg" onClose={onClose}>
<DrawerOverlay bg="xblack.080" />
<DrawerContent px={8} py={12} overflowY="auto">
<DrawerCloseButton />
<DrawerHeader>
<Heading fontSize="lg" fontWeight={500} mb={2}>
Inspector
</Heading>
</DrawerHeader>
<DrawerBody fontSize="md">
<Stack spacing={4} w="lg">
<Stack>
<Flex align="center">
<Heading fontSize="base" fontWeight={500} my={4}>
Contract
</Heading>
<IconButton
icon="chevron-down"
size="sm"
fontSize="lg"
ml={1}
onClick={onToggleContract}
/>
</Flex>
<Collapse isOpen={isOpenContract}>
<Debug>{contract}</Debug>
</Collapse>
<Box mt={2}>
<Heading fontSize="base" fontWeight={500} my={4}>
readonlyCall
</Heading>
<Stack
as="form"
spacing={3}
onSubmit={async e => {
e.preventDefault()
const {
readonlyCallMethod,
readonlyCallMethodFormat,
readonlyCallArgs,
} = e.target.elements
setResult(
await createContractReadonlyCaller(contract)(
readonlyCallMethod.value,
readonlyCallMethodFormat.value,
JSON.parse(readonlyCallArgs.value || '[]')
)
)
}}
>
<Stack isInline spacing={2} justify="space-between">
<Input
id="readonlyCallMethod"
placeholder="readonlyCallMethod method"
/>
<Input
id="readonlyCallMethodFormat"
placeholder="format"
w={100}
/>
</Stack>
<Input
id="readonlyCallArgs"
placeholder="readonlyCall args"
/>
<SecondaryButton type="submit" ml="auto">
Readonly call
</SecondaryButton>
</Stack>
</Box>
<Box>
<Heading fontSize="base" fontWeight={500} my={4}>
readKey
</Heading>
<Stack
as="form"
spacing={3}
onSubmit={async e => {
e.preventDefault()
const {readKey, readKeyFormat} = e.target.elements
setResult(
await createContractDataReader(contract.contractHash)(
readKey.value,
readKeyFormat.value
)
)
}}
>
<Stack isInline>
<Input id="readKey" placeholder="readKey key" />
<Input id="readKeyFormat" placeholder="format" w={100} />
</Stack>
<SecondaryButton
type="submit"
ml="auto"
onClick={async () => {}}
>
Read data
</SecondaryButton>
</Stack>
</Box>
<Box>
<Heading fontSize="base" fontWeight={500} my={4}>
txReceipt
</Heading>
<Stack
as="form"
spacing={3}
onSubmit={async e => {
e.preventDefault()
setResult(
await callRpc(
'bcn_txReceipt',
e.target.elements.txHash.value
)
)
}}
>
<Stack isInline>
<Input id="txHash" placeholder="txHash" />
</Stack>
<SecondaryButton
type="submit"
ml="auto"
onClick={async () => {}}
>
Show receipt
</SecondaryButton>
</Stack>
</Box>
<Box>
<Heading fontSize="base" fontWeight={500} my={4}>
contract_getStake
</Heading>
<Stack
as="form"
spacing={3}
onSubmit={async e => {
e.preventDefault()
setResult(
await callRpc(
'contract_getStake',
contract.contractHash
)
)
}}
>
<Stack isInline>
<Input
value={contract.contractHash}
isReadonly
isDisabled
/>
</Stack>
<SecondaryButton
type="submit"
ml="auto"
onClick={async () => {}}
>
Get stake
</SecondaryButton>
</Stack>
</Box>
<Box ml="auto" mt={6}>
<PrimaryButton
colorScheme="red"
variant="solid"
_active={{}}
onClick={onTerminate}
>
Terminate contact
</PrimaryButton>
</Box>
</Stack>
<Debug>{result}</Debug>
</Stack>
</DrawerBody>
</DrawerContent>
</ChakraDrawer>
</>
)
}
Example #5
| Source File: components.js From idena-web with MIT License | 4 votes |
|
function TransactionDetailDrawer({tx, direction, onClose, ...props}) {
const {t, i18n} = useTranslation()
const dna = toLocaleDna(i18n.language, {maximumFractionDigits: 4})
const [, {sendVote, deleteVote}] = useDeferredVotes()
// eslint-disable-next-line no-shadow
function getTitle(tx) {
if (direction === 'Pending') {
return t('To smart contract')
}
const a = tx.direction === 'Sent' ? t('To') : t('From')
const b = tx.counterPartyWallet ? `${t('wallet')} Main` : t('address')
return `${a} ${b}`
}
// eslint-disable-next-line no-shadow
function getValue(tx) {
if (direction === 'Pending') {
return tx.contractHash
}
return (!tx.to && '\u2013') || tx.counterParty
}
const failToast = useFailToast()
const del = async () => {
try {
await deleteVote(tx.id)
onClose()
} catch (e) {
failToast(e.message)
}
}
const send = async () => {
try {
await sendVote(tx)
onClose()
} catch (e) {
failToast(e.message)
}
}
const deleteModalDisclosure = useDisclosure()
return (
<>
<Drawer placement="right" size="full" {...props}>
<DrawerOverlay />
<DrawerContent>
<ChakraDrawerHeader>
<AngleArrowBackIcon
stroke="#578FFF"
position="absolute"
left={4}
top={4}
onClick={onClose}
/>
<Flex direction="column" textAlign="center" mt="2px">
<Text fontSize="16px" fontWeight="bold" color="brandGray.500">
{tx.typeName}
</Text>
<Text fontSize="mdx" fontWeight="normal" color="gray.300">
{t('Transaction')}
</Text>
</Flex>
</ChakraDrawerHeader>
<ChakraDrawerBody px={8} pt={0}>
<TransactionRow
position="relative"
valueWidth="80%"
title={getTitle(tx)}
value={getValue(tx)}
>
{!!tx.to && (
<Box position="absolute" top={2} right={0}>
<Avatar
address={lowerCase(tx.counterParty)}
size={10}
m={0}
/>
</Box>
)}
</TransactionRow>
<TransactionRow
title={t('Amount')}
value={
(tx.type === 'kill' && 'See in Explorer...') ||
dna(tx.amount || tx.signAmount || 0)
}
/>
<TransactionRow
title={t('Fee')}
value={
(!tx.isMining && (tx.fee === '0' ? '\u2013' : dna(tx.fee))) ||
(tx.maxFee && dna(tx.maxFee)) ||
'n/a'
}
/>
<TransactionRow
title={direction === 'Pending' ? t('Scheduled date') : t('Date')}
value={
!tx.timestamp
? '\u2013'
: new Date(tx.timestamp).toLocaleString()
}
/>
{tx.hash && (
<>
<TransactionRow mb={6} title="Transaction ID" value={tx.hash} />
<WideLink
display={['initial', 'none']}
label={t('More details in Explorer')}
href={`https://scan.idena.io/transaction/${tx.hash}`}
isNewTab
>
<Box
boxSize={8}
backgroundColor="brandBlue.10"
borderRadius="10px"
>
<OpenExplorerIcon boxSize={5} mt="6px" ml="6px" />
</Box>
</WideLink>
</>
)}
{direction === 'Pending' && (
<Box mt={4}>
<WideLink
display={['initial', 'none']}
label={t('Send now')}
onClick={send}
>
<Box
boxSize={8}
backgroundColor="brandBlue.10"
borderRadius="10px"
>
<SendIcon boxSize={5} mt="6px" ml="6px" color="blue.500" />
</Box>
</WideLink>
<WideLink
display={['initial', 'none']}
label={t('Delete')}
color="red.500"
onClick={deleteModalDisclosure.onOpen}
>
<Box
boxSize={8}
backgroundColor="red.010"
borderRadius="10px"
>
<BasketIcon boxSize={5} mt="6px" ml="6px" color="red.500" />
</Box>
</WideLink>
</Box>
)}
</ChakraDrawerBody>
</DrawerContent>
</Drawer>
<PendingTxRemoveModal {...deleteModalDisclosure} onSubmit={del} />
</>
)
}
Example #6
| Source File: showreel.js From react-table-library with MIT License | 4 votes |
|
Component = () => {
const [data, setData] = React.useState({ nodes });
//* Theme *//
const chakraTheme = getTheme({
...DEFAULT_OPTIONS,
striped: true,
});
const customTheme = {
Table: `
--data-table-library_grid-template-columns: 64px repeat(5, minmax(0, 1fr));
margin: 16px 0px;
`,
};
const theme = useTheme([chakraTheme, customTheme]);
//* Resize *//
const resize = { resizerHighlight: '#dee2e6' };
//* Pagination *//
const pagination = usePagination(data, {
state: {
page: 0,
size: 4,
},
onChange: onPaginationChange,
});
function onPaginationChange(action, state) {
console.log(action, state);
}
//* Search *//
const [search, setSearch] = React.useState('');
useCustom('search', data, {
state: { search },
onChange: onSearchChange,
});
function onSearchChange(action, state) {
console.log(action, state);
pagination.fns.onSetPage(0);
}
//* Filter *//
const [isHide, setHide] = React.useState(false);
useCustom('filter', data, {
state: { isHide },
onChange: onFilterChange,
});
function onFilterChange(action, state) {
console.log(action, state);
pagination.fns.onSetPage(0);
}
//* Select *//
const select = useRowSelect(data, {
onChange: onSelectChange,
});
function onSelectChange(action, state) {
console.log(action, state);
}
//* Tree *//
const tree = useTree(
data,
{
onChange: onTreeChange,
},
{
clickType: TreeExpandClickTypes.ButtonClick,
treeYLevel: 1,
treeIcon: {
margin: '4px',
iconDefault: null,
iconRight: <FaChevronRight />,
iconDown: <FaChevronDown />,
},
},
);
function onTreeChange(action, state) {
console.log(action, state);
}
//* Sort *//
const sort = useSort(
data,
{
onChange: onSortChange,
},
{
sortIcon: {
iconDefault: null,
iconUp: <FaChevronUp />,
iconDown: <FaChevronDown />,
},
sortFns: {
TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
},
},
);
function onSortChange(action, state) {
console.log(action, state);
}
//* Drawer *//
const [drawerId, setDrawerId] = React.useState(null);
const [edited, setEdited] = React.useState('');
const handleEdit = (event) => {
setEdited(event.target.value);
};
const handleCancel = () => {
setEdited('');
setDrawerId(null);
};
const handleSave = () => {
const node = findNodeById(data.nodes, drawerId);
const editedNode = { ...node, name: edited };
const nodes = insertNode(data.nodes, editedNode);
setData({
nodes,
});
setEdited('');
setDrawerId(null);
};
//* Modal *//
const [modalOpened, setModalOpened] = React.useState(false);
//* Custom Modifiers *//
let modifiedNodes = data.nodes;
// search
modifiedNodes = modifiedNodes.filter((node) =>
node.name.toLowerCase().includes(search.toLowerCase()),
);
// filter
modifiedNodes = isHide ? modifiedNodes.filter((node) => !node.isComplete) : modifiedNodes;
//* Columns *//
const COLUMNS = [
{
label: 'Task',
renderCell: (item) => item.name,
resize,
sort: { sortKey: 'TASK' },
select: {
renderHeaderCellSelect: () => (
<Checkbox
colorScheme="teal"
isChecked={select.state.all}
isIndeterminate={!select.state.all && !select.state.none}
onChange={select.fns.onToggleAll}
/>
),
renderCellSelect: (item) => (
<Checkbox
colorScheme="teal"
style={{ backgroundColor: '#ffffff' }}
isChecked={select.state.ids.includes(item.id)}
onChange={() => select.fns.onToggleById(item.id)}
/>
),
},
tree: true,
},
{
label: 'Deadline',
renderCell: (item) =>
item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
}),
resize,
sort: { sortKey: 'DEADLINE' },
},
{ label: 'Type', renderCell: (item) => item.type, resize, sort: { sortKey: 'TYPE' } },
{
label: 'Complete',
renderCell: (item) => item.isComplete.toString(),
resize,
sort: { sortKey: 'COMPLETE' },
},
{
label: 'Tasks',
renderCell: (item) => (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>{item.nodes?.length}</span>
<IconButton
aria-label="edit"
icon={<FaPen />}
size="xs"
variant="ghost"
colorScheme="teal"
onClick={() => setDrawerId(item.id)}
/>
</div>
),
resize,
sort: { sortKey: 'TASKS' },
},
];
return (
<>
<Modal isOpen={modalOpened} onClose={() => setModalOpened(false)}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Not all features included here, but we got ...</ModalHeader>
<ModalCloseButton />
<ModalBody>
<div>
<Checkbox colorScheme="teal" isChecked>
Resize
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Sort
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Search
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Filter
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Select
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Tree
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Drawer on Edit
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Pagination
</Checkbox>
</div>
</ModalBody>
</ModalContent>
</Modal>
{/* Form */}
<HStack m={3}>
<Button colorScheme="teal" onClick={() => setModalOpened(true)}>
Features?
</Button>
<InputGroup>
<InputLeftElement
pointerEvents="none"
children={<FaSearch style={{ color: '#4a5568' }} />}
/>
<Input
placeholder="Search Task"
value={search}
onChange={(event) => setSearch(event.target.value)}
/>
</InputGroup>
<Checkbox
style={{ whiteSpace: 'nowrap' }}
colorScheme="teal"
isChecked={isHide}
onChange={(event) => setHide(event.target.checked)}
>
Hide Complete
</Checkbox>
</HStack>
{/* Table */}
<Box p={3} borderWidth="1px" borderRadius="lg">
<CompactTable
columns={COLUMNS}
data={{ ...data, nodes: modifiedNodes }}
theme={theme}
layout={{ custom: true }}
select={select}
tree={tree}
sort={sort}
pagination={pagination}
/>
</Box>
<br />
<HStack justify="flex-end">
<IconButton
aria-label="previous page"
icon={<FaChevronLeft />}
colorScheme="teal"
variant="ghost"
disabled={pagination.state.page === 0}
onClick={() => pagination.fns.onSetPage(pagination.state.page - 1)}
/>
{pagination.state.getPages(modifiedNodes).map((_, index) => (
<Button
key={index}
colorScheme="teal"
variant={pagination.state.page === index ? 'solid' : 'ghost'}
onClick={() => pagination.fns.onSetPage(index)}
>
{index + 1}
</Button>
))}
<IconButton
aria-label="next page"
icon={<FaChevronRight />}
colorScheme="teal"
variant="ghost"
disabled={pagination.state.page + 1 === pagination.state.getTotalPages(data.nodes)}
onClick={() => pagination.fns.onSetPage(pagination.state.page + 1)}
/>
</HStack>
<Drawer isOpen={drawerId} onClose={handleCancel} placement="right">
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Create your account</DrawerHeader>
<DrawerBody>
<Text>Name: </Text>
<Input
autoFocus
value={
edited || fromTreeToList(data.nodes).find((node) => node.id === drawerId)?.name
}
onChange={handleEdit}
data-autofocus
/>
</DrawerBody>
<DrawerFooter>
<Button variant="outline" mr={3} onClick={handleCancel}>
Cancel
</Button>
<Button onClick={handleSave} colorScheme="teal">
Save
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</>
);
}
Example #7
| Source File: FormCard.js From MeowForm with MIT License | 4 votes |
|
function FormCard({formName , responses ,formData ,redirectUrl ,email }) {
const formBackground = useColorModeValue("gray.100","gray.700");
const [check] = useMediaQuery("(min-width: 1025px)")
const { isOpen, onOpen, onClose } = useDisclosure()
const [size, setSize] = React.useState("md")
const [url, setUrl] = React.useState();
const [edit , setEdit] = React.useState(false);
let apiKey = process.env.REACT_APP_APIKEY ;
let apiUrl = process.env.REACT_APP_HOSTURL ;
function isValidURL(string) {
var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
return (res !== null)
};
const sendResponse = async(serverUrl)=> {
let meow = await axios({
method: 'post',
url: serverUrl,
data: {
url: url,
formName: formName
}
});
}
const checkUrl = () => {
if(url === "" || url === undefined){
toast.error(' Url not saved');
setEdit(!edit)
}else if(isValidURL(url)){
let serverUrl = apiUrl + 'url/' + email + '&' + apiKey;
sendResponse(serverUrl);
toast.success('Url is saved, it will some time to reflect');
setEdit(!edit)
}else{
toast.error('The url is not valid :( ');
}
}
return (
<Box id={formName}mt="1%" borderRadius={25} padding="2%" display="flex" flexDirection={check ? "row" : "column"} backgroundColor ="#fff" background={formBackground} >
<Box width="100%" ml="5%" >
<Flex justifyContent="space-between" >
<Text> {formName}</Text>
<Text> {responses} Responses</Text>
<Button colorScheme="orange" onClick={onOpen}> View</Button>
</Flex>
{/* {console.log(formData)} */}
</Box>
<Drawer onClose={onClose} isOpen={isOpen} size={check ? "xl" :"xs"}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader align="center">
<Text
margin="1%"
fontWeight="extraBold"
fontSize="3xl"
bgGradient="linear(to-l, #ec9f05 ,#ff4e00)"
bgClip="text"
>
{formName}
</Text>
<Text
>
{responses} Responses
</Text>
</DrawerHeader>
<DrawerBody>
<Box>
{formData.length > 0 &&
<>
<FormHeading obj={formData[0]}></FormHeading>
{
formData.map(x=>
<FormData obj={x}></FormData>
)
}
</>
}
{/* <Flex>
<Text margin="5%">Redirect Url </Text>
<Text margin="5%"> { redirectUrl } </Text>
</Flex> */}
{/* { edit && */}
{/* <Flex>
<Input placeholder={redirectUrl} isDisabled={!edit} value={url} onChange={ (e)=>(setUrl(e.target.value))}
/>
{edit === false ?
<Button onClick={()=>{setEdit(!edit)}}>
edit
</Button>
:
<Button onClick={()=>(checkUrl())}> Save</Button>
}
</Flex> */}
{/* } */}
{/* <Text> * you one need Redirect url if you are just using html css , check docs here </Text> */}
</Box>
<Box>
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</Box>
);
}
Example #8
| Source File: NavBar.js From MeowForm with MIT License | 4 votes |
|
function Navbar(props) {
const {colorMode , toggleColorMode }= useColorMode();
const isDark = colorMode === 'dark';
const { isOpen, onOpen, onClose } = useDisclosure()
const [size, setSize] = React.useState("md")
const [check] = useMediaQuery("(min-width: 1025px)")
const [meow ,setMeow] = React.useState(false);
const [signIn,setSignIn] = React.useState(false);
const formBackground = useColorModeValue("white.100","gray.900");
const { loginWithRedirect , logout , isAuthenticated , user} = useAuth0();
let flag = false;
var setFlag = () =>{
setMeow(!meow);
onClose();
}
return (
<>
<Box position="fixed" width="100%" backgroundColor="#fff" background={formBackground} zIndex="1000" >
<VStack p={5} >
<Flex w="100%">
<Link to="/">
<Text ml="8" bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
fontSize={check ?"3xl":"xl"}
fontWeight="extrabold"
z-index={5}
>
MeowForm
</Text>
</Link>
<Spacer>
</Spacer>
<Tooltip label="Menu">
<IconButton onClick={onOpen} ml={2} mr={1} icon={<FaList />} isRound="true"></IconButton>
</Tooltip>
{check &&
<Tooltip label="Star! on github" >
<a href='https://github.com/tewarig/' target='_blank'><IconButton ml={2} mr={1} icon={<FaGithub />} isRound="true"></IconButton></a>
</Tooltip>
}
{ check &&
<Tooltip label={isDark ? "Light mode":"Dark Mode"} >
<IconButton ml={2} mr={1} icon={ isDark ? <FaSun /> : <FaMoon /> } isRound="true" onClick={toggleColorMode}>
</IconButton>
</Tooltip>
}
<Tooltip label="Manage Profile">
<Box ml={5} mr={1}>
</Box>
</Tooltip>
{ user &&
<Menu>
{({ isOpen }) => (
<>
<MenuButton isActive={isOpen} >
<Avatar name={user.name} src={user.picture} />
</MenuButton>
<MenuList>
<MenuItem>Hi , {user.name}</MenuItem>
<Link to="/dashboard">
<MenuItem> Dashboard </MenuItem>
</Link>
<MenuItem onClick={() => logout()}>Logout</MenuItem>
</MenuList>
</>
)}
</Menu>
}
{ !isAuthenticated &&
<Tooltip label="Sign in / SignUp ">
<Menu>
{({ isOpen }) => (
<>
<MenuButton isActive={isOpen} >
<Avatar />
</MenuButton>
<MenuList>
<MenuItem onClick={()=>(loginWithRedirect()) }>Sign In/Sign Up </MenuItem>
</MenuList>
</>
)}
</Menu>
{/* <IconButton icon={<FaUser />} isRound="true" onClick={()=>(loginWithRedirect())}>
</IconButton> */}
</Tooltip>
}
</Flex>
</VStack>
<Divider bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" height={1} />
<Drawer onClose={meow ? setFlag : onClose } isOpen={isOpen} size={"xs"}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader align="center">
<Text bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
fontSize={useDisclosure ? "5xl" : "3xl"}
fontWeight="extrabold"
>
MeowForm
</Text>
</DrawerHeader>
<DrawerBody>
<Box>
{!check &&
<Button ml="1%" mt="5%" width="100%" onClick={toggleColorMode} >
{isDark ? <FaSun color="yellow"/> : <FaMoon color="#59e5f7"/> }
<Text fontSize="xl" ml="4%">
{isDark ? "Light Mode" : "Dark Mode"}
</Text>
</Button>
}
<MenuItems onClose={onClose}></MenuItems>
<Text>
</Text>
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</Box>
<Box height="15vh">
</Box>
</>
);
}
Example #9
| Source File: Dashboard.js From MeowForm with MIT License | 4 votes |
|
Dashboard = () => {
const { isLoading, user } = useAuth0();
const [check] = useMediaQuery("(min-width: 1025px)");
const { isOpen, onOpen, onClose } = useDisclosure();
const [formName, setFormName] = React.useState();
let userEmail = user.email;
let apiKey = process.env.REACT_APP_APIKEY;
let apiUrl = process.env.REACT_APP_HOSTURL;
const [data, setData] = React.useState();
const getData = async () => {
let temp = await axios.get(apiUrl + "user/" + userEmail + "&" + apiKey);
setData(temp.data[0]);
console.log(data);
};
useEffect(() => {
getData();
if (data === undefined) {
setTimeout(() => getData(), 2500);
}
}, []);
let responses = 0;
if (data) {
for (let i = 0; i < data.forms.length; i++) {
responses += data.forms[i].formData.length;
}
}
const postApiData = async () => {
let temp = await axios.post(apiUrl + "addForm/" + apiKey, {
email: user.email,
formName: formName,
url: "",
});
getData();
};
const addNewForm = () => {
if (formName === "") {
toast.error("Form is empty?");
} else {
// console.log(data.forms[0].formName);
let isCopy = false;
for (let i = 0; i < data.forms.length; i++) {
if (data.forms[i].formName === formName) {
isCopy = true;
}
}
if (isCopy) {
toast.error("form with such name already exits ");
} else {
postApiData();
setTimeout(() => getData(), 2000);
onClose();
setTimeout(
() => toast.success("Form Have beeen added ?"),
2000
);
}
}
};
return (
<Box backgroundColor='whiteAlpha.100'>
<Box
padding='6'
boxShadow='2xl'
align='center'
margin='2%'
borderRadius={check ? "full" : "0 "}>
<Flex align='center' flexDirection={check ? "row" : "column"}>
<Flex>
<Image src={user.picture} borderRadius='full' />
<Text
mt='10%'
ml='20px'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize={check ? "3xl" : "xl"}>
{user.name}
</Text>
</Flex>
<Flex align='center' ml={check ? "40%" : "10%"}>
<Box>
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
{data ? (
responses
) : (
<SkeletonText></SkeletonText>
)}
</Text>
<Text>Responses</Text>
</Box>
<Box ml='50%'>
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
{data ? (
data.forms.length
) : (
<SkeletonText></SkeletonText>
)}
</Text>
<Text>Forms</Text>
</Box>
</Flex>
</Flex>
</Box>
<Box
padding='6'
boxShadow='xl'
margin='2%'
borderRadius={check ? "25px" : "0 "}>
<Flex justifyContent='space-between'>
<Text
margin='5%'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
Forms
</Text>
<Button margin='5%' colorScheme='orange' onClick={onOpen}>
New form
</Button>
</Flex>
<Divider margin='2%' colorScheme='blackAlpha'></Divider>
{data ? (
data.forms.map((x) => (
<FormCard
formName={x.formName}
responses={x.formData.length}
formData={x.formData}
redirectUrl={x.redirectUrl}
email={userEmail}></FormCard>
))
) : (
<>
<SkeletonText mt='3' noOfLines={1}></SkeletonText>
<SkeletonText mt='3' noOfLines={1}></SkeletonText>
</>
)}
{data && data.forms.length === 0 ? (
<>
<Image
src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629867315/kitekat-3_dlccdn.png'
width='25%'
height='25%'
ml='38%'
/>
<Text align='center'>
You haven't created a form Yet{" "}
</Text>
</>
) : (
<> </>
)}
</Box>
<Drawer
onClose={onClose}
isOpen={isOpen}
size={check ? "xs" : "xs"}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader align='center'>
<Text
margin='1%'
fontWeight='extraBold'
fontSize='3xl'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'>
Add Form
</Text>
<Image src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629884425/kitekat-17_ipr2uy.png' />
<Text></Text>
</DrawerHeader>
<DrawerBody>
<Box>
<Flex>
<Input
onChange={(e) =>
setFormName(e.target.value)
}
placeholder='Form Name'
/>
<Button
ml='0.5%'
colorScheme='orange'
onClick={addNewForm}>
{" "}
>{" "}
</Button>
</Flex>
</Box>
<Box></Box>
</DrawerBody>
</DrawerContent>
</Drawer>
<Toaster />
</Box>
);
}
