@chakra-ui/react#Collapse JavaScript Examples
The following examples show how to use
@chakra-ui/react#Collapse.
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: Container.jsx From bottle-radio with MIT License | 4 votes |
|
Container = () => {
const { colorMode, toggleColorMode } = useColorMode();
const color = { light: "black", dark: "white" };
const [logoSpinning, setLogoSpinning] = useState(false);
const [modal, setModal] = useState();
const [showVisualiser, setShowVisualiser] = useState(false);
const [player, setPlayer] = useState();
const EmbedCode = () => {
const [show, setShow] = React.useState(false);
const handleToggle = () => setShow(!show);
return (
<Box mt="auto" pt={2} mb={3} mx={2}>
<Collapse in={show}>
<Code my={2} p={2} overflow="auto">
{`<iframe src = '${window.location.protocol}//${window.location.host}/embed' frameborder = '0' allowtransparency = 'true' style = 'width: 100%; min-height: 150px; border: 0;'></iframe>`}
</Code>
</Collapse>
<Button colorScheme="blue" variant="link" onClick={handleToggle}>
Embed player
</Button>
</Box>
);
};
return (
<Fragment>
<VisualiserProvider value={{ player, setPlayer }}>
<Box
width="100%"
minHeight="100vh"
bg={colorMode === "light" ? "#99c0ff" : "#1a202c"}
color={colorMode === "light" ? "black" : "white"}
>
{player && (
<Box pos="absolute" bottom={0} left={0} pointerEvents="none">
<Collapse in={showVisualiser}>
<Visualisation audio={player.current} />
</Collapse>
</Box>
)}
<Flex
direction="column"
justify="flex-start"
align="center"
width="100%"
maxWidth="960px"
minHeight="100vh"
mx="auto"
pt={5}
pos="relative"
zindex={1}
>
<Box
as={colorMode === "light" ? FaMoon : FaSun}
w="30px"
h="30px"
onClick={toggleColorMode}
color={color[colorMode]}
/>
<Box px={5}>
<Image
src="/logo512.png"
maxWidth="230px"
mx="auto"
mt={3}
className={logoSpinning ? "icon-spin" : ""}
onClick={() =>
logoSpinning ? setLogoSpinning(false) : setLogoSpinning(true)
}
/>
<ModalProvider value={{ modal, setModal }}>
<Player />
</ModalProvider>
<Links />
<Button
mt={2}
variant="link"
onClick={() => setShowVisualiser(!showVisualiser)}
>
Visualiser
</Button>
</Box>
<EmbedCode />
<Text mb={3}>
Powered by{" "}
<Link
href="https://github.com/MrLemur/bottle-radio"
color="teal.500"
isExternal
>
Bottle Radio
</Link>
</Text>
</Flex>
</Box>
</VisualiserProvider>
</Fragment>
);
}
Example #2
| Source File: new.js From idena-web with MIT License | 4 votes |
|
function NewVotingPage() {
const {t, i18n} = useTranslation()
const router = useRouter()
const toast = useToast()
const {isOpen: isOpenAdvanced, onToggle: onToggleAdvanced} = useDisclosure()
const epochData = useEpoch()
const {coinbase, privateKey} = useAuthState()
const {
data: {balance},
} = useBalance()
const [current, send, service] = useMachine(newVotingMachine, {
actions: {
onDone: () => {
router.push(viewVotingHref(current.context.contractHash))
},
onError: (context, {data: {message}}) => {
toast({
// eslint-disable-next-line react/display-name
render: () => (
<Toast title={humanError(message, context)} status="error" />
),
})
},
onInvalidForm: () => {
toast({
// eslint-disable-next-line react/display-name
render: () => (
<Toast title={t('Please correct form fields')} status="error" />
),
})
},
},
})
React.useEffect(() => {
if (epochData && coinbase) send('START', {epoch: epochData.epoch, coinbase})
}, [coinbase, epochData, privateKey, send])
const {
options,
startDate,
votingDuration,
publicVotingDuration,
shouldStartImmediately,
isFreeVoting,
committeeSize,
quorum = 1,
winnerThreshold = '66',
feePerGas,
oracleReward,
isWholeNetwork,
oracleRewardsEstimates,
ownerFee = 0,
minOracleReward,
votingMinPayment,
dirtyBag,
} = current.context
const isInvalid = (field, cond = current.context[field]) =>
dirtyBag[field] && !cond
const isInvalidOptions = isInvalid('options', hasValuableOptions(options))
const hasLinksInOptions = isInvalid('options', hasLinklessOptions(options))
const handleChange = ({target: {id, value}}) => send('CHANGE', {id, value})
const dna = toLocaleDna(i18n)
return (
<Layout showHamburger={false}>
<Page px={0} py={0}>
<Box px={20} py={6} w="full" overflowY="auto">
<Flex justify="space-between" align="center">
<PageTitle mb={0}>{t('New voting')}</PageTitle>
<CloseButton
ml="auto"
onClick={() => router.push('/oracles/list')}
/>
</Flex>
<SuccessAlert my={8}>
{t(
'After publishing or launching, you will not be able to edit the voting parameters.'
)}
</SuccessAlert>
{current.matches('preload.late') && <NewVotingFormSkeleton />}
{!current.matches('preload') && (
<Stack spacing={3}>
<VotingInlineFormControl
htmlFor="title"
label={t('Title')}
isInvalid={isInvalid('title')}
>
<Input id="title" onChange={handleChange} />
{isInvalid('title') && (
<FormErrorMessage fontSize="md" mt={1}>
{t('You must provide title')}
</FormErrorMessage>
)}
</VotingInlineFormControl>
<VotingInlineFormControl
htmlFor="desc"
label={t('Description')}
isInvalid={isInvalid('desc')}
>
<Textarea id="desc" w="md" h={32} onChange={handleChange} />
{isInvalid('desc') && (
<FormErrorMessage fontSize="md" mt={1}>
{t('You must provide description')}
</FormErrorMessage>
)}
</VotingInlineFormControl>
<VotingInlineFormControl
label={t('Voting options')}
isInvalid={isInvalidOptions || hasLinksInOptions}
>
<Box
borderWidth={
isInvalidOptions || hasLinksInOptions ? '2px' : 1
}
borderColor={
isInvalidOptions || hasLinksInOptions
? 'red.500'
: 'gray.100'
}
borderRadius="md"
p={1}
w="md"
>
{options.map(({id, value}, idx) => (
<VotingOptionInput
key={id}
value={value}
placeholder={`${t('Option')} ${idx + 1}...`}
isLast={idx === options.length - 1}
isDisabled={[0, 1].includes(idx)}
onChange={({target}) => {
send('SET_OPTIONS', {id, value: target.value})
}}
onAddOption={() => {
send('ADD_OPTION')
}}
onRemoveOption={() => {
send('REMOVE_OPTION', {id})
}}
_invalid={null}
/>
))}
</Box>
{isInvalidOptions && (
<FormErrorMessage fontSize="md" mt={1}>
{t('You must provide at least 2 options')}
</FormErrorMessage>
)}
{hasLinksInOptions && (
<FormErrorMessage fontSize="md" mt={1}>
{t(
'Links are not allowed in voting options. Please use Description for links.'
)}
</FormErrorMessage>
)}
</VotingInlineFormControl>
<VotingInlineFormControl
htmlFor="startDate"
label={t('Start date')}
isDisabled={shouldStartImmediately}
isInvalid={isInvalid(
'startDate',
startDate || shouldStartImmediately
)}
mt={4}
>
<Stack spacing={3} flex={1}>
<Input
id="startDate"
type="datetime-local"
onChange={handleChange}
/>
{isInvalid(
'startDate',
startDate || shouldStartImmediately
) && (
<FormErrorMessage fontSize="md" mt={-2}>
{t('You must either choose start date or start now')}
</FormErrorMessage>
)}
<Checkbox
id="shouldStartImmediately"
isChecked={shouldStartImmediately}
onChange={({target: {id, checked}}) => {
send('CHANGE', {id, value: checked})
}}
>
{t('Start now')}
</Checkbox>
</Stack>
</VotingInlineFormControl>
<VotingDurationInput
id="votingDuration"
label={t('Voting duration')}
value={votingDuration}
tooltip={t('Secret voting period')}
presets={[
durationPreset({hours: 12}),
durationPreset({days: 1}),
durationPreset({days: 2}),
durationPreset({days: 5}),
durationPreset({weeks: 1}),
]}
service={service}
mt={2}
/>
<NewVotingFormSubtitle>
{t('Oracles requirements')}
</NewVotingFormSubtitle>
<VotingInlineFormControl
htmlFor="committeeSize"
label={t('Committee size, oracles')}
isInvalid={committeeSize < 1}
tooltip={t(
'The number of randomly selected oracles allowed to vote'
)}
mt={2}
>
<Stack spacing={3} flex={1}>
<NumberInput
id="committeeSize"
value={committeeSize}
min={1}
step={1}
preventInvalidInput
isDisabled={isWholeNetwork}
onChange={({target: {id, value}}) => {
send('CHANGE_COMMITTEE', {id, value})
}}
/>
<Checkbox
id="isWholeNetwork"
onChange={({target: {checked}}) => {
send('SET_WHOLE_NETWORK', {checked})
}}
>
{t('Whole network')}
</Checkbox>
</Stack>
</VotingInlineFormControl>
<VotingInlineFormControl
htmlFor="quorum"
label={t('Quorum')}
tooltip={t(
'The share of Oracle committee sufficient to determine the voting outcome'
)}
mt={2}
>
<Stack spacing={0} flex={1}>
<PercentInput
id="quorum"
value={quorum}
onChange={handleChange}
/>
<NewOracleFormHelperText textAlign="right">
{t('{{count}} votes are required', {
count: quorumVotesCount({quorum, committeeSize}),
})}
</NewOracleFormHelperText>
</Stack>
</VotingInlineFormControl>
<VotingInlineFormControl
htmlFor="votingMinPayment"
label={t('Voting deposit')}
tooltip={t(
'Refunded when voting in majority and lost when voting in minority'
)}
isDisabled={isFreeVoting}
mt={2}
>
<Stack spacing={3} flex={1}>
<DnaInput
id="votingMinPayment"
value={votingMinPayment}
isDisabled={isFreeVoting}
onChange={handleChange}
/>
<Checkbox
id="isFreeVoting"
isChecked={isFreeVoting}
onChange={({target: {id, checked}}) => {
send('CHANGE', {id, value: checked})
}}
>
{t('No voting deposit for oracles')}
</Checkbox>
</Stack>
</VotingInlineFormControl>
<NewVotingFormSubtitle>
{t('Cost of voting')}
</NewVotingFormSubtitle>
<PresetFormControl
label={t('Total funds')}
tooltip={t(
'Total funds locked during the voting and paid to oracles and owner afterwards'
)}
>
<PresetFormControlOptionList
value={String(oracleReward)}
onChange={value => {
send('CHANGE', {
id: 'oracleReward',
value,
})
}}
>
{oracleRewardsEstimates.map(({label, value}) => (
<PresetFormControlOption key={value} value={String(value)}>
{label}
</PresetFormControlOption>
))}
</PresetFormControlOptionList>
<PresetFormControlInputBox>
<DnaInput
id="oracleReward"
value={oracleReward * committeeSize || 0}
min={minOracleReward * committeeSize || 0}
onChange={({target: {id, value}}) => {
send('CHANGE', {
id,
value: (value || 0) / Math.max(1, committeeSize),
})
}}
/>
<NewOracleFormHelperText textAlign="right">
{t('Min reward per oracle: {{amount}}', {
amount: dna(
rewardPerOracle({fundPerOracle: oracleReward, ownerFee})
),
nsSeparator: '!',
})}
</NewOracleFormHelperText>
</PresetFormControlInputBox>
</PresetFormControl>
<VotingInlineFormControl
htmlFor="ownerFee"
label={t('Owner fee')}
tooltip={t('% of the Total funds you receive')}
>
<PercentInput
id="ownerFee"
value={ownerFee}
onChange={handleChange}
/>
<NewOracleFormHelperText textAlign="right">
{t('Paid to owner: {{amount}}', {
amount: dna(
(oracleReward * committeeSize * Math.min(100, ownerFee)) /
100 || 0
),
nsSeparator: '!',
})}
</NewOracleFormHelperText>
</VotingInlineFormControl>
<NewVotingFormSubtitle
cursor="pointer"
onClick={onToggleAdvanced}
>
{t('Advanced settings')}
<ChevronDownIcon
boxSize={5}
color="muted"
ml={1}
transform={isOpenAdvanced ? 'rotate(180deg)' : ''}
transition="all 0.2s ease-in-out"
/>
</NewVotingFormSubtitle>
<Collapse in={isOpenAdvanced} mt={2}>
<Stack spacing={3}>
<VotingDurationInput
id="publicVotingDuration"
value={publicVotingDuration}
label={t('Counting duration')}
tooltip={t(
'Period when secret votes are getting published and results are counted'
)}
presets={[
durationPreset({hours: 12}),
durationPreset({days: 1}),
durationPreset({days: 2}),
durationPreset({days: 5}),
durationPreset({weeks: 1}),
]}
service={service}
/>
<PresetFormControl
label={t('Majority threshold')}
tooltip={t(
'The minimum share of the votes which an option requires to achieve before it becomes the voting outcome'
)}
>
<PresetFormControlOptionList
value={winnerThreshold}
onChange={value => {
send('CHANGE', {
id: 'winnerThreshold',
value,
})
}}
>
<PresetFormControlOption value="51">
{t('Simple majority')}
</PresetFormControlOption>
<PresetFormControlOption value="66">
{t('Super majority')}
</PresetFormControlOption>
<PresetFormControlOption value="100">
{t('N/A (polls)')}
</PresetFormControlOption>
</PresetFormControlOptionList>
<PresetFormControlInputBox>
<PercentInput
id="winnerThreshold"
value={winnerThreshold}
onChange={handleChange}
/>
</PresetFormControlInputBox>
</PresetFormControl>
</Stack>
</Collapse>
</Stack>
)}
</Box>
<Stack
isInline
mt="auto"
alignSelf="stretch"
justify="flex-end"
borderTop="1px"
borderTopColor="gray.100"
py={3}
px={4}
>
<PrimaryButton
isLoading={current.matches('publishing')}
loadingText={t('Publishing')}
onClick={() => send('PUBLISH')}
>
{t('Publish')}
</PrimaryButton>
</Stack>
<ReviewVotingDrawer
isOpen={current.matches('publishing')}
onClose={() => send('CANCEL')}
from={coinbase}
available={balance}
balance={votingMinBalance(oracleReward, committeeSize)}
minStake={votingMinStake(feePerGas)}
votingDuration={votingDuration}
publicVotingDuration={publicVotingDuration}
ownerFee={ownerFee}
isLoading={eitherState(
current,
'publishing.deploy',
`publishing.${VotingStatus.Starting}`
)}
// eslint-disable-next-line no-shadow
onConfirm={({balance, stake}) =>
send('CONFIRM', {privateKey, balance, stake})
}
/>
<NewOraclePresetDialog
isOpen={eitherState(current, 'choosingPreset')}
onChoosePreset={preset => send('CHOOSE_PRESET', {preset})}
onCancel={() => send('CANCEL')}
/>
</Page>
</Layout>
)
}
Example #3
| Source File: containers.js From idena-web with MIT License | 4 votes |
|
export function IssueInviteDrawer({
inviteeAddress,
isMining,
onIssue,
onIssueFail,
...props
}) {
const {t} = useTranslation()
const {
isOpen: isOpenAdvancedOptions,
onToggle: onToggleAdvancedOptions,
} = useDisclosure({defaultIsOpen: Boolean(inviteeAddress)})
const {addInvite} = useInviteDispatch()
const {coinbase, privateKey} = useAuthState()
const [isSubmitting, setIsSubmitting] = React.useState()
return (
<AdDrawer isMining={isMining} {...props}>
<DrawerHeader>
<ContactDrawerHeader address={dummyAddress}>
{t('Invite new person')}
</ContactDrawerHeader>
</DrawerHeader>
<DrawerBody>
<Text color="brandGray.500" fontSize="md" mt={5} mb={6}>
{t(
`You can issue the invitation to the specific identity address in Advanced section`
)}
</Text>
<Stack
as="form"
id="issueInvite"
spacing={5}
onSubmit={async e => {
e.preventDefault()
const {
address: {value: address},
firstName: {value: firstName},
lastName: {value: lastName},
} = e.target.elements
try {
setIsSubmitting(true)
const invite = await addInvite({
from: coinbase,
to: address,
privateKey,
firstName,
lastName,
})
setIsSubmitting(false)
onIssue(invite)
} catch (error) {
setIsSubmitting(false)
onIssueFail(error?.message)
}
}}
>
<Stack isInline spacing={4}>
<FormControl>
<FormLabel htmlFor="firstName">{t('First name')}</FormLabel>
<Input id="firstName" />
</FormControl>
<FormControl>
<FormLabel htmlFor="lastName">{t('Last name')}</FormLabel>
<Input id="lastName" />
</FormControl>
</Stack>
<Stack align="flex-start">
<Button
background="transparent"
color="brandGray.500"
px={0}
_hover={{background: 'transparent'}}
_active={{background: 'transparent'}}
_focus={{outline: 'none'}}
onClick={onToggleAdvancedOptions}
>
{t('Advanced')}
<ChevronDownIcon
boxSize={5}
color="muted"
ml={2}
transform={isOpenAdvancedOptions ? 'rotate(180deg)' : ''}
transition="all 0.2s ease-in-out"
/>
</Button>
<Box w="full">
<Collapse in={isOpenAdvancedOptions}>
<FormControl>
<FormLabel htmlFor="address">{t('Address')}</FormLabel>
<Input
id="address"
defaultValue={inviteeAddress}
placeholder="Invitee address"
/>
</FormControl>
</Collapse>
</Box>
</Stack>
</Stack>
</DrawerBody>
<DrawerFooter>
<PrimaryButton
type="submit"
form="issueInvite"
isLoading={isSubmitting || isMining}
loadingText={t('Mining...')}
>
{t('Create invitation')}
</PrimaryButton>
</DrawerFooter>
</AdDrawer>
)
}
Example #4
| Source File: components.js From idena-web with MIT License | 4 votes |
|
export function CommunityTranslations({
keywords,
isOpen,
isPending,
onVote,
onSuggest,
onToggle,
}) {
const {t} = useTranslation()
const {privateKey} = useAuthState()
const [wordIdx, setWordIdx] = React.useState(0)
const [
descriptionCharactersCount,
setDescriptionCharactersCount,
] = React.useState(150)
const translations = keywords.translations[wordIdx]
const lastTranslationId =
translations && translations.length
? translations[translations.length - 1].id
: wordIdx
return (
<Stack spacing={isOpen ? 8 : 0}>
<IconButton
icon={<CommunityIcon boxSize={5} />}
color="brandGray.500"
px={0}
_hover={{background: 'transparent'}}
onClick={onToggle}
>
{t('Community translation')}
<ChevronDownIcon boxSize={5} color="muted" ml={2} />
</IconButton>
<Collapse isOpen={isOpen}>
<Stack spacing={8}>
<RadioGroup isInline value={wordIdx} onChange={setWordIdx}>
{keywords.words.map(({id, name}, i) => (
<FlipKeywordRadio key={id} value={i}>
{name && capitalize(name)}
</FlipKeywordRadio>
))}
</RadioGroup>
{translations.map(({id, name, desc, score}) => (
<Flex key={id} justify="space-between">
<FlipKeyword>
<FlipKeywordName>{name}</FlipKeywordName>
<FlipKeywordDescription>{desc}</FlipKeywordDescription>
</FlipKeyword>
<Stack isInline spacing={2} align="center">
<VoteButton
icon={<UpvoteIcon />}
onClick={() => onVote({id, up: true, pk: privateKey})}
/>
<Flex
align="center"
justify="center"
bg={score < 0 ? 'red.010' : 'green.010'}
color={score < 0 ? 'red.500' : 'green.500'}
fontWeight={500}
rounded="md"
minW={12}
minH={8}
style={{fontVariantNumeric: 'tabular-nums'}}
>
{score}
</Flex>
<VoteButton
icon={<UpvoteIcon />}
color="muted"
transform="rotate(180deg)"
onClick={() => onVote({id, up: false, pk: privateKey})}
/>
</Stack>
</Flex>
))}
{translations.length && <Divider borderColor="gray.100" />}
<Box>
<Text fontWeight={500} mb={3}>
{t('Suggest translation')}
</Text>
<form
key={lastTranslationId}
onSubmit={e => {
e.preventDefault()
const {
nameInput: {value: name},
descInput: {value: desc},
} = e.target.elements
onSuggest({wordIdx, name, desc: desc.trim(), pk: privateKey})
}}
>
<FormControl>
<Input
id="nameInput"
placeholder={
keywords.words[wordIdx].name
? capitalize(keywords.words[wordIdx].name)
: 'Name'
}
px={3}
pt={1.5}
pb={2}
borderColor="gray.100"
mb={2}
_placeholder={{
color: 'muted',
}}
/>
</FormControl>
<FormControl position="relative">
<Textarea
id="descInput"
placeholder={
keywords.words[wordIdx].desc
? capitalize(keywords.words[wordIdx].desc)
: 'Description'
}
mb={6}
onChange={e =>
setDescriptionCharactersCount(150 - e.target.value.length)
}
/>
<Box
color={descriptionCharactersCount < 0 ? 'red.500' : 'muted'}
fontSize="sm"
position="absolute"
right={2}
bottom={2}
zIndex="docked"
>
{descriptionCharactersCount}
</Box>
</FormControl>
<PrimaryButton
type="submit"
display="flex"
ml="auto"
isLoading={isPending}
>
{t('Send')}
</PrimaryButton>
</form>
</Box>
</Stack>
</Collapse>
</Stack>
)
}
Example #5
| 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 #6
| Source File: expand.js From react-table-library with MIT License | 4 votes |
|
Component = () => {
const data = { nodes };
const chakraTheme = getTheme(DEFAULT_OPTIONS);
const customTheme = {
Table: `
.animate {
grid-column: 1 / -1;
display: flex;
}
.animate > div {
flex: 1;
display: flex;
}
`,
};
const theme = useTheme([chakraTheme, customTheme]);
const [ids, setIds] = React.useState([]);
const handleExpand = (item) => {
if (ids.includes(item.id)) {
setIds(ids.filter((id) => id !== item.id));
} else {
setIds(ids.concat(item.id));
}
};
const COLUMNS = [
{ label: 'Task', renderCell: (item) => item.name },
{
label: 'Deadline',
renderCell: (item) =>
item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
}),
},
{ label: 'Type', renderCell: (item) => item.type },
{
label: 'Complete',
renderCell: (item) => item.isComplete.toString(),
},
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
];
const ROW_PROPS = {
onClick: handleExpand,
};
const ROW_OPTIONS = {
renderAfterRow: (item) => (
<Collapse className="animate" in={ids.includes(item.id)}>
<tr style={{ flex: '1', display: 'flex' }}>
<td style={{ flex: '1' }}>
<ul
style={{
margin: '0',
padding: '0',
}}
>
<li>
<strong>Name:</strong> {item.name.toUpperCase()}
</li>
<li>
<strong>Deadline:</strong> {item.deadline.toLocaleDateString('en-US')}
</li>
<li>
<strong>Type:</strong> {item.type}
</li>
<li>
<strong>Complete:</strong> {item.isComplete.toString()}
</li>
</ul>
</td>
</tr>
</Collapse>
),
};
return (
<>
<Box p={3} borderWidth="1px" borderRadius="lg">
<CompactTable
columns={COLUMNS}
rowProps={ROW_PROPS}
rowOptions={ROW_OPTIONS}
data={data}
theme={theme}
/>
</Box>
<br />
<DocumentationSee anchor={'Features/' + key} />
</>
);
}
