senaduka/old-psihologija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve date picker, allow inline button

Browse Source
This commit is contained in:
Bilal Catic
2019-06-20 14:11:39 +02:00
parent edbe1f1e59
commit 6aabe0f3fc
2 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/DateRangePicker/index.js
View File

@@ -73,17 +73,25 @@ class DateRangePicker extends Component {
render() { render() {
const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state; const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state;
const { inlineButton } = this.props;
const buttonLabel = this.props.buttonLabel || 'Save'; const buttonLabel = this.props.buttonLabel || 'Save';
const startDateValue = startDate.format(defaultDateFormat); const startDateValue = startDate.format(defaultDateFormat);
const endDateValue = endDate.format(defaultDateFormat); const endDateValue = endDate.format(defaultDateFormat);
const buttonRender = (
<Grid.Column width={inlineButton ? 1 : null}>
{ inlineButton && <label>{'\u00A0'}</label> }
<Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
</Grid.Column>
);
return ( return (
<Form> <Form>
<Grid columns="equal"> <Grid stackable columns={inlineButton ? null : 'equals'}>
<Grid.Row> <Grid.Row>
<Grid.Column> <Grid.Column width={inlineButton ? 7 : null}>
<label>{startDateLabel}</label> <label>{startDateLabel}</label>
<Form.Input <Form.Input
fluid fluid
@@ -93,7 +101,7 @@ class DateRangePicker extends Component {
onChange={this.onStartDateChange.bind(this)} onChange={this.onStartDateChange.bind(this)}
/> />
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column width={inlineButton ? 6 : null}>
<label>{endDateLabel}</label> <label>{endDateLabel}</label>
<Form.Input <Form.Input
fluid fluid
@@ -103,6 +111,9 @@ class DateRangePicker extends Component {
onChange={this.onEndDateChange.bind(this)} onChange={this.onEndDateChange.bind(this)}
/> />
</Grid.Column> </Grid.Column>
{
inlineButton && buttonRender
}
</Grid.Row> </Grid.Row>
{ error && { error &&
<Grid.Row> <Grid.Row>
@@ -114,11 +125,12 @@ class DateRangePicker extends Component {
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
} }
<Grid.Row> {
<Grid.Column> !inlineButton &&
<Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button> <Grid.Row>
</Grid.Column> {buttonRender}
</Grid.Row> </Grid.Row>
}
</Grid> </Grid>
</Form> </Form>
); );

2
client/src/scenes/PracticeSummaryReport/index.js
View File

@@ -52,7 +52,7 @@ class PracticeSummaryReport extends Component {
<MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} /> <MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} />
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column>
<DateRangePicker onDatesUpdate={this.onDateRangeUpdate.bind(this)}/> <DateRangePicker inlineButton={true} onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
<Grid.Row> <Grid.Row>