601 lines
19 KiB
Python
601 lines
19 KiB
Python
import React, { Fragment } from 'react';
|
|
import { Button, Card, CardBody, Col, Row } from 'reactstrap';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import FalconCardHeader from '../common/FalconCardHeader';
|
|
import FalconEditor from '../common/FalconEditor';
|
|
import PageHeader from '../common/PageHeader';
|
|
import Flex from '../common/Flex';
|
|
|
|
const basicFormCode = `<Form>
|
|
<FormGroup>
|
|
<Label for="exampleName">Name</Label>
|
|
<Input type="text" name="name" id="exampleName" placeholder="Name" />
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="readonly">Read Only</Label>
|
|
<Input type="text" name="readonly" id="readonly" placeholder="Readonly input here..." disabled />
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="exampleEmail">Read only plain text</Label>
|
|
<Input plaintext value="email@example.com" onChange={() => {}} />
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="exampleEmail">Email</Label>
|
|
<Input type="email" name="email" id="exampleEmail" placeholder="Email" />
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="examplePassword">Password</Label>
|
|
<Input type="password" name="password" id="examplePassword" placeholder="Password" />
|
|
</FormGroup>
|
|
<FormGroup className="form-check">
|
|
<Input type="checkbox" name="check" id="exampleCheck" />
|
|
<Label for="exampleCheck" check>
|
|
Checkbox
|
|
</Label>
|
|
</FormGroup>
|
|
<FormGroup className="form-check">
|
|
<Input type="checkbox" name="check" id="exampleCheck1" disabled />
|
|
<Label for="exampleCheck1" check>
|
|
Disabled checkbox
|
|
</Label>
|
|
</FormGroup>
|
|
<FormGroup className="form-check">
|
|
<Input type="radio" name="radio1" defaultChecked />
|
|
<Label check>
|
|
Default Radio
|
|
</Label>
|
|
</FormGroup>
|
|
<FormGroup className="form-check">
|
|
<Input type="radio" name="radio1" disabled />
|
|
<Label check>
|
|
Disabled Radio
|
|
</Label>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="exampleFile">Example file input</Label>
|
|
<Input type="file" name="file" id="exampleFile" />
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="exampleSelect">Example Select</Label>
|
|
<Input type="select" name="select" id="exampleSelect">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</Input>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="exampleSelectMulti">Example Multiple Select</Label>
|
|
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</Input>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="exampleText">Example textarea</Label>
|
|
<Input type="textarea" name="text" id="exampleText" />
|
|
</FormGroup>
|
|
<Button color="primary">Save</Button>
|
|
</Form>`;
|
|
|
|
const inputGroupCode = `function InputGroupExample () {
|
|
const [isOpenOne, setIsOpenOne] = useState(false);
|
|
const [isOpenTwo, setIsOpenTwo] = useState(false);
|
|
|
|
return (
|
|
<div>
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">@</InputGroupAddon>
|
|
<Input placeholder="username" />
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<Input placeholder="Recipient's username" />
|
|
<InputGroupAddon addonType="append">
|
|
<InputGroupText>@example.com</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<br />
|
|
<Label for="yourVanityURl">Your vanity URL</Label>
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">https:example.com/users/</InputGroupAddon>
|
|
<Input />
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">$</InputGroupAddon>
|
|
<Input />
|
|
<InputGroupAddon addonType="append">.00</InputGroupAddon>
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">With textarea</InputGroupAddon>
|
|
<Input type="textarea" />
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">
|
|
<InputGroupText>
|
|
<Input addon type="checkbox" aria-label="Checkbox for following text input" />
|
|
</InputGroupText>
|
|
</InputGroupAddon>
|
|
<Input />
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">
|
|
<InputGroupText>
|
|
<Input addon type="radio" aria-label="Checkbox for following text input" />
|
|
</InputGroupText>
|
|
</InputGroupAddon>
|
|
<Input />
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">First and last name</InputGroupAddon>
|
|
<Input />
|
|
<Input />
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<InputGroupAddon addonType="prepend">
|
|
<InputGroupText>$</InputGroupText>
|
|
<InputGroupText>0.00</InputGroupText>
|
|
</InputGroupAddon>
|
|
<Input />
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<Input />
|
|
<InputGroupAddon addonType="append">
|
|
<InputGroupText>$</InputGroupText>
|
|
<InputGroupText>0.00</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<InputGroupButtonDropdown
|
|
addonType="append"
|
|
isOpen={isOpenOne}
|
|
toggle={() => setIsOpenOne(!isOpenOne)}
|
|
>
|
|
<DropdownToggle color="primary" caret>
|
|
Dropdown
|
|
</DropdownToggle>
|
|
<DropdownMenu>
|
|
<DropdownItem header>Header</DropdownItem>
|
|
<DropdownItem disabled>Action</DropdownItem>
|
|
<DropdownItem>Something else here</DropdownItem>
|
|
<DropdownItem divider />
|
|
<DropdownItem>Separated link</DropdownItem>
|
|
</DropdownMenu>
|
|
</InputGroupButtonDropdown>
|
|
<Input />
|
|
</InputGroup>
|
|
<br />
|
|
<InputGroup>
|
|
<Input />
|
|
<InputGroupButtonDropdown
|
|
addonType="append"
|
|
isOpen={isOpenTwo}
|
|
toggle={() => setIsOpenTwo(!isOpenTwo)}
|
|
>
|
|
<DropdownToggle color="primary" caret>
|
|
Dropdown
|
|
</DropdownToggle>
|
|
<DropdownMenu>
|
|
<DropdownItem header>Header</DropdownItem>
|
|
<DropdownItem disabled>Action</DropdownItem>
|
|
<DropdownItem>Something else here</DropdownItem>
|
|
<DropdownItem divider />
|
|
<DropdownItem>Separated link</DropdownItem>
|
|
</DropdownMenu>
|
|
</InputGroupButtonDropdown>
|
|
</InputGroup>
|
|
</div>
|
|
)
|
|
}`;
|
|
|
|
const customCheckboxCode = `<Fragment>
|
|
<CustomInput
|
|
type="checkbox"
|
|
id="customCheck1"
|
|
label="Check this custom checkbox"
|
|
className="mb-0"
|
|
/>
|
|
<CustomInput
|
|
type="checkbox"
|
|
id="customCheck2"
|
|
label="Check another custom checkbox"
|
|
/>
|
|
</Fragment>
|
|
`;
|
|
const customRadioCode = `<Fragment>
|
|
<CustomInput
|
|
type="radio"
|
|
id="customRadio1"
|
|
name="customRadio"
|
|
label="Toggle this custom radio"
|
|
className="mb-0"
|
|
/>
|
|
<CustomInput
|
|
type="radio"
|
|
id="customRadio2"
|
|
name="customRadio"
|
|
label="Or toggle this other custom radio"
|
|
/>
|
|
</Fragment>`;
|
|
|
|
const InlineRadioCode = `<FormGroup>
|
|
<Label for="selectOption">
|
|
Select one option
|
|
</Label>
|
|
<div>
|
|
<CustomInput
|
|
type="radio"
|
|
name="exampleCustomInlineRadio"
|
|
id="exampleCustomInlineRadio"
|
|
label="Toggle"
|
|
inline
|
|
/>
|
|
<CustomInput
|
|
type="radio"
|
|
name="exampleCustomInlineRadio"
|
|
id="exampleCustomInlineRadio2"
|
|
label="and another one"
|
|
inline
|
|
/>
|
|
</div>
|
|
</FormGroup>`;
|
|
|
|
const disabledInputFieldsCode = `<Fragment>
|
|
<CustomInput
|
|
type="checkbox"
|
|
id="customCheckboxDisabled2"
|
|
label="Check this custom checkbox"
|
|
disabled
|
|
/>
|
|
<CustomInput
|
|
type="radio"
|
|
id="customRadioDisabled2"
|
|
name="radioDisabled"
|
|
label="Toggle this custom radio"
|
|
disabled
|
|
/>
|
|
</Fragment>`;
|
|
|
|
const customSwitchCode = `<CustomInput
|
|
type="switch"
|
|
id="customSwitch"
|
|
name="customSwitch"
|
|
label="Toggle this custom radio"
|
|
/>`;
|
|
const customSwitchDisabledCode = `<CustomInput
|
|
type="switch"
|
|
id="customSwitchDisabled2"
|
|
name="customSwitch"
|
|
label="Toggle this custom radio"
|
|
disabled
|
|
/>`;
|
|
const customSelectCode = `<Fragment>
|
|
<FormGroup>
|
|
<CustomInput
|
|
type="select"
|
|
bsSize="lg"
|
|
defaultValue="1"
|
|
id="exampleCustomSelect1"
|
|
name="customSelect"
|
|
>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</CustomInput>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<CustomInput
|
|
type="select"
|
|
id="exampleCustomSelect2"
|
|
defaultValue="1"
|
|
name="customSelect"
|
|
>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</CustomInput>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<CustomInput
|
|
type="select"
|
|
bsSize="sm"
|
|
id="exampleCustomSelect3"
|
|
defaultValue="1"
|
|
name="customSelect"
|
|
>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</CustomInput>
|
|
</FormGroup>
|
|
</Fragment>`;
|
|
|
|
const multipleSelectCode = `<Fragment>
|
|
<FormGroup>
|
|
<CustomInput
|
|
type="select"
|
|
id="exampleCustomMultipleSelect"
|
|
defaultValue={[1,2]}
|
|
name="customSelect"
|
|
multiple
|
|
>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
<option value="4">Four</option>
|
|
<option value="5">Five</option>
|
|
</CustomInput>
|
|
</FormGroup>
|
|
</Fragment>`;
|
|
|
|
const fileBrowserCode = `<FormGroup>
|
|
<Label for="exampleCustomFileBrowser">
|
|
File Browser
|
|
</Label>
|
|
<CustomInput
|
|
type="file"
|
|
id="exampleCustomFileBrowser"
|
|
name="customFile"
|
|
/>
|
|
</FormGroup>`;
|
|
|
|
const propertiesInput = `Input.propTypes = {
|
|
children: PropTypes.node,
|
|
// type can be things like text, password, (typical input types) as well as select and textarea, providing children as you normally would to those.
|
|
type: PropTypes.string,
|
|
size: PropTypes.string,
|
|
bsSize: PropTypes.string,
|
|
valid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
|
|
invalid: PropTypes.bool, // applied the is-invalid class when true, does nothing when false
|
|
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
// ref will only get you a reference to the Input component, use innerRef to get a reference to the DOM input (for things like focus management).
|
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
plaintext: PropTypes.bool,
|
|
addon: PropTypes.bool,
|
|
className: PropTypes.string,
|
|
cssModule: PropTypes.object,
|
|
};`;
|
|
const propertiesCustomInput = `CustomInput.propTypes = {
|
|
className: PropTypes.string,
|
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
|
type: PropTypes.string.isRequired, // radio, checkbox, select, range.
|
|
label: PropTypes.string, // used for checkbox and radios
|
|
inline: PropTypes.bool,
|
|
valid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
|
|
invalid: PropTypes.bool, // applied the is-invalid class when true, does nothing when false
|
|
bsSize: PropTypes.string,
|
|
cssModule: PropTypes.object,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), // for type="select"
|
|
// innerRef would be referenced to select node or input DOM node, depends on type property
|
|
innerRef: PropTypes.oneOfType([
|
|
PropTypes.object,
|
|
PropTypes.string,
|
|
PropTypes.func,
|
|
])
|
|
};`;
|
|
const propertiesForm = `Form.propTypes = {
|
|
children: PropTypes.node,
|
|
inline: PropTypes.bool,
|
|
// Pass in a Component to override default element
|
|
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'form'
|
|
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
|
|
className: PropTypes.string,
|
|
cssModule: PropTypes.object,
|
|
};`;
|
|
const propertiesFormFeedback = `FormFeedback.propTypes = {
|
|
children: PropTypes.node,
|
|
// Pass in a Component to override default element
|
|
tag: PropTypes.string, // default: 'div'
|
|
className: PropTypes.string,
|
|
cssModule: PropTypes.object,
|
|
valid: PropTypes.bool, // default: undefined
|
|
tooltip: PropTypes.bool
|
|
};`;
|
|
const propertiesFormGroup = `FormGroup.propTypes = {
|
|
children: PropTypes.node,
|
|
// Applied the row class when true, does nothing when false
|
|
row: PropTypes.bool,
|
|
// Applied the form-check class when true, form-group when false
|
|
check: PropTypes.bool,
|
|
inline: PropTypes.bool,
|
|
// Applied the disabled class when the check and disabled props are true, does nothing when false
|
|
disabled: PropTypes.bool,
|
|
// Pass in a Component to override default element
|
|
tag: PropTypes.string, // default: 'div'
|
|
className: PropTypes.string,
|
|
cssModule: PropTypes.object,
|
|
};`;
|
|
const propertiesFormText = `FormText.propTypes = {
|
|
children: PropTypes.node,
|
|
inline: PropTypes.bool,
|
|
// Pass in a Component to override default element
|
|
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
|
|
color: PropTypes.string, // default: 'muted'
|
|
className: PropTypes.string,
|
|
cssModule: PropTypes.object,
|
|
};`;
|
|
|
|
const propertiesInputGroup = `InputGroup.propTypes = {
|
|
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
size: PropTypes.string,
|
|
className: PropTypes.string
|
|
};`;
|
|
|
|
const propertiesInputGroupAddon = `InputGroupAddOn.propTypes = {
|
|
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
|
|
className: PropTypes.string
|
|
};`;
|
|
|
|
const propertiesInputGroupButton = `InputGroupButton.propTypes = {
|
|
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
|
|
children: PropTypes.node,
|
|
groupClassName: PropTypes.string, // only used in shorthand
|
|
groupAttributes: PropTypes.object, // only used in shorthand
|
|
className: PropTypes.string
|
|
};`;
|
|
|
|
const Forms = () => (
|
|
<Fragment>
|
|
<PageHeader
|
|
title="Forms"
|
|
description="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms."
|
|
className="mb-3"
|
|
>
|
|
<Button
|
|
tag="a"
|
|
href="https://reactstrap.github.io/components/form"
|
|
target="_blank"
|
|
color="link"
|
|
size="sm"
|
|
className="pl-0"
|
|
>
|
|
Forms on reactstrap
|
|
<FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
|
|
</Button>
|
|
</PageHeader>
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="Basic Form" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={basicFormCode} />
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="Properties" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={propertiesInput} hidePreview />
|
|
<FalconEditor code={propertiesCustomInput} hidePreview />
|
|
<FalconEditor code={propertiesForm} hidePreview />
|
|
<FalconEditor code={propertiesFormFeedback} hidePreview />
|
|
<FalconEditor code={propertiesFormGroup} hidePreview />
|
|
<FalconEditor code={propertiesFormGroup} hidePreview />
|
|
<FalconEditor code={propertiesFormText} hidePreview />
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="Input Group Properties" light={false} />
|
|
<CardBody className="bg-light">
|
|
<code className="bg-dark d-block p-2">
|
|
<pre className="text-300">{propertiesInputGroup}</pre>
|
|
</code>
|
|
<code className="bg-dark d-block p-2">
|
|
<pre className="text-300">{propertiesInputGroupAddon}</pre>
|
|
</code>
|
|
<code className="bg-dark d-block p-2">
|
|
<pre className="text-300">{propertiesInputGroupButton}</pre>
|
|
</code>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="Input Group" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={inputGroupCode} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
<PageHeader
|
|
title="Custom Forms"
|
|
description="For even more customization and cross-browser consistency, use Bootstrap's completely custom form elements to replace the browser defaults."
|
|
className="mb-3"
|
|
>
|
|
<Button
|
|
tag="a"
|
|
href="https://reactstrap.github.io/components/form#Custom-Inputs"
|
|
target="_blank"
|
|
color="link"
|
|
size="sm"
|
|
className="pl-0"
|
|
>
|
|
Custom Forms on reactstrap
|
|
<FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
|
|
</Button>
|
|
</PageHeader>
|
|
<Row noGutters className="mb-3">
|
|
<Col lg={6} className="pr-lg-2 mb-3">
|
|
<Card className="h-100 mb-2">
|
|
<FalconCardHeader title="Checkboxes" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={customCheckboxCode} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={6} className="pl-lg-2 mb-3">
|
|
<Card className="h-100">
|
|
<FalconCardHeader title="Radios" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={customRadioCode} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={6} className="pr-lg-2 mb-3">
|
|
<Card className="h-100">
|
|
<FalconCardHeader title="Inline Radios" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={InlineRadioCode} scope={{ Flex }} />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={6} className="pl-lg-2 mb-3">
|
|
<Card className="h-100">
|
|
<FalconCardHeader title="Disabled" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={disabledInputFieldsCode} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={6} className="pr-lg-2 mb-3">
|
|
<Card className="h-100">
|
|
<FalconCardHeader title="Switches" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={customSwitchCode} />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={6} className="pl-lg-2 mb-3">
|
|
<Card className="h-100">
|
|
<FalconCardHeader title="Disabled Switches" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={customSwitchDisabledCode} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={6} className="pr-lg-2">
|
|
<Card className="h-100">
|
|
<FalconCardHeader title="Custom Select" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={customSelectCode} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
<Col lg={6} className="pl-lg-2">
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="Multiple Select" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={multipleSelectCode} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="">
|
|
<FalconCardHeader title="File Browser" light={false} />
|
|
<CardBody className="bg-light">
|
|
<FalconEditor code={fileBrowserCode} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Fragment>
|
|
);
|
|
|
|
export default Forms;
|