reactstrap#CustomInput JavaScript Examples
The following examples show how to use
reactstrap#CustomInput.
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: filters.js From RT7-example with MIT License | 6 votes |
|
SelectColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id },
}) => {
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
return (
<CustomInput
id='custom-select'
type='select'
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option value=''>All</option>
{options.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</CustomInput>
);
}
Example #2
| Source File: TableContainer.js From RT7-example with MIT License | 4 votes |
|
TableContainer = ({ columns, data, renderRowSubComponent }) => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
visibleColumns,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn: { Filter: DefaultColumnFilter },
initialState: { pageIndex: 0, pageSize: 10 },
},
useFilters,
useSortBy,
useExpanded,
usePagination
);
const generateSortingIndicator = (column) => {
return column.isSorted ? (column.isSortedDesc ? ' ?' : ' ?') : '';
};
const onChangeInSelect = (event) => {
setPageSize(Number(event.target.value));
};
const onChangeInInput = (event) => {
const page = event.target.value ? Number(event.target.value) - 1 : 0;
gotoPage(page);
};
return (
<Fragment>
<Table bordered hover {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
<div {...column.getSortByToggleProps()}>
{column.render('Header')}
{generateSortingIndicator(column)}
</div>
<Filter column={column} />
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row) => {
prepareRow(row);
return (
<Fragment key={row.getRowProps().key}>
<tr>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
);
})}
</tr>
{row.isExpanded && (
<tr>
<td colSpan={visibleColumns.length}>
{renderRowSubComponent(row)}
</td>
</tr>
)}
</Fragment>
);
})}
</tbody>
</Table>
<Row style={{ maxWidth: 1000, margin: '0 auto', textAlign: 'center' }}>
<Col md={3}>
<Button
color='primary'
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{'<<'}
</Button>
<Button
color='primary'
onClick={previousPage}
disabled={!canPreviousPage}
>
{'<'}
</Button>
</Col>
<Col md={2} style={{ marginTop: 7 }}>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>
</Col>
<Col md={2}>
<Input
type='number'
min={1}
style={{ width: 70 }}
max={pageOptions.length}
defaultValue={pageIndex + 1}
onChange={onChangeInInput}
/>
</Col>
<Col md={2}>
<CustomInput
type='select'
value={pageSize}
onChange={onChangeInSelect}
>
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</CustomInput>
</Col>
<Col md={3}>
<Button color='primary' onClick={nextPage} disabled={!canNextPage}>
{'>'}
</Button>
<Button
color='primary'
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{'>>'}
</Button>
</Col>
</Row>
</Fragment>
);
}
Example #3
| Source File: FormElements.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Forms Elements" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xs={12}>
<Card>
<CardBody>
<h4 className="card-title">Textual inputs</h4>
<p className="card-title-desc">Here are examples of <code>.form-control</code> applied to each
textual HTML5 <code><input></code> <code>type</code>.</p>
<FormGroup row>
<Label htmlFor="example-text-input" className="col-md-2 col-form-label">Text</Label>
<Col md={10}>
<Input className="form-control" type="text" defaultValue="Artisanal kale" id="example-text-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-search-input" className="col-md-2 col-form-label">Search</Label>
<Col md={10}>
<Input className="form-control" type="search" defaultValue="How do I shoot web" id="example-search-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-email-input" className="col-md-2 col-form-label">Email</Label>
<Col md={10}>
<Input className="form-control" type="email" defaultValue="[email protected]" id="example-email-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-url-input" className="col-md-2 col-form-label">URL</Label>
<Col md={10}>
<Input className="form-control" type="url" defaultValue="https://getbootstrap.com" id="example-url-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-tel-input" className="col-md-2 col-form-label">Telephone</Label>
<Col md={10}>
<Input className="form-control" type="tel" defaultValue="1-(555)-555-5555" id="example-tel-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-password-input" className="col-md-2 col-form-label">Password</Label>
<Col md={10}>
<Input className="form-control" type="password" defaultValue="hunter2" id="example-password-input"/>
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-number-input" className="col-md-2 col-form-label">Number</Label>
<Col md={10}>
<Input className="form-control" type="number" defaultValue="42" id="example-number-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-datetime-local-input" className="col-md-2 col-form-label">Date and time</Label>
<Col md={10}>
<Input className="form-control" type="datetime-local" defaultValue="2020-03-14T13:45:00" id="example-datetime-local-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-date-input" className="col-md-2 col-form-label">Date</Label>
<Col md={10}>
<Input className="form-control" type="date" defaultValue="2020-03-19" id="example-date-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-month-input" className="col-md-2 col-form-label">Month</Label>
<Col md={10}>
<Input className="form-control" type="month" defaultValue="2020-03" id="example-month-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-week-input" className="col-md-2 col-form-label">Week</Label>
<Col md={10}>
<Input className="form-control" type="week" defaultValue="2020-W14" id="example-week-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-time-input" className="col-md-2 col-form-label">Time</Label>
<Col md={10}>
<Input className="form-control" type="time" defaultValue="13:45:00" id="example-time-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label htmlFor="example-color-input" className="col-md-2 col-form-label">Color</Label>
<Col md={10}>
<Input className="form-control" type="color" defaultValue="#5438dc" id="example-color-input" />
</Col>
</FormGroup>
<FormGroup row>
<Label className="col-md-2 col-form-label">Select</Label>
<Col md={10}>
<select className="form-control">
<option>Select</option>
<option>Large select</option>
<option>Small select</option>
</select>
</Col>
</FormGroup>
<FormGroup row className="mb-0">
<Label className="col-md-2 col-form-label">Custom Select</Label>
<Col md={10}>
<select className="custom-select">
<option defaultValue>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</Col>
</FormGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Sizing</h4>
<p className="card-title-desc">Set heights using classNames like <code>.form-control-lg</code> and <code>.form-control-sm</code>.</p>
<div>
<div className="mb-4">
<Input className="form-control" type="text" placeholder="Default input" />
</div>
<div className="mb-4">
<Input className="form-control" size="sm" type="text" placeholder=".form-control-sm" />
</div>
<div>
<Input className="form-control" size="lg" type="text" placeholder=".form-control-lg" />
</div>
</div>
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Range Inputs</h4>
<p className="card-title-desc">Set horizontally scrollable range inputs using <code>.form-control-range</code>.</p>
<div>
<h5 className="font-size-14">Example</h5>
<input type="range" className="form-control-range" id="formControlRange" />
</div>
<div className="mt-4">
<h5 className="font-size-14">Custom Range</h5>
<CustomInput type="range" id="customRange1" />
<CustomInput type="range" className="mt-4" min="0" max="5" id="customRange2" />
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title mb-4">Checkboxes</h4>
<Row>
<Col md={5}>
<div>
<h5 className="font-size-14 mb-4">Default Checkboxes</h5>
<div className="form-check mb-3">
<Input className="form-check-input" type="checkbox" value="" id="defaultCheck1" />
<Label className="form-check-label" htmlFor="defaultCheck1">
Default checkbox
</Label>
</div>
<div className="form-check form-check-right">
<Input className="form-check-input" type="checkbox" value="" id="defaultCheck2" defaultChecked />
<Label className="form-check-label" htmlFor="defaultCheck2">
Default checkbox Right
</Label>
</div>
</div>
</Col>
<Col md={6} className="ml-auto">
<div className="mt-4 mt-lg-0">
<h5 className="font-size-14 mb-4">Custom Checkboxes</h5>
<div className="custom-control custom-checkbox mb-3">
<Input type="checkbox" className="custom-control-input" id="CustomCheck1" onChange={() => false} checked={this.state.customchk} />
<Label className="custom-control-label" onClick={() => { this.setState({ customchk: !this.state.customchk }) }} >Custom checkbox</Label>
</div>
<div className="custom-control custom-checkbox custom-control-right">
<Input type="checkbox" className="custom-control-input" id="customCheck2" />
<Label className="custom-control-label" htmlFor="customCheck2">Custom checkbox Right</Label>
</div>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title mb-4">Radios</h4>
<Row>
<Col md={5}>
<div>
<h5 className="font-size-14 mb-4">Default Radios</h5>
<div className="form-check mb-3">
<Input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" defaultChecked />
<Label className="form-check-label" htmlFor="exampleRadios1">
Default radio
</Label>
</div>
<div className="form-check form-check-right">
<Input className="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" />
<Label className="form-check-label" htmlFor="exampleRadios2">
Default radio Right
</Label>
</div>
</div>
</Col>
<Col md={6} className="ml-auto">
<div className="mt-4 mt-lg-0">
<h5 className="font-size-14 mb-4">Custom Radios</h5>
<div className="custom-control custom-radio mb-3">
<Input type="radio" id="customRadio1" name="customRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="customRadio1">Toggle this custom radio</Label>
</div>
<div className="custom-control custom-radio custom-control-right">
<Input type="radio" id="customRadio2" name="customRadio" className="custom-control-input" defaultChecked />
<Label className="custom-control-label" htmlFor="customRadio2">Or toggle this Right custom radio</Label>
</div>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Switches</h4>
<p className="card-title-desc">A switch has the markup of a custom checkbox but uses the <code>.custom-switch</code> className to render a toggle switch. Switches also support the <code>disabled</code> attribute.</p>
<div className="custom-control custom-switch mb-2" dir="ltr">
<Input type="checkbox" className="custom-control-input" id="customSwitch1" defaultChecked />
<Label className="custom-control-label" htmlFor="customSwitch1" onClick={(e) => { this.setState({ toggleSwitch: !this.state.toggleSwitch }) }}>Toggle this switch element</Label>
</div>
<div className="custom-control custom-switch" dir="ltr">
<Input type="checkbox" className="custom-control-input" disabled id="customSwitch2" />
<Label className="custom-control-label" htmlFor="customSwitch2">Disabled switch element</Label>
</div>
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">File browser</h4>
<p className="card-title-desc">The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional <em>Choose file…</em> and selected file name text.</p>
<div className="custom-file">
<CustomInput type="file" className="custom-file-input" id="customFile" />
<Label className="custom-file-label" htmlFor="customFile">Choose file</Label>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #4
| Source File: FormValidations.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid={true}>
<Breadcrumbs title="Form Validation" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl="6">
<Card>
<CardBody>
<h4 className="card-title">React Validation - Normal</h4>
<p className="card-title-desc">Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers.</p>
<AvForm className="needs-validation" >
<Row>
<Col md="6">
<FormGroup>
<Label htmlFor="validationCustom01">First name</Label>
<AvField
name="firstname"
placeholder="First name"
type="text"
errorMessage="Enter First Name"
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom01"
/>
</FormGroup>
</Col>
<Col md="6">
<FormGroup>
<Label htmlFor="validationCustom02">Last name</Label>
<AvField
name="lastname"
placeholder="Last name"
type="text"
errorMessage="Enter Last name"
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom02"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="4">
<FormGroup>
<Label htmlFor="validationCustom03">City</Label>
<AvField
name="city"
placeholder="City"
type="text"
errorMessage=" Please provide a valid city."
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom03"
/>
</FormGroup>
</Col>
<Col md="4">
<FormGroup>
<Label htmlFor="validationCustom04">State</Label>
<AvField
name="state"
placeholder="State"
type="text"
errorMessage="Please provide a valid state."
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom04"
/>
</FormGroup>
</Col>
<Col md="4">
<FormGroup>
<Label htmlFor="validationCustom05">Zip</Label>
<AvField
name="zip"
placeholder="Zip Code"
type="text"
errorMessage=" Please provide a valid zip."
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom05"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<AvInput tag={CustomInput} type="checkbox" label="Agree to terms and conditions" id="invalidCheck" name="condition" errorMessage="You must agree before submitting." validate={{ required: { value: true } }} />
</FormGroup>
</Col>
</Row>
<Button color="primary" type="submit">Submit form</Button>
</AvForm>
</CardBody>
</Card>
</Col>
<Col xl="6">
<Card>
<CardBody>
<h4 className="card-title">Bootstrap Validation (Tooltips)</h4>
<p className="card-title-desc">If your form layout allows it, you can swap the <code>.-feedback</code> classes for <code>.-tooltip</code> classes to display validation feedback in a styled tooltip.</p>
<Form className="needs-validation" method="post" id="tooltipForm" onSubmit={this.handleSubmit}>
<Row>
<Col md="4">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltip01">First name</Label>
<Input type="text" className="form-control" id="validationTooltip01" placeholder="First name" onChange={(event) => this.changeHandeler(event, "validate1")} />
<div className={this.state.fnm === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate1">
{this.state.fnm === true ? "Looks good!" : "Please Enter Valid First Name"}
</div>
</FormGroup>
</Col>
<Col md="4">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltip02">Last name</Label>
<Input type="text" className="form-control" id="validationTooltip02" placeholder="Last name" onChange={(event) => this.changeHandeler(event, "validate2")} />
<div className={this.state.lnm === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate2">
{this.state.lnm === true ? "Looks good!" : "Please Enter Valid Last Name"}
</div>
</FormGroup>
</Col>
<Col md="4">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltipUsername">Username</Label>
<InputGroup>
<InputGroupAddon addonType="prepend">
<span className="input-group-text" id="validationTooltipUsernamePrepend">@</span>
</InputGroupAddon>
<Input type="text" className="form-control" id="validationTooltipUsername" placeholder="Username" onChange={(event) => this.changeHandeler(event, "validate3")} />
<div className={this.state.unm === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate3">
{this.state.unm === true ? "Looks good!" : "Please choose a unique and valid username."}
</div>
</InputGroup>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="6">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltip03">City</Label>
<Input type="text" className="form-control" id="validationTooltip03" placeholder="City" onChange={(event) => this.changeHandeler(event, "validate4")} />
<div className={this.state.city === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate4">
{this.state.city === true ? "Looks good!" : "Please choose a unique and valid username.Please provide a valid city."}
</div>
</FormGroup>
</Col>
<Col md="6">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltip04">State</Label>
<Input type="text" className="form-control" id="validationTooltip04" placeholder="State" onChange={(event) => this.changeHandeler(event, "validate5")} />
<div className={this.state.stateV === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate5">
{this.state.stateV === true ? "Looks good!" : "Please provide a valid state."}
</div>
</FormGroup>
</Col>
</Row>
<Button color="primary" type="submit">Submit form</Button>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Validation type</h4>
<p className="card-title-desc">
Parsley is a availity reactstrap validation. It helps you
provide your users with feedback on their form submission
before sending it to your server.
</p>
<AvForm>
<AvField
name="username"
label="Required "
placeholder="Type Something"
type="text"
errorMessage="Enter Name"
validate={{ required: { value: true } }}
/>
<Label>Equal To</Label>
<AvField
name="password"
type="text"
placeholder="Password"
errorMessage="Enter password"
validate={{ required: { value: true } }}
/>
<AvField
name="password1"
type="text"
placeholder="Re-type Password"
errorMessage="Enter Re-password"
validate={{
required: { value: true },
match: { value: "password" }
}}
/>
<AvField
name="email"
label="E-Mail "
placeholder="Enter Valid Email"
type="email"
errorMessage="Invalid Email"
validate={{
required: { value: true },
email: { value: true }
}}
/>
<AvField
name="digits"
label="Digits "
placeholder="Enter Only Digits"
type="number"
errorMessage="Enter Only Digits"
validate={{
required: { value: true },
pattern: {
value: "^[0-9]+$",
errorMessage: "Only Digits"
}
}}
/>
<AvField
name="number"
label="Number "
placeholder="Enter Only number"
type="number"
errorMessage="Enter Only Number"
validate={{
required: { value: true },
pattern: {
value: "^[0-9]+$",
errorMessage: "Only Numbers"
}
}}
/>
<AvField
name="alphanumeric"
label="Alphanumeric "
placeholder="Enter Only alphanumeric value"
type="text"
errorMessage="Enter Only Alphanumeric"
validate={{
required: { value: true },
pattern: {
value: "^[0-9a-zA-Z]+$",
errorMessage: "Only Alphanumeric"
}
}}
/>
<FormGroup className="mb-0">
<div>
<Button type="submit" color="primary" className="mr-1">
Submit
</Button>{" "}
<Button type="reset" color="secondary">
Cancel
</Button>
</div>
</FormGroup>
</AvForm>
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Range validation</h4>
<p className="card-title-desc">
Parsley is a availity reactstrap validation. It helps you
provide your users with feedback on their form submission
before sending it to your server.
</p>
<AvForm>
<AvField
name="Min_Length"
label="Min Length "
placeholder="Min 6 chars"
type="number"
errorMessage="Min 6 chars."
validate={{
required: { value: true },
minLength: { value: 6, errorMessage: "Min 6 chars." }
}}
/>
<AvField
name="Max_Length"
label="Max Length "
placeholder="Max 6 chars"
type="number"
errorMessage="Max 6 chars."
validate={{
required: { value: true },
maxLength: { value: 6, errorMessage: "Max 6 chars." }
}}
/>
<AvField
name="Range_Length"
label="Range Length "
placeholder="Text between 5 - 10 chars length"
type="text"
errorMessage="range between 5 to 10"
validate={{
required: { value: true },
minLength: { value: 5 },
maxLength: { value: 10 }
}}
/>
<AvField
name="Min_Value"
label="Min Value "
placeholder="Min 6 Chars"
min={6}
type="text"
errorMessage="Min Value 6"
validate={{
required: { value: true },
min: { value: 6 }
}}
/>
<AvField
name="Max_Value"
label="Max Value "
placeholder="max 5 Chars"
max={6}
type="number"
errorMessage="Max Value 6"
validate={{
required: { value: true },
max: { value: 6 }
}}
/>
<AvField
name="Range_Value"
label="Range Value "
placeholder="This value should be between 6 and 100."
type="number"
errorMessage="range between 5 to 10"
validate={{
required: { value: true },
min: { value: 6 },
max: { value: 100 }
}}
/>
<AvField
name="Regular_Exp"
label="Regular Exp "
placeholder="Hex. Color"
type="number"
errorMessage="Hex Value"
validate={{
required: { value: true },
pattern: {
value: "^[#0-9]+$",
errorMessage: "Only Hex Value"
}
}}
/>
<FormGroup className="mb-0">
<div>
<Button type="submit" color="primary" className="mr-1">
Submit
</Button>{" "}
<Button type="reset" color="secondary">
Cancel
</Button>
</div>
</FormGroup>
</AvForm>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
