@chakra-ui/icons#AddIcon TypeScript Examples
The following examples show how to use
@chakra-ui/icons#AddIcon.
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: FusePoolCreatePage.tsx From rari-dApp with GNU Affero General Public License v3.0 | 6 votes |
|
WhitelistInfo = ({
whitelist,
addToWhitelist,
removeFromWhitelist,
}: {
whitelist: string[];
addToWhitelist: (user: string) => any;
removeFromWhitelist: (user: string) => any;
}) => {
const [_whitelistInput, _setWhitelistInput] = useState("");
const { t } = useTranslation();
const { fuse } = useRari();
const toast = useToast();
return (
<>
<OptionRow my={0} mb={4}>
<Input
width="100%"
value={_whitelistInput}
onChange={(event) => _setWhitelistInput(event.target.value)}
placeholder="0x0000000000000000000000000000000000000000"
_placeholder={{ color: "#FFF" }}
/>
<IconButton
flexShrink={0}
aria-label="add"
icon={<AddIcon />}
width="35px"
ml={2}
bg="#282727"
color="#FFF"
borderWidth="1px"
backgroundColor="transparent"
onClick={() => {
if (
fuse.web3.utils.isAddress(_whitelistInput) &&
!whitelist.includes(_whitelistInput)
) {
addToWhitelist(_whitelistInput);
_setWhitelistInput("");
} else {
toast({
title: "Error!",
description:
"This is not a valid ethereum address (or you have already entered this address)",
status: "error",
duration: 2000,
isClosable: true,
position: "top-right",
});
}
}}
_hover={{}}
_active={{}}
/>
</OptionRow>
{whitelist.length > 0 ? (
<Text mb={4} ml={4} width="100%">
<b>{t("Already added:")} </b>
{whitelist.map((user, index, array) => (
<Text
key={user}
className="underline-on-hover"
as="button"
onClick={() => removeFromWhitelist(user)}
>
{user}
{array.length - 1 === index ? null : <>, </>}
</Text>
))}
</Text>
) : null}
</>
);
}
Example #2
| Source File: AddPiggybankListItem.tsx From coindrop with GNU General Public License v3.0 | 5 votes |
|
AddPiggybankListItem: FunctionComponent<Props> = ({ numActivePiggybanks }) => {
const [showInput, setShowInput] = useState(numActivePiggybanks === 0);
useEffect(() => {
setShowInput(numActivePiggybanks === 0);
}, [numActivePiggybanks]);
if (numActivePiggybanks < maxPiggybanksPerUser) {
if (!showInput) {
return (
<Button
id="create-new-coindrop-button"
leftIcon={<AddIcon />}
borderRadius="10px"
mt={3}
onClick={() => setShowInput(true)}
colorScheme="green"
>
Create new
</Button>
);
}
return (
<Flex
p={5}
borderWidth="2px"
borderRadius="10px"
borderStyle="dotted"
mt={3}
justify="center"
wrap="wrap"
align="center"
>
<CreatePiggybankInput
onCancel={() => setShowInput(false)}
createButtonColorScheme="green"
instanceId=""
buttonText="Create"
placeholder="your-name"
/>
</Flex>
);
}
return null;
}
Example #3
| Source File: top-nav.tsx From notebook with MIT License | 4 votes |
|
TopNav: React.SFC<TopNavProps> = ({ handleNoteCreate }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Flex mb={"30px"} align="center">
<HStack>
<Box p="2" as={Link} to="/">
<motion.div whileHover={{ scale: 1.1 }}>
<Heading
as="h1"
size="xl"
bgGradient="linear(to-l, #7928CA,#FF0080)"
bgClip="text"
_focus={{ boxShadow: "none", outline: "none" }}
_hover={{
textDecoration: "none",
bgGradient: "linear(to-r, red.500, yellow.500)"
}}
>
Notebook App
</Heading>
</motion.div>
</Box>
</HStack>
<Spacer />
<Box>
<HStack>
<HStack d={["none", "none", "block"]}>
<Button
leftIcon={<AddIcon />}
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{ bgGradient: "linear(to-r, red.500, yellow.500)" }}
variant="solid"
size="sm"
onClick={onOpen}
>
Add new note
</Button>
<Button
leftIcon={<ArrowRightIcon />}
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{ bgGradient: "linear(to-r, red.500, yellow.500)" }}
variant="solid"
size="sm"
as={Link}
to="/projects"
>
Open source
</Button>
</HStack>
<Box d={["block", "block", "none"]}>
<Menu>
<MenuButton
as={IconButton}
aria-label="Options"
icon={<HamburgerIcon />}
transition="all 0.2s"
size="md"
variant="outline"
_hover={{ bg: "gray.400" }}
_focus={{ boxShadow: "outline" }}
/>
<MenuList fontSize="sm" zIndex={5}>
<MenuItem icon={<AddIcon />} onClick={onOpen}>
{" "}
<Text textShadow="1px 1px #9c1786">Add new note</Text>
</MenuItem>
<MenuDivider />
<MenuItem icon={<ArrowRightIcon />} as={Link} to="/projects">
{" "}
<Text textShadow="1px 1px #9c1786">
Open source repositories
</Text>
</MenuItem>
</MenuList>
</Menu>
</Box>
<ColorModeSwitcher justifySelf="flex-end" />
</HStack>
</Box>
</Flex>
<NoteForm
isOpen={isOpen}
onClose={onClose}
handleNoteCreate={handleNoteCreate}
/>
</>
);
}
Example #4
| Source File: index.tsx From next-crud with MIT License | 4 votes |
|
Users = () => {
const { push } = useRouter()
const { data, fetchNextPage, isFetching, hasNextPage, refetch } =
useInfiniteQuery<TPaginationResult<User>>(
'users',
async ({ pageParam = 1 }) => {
const data: TPaginationResult<User> = await fetch(
`/api/users?page=${pageParam}`
).then((res) => res.json())
return data
},
{
getNextPageParam: (lastPage) => {
const pagination = lastPage.pagination as TPaginationDataPageBased
return pagination.page === pagination.pageCount
? undefined
: pagination.page + 1
},
}
)
const allData = useMemo(() => {
return data?.pages.flatMap((page) => page.data)
}, [data])
const onEditUser = (id: User['id']) => {
push(`/users/${id}`)
}
const onDeleteUser = async (id: User['id']) => {
await fetch(`/api/users/${id}`, {
method: 'DELETE',
})
refetch()
}
return (
<Layout title="Users" backRoute="/">
<VStack spacing={6} width="100%">
<Heading>Users</Heading>
<Flex direction="row" justify="flex-end" width="100%">
<Button
colorScheme="green"
leftIcon={<AddIcon color="white" />}
onClick={() => push('/users/create')}
>
Create user
</Button>
</Flex>
<VStack
boxShadow="0px 2px 8px #ccc"
p={4}
borderRadius={6}
width="100%"
align="flex-start"
>
{!data && (
<Stack width="100%">
<Skeleton height="20px" />
<Skeleton height="20px" />
<Skeleton height="20px" />
</Stack>
)}
{allData?.map((user) => (
<UserListItem
key={user.id}
{...user}
onEdit={onEditUser}
onDelete={onDeleteUser}
/>
))}
</VStack>
<Button
colorScheme="blue"
onClick={() => fetchNextPage()}
disabled={isFetching || !hasNextPage}
>
Load more
</Button>
</VStack>
</Layout>
)
}
Example #5
| Source File: PaymentMethodsInput.tsx From coindrop with GNU General Public License v3.0 | 4 votes |
|
PaymentMethodsInput: FC<Props> = ({ fieldArrayName, fields, control, register, remove, append }) => {
const { colors } = useTheme();
const paymentMethodsDataWatch: PaymentMethod[] = useWatch({
control,
name: fieldArrayName,
});
const [openAccordionItemIndex, setOpenAccordionItemIndex] = useState(-1);
useEffect(() => {
if (
paymentMethodsDataWatch[paymentMethodsDataWatch.length - 1]?.paymentMethodId === "default-blank"
|| paymentMethodsDataWatch[paymentMethodsDataWatch.length - 1]?.address === ""
) {
setOpenAccordionItemIndex(paymentMethodsDataWatch.length - 1);
}
}, [paymentMethodsDataWatch]);
const containsInvalidAddress = paymentMethodsDataWatch.some(paymentMethod => !paymentMethod.address);
const { isAddressTouched, setIsAddressTouched } = useContext(AdditionalValidation);
// optgroup not compatible with Chakra dark mode: https://github.com/chakra-ui/chakra-ui/issues/2853
// const optionsGroup = (category: Category) => {
// const optgroupLabels: Record<Category, string> = {
// "digital-wallet": 'Digital Wallets',
// "digital-asset": "Digital Assets",
// "subscription-platform": "Subscription Platforms",
// };
// return (
// <optgroup label={optgroupLabels[category]}>
// {paymentMethods
// .filter(paymentMethod => paymentMethod.category === category)
// .sort((a, b) => (a.id < b.id ? -1 : 1))
// .map(({ id, displayName }) => (
// <option
// key={id}
// value={id}
// style={{display: paymentMethodsDataWatch.map(paymentMethodDataWatch => paymentMethodDataWatch.paymentMethodId).includes(id) ? "none" : undefined }}
// >
// {displayName}
// </option>
// ))}
// </optgroup>
// );
// };
return (
<>
{fields.length < 1
? 'No payment methods defined yet.'
: (
<Accordion
allowToggle
defaultIndex={-1}
index={openAccordionItemIndex}
>
{
fields
.map((item, index) => {
const watchedData = paymentMethodsDataWatch.find(watchedPaymentMethod => watchedPaymentMethod.id === item.id);
const PaymentMethodIcon = paymentMethodIcons[watchedData?.paymentMethodId];
return (
<AccordionItem
key={item.id}
>
<AccordionButton
onClick={() => {
setIsAddressTouched(true);
if (openAccordionItemIndex !== index && !paymentMethodsDataWatch.find(paymentMethod => paymentMethod.address === "")) {
setOpenAccordionItemIndex(index);
} else {
setOpenAccordionItemIndex(undefined);
}
}}
>
<Flex flex="1" textAlign="left" align="center">
<Flex mr={1} align="center">
{PaymentMethodIcon ? <PaymentMethodIcon mr={2} /> : <QuestionOutlineIcon mr={2} />}
{paymentMethodNames[watchedData?.paymentMethodId] ?? 'Add payment method'}
</Flex>
{watchedData?.isPreferred && (
<Flex>
<StarIcon
ml={2}
size="16px"
color={colors.yellow['400']}
/>
<Text
as="span"
fontSize="xs"
ml={1}
>
<i>Preferred</i>
</Text>
</Flex>
)}
</Flex>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} id={`accordion-panel-${watchedData.paymentMethodId}`}>
<input
ref={register()}
name={`${fieldArrayName}[${index}].id`}
defaultValue={item.id}
style={{display: 'none'}}
/>
<Box
display={paymentMethodNames[watchedData?.paymentMethodId] ? "none" : "block"}
data-cy={`select-payment-method-container-${watchedData.paymentMethodId}`}
>
<Select
name={`${fieldArrayName}[${index}].paymentMethodId`}
ref={register()}
defaultValue={paymentMethodNames[item.paymentMethodId] ? item.paymentMethodId : 'default-blank'}
isInvalid={containsInvalidAddress && isAddressTouched}
onChange={() => setIsAddressTouched(false)}
>
<option hidden disabled value="default-blank">Select...</option>
{/* optgroup not compatible with Chakra dark mode: https://github.com/chakra-ui/chakra-ui/issues/2853 */}
{Object.entries(paymentMethodNames)
.sort((a, b) => {
const [aId] = a;
const [bId] = b;
return aId < bId ? -1 : 1;
})
.map(([paymentMethodId, paymentMethodDisplayName]) => (
<option
key={paymentMethodId}
value={paymentMethodId}
style={{display: paymentMethodsDataWatch.map(paymentMethod => paymentMethod.paymentMethodId).includes(paymentMethodId) ? "none" : undefined }}
>
{paymentMethodDisplayName}
</option>
))}
</Select>
</Box>
<Box
mx={3}
display={paymentMethodNames[watchedData?.paymentMethodId] ? "block" : "none"}
>
<FormControl isRequired>
<FormLabel htmlFor={`${fieldArrayName}[${index}].address`}>Address</FormLabel>
<Input
id={`address-input-${watchedData.paymentMethodId}`}
name={`${fieldArrayName}[${index}].address`}
ref={register()}
defaultValue={item.address}
isInvalid={containsInvalidAddress && isAddressTouched}
/>
<Box>
<Checkbox
name={`${fieldArrayName}[${index}].isPreferred`}
ref={register()}
defaultValue={item?.isPreferred ? 1 : 0}
defaultIsChecked={item?.isPreferred}
mt={1}
colorScheme="yellow"
>
Preferred
</Checkbox>
</Box>
</FormControl>
</Box>
<Flex
justify={watchedData?.paymentMethodId === 'default-blank' ? 'space-between' : 'flex-end'}
mt={3}
wrap="wrap"
align="center"
>
{watchedData?.paymentMethodId === 'default-blank' && (
<Text fontSize="xs" ml={1}>
<Link href="/blog/payment-method-request" isExternal>
Payment method not listed?
</Link>
</Text>
)}
<Button
onClick={() => {
remove(index);
setIsAddressTouched(false);
}}
leftIcon={<MinusIcon />}
size="sm"
>
{'Remove '}
{/* {paymentMethodNames[watchedData?.paymentMethodId]} */}
</Button>
</Flex>
</AccordionPanel>
</AccordionItem>
);
})
}
</Accordion>
)}
<Flex
justify="center"
mt={2}
>
<Button
id="add-payment-method-button"
onClick={() => {
append({});
setIsAddressTouched(false);
}}
leftIcon={<AddIcon />}
variant="ghost"
size="sm"
isDisabled={
(
fields.length > 0
&& !paymentMethodNames[paymentMethodsDataWatch[paymentMethodsDataWatch.length - 1]?.paymentMethodId]
)
|| containsInvalidAddress
}
>
Add payment method
</Button>
</Flex>
</>
);
}
