@chakra-ui/icons#CheckIcon TypeScript Examples
The following examples show how to use
@chakra-ui/icons#CheckIcon.
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: Inspector.tsx From openchakra with MIT License | 6 votes |
|
CodeActionButton = memo(() => {
const [isLoading, setIsLoading] = useState(false)
const { onCopy, hasCopied } = useClipboard()
const selectedId = useSelector(getSelectedComponentId)
const components = useSelector(getComponents)
const parentId = components[selectedId].parent
const parent = { ...components[parentId] }
// Do not copy sibling components from parent
parent.children = [selectedId]
return (
<ActionButton
isLoading={isLoading}
label="Copy code component"
colorScheme={hasCopied ? 'green' : 'gray'}
onClick={async () => {
setIsLoading(true)
const code = await generateComponentCode({
component: parent,
components,
componentName: components[selectedId].componentName,
forceBuildBlock: true,
})
onCopy(await formatCode(code))
setIsLoading(false)
}}
icon={hasCopied ? <CheckIcon path="" /> : <GoCode />}
/>
)
})
Example #2
| Source File: EditUrlInput.tsx From coindrop with GNU General Public License v3.0 | 6 votes |
|
StatusIcon: FunctionComponent<StatusIconProps> = ({
value,
debouncedValue,
isValidating,
isValid,
currentPiggybankId,
}) => {
if (isValidating || value !== debouncedValue) {
return (
<Box>
<Spinner size="sm" />
</Box>
);
}
if (isValid || value === currentPiggybankId) {
return (
<CheckIcon id="piggybank-id-ok" color="green.500" />
);
}
return <NotAllowedIcon id="piggybank-id-not-allowed" color="red.500" />;
}
Example #3
| Source File: CopyLinkShareButton.tsx From coindrop with GNU General Public License v3.0 | 6 votes |
|
CopyLinkShareButton: FunctionComponent<Props> = (props) => {
const { textToCopy } = props;
const { onCopy, hasCopied } = useClipboard(textToCopy);
return (
<Button
leftIcon={hasCopied ? <CheckIcon /> : <LinkIcon />}
onClick={onCopy}
colorScheme="green"
>
{hasCopied ? "Copied" : "Copy Link"}
</Button>
);
}
Example #4
| Source File: ShareEmbedButton.tsx From coindrop with GNU General Public License v3.0 | 6 votes |
|
ShareEmbedButton: FunctionComponent<Props> = ({ fullPublicUrl }) => {
const imageButtonHtml = `<a href="${fullPublicUrl}" target="_blank"><img src="${fullBaseUrl}embed-button.png" style="border-radius: 10px; height: 57px !important;width: 229px !important;" alt="Coindrop.to me"></img></a>`;
const { onCopy: onCopyImage, hasCopied: hasCopiedImage } = useClipboard(imageButtonHtml);
return (
<Box>
<Flex>
<Box>
<Heading
as="h2"
size="lg"
>
Button
</Heading>
</Box>
</Flex>
<>
<Box textAlign="center" my={3}>
<Image className={styles['coindrop-html-embed-button']} display="block" mx="auto" src="/embed-button.png" />
</Box>
<Box textAlign="center">
<Button
leftIcon={hasCopiedImage ? <CheckIcon /> : <SourceCodeIcon />} // TODO: Fix icon
colorScheme="green"
mb={1}
onClick={onCopyImage}
>
{hasCopiedImage ? 'Copied' : 'Copy Embed Code'}
</Button>
</Box>
</>
</Box>
);
}
Example #5
| Source File: JavascriptEmbedButton.tsx From coindrop with GNU General Public License v3.0 | 5 votes |
|
JavascriptEmbedButton: FunctionComponent<Props> = ({ publicUrl, piggybankName }) => {
const [customText, setCustomText] = useState(publicUrl);
const scriptButtonHtml = `<script type="text/javascript" src="${fullBaseUrl}embed-button.js" data-id="coindrop-button" data-slug="${piggybankName}" data-customText="${customText}" ></script>`;
const { onCopy: onCopyScript, hasCopied: hasCopiedScript } = useClipboard(scriptButtonHtml);
const initialShuffleTextArray = [publicUrl, ...shuffleCustomTextOptions];
const [shuffleTextArray] = useState(initialShuffleTextArray);
const [shuffleCustomTextIndex, setShuffleCustomTextIndex] = useState(0);
useEffect(() => {
setCustomText(shuffleTextArray[shuffleCustomTextIndex]);
}, [shuffleCustomTextIndex]);
const ButtonPreview: FunctionComponent<ButtonPreviewProps> = ({ text = "coindrop.to me", isHtmlOnly = false }) => (
<a href={`${fullBaseUrl}${piggybankName}`} target="_blank" rel="noreferrer">
<button type="button" className={isHtmlOnly ? `${styles["coindrop-button"]} ${styles["coindrop-html-button"]}` : styles["coindrop-button"]}>
<div className={styles["coindrop-button-content"]}>
<div className={styles["coindrop-svg"]}>{svg}</div>
<div>{text}</div>
</div>
</button>
</a>
);
return (
<Box>
<Box textAlign="center" mt={3}>
<ButtonPreview text={customText} />
</Box>
<Flex justify="center" align="center" textAlign="center" mb={3}>
<Input
variant="flushed"
width="350px"
value={customText}
textAlign="center"
onChange={(e) => setCustomText(e.target.value)}
/>
</Flex>
<Box textAlign="center">
<Flex justify="center" wrap="wrap">
<Button
leftIcon={<RepeatIcon />}
variant="outline"
colorScheme="green"
onClick={() => {
setShuffleCustomTextIndex(shuffleCustomTextIndex === shuffleCustomTextOptions.length - 1 ? 0 : shuffleCustomTextIndex + 1);
}}
mx={1}
mb={1}
>
Shake It Up
</Button>
<Button
leftIcon={hasCopiedScript ? <CheckIcon /> : <SourceCodeIcon />}
colorScheme="green"
mx={1}
mb={1}
onClick={onCopyScript}
>
{hasCopiedScript ? 'Copied' : 'Copy Code'}
</Button>
</Flex>
<Text fontSize="sm">For websites that support JavaScript embed</Text>
</Box>
</Box>
);
}
Example #6
| Source File: PaymentMethodButtonModal.tsx From coindrop with GNU General Public License v3.0 | 5 votes |
|
PaymentMethodButtonModal: FunctionComponent<Props> = ({ isOpen, onClose, paymentMethod, paymentMethodDisplayName, paymentMethodValue }) => {
const { onCopy, hasCopied } = useClipboard(paymentMethodValue);
const { piggybankDbData } = useContext(PublicPiggybankDataContext);
const { name } = piggybankDbData;
const Icon = paymentMethodIcons[paymentMethod];
const addressIsUrl = isUrl(paymentMethodValue, {
require_protocol: true,
require_valid_protocol: true,
protocols: ['http', 'https'],
allow_protocol_relative_urls: false,
});
return (
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent mx={6}>
<ModalHeader
textAlign="center"
mt={3}
mx="auto"
>
{name}
{"'s "}
{paymentMethodDisplayName}
{' address'}
</ModalHeader>
<ModalCloseButton />
<ModalBody
pt={0}
mb={3}
mx="auto"
>
<Flex justify="center" align="center">
<Icon
mr={2}
boxSize="48px"
/>
<Text
wordBreak="break-all"
textAlign="center"
>
{paymentMethodValue}
</Text>
</Flex>
<Flex
my={2}
align="center"
justify="center"
>
{addressIsUrl ? (
<Link href={paymentMethodValue} isExternal>
<Button
leftIcon={<ExternalLinkIcon />}
href={paymentMethodValue}
mr={2}
>
Open
</Button>
</Link>
) : (
<Button
leftIcon={hasCopied ? <CheckIcon /> : <CopyIcon />}
onClick={onCopy}
>
{hasCopied ? "Copied" : "Copy"}
</Button>
)}
</Flex>
<Text mb={2} textAlign="center">or scan QR Code:</Text>
<Flex justify="center">
<QRCode
id="payment-method-qr-code"
value={paymentMethodValue}
size={225}
/>
</Flex>
</ModalBody>
</ModalContent>
</Modal>
);
}
Example #7
| Source File: Header.tsx From openchakra with MIT License | 4 votes |
|
Header = () => {
const showLayout = useSelector(getShowLayout)
const showCode = useSelector(getShowCode)
const dispatch = useDispatch()
return (
<DarkMode>
<Flex
justifyContent="space-between"
bg="#1a202c"
as="header"
height="3rem"
px="1rem"
>
<Flex
width="14rem"
height="100%"
backgroundColor="#1a202c"
color="white"
as="a"
fontSize="xl"
flexDirection="row"
alignItems="center"
aria-label="Chakra UI, Back to homepage"
>
<Box fontSize="2xl" as={AiFillThunderbolt} mr={1} color="teal.100" />{' '}
<Box fontWeight="bold">open</Box>chakra
</Flex>
<Flex flexGrow={1} justifyContent="space-between" alignItems="center">
<HStack spacing={4} justify="center" align="center">
<Box>
<HeaderMenu />
</Box>
<FormControl flexDirection="row" display="flex" alignItems="center">
<Tooltip
zIndex={100}
hasArrow
bg="yellow.100"
aria-label="Builder mode help"
label="Builder mode adds extra padding/borders"
>
<FormLabel
cursor="help"
color="gray.200"
fontSize="xs"
htmlFor="preview"
pb={0}
mb={0}
mr={2}
whiteSpace="nowrap"
>
Builder mode
</FormLabel>
</Tooltip>
<LightMode>
<Switch
isChecked={showLayout}
colorScheme="teal"
size="sm"
onChange={() => dispatch.app.toggleBuilderMode()}
id="preview"
/>
</LightMode>
</FormControl>
<FormControl display="flex" flexDirection="row" alignItems="center">
<FormLabel
color="gray.200"
fontSize="xs"
mr={2}
mb={0}
htmlFor="code"
pb={0}
whiteSpace="nowrap"
>
Code panel
</FormLabel>
<LightMode>
<Switch
isChecked={showCode}
id="code"
colorScheme="teal"
onChange={() => dispatch.app.toggleCodePanel()}
size="sm"
/>
</LightMode>
</FormControl>
</HStack>
<Stack direction="row">
<CodeSandboxButton />
<Popover>
{({ onClose }) => (
<>
<PopoverTrigger>
<Button
ml={4}
rightIcon={<SmallCloseIcon path="" />}
size="xs"
variant="ghost"
>
Clear
</Button>
</PopoverTrigger>
<LightMode>
<PopoverContent zIndex={100} bg="white">
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Are you sure?</PopoverHeader>
<PopoverBody fontSize="sm">
Do you really want to remove all components on the
editor?
</PopoverBody>
<PopoverFooter display="flex" justifyContent="flex-end">
<Button
size="sm"
variant="ghost"
colorScheme="red"
rightIcon={<CheckIcon path="" />}
onClick={() => {
dispatch.components.reset()
if (onClose) {
onClose()
}
}}
>
Yes, clear
</Button>
</PopoverFooter>
</PopoverContent>
</LightMode>
</>
)}
</Popover>
</Stack>
</Flex>
<Stack
justifyContent="flex-end"
width="13rem"
align="center"
direction="row"
spacing="2"
>
<Link isExternal href="https://github.com/premieroctet/openchakra">
<Box as={DiGithubBadge} size={32} color="gray.200" />
</Link>
<Box lineHeight="shorter" color="white" fontSize="xs">
by{' '}
<Link isExternal href="https://premieroctet.com" color="teal.100">
Premier Octet
</Link>
</Box>
</Stack>
</Flex>
</DarkMode>
)
}
Example #8
| Source File: EditPiggybankModal.tsx From coindrop with GNU General Public License v3.0 | 4 votes |
|
EditPiggybankModal: FunctionComponent<Props> = ({ isOpen, onClose }) => {
const [isSubmitting, setIsSubmitting] = useState(false);
const { colors } = useTheme();
const { user } = useUser();
const { colorMode } = useColorMode();
const accentColorLevelInitial = getAccentColorLevelInitial(colorMode);
const accentColorLevelHover = getAccentColorLevelHover(colorMode);
const { push: routerPush, query: { piggybankName } } = useRouter();
const initialPiggybankId = Array.isArray(piggybankName) ? piggybankName[0] : piggybankName;
const { piggybankDbData } = useContext(PublicPiggybankDataContext);
const { avatar_storage_id: currentAvatarStorageId } = piggybankDbData;
const initialPaymentMethodsDataFieldArray = convertPaymentMethodsDataToFieldArray(piggybankDbData.paymentMethods);
const initialAccentColor = piggybankDbData.accentColor ?? 'orange';
const {
register,
handleSubmit,
setValue,
watch,
control,
formState: { isDirty },
} = useForm({
defaultValues: {
piggybankId: initialPiggybankId,
accentColor: initialAccentColor,
website: piggybankDbData.website ?? '',
name: piggybankDbData.name ?? '',
verb: piggybankDbData.verb ?? 'pay',
paymentMethods: sortByIsPreferredThenAlphabetical(initialPaymentMethodsDataFieldArray),
},
});
const paymentMethodsFieldArrayName = "paymentMethods";
const { fields, append, remove } = useFieldArray({
control,
name: paymentMethodsFieldArrayName,
});
const {
accentColor: watchedAccentColor,
piggybankId: watchedPiggybankId,
} = watch(["accentColor", "piggybankId"]);
const isAccentColorDirty = initialAccentColor !== watchedAccentColor;
const isUrlUnchanged = initialPiggybankId === watchedPiggybankId;
const { isPiggybankIdAvailable, setIsAddressTouched } = useContext(AdditionalValidation);
const onSubmit = async (formData) => {
try {
setIsSubmitting(true);
const dataToSubmit = {
...formData,
paymentMethods: convertPaymentMethodsFieldArrayToDbMap(formData.paymentMethods ?? []),
owner_uid: user.id,
avatar_storage_id: currentAvatarStorageId ?? null,
};
if (isUrlUnchanged) {
await db.collection('piggybanks').doc(initialPiggybankId).set(dataToSubmit);
mutate(['publicPiggybankData', initialPiggybankId], dataToSubmit);
} else {
await axios.post(
'/api/createPiggybank',
{
oldPiggybankName: initialPiggybankId,
newPiggybankName: formData.piggybankId,
piggybankData: dataToSubmit,
},
{
headers: {
token: user.token,
},
},
);
try {
await db.collection('piggybanks').doc(initialPiggybankId).delete();
} catch (err) {
console.log('error deleting old Coindrop page');
}
routerPush(`/${formData.piggybankId}`);
}
fetch(`/${initialPiggybankId}`, { headers: { isToForceStaticRegeneration: "true" }});
onClose();
} catch (error) {
setIsSubmitting(false);
// TODO: handle errors
throw error;
}
};
const handleAccentColorChange = (e) => {
e.preventDefault();
setValue("accentColor", e.target.dataset.colorname);
};
useEffect(() => {
register("accentColor");
}, [register]);
const formControlTopMargin = 2;
return (
<Modal
isOpen={isOpen}
onClose={onClose}
size="xl"
closeOnOverlayClick={false}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Configure</ModalHeader>
<ModalCloseButton />
<form id="configure-coindrop-form" onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<AvatarInput />
<FormControl
isRequired
mt={formControlTopMargin}
>
<FormLabel htmlFor="input-piggybankId">URL</FormLabel>
<EditUrlInput
register={register}
value={watchedPiggybankId}
/>
</FormControl>
<FormControl
mt={formControlTopMargin}
>
<FormLabel
htmlFor="input-accentColor"
>
Theme
</FormLabel>
<Flex wrap="wrap" justify="center">
{themeColorOptions.map(colorName => {
const isColorSelected = watchedAccentColor === colorName;
const accentColorInitial = colors[colorName][accentColorLevelInitial];
const accentColorHover = colors[colorName][accentColorLevelHover];
return (
<Box
key={colorName}
as="button"
bg={isColorSelected ? accentColorHover : accentColorInitial}
_hover={{
bg: accentColorHover,
}}
w="36px"
h="36px"
borderRadius="50%"
mx={1}
my={1}
onClick={handleAccentColorChange}
data-colorname={colorName}
>
{isColorSelected && (
<CheckIcon color="#FFF" />
)}
</Box>
);
})}
</Flex>
</FormControl>
<FormControl
isRequired
mt={formControlTopMargin}
>
<FormLabel
htmlFor="input-name"
>
Name
</FormLabel>
<Input
id="input-name"
name="name"
ref={register}
/>
</FormControl>
<FormControl
isRequired
mt={formControlTopMargin}
>
<FormLabel
htmlFor="input-verb"
>
Payment action name
</FormLabel>
<Select
id="input-verb"
name="verb"
ref={register}
>
<option value="pay">Pay</option>
<option value="donate to">Donate to</option>
<option value="support">Support</option>
<option value="tip">Tip</option>
</Select>
</FormControl>
<FormControl
mt={formControlTopMargin}
>
<FormLabel
htmlFor="input-website"
>
Website
</FormLabel>
<Input
id="input-website"
name="website"
ref={register}
placeholder="http://"
type="url"
/>
</FormControl>
<FormControl
mt={formControlTopMargin}
>
<FormLabel
htmlFor="input-paymentmethods"
>
Payment Methods
</FormLabel>
<PaymentMethodsInput
fields={fields}
control={control}
register={register}
remove={remove}
append={append}
fieldArrayName={paymentMethodsFieldArrayName}
/>
</FormControl>
</ModalBody>
<Flex
id="modal-footer"
justify="space-between"
m={6}
>
<DeleteButton
piggybankName={initialPiggybankId}
/>
<Flex>
<Button
variant="ghost"
onClick={onClose}
>
Cancel
</Button>
<Button
id="save-configuration-btn"
colorScheme="green"
mx={1}
type="submit"
isLoading={isSubmitting}
loadingText="Saving"
isDisabled={
(
!isDirty
&& !isAccentColorDirty // controlled accentColor field is not showing up in formState.dirtyFields
)
|| !isPiggybankIdAvailable
|| !initialPiggybankId
}
onClick={() => setIsAddressTouched(true)}
>
Save
</Button>
</Flex>
</Flex>
</form>
</ModalContent>
</Modal>
);
}
