reactstrap#Form TypeScript Examples
The following examples show how to use
reactstrap#Form.
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: 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 #2
| Source File: MainInputFormSequenceFilePicker.tsx From nextclade with MIT License | 4 votes |
|
export function MainInputFormSequenceFilePicker() {
const { t } = useTranslationSafe()
const datasetCurrent = useRecoilValue(datasetCurrentAtom)
const [qrySeq, setQrySeq] = useRecoilState(qrySeqInputAtom)
const removeQrySeq = useResetRecoilState(qrySeqInputAtom)
const qrySeqError = useRecoilValue(qrySeqErrorAtom)
const canRun = useRecoilValue(canRunAtom)
const [shouldRunAutomatically, setShouldRunAutomatically] = useRecoilState(shouldRunAutomaticallyAtom)
const hasRequiredInputs = useRecoilValue(hasRequiredInputsAtom)
const hasInputErrors = useRecoilValue(hasInputErrorsAtom)
const icon = useMemo(() => <FileIconFasta />, [])
const run = useRunAnalysis()
const setSequences = useCallback(
(input: AlgorithmInput) => {
setQrySeq(input)
if (shouldRunAutomatically) {
run()
}
},
[run, setQrySeq, shouldRunAutomatically],
)
const setExampleSequences = useCallback(() => {
if (datasetCurrent) {
setQrySeq(new AlgorithmInputDefault(datasetCurrent))
if (shouldRunAutomatically) {
run()
}
}
}, [datasetCurrent, run, setQrySeq, shouldRunAutomatically])
const { isRunButtonDisabled, runButtonColor, runButtonTooltip } = useMemo(() => {
const isRunButtonDisabled = !(canRun && hasRequiredInputs) || hasInputErrors
return {
isRunButtonDisabled,
runButtonColor: isRunButtonDisabled ? 'secondary' : 'success',
runButtonTooltip: isRunButtonDisabled
? t('Please provide input files for the algorithm')
: t('Launch the algorithm!'),
}
}, [canRun, hasInputErrors, hasRequiredInputs, t])
const LoadExampleLink = useMemo(() => {
const cannotLoadExample = hasRequiredInputs || hasInputErrors || !datasetCurrent
return (
<Button color="link" onClick={setExampleSequences} disabled={cannotLoadExample}>
{t('Load example')}
</Button>
)
}, [datasetCurrent, hasInputErrors, hasRequiredInputs, setExampleSequences, t])
const onToggleRunAutomatically = useCallback(() => {
setShouldRunAutomatically((shouldRunAutomatically) => !shouldRunAutomatically)
}, [setShouldRunAutomatically])
return (
<SequenceFilePickerContainer>
<FilePicker
title={t('Provide sequence data')}
icon={icon}
exampleUrl="https://example.com/sequences.fasta"
pasteInstructions={t('Enter sequence data in FASTA or plain text format')}
input={qrySeq}
error={qrySeqError}
isInProgress={false}
onRemove={removeQrySeq}
onInput={setSequences}
/>
<Row noGutters className="mt-2">
<Col className="w-100 d-flex">
<FlexLeft>
<Form className="d-flex h-100 mt-1">
<FormGroup className="my-auto">
<Toggle
identifier="toggle-run-automatically"
checked={shouldRunAutomatically}
onCheckedChanged={onToggleRunAutomatically}
>
<span title="Run Nextclade automatically after sequence data is provided">
{t('Run automatically')}
</span>
</Toggle>
</FormGroup>
</Form>
</FlexLeft>
<FlexRight>
{LoadExampleLink}
<ButtonRunStyled
disabled={isRunButtonDisabled}
color={runButtonColor}
onClick={run}
title={runButtonTooltip}
>
{t('Run')}
</ButtonRunStyled>
</FlexRight>
</Col>
</Row>
</SequenceFilePickerContainer>
)
}
Example #3
| Source File: SeqViewSettings.tsx From nextclade with MIT License | 4 votes |
|
export function SeqViewSettings() {
const { t } = useTranslationSafe()
const [maxNucMarkers, setMaxNucMarkers] = useRecoilStateDeferred(maxNucMarkersAtom)
const [seqMarkerMissingHeightState, setSeqMarkerMissingHeightState] = useSeqMarkerState(
seqMarkerMissingHeightStateAtom,
)
const [seqMarkerGapHeightState, setSeqMarkerGapHeightState] = useSeqMarkerState(seqMarkerGapHeightStateAtom)
const [seqMarkerMutationHeightState, setSeqMarkerMutationHeightState] = useSeqMarkerState(
seqMarkerMutationHeightStateAtom,
)
const [seqMarkerUnsequencedHeightState, setSeqMarkerUnsequencedHeightState] = useSeqMarkerState(
seqMarkerUnsequencedHeightStateAtom,
)
return (
<Container fluid>
<Row noGutters>
<Col>
<Form>
<NumericField
identifier="max-nuc-markers"
label={t('Maximum number of nucleotide sequence view markers')}
title={t(
'Sets threshold on maximum number of markers (mutations, deletions etc.) to display in nucleotide views. Reducing this number increases performance. If the threshold is reached, then the nucleotide sequence view will be disabled.',
)}
min={0}
max={1_000_000}
value={maxNucMarkers}
onValueChanged={setMaxNucMarkers}
/>
<FormGroup>
{t('Missing')}
<Multitoggle
values={SEQ_MARKER_HEIGHT_STATES}
value={seqMarkerMissingHeightState}
onChange={setSeqMarkerMissingHeightState}
/>
</FormGroup>
<FormGroup>
<Label>
{t('Gaps')}
<Multitoggle
values={SEQ_MARKER_HEIGHT_STATES}
value={seqMarkerGapHeightState}
onChange={setSeqMarkerGapHeightState}
/>
</Label>
</FormGroup>
<FormGroup>
<Label>
{t('Mutations')}
<Multitoggle
values={SEQ_MARKER_HEIGHT_STATES}
value={seqMarkerMutationHeightState}
onChange={setSeqMarkerMutationHeightState}
/>
</Label>
</FormGroup>
<FormGroup>
<Label>
{t('Unsequenced')}
<Multitoggle
values={SEQ_MARKER_HEIGHT_STATES}
value={seqMarkerUnsequencedHeightState}
onChange={setSeqMarkerUnsequencedHeightState}
/>
</Label>
</FormGroup>
</Form>
</Col>
</Row>
</Container>
)
}
