import * as React from 'react' ; import moment from 'moment' ; import { Slider } from 'antd' ; import _isArray from 'lodash/isArray' ; import _isObject from 'lodash/isObject' ; import { SliderMarks , SliderBaseProps } from 'antd/lib/slider' ; import { CSS_PREFIX } from '../../constants' ; interface DefaultProps { /**
     * Whether to allow range selection.
     */ useRange : boolean ; /**
     * The default value(s).
     */ defaultValue : string | [ string , string ] ; /**
     * The minimum value.
     */ min : string ; /**
     * The maximum value.
     */ max : string ; /**
     * Called when the value changes.
     */ onChange : ( val : string | [ string , string ] ) => void ; /**
     * The current value(s).
     */ value : string | [ string , string ] ; /**
     * The moment.js compliant format string for the slider tooltip.
     */ formatString : string ; } export interface BaseProps { /**
     * An optional CSS class which should be added.
     */ className ? : string ; /**
     * Tick mark of Slider, type of key must be TimeStamp ISOString, and must in
     * closed interval min, max，each mark can declare its own style.
     */ marks ? : SliderMarks ; } export type TimeSliderProps = BaseProps & Partial < DefaultProps > & Omit < SliderBaseProps , 'min' | 'max' | 'marks' | 'className' > ; class extends React . Component class TimeSlider extends React . Component < TimeSliderProps > { static defaultProps : DefaultProps = { useRange : false , defaultValue : moment ( ) . toISOString ( ) , min : moment ( ) . subtract ( 1 , 'hour' ) . toISOString ( ) , max : moment ( ) . toISOString ( ) , onChange : ( ) => undefined , value : moment ( ) . toISOString ( ) , formatString : 'DD.MM. HH:mm' } ; private className : string = `${ CSS_PREFIX }timeslider` ; constructs param props constructor ( props ) { super ( props ) ; this . state = this . convertTimestamps ( ) ; } return convertTimestamps ( ) { return { min : moment ( this . props . min ) . unix ( ) , max : moment ( this . props . max ) . unix ( ) , defaultValue : this . convert ( this . props . defaultValue ) } ; } param val return convert ( val ) { if ( val === undefined ) { return val as undefined ; } return _isArray ( val ) ? ( val as Array < string > ) . map ( iso => moment ( iso ) . unix ( ) ) as [ number , number ] : moment ( val ) . unix ( ) as number ; } param marks return convertMarks ( marks ) { let convertedMarks ; if ( _isObject ( marks ) ) { convertedMarks = { } ; Object . keys ( marks ) . forEach ( key => { const convertedKey = this . convert ( key ) as number ; convertedMarks [ convertedKey ] = marks [ key ] ; } ) ; } return convertedMarks ; } param unix return formatTimestamp ( unix ) { return moment ( unix * 1000 ) . format ( this . props . formatString ) ; } param value valueUpdated ( value ) { this . props . onChange ( _isArray ( value ) ? [ moment ( value [ 0 ] * 1000 ) . toISOString ( ) , moment ( value [ 1 ] * 1000 ) . toISOString ( ) ] : moment ( ( value as number ) * 1000 ) . toISOString ( ) ) ; } /**
     * The render function.
     */ render ( ) { const { className , defaultValue , formatString , min , max , value , marks , onChange , useRange , ... passThroughProps } = this . props ; const finalClassName = className ? `${ className } ${ this . className }` : this . className ; const convertedMarks = this . convertMarks ( marks ) ; let defaultVal ; let val ; if ( useRange ) { defaultVal = this . convert ( defaultValue ) as [ number , number ] ; val = this . convert ( value ) as [ number , number ] ; } else { defaultVal = this . convert ( defaultValue ) as number ; val = this . convert ( value ) as number ; } return ( < Slider className = { finalClassName } defaultValue = { defaultVal } range = { useRange } min = { moment ( min ) . unix ( ) } max = { moment ( max ) . unix ( ) } tipFormatter = { this . formatTimestamp . bind ( this ) } onChange = { this . valueUpdated . bind ( this ) } value = { val } marks = { convertedMarks } { ... passThroughProps } />); } } export default TimeSlider ;