ldx-widgets

React = require 'react' PropTypes = require 'prop-types' createClass = require 'create-react-class' _ = require 'lodash' moment = require 'moment' DatePicker = React.createFactory(require '../date_picker') SelectInput2 = React.createFactory(require '../select_input_2') {div, label, span} = React.DOM ###& @general - This component passes all props forward to datepicker, see datepicker component for it's props. @props.formLabel - OPTIONAL - [string] The value of the label that will display to the left of the input @props.className - OPTIONAL - [string] - default 'grid grid-pad' optional class to be added the main div @props.labelColumnClass - OPTIONAL - [string] optional class that will be added to the label column @props.inputColumnClass - OPTIONAL - [string] optional class that will be added to the input column @props.isFieldRequired - OPTIONAL - [boolean] optional boolean that will display the red asterisk if true @props.fullRow - OPTIONAL - [boolean] optional boolean that will determine whether to display the input in a full row with or without a label @props.enableTime - OPTIONAL - [boolean] includes the time picker @props.children - OPTIONAL - [array] optional array of children &### GridFormDatePicker = createClass displayName: 'GridFormDatePicker' propTypes: formLabel: PropTypes.string className: PropTypes.string labelColumnClass: PropTypes.string inputColumnClass: PropTypes.string isFieldRequired: PropTypes.bool fullRow: PropTypes.bool enableTime: PropTypes.bool twentyFourHour: PropTypes.bool selected: PropTypes.object minutes: PropTypes.array AmPm: PropTypes.array isInPopover: PropTypes.bool disabled: PropTypes.bool onChange: PropTypes.func timeColumns: PropTypes.number returnDateString: PropTypes.string getDefaultProps: -> labelColumnClass: 'col-3-12' inputColumnClass: 'col-9-12' className: 'grid grid-pad' isFieldRequired: no fullRow: yes enableTime: no twentyFourHour: no minutes: [0,15,30,45] AmPm: ['am', 'pm'] isInPopover: no disabled: no timeColumns: 2 render: -> {formLabel, className, labelColumnClass, inputColumnClass, inputTextClass, isFieldRequired, selected, fullRow, enableTime, twentyFourHour, tabId, children, isInPopover, tabIndex, disabled, onChange} = @props if formLabel? labelClass = 'form-label' if isFieldRequired then labelClass += ' is-required' labelField = div { key: 'label' className: labelColumnClass }, label {className: labelClass}, formLabel # we do not want to pass the className down as it will mess up the styles inputProps = _.omit(_.assign({}, @props, {ref: 'input'}), ['className']) input = DatePicker inputProps if enableTime classes = @getCellClasses(inputColumnClass) {hour, minute, ampm} = @parseTime(selected) inputCell = [ div { key: 'picker' className: classes[0] }, input div { key: 'time1' className: classes[1] }, [ SelectInput2 { ref: 'hour' key: 'hour' tabId: tabId wrapperClass: 'hour' value: hour or '' options: do @getHourOptions onChange: onChange disabled: disabled isInPopover: isInPopover tabIndex: tabIndex } span { key: 'divide' className: 'time-divide' }, ':' SelectInput2 { ref: 'minute' key: 'minute' wrapperClass: 'minutes' tabId: tabId value: minute or '' options: do @getMinuteOptions onChange: onChange disabled: disabled isInPopover: isInPopover tabIndex: tabIndex } SelectInput2 { ref: 'ampm' key: 'ampm' wrapperClass: 'ampm' tabId: tabId value: ampm or '' options: do @getAmPmOptions onChange: onChange disabled: disabled isInPopover: isInPopover tabIndex: tabIndex } unless twentyFourHour ] ] else inputCell = div { key: 'input' className: inputColumnClass }, input # This is a full row of a form with a label if fullRow and formLabel? content = [ labelField inputCell ].concat children div { className: className }, content # This is a full row w/ out a label else if fullRow content = [ inputCell ].concat children div { className: className }, content # This is a single cell within a row else inputCell getValue: -> {enableTime, returnDateString, twentyFourHour} = @props timestamp = @refs.input.getValue() return timestamp unless enableTime minute = @refs.minute.getValue() hour = @refs.hour.getValue() ampm = @refs.ampm?.getValue() or '' # When returnDateString is passed the datepicker will return a string instead of a moment object # in this case momentize it before extracting the time if returnDateString? date = moment(timestamp, returnDateString).format('YYYYMMDD') rv = moment("#{date}#{hour}#{minute}#{ampm}", if twentyFourHour then 'YYYYMMDDHHmm' else 'YYYYMMDDhmma') rv.format(returnDateString) else date = timestamp.format('YYYYMMDD') moment("#{date}#{hour}#{minute}#{ampm}", if twentyFourHour then 'YYYYMMDDHHmm' else 'YYYYMMDDhmma') parseTime: (timestamp) -> return {} unless timestamp? {twentyFourHour, returnDateString} = @props # When returnDateString is passed the datepicker will return a string instead of a moment object # in this case momentize it before extracting the time timestamp = if returnDateString? then moment(timestamp, returnDateString) else timestamp { hour: timestamp.format(if twentyFourHour then 'HH' else 'h') minute: timestamp.format('mm') ampm: timestamp.format('a') } getHourOptions: -> {twentyFourHour} = @props if not twentyFourHour hourOptions = [{ label: '12' value: '12' }] hourOptions.push( label: hour value: hour ) for hour in [1..11] hourOptions else { label: if hour < 10 then "0#{hour}" else hour value: if hour < 10 then "0#{hour}" else hour } for hour in [0..23] getMinuteOptions: -> {minutes} = @props { label: if minute < 10 then "0#{minute}" else minute value: if minute < 10 then "0#{minute}" else minute } for minute in minutes getAmPmOptions: -> {AmPm} = @props { label: opt value: opt } for opt in AmPm getCellClasses: (inputColumnClass) -> {timeColumns} = @props classSplit = inputColumnClass.split('-') dateCol = classSplit[1] colCount = classSplit[2] [ "col-#{dateCol - timeColumns}-#{colCount}" "col-#{timeColumns}-#{colCount}" ] module.exports = GridFormDatePicker