Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
app/routes/Forms/DatePicker/DatePickerExamples.js Executable file
View File

@@ -0,0 +1,154 @@
import React from 'react';
import DatePicker, { setDefaultLocale } from 'react-datepicker';
import moment from 'moment';
import {
Container,
Row,
Card,
Col,
CardBody
} from './../../../components';
import { Example, ButtonInput, AddonInput } from './components';
import { HeaderMain } from "../../components/HeaderMain";
setDefaultLocale('en');
export class DatePickerExamples extends React.Component {
state = {
startDate: moment().toDate(),
endDate: moment().add(5, 'days').toDate()
}
render() {
return (
<Container>
<HeaderMain
title="Date Picker"
className="mb-5 mt-4"
/>
<p className="mb-4">
You’ll need to install React, PropTypes, and Moment.js separately since those dependencies
aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view.
You will also need to require the CSS file from this package (or provide your own).
The example below shows how to include the CSS from this package if your build system supports
requiring CSS files (Webpack is one that does).
</p>
<Row>
<Col lg={ 4 }>
{ /* START Card */}
<Card className="mb-3">
<CardBody>
<Example
title="Default"
no="1.01"
exampleInput={(
<DatePicker
customInput={ <ButtonInput /> }
selected={this.state.startDate}
onChange={this._handleChangeStart}
/>
)}
>
{
'<DatePicker\n' +
' selected={this.state.startDate}\n' +
' onChange={this._handleChange}\n' +
'/>'
}
</Example>
</CardBody>
</Card>
{ /* END Card */}
{ /* START Card */}
<Card className="mb-3">
<CardBody>
<Example
title="Inline"
no="1.02"
exampleInput={(
<DatePicker
inline
selected={this.state.startDate}
onChange={this._handleChangeStart}
/>
)}
>
{
'<DatePicker\n' +
' inline\n' +
' selected={this.state.startDate}\n' +
' onChange={this._handleChange}\n' +
'/>'
}
</Example>
</CardBody>
</Card>
{ /* END Card */}
</Col>
<Col lg={ 8 }>
{ /* START Card */}
<Card>
<CardBody>
<Example
title="Range"
no="1.03"
exampleInput={(
<div className="d-flex">
<DatePicker
customInput={ <AddonInput /> }
selected={this.state.startDate}
selectsStart
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={this._handleChangeStart}
/>
<DatePicker
className="ml-2"
customInput={ <AddonInput /> }
selected={this.state.endDate}
selectsEnd
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={this._handleChangeEnd}
/>
</div>
)}
>
{
'<DatePicker\n' +
' selected={this.state.startDate}\n' +
' selectsStart\n' +
' startDate={this.state.startDate}\n' +
' endDate={this.state.endDate}\n' +
' onChange={this.handleChangeStart}\n' +
'/>\n' +
'\n' +
'<DatePicker\n' +
' selected={this.state.endDate}\n' +
' selectsEnd\n' +
' startDate={this.state.startDate}\n' +
' endDate={this.state.endDate}\n' +
' onChange={this.handleChangeEnd}\n' +
'/>\n'
}
</Example>
</CardBody>
</Card>
{ /* END Card */}
</Col>
</Row>
</Container>
)
}
_handleChangeStart = (startDate) => (
this.setState({ startDate })
)
_handleChangeEnd = (endDate) => (
this.setState({ endDate })
)
}

31
app/routes/Forms/DatePicker/components/AddonInput.js Executable file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
InputGroup,
InputGroupAddon,
Input
} from './../../../../components';
// eslint-disable-next-line react/display-name
const AddonInputFR = React.forwardRef((props, ref) => (
<InputGroup className={props.className}>
<InputGroupAddon addonType="prepend">
<i className="fa fa-calendar-o"></i>
</InputGroupAddon>
<Input
onClick={ props.onClick }
onChange={ props.onChange }
value={ props.value }
ref={ ref }
/>
</InputGroup>
));
AddonInputFR.propTypes = {
onClick: PropTypes.func,
onChange: PropTypes.func,
value: PropTypes.string,
className: PropTypes.string
}
export { AddonInputFR as AddonInput };

23
app/routes/Forms/DatePicker/components/ButtonInput.js Executable file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Button
} from './../../../../components';
// eslint-disable-next-line react/display-name
const ButtonInputFR = React.forwardRef((props, ref) => (
<Button outline
onClick={props.onClick}
ref={ref}
>
<i className="fa fa-fw fa-calendar-o mr-1" />
{ props.value }
</Button>
));
ButtonInputFR.propTypes = {
onClick: PropTypes.func,
value: PropTypes.string
}
export { ButtonInputFR as ButtonInput };

50
app/routes/Forms/DatePicker/components/Example.js Executable file
View File

@@ -0,0 +1,50 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Row,
Col,
FormGroup,
Label
} from './../../../../components';
export const Example = ({ title, exampleInput, children, no }) => (
<Row>
<Col sm={ 12 }>
<h6>
{ title }
<span className="small ml-1 text-muted">
#{ no }
</span>
</h6>
</Col>
<Col md={ 12 }>
<FormGroup>
<Label>
Example
</Label>
<div>
{ exampleInput }
</div>
</FormGroup>
</Col>
<Col md={ 12 }>
<FormGroup>
<Label>
Code
</Label>
<pre>
<code>
{ children }
</code>
</pre>
</FormGroup>
</Col>
</Row>
);
Example.propTypes = {
exampleInput: PropTypes.node.isRequired,
children: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
no: PropTypes.node.isRequired
}

3
app/routes/Forms/DatePicker/components/index.js Executable file
View File

@@ -0,0 +1,3 @@
export * from './Example';
export * from './ButtonInput';
export * from './AddonInput';

3
app/routes/Forms/DatePicker/index.js Executable file
View File

@@ -0,0 +1,3 @@
import { DatePickerExamples } from './DatePickerExamples';
export default DatePickerExamples;