react-icons/md#MdCheck TypeScript Examples
The following examples show how to use
react-icons/md#MdCheck.
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: CodeCopy.tsx From frontend with Apache License 2.0 | 6 votes |
|
CodeCopy: FunctionComponent<Props> = ({ text, onCopy, className, nested }) => {
const { t } = useTranslation()
const [copied, setCopied] = useState(false)
useEffect(() => {
const timeout = setTimeout(() => {
if (copied) setCopied(false);
}, 1200);
return () => clearTimeout(timeout);
}, [copied]);
return (< div className={`${styles.pre} ${className} ${nested ? styles.nested : ''}`}>
{text}
<CopyToClipboard text={text} onCopy={() => {
setCopied(true)
onCopy()
}}>
<button className={styles.copy} title={t('copy-text')}>
{!copied && <MdContentCopy></MdContentCopy>}
{copied && <MdCheck style={{ 'color': "green" }}></MdCheck>}
</button>
</CopyToClipboard >
</div >
)
}
Example #2
| Source File: SuccessSection.tsx From slice-machine with Apache License 2.0 | 6 votes |
|
SuccessSection: React.FunctionComponent = () => {
return (
<Flex
sx={{
p: 3,
bg: "lightGreen",
alignItems: "center",
}}
>
<MdCheck color="#3AB97A" />
<Text
sx={{
ml: 1,
}}
>
Successfully configured
</Text>
</Flex>
);
}
Example #3
| Source File: DropdownFilter.tsx From po8klasie with GNU General Public License v3.0 | 5 votes |
|
DropdownFilter: FC<DropdownFilterProps> = ({
onChange,
value,
options: { title, choices, isMultipleChoice },
}) => {
const { selected, selectItem } = useSelected(value as [], !!isMultipleChoice);
const isDropdownActive = selected.length > 0;
/* TODO(micorix): add keyboard listener and proper ARIA */
/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */
return (
<div className={styles.dropdownWrapper} onMouseLeave={() => onChange(selected)}>
<button
type="button"
className={isDropdownActive ? styles.dropdownButtonActive : styles.dropdownButton}
>
{title}
<MdExpandMore />
<span className={styles.dropdownSpace} />
</button>
<div className={styles.dropdownListWrapper}>
<PerfectScrollbar>
<ul className={styles.dropdownList}>
{choices.map((choice: DropdownChoice) => (
<li
className={
selected.includes(choice.value)
? styles.dropdownListItemActive
: styles.dropdownListItem
}
onClick={() => selectItem(choice.value)}
key={choice.value}
>
{choice.label} <MdCheck />
</li>
))}
</ul>
</PerfectScrollbar>
</div>
</div>
);
}
Example #4
| Source File: DropdownFilter.tsx From po8klasie with GNU General Public License v3.0 | 5 votes |
|
MobileDropdownFilter: FC<DropdownFilterProps> = ({
onChange,
value,
options: { title, choices, isMultipleChoice },
}) => {
const { selected, selectItem } = useSelected(value as [], !!isMultipleChoice);
useEffect(() => {
onChange(selected);
}, [selected])
return (
<div className="border-b border-light">
<Disclosure>
{({ open }) => (
<>
<Disclosure.Button className="flex w-full justify-between px-2 py-2">
<span>{title}</span>
<MdExpandMore className={`text-2xl text-primary transition transform ${open ? 'rotate-180' : ''}`} />
</Disclosure.Button>
<Disclosure.Panel className="px-2">
<ul className="">
{choices.map((choice: DropdownChoice) => (
<li
className={
`rounded-lg bg-opacity-50 my-2 px-2 py-2 flex items-center border-2 border-light transition
${ selected.includes(choice.value) ? 'bg-light' : ''}`
}
onClick={() => selectItem(choice.value)}
key={choice.value}
>
<MdCheck className={
`mr-2 transition text-primary ${selected.includes(choice.value) ? 'opacity-100' : 'opacity-0'}`
} /> {choice.label}
</li>
))}
</ul>
</Disclosure.Panel>
</>
)}
</Disclosure>
</div>
)
}
Example #5
| Source File: CodeBlockWithCopy.tsx From slice-machine with Apache License 2.0 | 5 votes |
|
CodeBlockWithCopy: React.FC<{ children: string }> = ({ children }) => {
const { theme } = useThemeUI();
const [isCopied, setIsCopied] = useState(false);
const copy = (): void => {
children &&
navigator.clipboard.writeText(children).then(() => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1200);
});
};
return (
<Box sx={{ position: "relative" }}>
<CodeBlock codeStyle={{ padding: "16px", width: "100%" }}>
{children}
</CodeBlock>
<Button
onClick={copy}
sx={{
position: "absolute",
top: "4px",
right: "4px",
width: 24,
height: 24,
display: "flex",
justifyContent: "center",
alignItems: "center",
p: 0,
}}
>
{isCopied ? (
<MdCheck
size={16}
color={theme?.colors?.success as string | undefined}
/>
) : (
<MdContentCopy size={14} />
)}
</Button>
</Box>
);
}
Example #6
| Source File: CodeBlock.tsx From slice-machine with Apache License 2.0 | 5 votes |
|
CodeBlock: React.FC<CodeBlockProps> = ({ code, lang }) => {
const { theme } = useThemeUI();
const [isCopied, setIsCopied] = useState(false);
const copy = (): void => {
code &&
navigator.clipboard.writeText(code).then(() => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1200);
});
};
return code ? (
<Flex
sx={{
p: 2,
px: 3,
alignItems: "center",
borderTop: "1px solid",
borderColor: "borders",
justifyContent: "space-between",
}}
>
<Flex
sx={{
alignItems: "center",
display: ["none", "none", "flex"],
maxWidth: "80%",
}}
>
<BsCode
size={26}
color={theme?.colors?.icons as string | undefined}
style={{
border: "1px solid",
borderColor: theme?.colors?.borders as string | undefined,
borderRadius: "3px",
padding: "4px",
marginRight: "2px",
}}
/>
<Code
sx={{
margin: "0px 8px",
border: "none",
borderRadius: "3px",
fontSize: "13px",
}}
lang={lang}
>
{code}
</Code>
</Flex>
<Box>
<Button onClick={copy} variant="textButton">
{isCopied ? (
<MdCheck
size={16}
color={theme?.colors?.success as string | undefined}
style={buttonIconStyle}
/>
) : (
<BiCopy size={16} style={buttonIconStyle} />
)}
<Text
as="span"
sx={{ display: ["none", "inline", "none", "inline"] }}
>
Copy
</Text>
</Button>
</Box>
</Flex>
) : null;
}
Example #7
| Source File: SignupPage.tsx From TutorBase with MIT License | 4 votes |
|
export function SignUpPage() {
const [signUpData, setSignUpData] = useState({
first_name: "",
last_name: "",
email: "",
password: "",
phone_number: "",
visible: false,
passwordValid: false,
emailValid: false,
firstNameValid: false,
lastNameValid: false,
phoneValid: false,
loginValid: true,
emailTaken: false,
});
const history = useHistory();
const HandleChange = (event: any) => {
let name = event.target.name;
let value = event.target.value;
if (name === "first_name")
IsFirstNameValid(value)
else if (name === "last_name")
IsLastNameValid(value)
else if (name === "email")
IsEmailValid(value)
};
const IsFirstNameValid = (value: any) => {
let firstValid = false;
if (value.length > 0)
firstValid = true
setSignUpData({
...signUpData,
first_name: value,
firstNameValid: firstValid,
})
}
const IsLastNameValid = (value: any) => {
let lastValid = false;
if (value.length > 0)
lastValid = true
setSignUpData({
...signUpData,
last_name: value,
lastNameValid: lastValid,
})
}
const IsEmailValid = (value: string) => {
setSignUpData((signUpData: any) => ({
...signUpData,
email: value,
emailValid: isEmail.validate(value),
emailTaken: false,
}));
}
const IsPhoneNumberValid = (value: any) => {
let phoneValid = false;
if (value.length === 0 || (value.length === 10 && value.match(/^[0-9]+$/) != null))
phoneValid = true
setSignUpData({
...signUpData,
phone_number: value,
phoneValid: phoneValid,
})
}
const CreateUser = async () => {
let body = {
"email": signUpData.email,
"first_name": signUpData.first_name,
"last_name": signUpData.last_name,
"phone": signUpData.phone_number,
}
const request = await fetch(ApiBaseAddress + "api/users", {
method: "post",
body: JSON.stringify(body),
headers: {
"Content-Type": "application/json",
},
credentials: 'include',
});
if (request.ok) {
history.push("home");
} else {
setSignUpData((signUpData) => ({
...signUpData,
emailTaken: true,
emailValid: false,
}));
}
}
const SubmitEvent = (event: any) => {
event.preventDefault();
if (signUpData.firstNameValid && signUpData.lastNameValid) {
CreateUser();
} else {
setSignUpData({
...signUpData,
loginValid: false
});
}
};
return (
<div className="flexBox">
<Container className="signupContainer" fluid="xs" style={{padding: "3%", margin: "10em"}}>
<Row>
<Col xs="1"/>
<Col xs="11">
<Form onSubmit={event => SubmitEvent(event)}>
<Label className="signupText">Sign Up</Label>
<FormGroup row>
<Container>
<Row>
<Col xs="auto">
<Input
type="text"
className="form-control"
name="first_name"
placeholder="First Name"
value={signUpData.first_name}
onChange={event => HandleChange(event)}
autoComplete="off"
/>
</Col>
<Col xs="auto">
<div>
{signUpData.firstNameValid ?
<MdCheck size="30px" color="green"></MdCheck> :
<VscError size="30px" color="red"></VscError>}
</div>
</Col>
</Row>
</Container>
</FormGroup>
<FormGroup row>
<Container>
<Row>
<Col xs="auto">
<Input
type="text"
className="form-control"
name="last_name"
placeholder="Last Name"
value={signUpData.last_name}
onChange={event => HandleChange(event)}
autoComplete="off"
/>
</Col>
<Col xs="auto">
<div>
{signUpData.lastNameValid ?
<MdCheck size="30px" color="green"></MdCheck> :
<VscError size="30px" color="red"></VscError>}
</div>
</Col>
</Row>
</Container>
</FormGroup>
<FormGroup row>
<Container>
<Row>
<Col xs="auto">
<Input
type="email"
className="form-control"
name="email"
placeholder="Email"
value={signUpData.email}
onChange={event => HandleChange(event)}
autoComplete="off"
/>
</Col>
<Col xs="auto">
<div>
{signUpData.emailValid ?
<MdCheck size="30px" color="green"></MdCheck> :
<VscError size="30px" color="red"></VscError>}
</div>
</Col>
</Row>
</Container>
</FormGroup>
<FormGroup row>
<Container fluid>
<Row>
<Col xs="auto">
<Input
type="number"
className="form-control"
name="phone"
placeholder="Cell Number (optional)"
value={signUpData.phone_number}
onChange={event => HandleChange(event)}
autoComplete="off"
/>
</Col>
<Col xs="auto">
<div>
{signUpData.phoneValid ? (
<MdCheck size="30px" color="green"></MdCheck>
) : (
<VscError size="30px" color="red"></VscError>
)}
</div>
</Col>
</Row>
</Container>
</FormGroup>
<div>
{signUpData.loginValid ? '' : 'Invalid Fields'}
</div>
<div>
{signUpData.emailTaken && 'Email already taken'}
</div>
<Button color="danger" type="submit">
Create Account
</Button>
<div>Already have an account? Click <Link to='/login'>here</Link></div>
</Form>
</Col>
</Row>
</Container>
</div>
);
}
Example #8
| Source File: StepSection.tsx From slice-machine with Apache License 2.0 | 4 votes |
|
StepSection: React.FunctionComponent<StepSectionProps> = ({
title,
stepNumber,
isOpen,
onOpenStep,
children,
status = null,
}) => {
const stepSectionContainer = useRef<HTMLDivElement>(null);
const contentHeight: number =
!!stepSectionContainer && !!stepSectionContainer.current
? stepSectionContainer.current.scrollHeight
: 0;
const additionalStepTitleStyle: ThemeUIStyleObject =
status === "ok"
? {
textDecoration: "line-through",
color: "grey04",
}
: {};
return (
<Flex
sx={{
flexDirection: "column",
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: (t) => t.colors?.borders,
overflow: "hidden",
pb: isOpen ? 24 : 0,
}}
>
<Flex
sx={{
flex: 1,
alignItems: "center",
justifyContent: "space-between",
paddingY: 24,
cursor: "pointer",
}}
onClick={onOpenStep}
>
<Flex sx={{ alignItems: "center" }}>
{!!stepNumber && (
<StepNumber stepNumber={stepNumber} sx={{ mr: 2 }} />
)}
<Text
sx={{ fontWeight: 500, fontSize: 2, ...additionalStepTitleStyle }}
>
{title}
</Text>
</Flex>
<Flex
sx={{
justifyContent: "center",
}}
>
{status === "ok" && (
<Flex
sx={{
height: 20,
width: 20,
justifyContent: "center",
alignItems: "center",
borderRadius: "50%",
borderStyle: "solid",
backgroundColor: "lightGreen",
borderColor: "lightGreen",
borderWidth: 1,
mr: 2,
}}
>
<MdCheck color="#3AB97A" />
</Flex>
)}
{status === "ko" && <WarningBadge sx={{ mr: 2 }} />}
<Flex
sx={{
transform: isOpen
? "rotate(90deg) translate(5px)"
: "rotate(-90deg) translate(5px)",
transition: "all 0.2s ease-out",
}}
>
<MdArrowBackIos color={"#4E4E55"} />
</Flex>
</Flex>
</Flex>
<Flex
ref={stepSectionContainer}
sx={{
overflow: "hidden",
opacity: isOpen ? 1 : 0,
paddingX: 24,
willChange: "max-height",
transition: "all 0.2s ease-out",
maxHeight: isOpen ? contentHeight : 0,
}}
>
{children}
</Flex>
</Flex>
);
}
