@eeacms/react-chart-editor/lib/components/widgets/DateTimePicker.js

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;require("react-day-picker/lib/style.css");var _plotlyIcons=require("plotly-icons");var _dates=require("plotly.js/src/lib/dates");var _reactDayPicker=_interopRequireDefault(require("react-day-picker"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _TextInput=_interopRequireDefault(require("./TextInput"));var _Dropdown=_interopRequireDefault(require("./Dropdown"));var _constants=require("../../lib/constants");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}(function(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};const testDate="2000-01-01";const testTime="00:00";const datePlaceholder="yyyy-mm-dd";const timePlaceholder="hh:mm:ss.xxx";class DateTimePicker extends _react.Component{constructor(props,context){super(props,context);const{time,date}=this.parsePlotlyJSDateTime(props.value);const isValidTime=(0,_dates.isDateTime)(testDate+" "+time)||["",timePlaceholder,_constants.MULTI_VALUED_PLACEHOLDER].includes(time);const isValidDate=(0,_dates.isDateTime)(date+" "+testTime)||["",datePlaceholder,_constants.MULTI_VALUED_PLACEHOLDER].includes(date);this.state={calendarOpen:false,dateInputClassName:isValidDate?"datetimepicker-container-date-input":"datetimepicker-container-date-input +error",timeInputClassName:isValidTime?"datetimepicker-container-time-input":"datetimepicker-container-time-input +error",timeValue:time,dateValue:date,AMPM:this.getAMPM(date,time,context.localize)};this.toPlotlyJSDate=this.toPlotlyJSDate.bind(this);this.onMonthChange=this.onMonthChange.bind(this);this.onYearChange=this.onYearChange.bind(this);this.onTimeChange=this.onTimeChange.bind(this);this.onDateChange=this.onDateChange.bind(this);this.onTimeUpdate=this.onTimeUpdate.bind(this);this.onDateUpdate=this.onDateUpdate.bind(this)}toPlotlyJSDate(value){const ms=(0,_dates.dateTime2ms)(value);return(0,_dates.ms2DateTime)(ms)}getYearOptions(current){const base=5;const yearAsNumber=parseInt(current,10);const lastFive=new Array(base).fill(0).map((year,index)=>{const newOption=yearAsNumber-(base-index);return{label:newOption,value:newOption}});const nextFive=new Array(base).fill(0).map((year,index)=>{const newOption=yearAsNumber+(index+1);return{label:newOption,value:newOption}});return lastFive.concat([{label:current,value:current}]).concat(nextFive)}getMonthOptions(){const _=this.context.localize;return[{label:_("January"),value:0},{label:_("February"),value:1},{label:_("March"),value:2},{label:_("April"),value:3},{label:_("May"),value:4},{label:_("June"),value:5},{label:_("July"),value:6},{label:_("August"),value:7},{label:_("September"),value:8},{label:_("October"),value:9},{label:_("November"),value:10},{label:_("December"),value:11}]}onMonthChange(value){const currentDateInJS=new Date(this.getAdjustedPlotlyJSDateTime(this.props.value));currentDateInJS.setMonth(value);const plotlyJSDate=this.toPlotlyJSDate(currentDateInJS);if((0,_dates.isDateTime)(plotlyJSDate)){this.props.onChange(plotlyJSDate)}const{time,date}=this.parsePlotlyJSDateTime(plotlyJSDate);this.setState({timeValue:time,dateValue:date})}onYearChange(value){const currentDateInJS=new Date(this.getAdjustedPlotlyJSDateTime(this.props.value));currentDateInJS.setFullYear(value);const plotlyJSDate=this.toPlotlyJSDate(currentDateInJS);if((0,_dates.isDateTime)(plotlyJSDate)){this.props.onChange(plotlyJSDate)}const{time,date}=this.parsePlotlyJSDateTime(plotlyJSDate);this.setState({timeValue:time,dateValue:date})}parsePlotlyJSDateTime(value){const parsed=value.split(" ");return{date:parsed[0],time:parsed[1]?parsed[1]:""}}getAMPM(date,time,_){const plotlyJSDateTime=date+" "+time;const isValidDateTime=(0,_dates.isDateTime)(plotlyJSDateTime);const JSDate=new Date(this.getAdjustedPlotlyJSDateTime(plotlyJSDateTime));const localeTime=JSDate.toLocaleTimeString("en-US").split(" ");const parsedTime=time.split(":").reduce((timeArray,timePart)=>{const parsed=timePart.split(".");return timeArray.concat(parsed)},[]);const isNoon=parsedTime[0]==="12"&&parsedTime.slice(1).every(part=>parseInt(part,10)===0);return!isValidDateTime||time===""||JSDate.toDateString()==="Invalid Date"?"":localeTime[1]==="PM"?isNoon?_("noon"):"PM":"AM"}adjustedTime(time){if(time.toString().length<=2){return time+":00"}return time}onTimeChange(value){const{date:currentDate}=this.parsePlotlyJSDateTime(this.props.value);const isValidTime=(0,_dates.isDateTime)(testDate+" "+value);this.setState({timeInputClassName:isValidTime||value===""?"datetimepicker-container-time-input":"datetimepicker-container-time-input +error",timeValue:value,AMPM:this.getAMPM(currentDate,value,this.context.localize)})}onDateChange(value){const isValidDate=(0,_dates.isDateTime)(value+" "+testTime);this.setState({dateInputClassName:isValidDate||value===""?"datetimepicker-container-date-input":"datetimepicker-container-date-input +error",dateValue:value})}onTimeUpdate(value){const{time:currentTime,date:currentDate}=this.parsePlotlyJSDateTime(this.props.value);const isValidTime=(0,_dates.isDateTime)(testDate+" "+value);if(value===""){this.setState({timeInputClassName:"datetimepicker-container-time-input",timeValue:currentTime,AMPM:this.getAMPM(currentDate,currentTime,this.context.localize)});return}if(isValidTime){this.props.onChange(currentDate+" "+value)}}onDateUpdate(value){const{date:currentDate,time:currentTime}=this.parsePlotlyJSDateTime(this.props.value);const isValidDate=(0,_dates.isDateTime)(value+" "+testTime);if(isValidDate){this.props.onChange(value+" "+currentTime);return}if(value===""){this.setState({dateValue:currentDate,dateInputClassName:"datetimepicker-container-date-input"});return}}getAdjustedPlotlyJSDateTime(dateTimeString){const{date,time}=this.parsePlotlyJSDateTime(dateTimeString);return date+" "+this.adjustedTime(time)}render(){const JSDate=new Date(this.getAdjustedPlotlyJSDateTime(this.state.dateValue+" "+testTime));const isValidJSDate=JSDate.toDateString()!=="Invalid Date";const currentYear=isValidJSDate?JSDate.getFullYear():new Date().getFullYear();const currentMonth=isValidJSDate?JSDate.getMonth():new Date().getMonth();return _react.default.createElement("div",{className:"datetimepicker-container"},_react.default.createElement(_TextInput.default,{value:this.state.dateValue,editableClassName:this.state.dateInputClassName,onChange:this.onDateChange,onUpdate:this.onDateUpdate,placeholder:datePlaceholder}),_react.default.createElement("div",{className:"datetimepicker-container-icons"},_react.default.createElement(_plotlyIcons.CalendarMultiselectIcon,{onClick:()=>this.setState({calendarOpen:!this.state.calendarOpen}),className:this.state.calendarOpen?"datetimepicker-date-icon--selected":"datetimepicker-date-icon"})),this.state.calendarOpen?_react.default.createElement("div",{className:"datetimepicker-container__content"},this.state.calendarOpen?_react.default.createElement("div",{className:"datetimepicker-datepicker-container"},_react.default.createElement("div",{className:"datetimepicker-datepicker-navbar"},_react.default.createElement(_Dropdown.default,{options:this.getMonthOptions(),value:currentMonth,className:"datimepicker-monthpicker",clearable:false,onChange:this.onMonthChange}),_react.default.createElement(_Dropdown.default,{options:this.getYearOptions(currentYear),value:currentYear,className:"datimepicker-yearpicker",clearable:false,onChange:this.onYearChange})),_react.default.createElement(_reactDayPicker.default,{className:"datepicker-container-rce",modifiers:{highlighted:isValidJSDate?JSDate:""},month:isValidJSDate?JSDate:new Date,onDayClick:value=>{const plotlyDate=this.toPlotlyJSDate(value).split(" ")[0];this.onDateChange(plotlyDate);this.onDateUpdate(plotlyDate)}})):null):null,_react.default.createElement("div",{className:"datetimepicker-container-time"},_react.default.createElement(_TextInput.default,{value:this.state.timeValue,onChange:this.onTimeChange,onUpdate:this.onTimeUpdate,placeholder:timePlaceholder,editableClassName:this.state.timeInputClassName}),_react.default.createElement("span",{className:"datetimepicker-date-units"},this.state.AMPM)))}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}exports.default=DateTimePicker;DateTimePicker.propTypes={value:_propTypes.default.string.isRequired,onChange:_propTypes.default.func.isRequired};DateTimePicker.contextTypes={localize:_propTypes.default.func};;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(testDate,"testDate","/react-chart-editor/src/components/widgets/DateTimePicker.js");reactHotLoader.register(testTime,"testTime","/react-chart-editor/src/components/widgets/DateTimePicker.js");reactHotLoader.register(datePlaceholder,"datePlaceholder","/react-chart-editor/src/components/widgets/DateTimePicker.js");reactHotLoader.register(timePlaceholder,"timePlaceholder","/react-chart-editor/src/components/widgets/DateTimePicker.js");reactHotLoader.register(DateTimePicker,"DateTimePicker","/react-chart-editor/src/components/widgets/DateTimePicker.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=DateTimePicker.js.map