mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-02 10:22:09 +00:00
724 lines
24 KiB
JavaScript
Vendored
724 lines
24 KiB
JavaScript
Vendored
// @flow
|
|
|
|
import * as React from "react";
|
|
|
|
import { Page, Card, Grid, Form, Button, Dropdown } from "tabler-react";
|
|
|
|
import ComponentDemo from "./ComponentDemo";
|
|
import SiteWrapper from "./SiteWrapper.react";
|
|
|
|
function FormElements() {
|
|
return (
|
|
<SiteWrapper>
|
|
<Page.Card
|
|
title="Form elements"
|
|
RootComponent={Form}
|
|
footer={
|
|
<Card.Footer>
|
|
<div className="d-flex">
|
|
<Button link>Cancel</Button>
|
|
<Button type="submit" color="primary" className="ml-auto">
|
|
Send data
|
|
</Button>
|
|
</div>
|
|
</Card.Footer>
|
|
}
|
|
>
|
|
<Grid.Row>
|
|
<Grid.Col md={6} lg={4}>
|
|
<ComponentDemo>
|
|
<Form.Group label="Static">
|
|
<Form.StaticText>Username</Form.StaticText>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Text">
|
|
<Form.Input name="example-text-input" placeholder="Text..." />
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Disabled">
|
|
<Form.Input
|
|
disabled
|
|
name="example-disabled-text-input"
|
|
value="Well, she turned me into a newt."
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Read Only">
|
|
<Form.Input
|
|
readOnly
|
|
name="example-readonly-text-input"
|
|
value="Well, howd you become king, then?"
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group
|
|
label={<Form.Label aside="56/100" children="Textarea" />}
|
|
>
|
|
<Form.Textarea
|
|
name="example-textarea"
|
|
rows={6}
|
|
placeholder="Content.."
|
|
defaultValue=" Oh! Come and see the violence inherent in the system! Help,
|
|
help, I'm being repressed! We shall say 'Ni' again to you, if
|
|
you do not appease us. I'm not a witch. I'm not a witch.
|
|
Camelot!"
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Image Check">
|
|
<Form.ImageCheck>
|
|
<Form.ImageCheckItem
|
|
value={1}
|
|
imageURL="/demo/photos/nathan-anderson-316188-500.jpg"
|
|
/>
|
|
<Form.ImageCheckItem
|
|
value={2}
|
|
imageURL="/demo/photos/nathan-dumlao-287713-500.jpg"
|
|
/>
|
|
<Form.ImageCheckItem
|
|
value={3}
|
|
imageURL="./demo/photos/nicolas-picard-208276-500.jpg"
|
|
/>
|
|
|
|
<Form.ImageCheckItem
|
|
value={4}
|
|
imageURL="./demo/photos/oskar-vertetics-53043-500.jpg"
|
|
/>
|
|
<Form.ImageCheckItem
|
|
value={5}
|
|
imageURL="./demo/photos/priscilla-du-preez-181896-500.jpg"
|
|
/>
|
|
<Form.ImageCheckItem
|
|
value={6}
|
|
imageURL="./demo/photos/ricardo-gomez-angel-262359-500.jpg"
|
|
/>
|
|
|
|
<Form.ImageCheckItem
|
|
value={7}
|
|
imageURL="./demo/photos/sam-ferrara-136526-500.jpg"
|
|
/>
|
|
<Form.ImageCheckItem
|
|
value={8}
|
|
imageURL="./demo/photos/sean-afnan-244576-500.jpg"
|
|
/>
|
|
<Form.ImageCheckItem
|
|
value={9}
|
|
imageURL="./demo/photos/sophie-higginbottom-133982-500.jpg"
|
|
/>
|
|
</Form.ImageCheck>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Color Check">
|
|
<Form.ColorCheck>
|
|
<Form.ColorCheckItem color="azure" />
|
|
<Form.ColorCheckItem color="indigo" />
|
|
<Form.ColorCheckItem color="purple" />
|
|
|
|
<Form.ColorCheckItem color="pink" />
|
|
<Form.ColorCheckItem color="red" />
|
|
<Form.ColorCheckItem color="orange" />
|
|
|
|
<Form.ColorCheckItem color="lime" />
|
|
<Form.ColorCheckItem color="green" />
|
|
<Form.ColorCheckItem color="teal" />
|
|
</Form.ColorCheck>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Input Group">
|
|
<Form.InputGroup>
|
|
<Form.Input placeholder="Search for..." />
|
|
<Form.InputGroupAppend>
|
|
<Button
|
|
RootComponent="a"
|
|
color="primary"
|
|
href="http://www.google.com"
|
|
>
|
|
Go!
|
|
</Button>
|
|
</Form.InputGroupAppend>
|
|
</Form.InputGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Input Group Buttons">
|
|
<Form.InputGroup>
|
|
<Form.Input />
|
|
<Form.InputGroup append>
|
|
<Button color="primary">Actions</Button>
|
|
<Button.Dropdown color="primary">
|
|
<Dropdown.Item>News</Dropdown.Item>
|
|
<Dropdown.Item>Messages</Dropdown.Item>
|
|
<Dropdown.ItemDivider />
|
|
<Dropdown.Item>Edit Profile</Dropdown.Item>
|
|
</Button.Dropdown>
|
|
</Form.InputGroup>
|
|
</Form.InputGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Input Icon">
|
|
<Form.Input
|
|
icon="search"
|
|
placeholder="Search for..."
|
|
position="append"
|
|
className={"mb-3"}
|
|
/>
|
|
<Form.Input icon="user" placeholder="Username" />
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="Seperated Inputs">
|
|
<Form.Input
|
|
icon="search"
|
|
placeholder="Search for..."
|
|
position="append"
|
|
className={"mb-3"}
|
|
/>
|
|
<Grid.Row gutters="xs">
|
|
<Grid.Col>
|
|
<Form.Input placeholder="Search for..." />
|
|
</Grid.Col>
|
|
<Grid.Col auto>
|
|
<Button color="secondary" icon="search" />
|
|
</Grid.Col>
|
|
</Grid.Row>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="ZIP Code">
|
|
<Grid.Row gutters="xs">
|
|
<Grid.Col>
|
|
<Form.Input placeholder="Search for..." />
|
|
</Grid.Col>
|
|
<Grid.Col auto className="align-self-center">
|
|
<Form.Help
|
|
message={
|
|
<React.Fragment>
|
|
<p>
|
|
ZIP Code must be US or CDN format. You can use an
|
|
extended ZIP+4 code to determine address more
|
|
accurately.
|
|
</p>
|
|
<p class="mb-0">
|
|
<a href="#">USP ZIP codes lookup tools</a>
|
|
</p>
|
|
</React.Fragment>
|
|
}
|
|
/>
|
|
</Grid.Col>
|
|
</Grid.Row>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
</Grid.Col>
|
|
|
|
<Grid.Col md={6} lg={4}>
|
|
<ComponentDemo>
|
|
<Form.Group label="Password">
|
|
<Form.Input
|
|
type="password"
|
|
name="example-password-input"
|
|
placeholder="Password..."
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Valid State">
|
|
<Form.Input valid placeholder="Is Valid" />
|
|
<Form.Input tick placeholder="Tick" className="mt-3" />
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="Invalid State">
|
|
<Form.Input
|
|
invalid
|
|
feedback="Invalid feedback"
|
|
placeholder="Is Invalid"
|
|
/>
|
|
<Form.Input cross placeholder="Cross" className="mt-3" />
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="Select">
|
|
<Form.Select>
|
|
<option>United Kingdom</option>
|
|
<option>Germany</option>
|
|
</Form.Select>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="Ratios">
|
|
<Form.Ratio step={5} min={0} max={50} defaultValue={15} />
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="Size">
|
|
<Form.SelectGroup>
|
|
<Form.SelectGroupItem name="size" label="S" value="50" />
|
|
<Form.SelectGroupItem name="size" label="M" value="100" />
|
|
<Form.SelectGroupItem name="size" label="L" value="150" />
|
|
<Form.SelectGroupItem name="size" label="XL" value="200" />
|
|
</Form.SelectGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="Icons input">
|
|
<Form.SelectGroup>
|
|
<Form.SelectGroupItem
|
|
name="device"
|
|
icon="smartphone"
|
|
value="smartphone"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="device"
|
|
icon="tablet"
|
|
value="tablet"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="device"
|
|
icon="monitor"
|
|
value="monitor"
|
|
/>
|
|
<Form.SelectGroupItem name="device" icon="x" value="x" />
|
|
</Form.SelectGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Icon input">
|
|
<Form.SelectGroup pills>
|
|
<Form.SelectGroupItem name="weather" icon="sun" value="sun" />
|
|
<Form.SelectGroupItem
|
|
name="weather"
|
|
icon="moon"
|
|
value="moon"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="weather"
|
|
icon="cloud-rain"
|
|
value="cloud-rain"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="weather"
|
|
icon="cloud"
|
|
value="cloud"
|
|
/>
|
|
</Form.SelectGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Icon input">
|
|
<Form.SelectGroup pills canSelectMultiple>
|
|
<Form.SelectGroupItem
|
|
name="language"
|
|
label="HTML"
|
|
value="HTML"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="language"
|
|
label="CSS"
|
|
value="CSS"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="language"
|
|
label="PHP"
|
|
value="PHP"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="language"
|
|
label="JavaScript"
|
|
value="JavaScript"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="language"
|
|
label="Python"
|
|
value="Python"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="language"
|
|
label="Ruby"
|
|
value="Ruby"
|
|
/>
|
|
<Form.SelectGroupItem
|
|
name="language"
|
|
label="C++"
|
|
value="C++"
|
|
/>
|
|
</Form.SelectGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Toggle switches">
|
|
<Form.SwitchStack>
|
|
<Form.Switch
|
|
type="radio"
|
|
name="toggle"
|
|
value="option1"
|
|
label="Option 1"
|
|
/>
|
|
<Form.Switch
|
|
type="radio"
|
|
name="toggle"
|
|
value="option2"
|
|
label="Option 2"
|
|
/>
|
|
<Form.Switch
|
|
type="radio"
|
|
name="toggle"
|
|
value="option3"
|
|
label="Option 3"
|
|
/>
|
|
</Form.SwitchStack>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="Toggle switch single">
|
|
<Form.Switch
|
|
name="tandcs"
|
|
value="tandcs"
|
|
label="I agree with terms and conditions"
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.FieldSet>
|
|
<Form.Group label="Full name" isRequired>
|
|
<Form.Input name="example-text-input" />
|
|
</Form.Group>
|
|
<Form.Group label="Company" isRequired>
|
|
<Form.Input name="example-text-input" />
|
|
</Form.Group>
|
|
<Form.Group label="Email" isRequired>
|
|
<Form.Input name="example-text-input" />
|
|
</Form.Group>
|
|
<Form.Group label="Phone number" className="mb-0">
|
|
<Form.Input name="example-text-input" />
|
|
</Form.Group>
|
|
</Form.FieldSet>
|
|
</ComponentDemo>
|
|
</Grid.Col>
|
|
<Grid.Col md={6} lg={4}>
|
|
<ComponentDemo>
|
|
<Form.Group label="Radios">
|
|
<Form.Radio
|
|
name="example-radios"
|
|
label="Option 1"
|
|
value="option1"
|
|
/>
|
|
<Form.Radio
|
|
name="example-radios"
|
|
label="Option 2"
|
|
value="option2"
|
|
/>
|
|
<Form.Radio
|
|
disabled
|
|
name="example-radios"
|
|
label="Option 3 disabled"
|
|
value="option3"
|
|
/>
|
|
<Form.Radio
|
|
disabled
|
|
checked
|
|
name="example-radios2"
|
|
label="Option 4 disabled checked"
|
|
value="option4"
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Inline radios">
|
|
<Form.Radio
|
|
name="example-inline-radios"
|
|
label="Option 1"
|
|
value="option1"
|
|
isInline
|
|
/>
|
|
<Form.Radio
|
|
name="example-inline-radios"
|
|
label="Option 2"
|
|
value="option2"
|
|
isInline
|
|
/>
|
|
<Form.Radio
|
|
disabled
|
|
name="example-inline-radios"
|
|
label="Option 3 disabled"
|
|
value="option3"
|
|
isInline
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Checkboxes">
|
|
<Form.Checkbox
|
|
name="example-radios"
|
|
label="Option 1"
|
|
value="option1"
|
|
/>
|
|
<Form.Checkbox
|
|
name="example-radios"
|
|
label="Option 2"
|
|
value="option2"
|
|
/>
|
|
<Form.Checkbox
|
|
disabled
|
|
name="example-radios"
|
|
label="Option 3 disabled"
|
|
value="option3"
|
|
/>
|
|
<Form.Checkbox
|
|
disabled
|
|
checked
|
|
name="example-radios2"
|
|
label="Option 4 disabled checked"
|
|
value="option4"
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="Inline checkboxes">
|
|
<Form.Checkbox
|
|
name="example-inline-checkboxes"
|
|
label="Option 1"
|
|
value="option1"
|
|
isInline
|
|
/>
|
|
<Form.Checkbox
|
|
name="example-inline-checkboxes"
|
|
label="Option 2"
|
|
value="option2"
|
|
isInline
|
|
/>
|
|
<Form.Checkbox
|
|
disabled
|
|
name="example-inline-checkboxes"
|
|
label="Option 3 disabled"
|
|
value="option3"
|
|
isInline
|
|
/>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
<ComponentDemo>
|
|
<Form.Group label="File input">
|
|
<Form.FileInput />
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Username">
|
|
<Form.InputGroup>
|
|
<Form.InputGroupPrepend>@</Form.InputGroupPrepend>
|
|
<Form.Input placeholder="Username" />
|
|
</Form.InputGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Subdomain">
|
|
<Form.InputGroup>
|
|
<Form.Input placeholder="Your subdomain" />
|
|
<Form.InputGroupAppend>.example.com</Form.InputGroupAppend>
|
|
</Form.InputGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Your vanity URL">
|
|
<Form.InputGroup>
|
|
<Form.InputGroupPrepend>
|
|
https://example.com/users/
|
|
</Form.InputGroupPrepend>
|
|
<Form.Input />
|
|
</Form.InputGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Price">
|
|
<Form.InputGroup>
|
|
<Form.InputGroupPrepend>$</Form.InputGroupPrepend>
|
|
<Form.Input />
|
|
<Form.InputGroupAppend>.00</Form.InputGroupAppend>
|
|
</Form.InputGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Price">
|
|
<Form.InputGroup>
|
|
<Form.InputGroup prepend>
|
|
<Button color="secondary" isDropdownToggle>
|
|
Action
|
|
</Button>
|
|
<Dropdown.Menu position="right">
|
|
<Dropdown.Item>News</Dropdown.Item>
|
|
<Dropdown.Item>Messages</Dropdown.Item>
|
|
<Dropdown.ItemDivider />
|
|
<Dropdown.Item>Edit Profile</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Form.InputGroup>
|
|
<Form.Input />
|
|
</Form.InputGroup>
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
|
|
<ComponentDemo>
|
|
<Form.Group label="Date Picker">
|
|
<Form.DatePicker />
|
|
</Form.Group>
|
|
</ComponentDemo>
|
|
</Grid.Col>
|
|
<Grid.Col lg={4}>
|
|
<Card title="Input Mask">
|
|
<Card.Body>
|
|
<Form.Group label="Date">
|
|
<Form.MaskedInput
|
|
placeholder="00/00/0000"
|
|
mask={[
|
|
/\d/,
|
|
/\d/,
|
|
"/",
|
|
/\d/,
|
|
/\d/,
|
|
"/",
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
]}
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="Time">
|
|
<Form.MaskedInput
|
|
placeholder="00:00:00"
|
|
mask={[/\d/, /\d/, ":", /\d/, /\d/, ":", /\d/, /\d/]}
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="Date & Time">
|
|
<Form.MaskedInput
|
|
placeholder="00/00/0000 00:00:00"
|
|
mask={[
|
|
/\d/,
|
|
/\d/,
|
|
"/",
|
|
/\d/,
|
|
/\d/,
|
|
"/",
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
" ",
|
|
/\d/,
|
|
/\d/,
|
|
":",
|
|
/\d/,
|
|
/\d/,
|
|
":",
|
|
/\d/,
|
|
/\d/,
|
|
]}
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="Zipcode">
|
|
<Form.MaskedInput
|
|
placeholder="91210"
|
|
mask={[/\d/, /\d/, /\d/, /\d/, /\d/]}
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="Telephone">
|
|
<Form.MaskedInput
|
|
placeholder="+1 (555) 495-3947"
|
|
mask={[
|
|
"(",
|
|
/[1-9]/,
|
|
/\d/,
|
|
/\d/,
|
|
")",
|
|
" ",
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
"-",
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
]}
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="Telephone with Area Code">
|
|
<Form.MaskedInput
|
|
placeholder="+1 (555) 495-3947"
|
|
mask={[
|
|
"+",
|
|
"1",
|
|
" ",
|
|
"(",
|
|
/[1-9]/,
|
|
/\d/,
|
|
/\d/,
|
|
")",
|
|
" ",
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
"-",
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
]}
|
|
/>
|
|
</Form.Group>
|
|
<Form.Group label="IP Address">
|
|
<Form.MaskedInput
|
|
placeholder="127.0.0.1"
|
|
mask={[
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
".",
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
".",
|
|
/\d/,
|
|
/\d/,
|
|
/\d/,
|
|
]}
|
|
/>
|
|
</Form.Group>
|
|
</Card.Body>
|
|
</Card>
|
|
</Grid.Col>
|
|
</Grid.Row>
|
|
</Page.Card>
|
|
</SiteWrapper>
|
|
);
|
|
}
|
|
|
|
export default FormElements;
|