valitydev/redash
14
0
Fork 0
mirror of https://github.com/valitydev/redash.git synced 2024-11-07 01:25:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Focus DatePicker after selecting dynamic values (#4033)

Browse Source
This commit is contained in:
Gabriel Dutra 2019-08-04 22:24:33 -03:00 committed by GitHub
parent f0576a3623
commit 6fc4d5b551
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/app/components/DateInput.jsx
View File

@ -1,17 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
import { Moment } from '@/components/proptypes';
export function DateInput({
const DateInput = React.forwardRef(({
defaultValue,
value,
onSelect,
className,
...props
}) {
}, ref) => {
const format = clientConfig.dateFormat || 'YYYY-MM-DD';
const additionalAttributes = {};
if (defaultValue && defaultValue.isValid()) {
@ -22,6 +21,7 @@ export function DateInput({
}
return (
<DatePicker
ref={ref}
className={className}
{...additionalAttributes}
format={format}
@ -30,7 +30,7 @@ export function DateInput({
{...props}
/>
);
}
});
DateInput.propTypes = {
defaultValue: Moment,
@ -46,8 +46,4 @@ DateInput.defaultProps = {
className: '',
};
export default function init(ngModule) {
ngModule.component('dateInput', react2angular(DateInput));
}
init.init = true;
export default DateInput;

14
client/app/components/DateRangeInput.jsx
View File

@ -1,20 +1,19 @@
import { isArray } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
import { Moment } from '@/components/proptypes';
const { RangePicker } = DatePicker;
export function DateRangeInput({
const DateRangeInput = React.forwardRef(({
defaultValue,
value,
onSelect,
className,
...props
}) {
}, ref) => {
const format = clientConfig.dateFormat || 'YYYY-MM-DD';
const additionalAttributes = {};
if (isArray(defaultValue) && defaultValue[0].isValid() && defaultValue[1].isValid()) {
@ -25,6 +24,7 @@ export function DateRangeInput({
}
return (
<RangePicker
ref={ref}
className={className}
{...additionalAttributes}
format={format}
@ -32,7 +32,7 @@ export function DateRangeInput({
{...props}
/>
);
}
});
DateRangeInput.propTypes = {
defaultValue: PropTypes.arrayOf(Moment),
@ -48,8 +48,4 @@ DateRangeInput.defaultProps = {
className: '',
};
export default function init(ngModule) {
ngModule.component('dateRangeInput', react2angular(DateRangeInput));
}
init.init = true;
export default DateRangeInput;

14
client/app/components/DateTimeInput.jsx
View File

@ -1,18 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
import { Moment } from '@/components/proptypes';
export function DateTimeInput({
const DateTimeInput = React.forwardRef(({
defaultValue,
value,
withSeconds,
onSelect,
className,
...props
}) {
}, ref) => {
const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
(withSeconds ? ' HH:mm:ss' : ' HH:mm');
const additionalAttributes = {};
@ -24,6 +23,7 @@ export function DateTimeInput({
}
return (
<DatePicker
ref={ref}
className={className}
showTime
{...additionalAttributes}
@ -33,7 +33,7 @@ export function DateTimeInput({
{...props}
/>
);
}
});
DateTimeInput.propTypes = {
defaultValue: Moment,
@ -51,8 +51,4 @@ DateTimeInput.defaultProps = {
className: '',
};
export default function init(ngModule) {
ngModule.component('dateTimeInput', react2angular(DateTimeInput));
}
init.init = true;
export default DateTimeInput;

14
client/app/components/DateTimeRangeInput.jsx
View File

@ -1,21 +1,20 @@
import { isArray } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import DatePicker from 'antd/lib/date-picker';
import { clientConfig } from '@/services/auth';
import { Moment } from '@/components/proptypes';
const { RangePicker } = DatePicker;
export function DateTimeRangeInput({
const DateTimeRangeInput = React.forwardRef(({
defaultValue,
value,
withSeconds,
onSelect,
className,
...props
}) {
}, ref) => {
const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
(withSeconds ? ' HH:mm:ss' : ' HH:mm');
const additionalAttributes = {};
@ -27,6 +26,7 @@ export function DateTimeRangeInput({
}
return (
<RangePicker
ref={ref}
className={className}
showTime
{...additionalAttributes}
@ -35,7 +35,7 @@ export function DateTimeRangeInput({
{...props}
/>
);
}
});
DateTimeRangeInput.propTypes = {
defaultValue: PropTypes.arrayOf(Moment),
@ -53,8 +53,4 @@ DateTimeRangeInput.defaultProps = {
className: '',
};
export default function init(ngModule) {
ngModule.component('dateTimeRangeInput', react2angular(DateTimeRangeInput));
}
init.init = true;
export default DateTimeRangeInput;

12
client/app/components/dynamic-parameters/DateParameter.jsx
View File

@ -4,8 +4,8 @@ import classNames from 'classnames';
import moment from 'moment';
import { includes } from 'lodash';
import { isDynamicDate, getDynamicDate } from '@/services/query';
import { DateInput } from '@/components/DateInput';
import { DateTimeInput } from '@/components/DateTimeInput';
import DateInput from '@/components/DateInput';
import DateTimeInput from '@/components/DateTimeInput';
import DynamicButton from '@/components/dynamic-parameters/DynamicButton';
import './DynamicParameters.less';
@ -36,6 +36,11 @@ class DateParameter extends React.Component {
onSelect: () => {},
};
constructor(props) {
super(props);
this.dateComponentRef = React.createRef();
}
onDynamicValueSelect = (dynamicValue) => {
const { onSelect, parameter } = this.props;
if (dynamicValue === 'static') {
@ -48,6 +53,8 @@ class DateParameter extends React.Component {
} else {
onSelect(dynamicValue.value);
}
// give focus to the DatePicker to get keyboard shortcuts to work
this.dateComponentRef.current.focus();
};
render() {
@ -77,6 +84,7 @@ class DateParameter extends React.Component {
return (
<DateComponent
ref={this.dateComponentRef}
className={classNames('redash-datepicker', { 'dynamic-value': hasDynamicValue }, className)}
onSelect={onSelect}
suffixIcon={(

12
client/app/components/dynamic-parameters/DateRangeParameter.jsx
View File

@ -4,8 +4,8 @@ import classNames from 'classnames';
import moment from 'moment';
import { includes, isArray, isObject } from 'lodash';
import { isDynamicDateRange, getDynamicDateRange } from '@/services/query';
import { DateRangeInput } from '@/components/DateRangeInput';
import { DateTimeRangeInput } from '@/components/DateTimeRangeInput';
import DateRangeInput from '@/components/DateRangeInput';
import DateTimeRangeInput from '@/components/DateTimeRangeInput';
import DynamicButton from '@/components/dynamic-parameters/DynamicButton';
import './DynamicParameters.less';
@ -65,6 +65,11 @@ class DateRangeParameter extends React.Component {
onSelect: () => {},
};
constructor(props) {
super(props);
this.dateRangeComponentRef = React.createRef();
}
onDynamicValueSelect = (dynamicValue) => {
const { onSelect, parameter } = this.props;
if (dynamicValue === 'static') {
@ -77,6 +82,8 @@ class DateRangeParameter extends React.Component {
} else {
onSelect(dynamicValue.value);
}
// give focus to the DatePicker to get keyboard shortcuts to work
this.dateRangeComponentRef.current.focus();
};
render() {
@ -107,6 +114,7 @@ class DateRangeParameter extends React.Component {
return (
<DateRangeComponent
ref={this.dateRangeComponentRef}
className={classNames('redash-datepicker date-range-input', { 'dynamic-value': hasDynamicValue }, className)}
onSelect={onSelect}
style={{ width: hasDynamicValue ? 195 : widthByType[type] }}