GabeLoins commented on a change in pull request #4981: Make time filter more usable URL: https://github.com/apache/incubator-superset/pull/4981#discussion_r188093834
########## File path: superset/assets/src/explore/components/controls/DateFilterControl.jsx ########## @@ -28,172 +51,265 @@ const propTypes = { const defaultProps = { animation: true, onChange: () => {}, - value: '', + value: 'Last week', }; + export default class DateFilterControl extends React.Component { constructor(props) { super(props); - const value = props.value || ''; + const value = props.value || defaultProps.value; this.state = { + type: TYPES[0], + + // for range num: '7', - grain: 'days', - rel: 'ago', - dttm: '', - type: 'free', - free: '', + grain: TIME_GRAIN_OPTIONS[3], + rel: RELATIVE_TIME_OPTIONS[0], + common: COMMON_TIME_FRAMES[0], + + // for start:end(includes freeform) + since: DEFAULT_SINCE, + until: DEFAULT_UNTIL, + isFreeform: {}, }; - const words = value.split(' '); - if (words.length >= 3 && RELATIVE_TIME_OPTIONS.indexOf(words[2]) >= 0) { - this.state.num = words[0]; - this.state.grain = words[1]; - this.state.rel = words[2]; - this.state.type = 'rel'; - } else if (moment(value).isValid()) { - this.state.dttm = value; - this.state.type = 'fix'; + if (value.indexOf(SEPARATOR) >= 0) { + this.state.type = 'startend'; + [this.state.since, this.state.until] = value.split(SEPARATOR, 2); } else { - this.state.free = value; - this.state.type = 'free'; + this.state.type = 'range'; + if (COMMON_TIME_FRAMES.indexOf(value) >= 0) { + this.state.common = value; + } else { + this.state.common = null; + [this.state.rel, this.state.num, this.state.grain] = value.split(' ', 3); + } } + this.state.isFreeform.since = !moment(this.state.since, MOMENT_FORMAT).isValid(); + this.state.isFreeform.until = !moment(this.state.until, MOMENT_FORMAT).isValid(); + + // We need direct access to the state of the `DateTimeField` component + this.dateTimeFieldRefs = {}; } - onControlChange(target, opt) { - this.setState({ [target]: opt.value }); - } - onNumberChange(event) { - this.setState({ num: event.target.value }); + onEnter(event) { + if (event.key === 'Enter') { + this.close(); + } } - onFreeChange(event) { - this.setState({ free: event.target.value }); + setStartEnd(key, value) { + const nextState = { + type: 'startend', + isFreeform: { ...this.state.isFreeform }, + }; + if (value === INVALID_DATE_MESSAGE) { + // the DateTimeField component will return `Invalid date` for freeform + // text, so we need to cheat and steal the value from the state + const freeformValue = this.dateTimeFieldRefs[key].state.inputValue; + nextState.isFreeform[key] = true; + nextState[key] = freeformValue; + } else { + nextState.isFreeform[key] = false; + nextState[key] = value; + } + this.setState(nextState, this.updateRefs); } - setType(type) { - this.setState({ type }); + setCommonRange(timeFrame) { + const nextState = { + type: 'range', + common: timeFrame, + until: moment().startOf('day').format(MOMENT_FORMAT), + }; + let units; + if (timeFrame === 'Yesterday') { + units = 'days'; + } else { + units = timeFrame.split(' ')[1] + 's'; + } + nextState.since = moment().startOf('day').subtract(1, units).format(MOMENT_FORMAT); + this.setState(nextState, this.updateRefs); } - setValueAndClose(val) { - this.setState({ type: 'free', free: val }, this.close); + setCustomRange(key, value) { + const nextState = { ...this.state, type: 'range', common: null }; + if (key !== undefined && value !== undefined) { + nextState[key] = value; + } + if (nextState.rel === 'Last') { + nextState.until = moment().startOf('day').format(MOMENT_FORMAT); + nextState.since = moment() + .startOf('day') + .subtract(nextState.num, nextState.grain) + .format(MOMENT_FORMAT); + } else { + nextState.until = moment() + .startOf('day') + .add(nextState.num, nextState.grain) + .format(MOMENT_FORMAT); + nextState.since = moment().startOf('day').format(MOMENT_FORMAT); + } + this.setState(nextState, this.updateRefs); } - setDatetime(dttm) { - this.setState({ dttm: dttm.format().substring(0, 19) }); + updateRefs() { Review comment: this seems like it adds quite a bit of indirection. Would it be possible just to pass `value` as a prop to these components rather than setting their state via a ref? https://github.com/YouCanBookMe/react-datetime#api ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org