From 3f011033223ab5c075493223d032b696f87ccb97 Mon Sep 17 00:00:00 2001 From: skratchdot Date: Mon, 26 Oct 2015 09:30:04 -0400 Subject: [PATCH] start using window.jQuery. fixes #41 and #42. --- demo/www | 2 +- lib/index.js | 124 ++++++++++++++++++++++++++------------------------- package.json | 2 +- 3 files changed, 65 insertions(+), 63 deletions(-) diff --git a/demo/www b/demo/www index 969ecfa..8ea6064 160000 --- a/demo/www +++ b/demo/www @@ -1 +1 @@ -Subproject commit 969ecfa7909cfc2b2a012bd16a9e1424d7702d99 +Subproject commit 8ea60645bdcdfdc6c04f427d908643711e9b71cb diff --git a/lib/index.js b/lib/index.js index d4072b7..cad7a19 100644 --- a/lib/index.js +++ b/lib/index.js @@ -5,67 +5,69 @@ * A slightly modified version of bootstrap-daterangepicker.js for use in react and npm. * Original copyright in: ./node_modules/bootstrap-daterangepicker/ */ -var React = require('react'); -var $ = require('jquery'); -var DateRangePicker = require('bootstrap-daterangepicker'); -var getOptions = require('./get-options.js'); +(function (window) { + var React = require('react'); + window.jQuery = window.jQuery || require('jquery'); + var DateRangePicker = require('bootstrap-daterangepicker'); + var getOptions = require('./get-options.js'); -/* this is our export React class */ -module.exports = React.createClass({ - $picker: null, - options: getOptions(), - makeEventHandler: function (eventType) { - return function (event, picker) { - if (typeof this.props.onEvent === 'function') { - this.props.onEvent(event, picker); - } - if (typeof this.props[eventType] === 'function') { - this.props[eventType](event, picker); - } - }.bind(this); - }, - getOptionsFromProps: function () { - var options, props = this.props; - this.options.forEach(function (option) { - if (props.hasOwnProperty(option)) { - options = options || {}; - options[option] = props[option]; - } - }); - return options || {}; - }, - setOptionsFromProps: function () { - var currentOptions = this.getOptionsFromProps(); - var keys = Object.keys(currentOptions); - var $this = this; - if ($this.$picker) { - if (currentOptions) { - keys.forEach(function (key) { - $this.$picker.data('daterangepicker')[key] = currentOptions[key]; - }); + /* this is our export React class */ + module.exports = React.createClass({ + $picker: null, + options: getOptions(), + makeEventHandler: function (eventType) { + return function (event, picker) { + if (typeof this.props.onEvent === 'function') { + this.props.onEvent(event, picker); + } + if (typeof this.props[eventType] === 'function') { + this.props[eventType](event, picker); + } + }.bind(this); + }, + getOptionsFromProps: function () { + var options, props = this.props; + this.options.forEach(function (option) { + if (props.hasOwnProperty(option)) { + options = options || {}; + options[option] = props[option]; + } + }); + return options || {}; + }, + setOptionsFromProps: function () { + var currentOptions = this.getOptionsFromProps(); + var keys = Object.keys(currentOptions); + var $this = this; + if ($this.$picker) { + if (currentOptions) { + keys.forEach(function (key) { + $this.$picker.data('daterangepicker')[key] = currentOptions[key]; + }); + } } + }, + componentDidMount: function () { + var $this = this; + $this.$picker = window.jQuery(this.refs.picker); + // initialize + $this.$picker.daterangepicker(this.getOptionsFromProps()); + // attach event listeners + ['Show', 'Hide', 'ShowCalendar', 'HideCalendar', 'Apply', 'Cancel'].forEach(function (event) { + var lcase = event.toLowerCase(); + $this.$picker.on(lcase + '.daterangepicker', $this.makeEventHandler('on' + event)); + }); + }, + componentWillUnmount: function () { + this.$picker.data('daterangepicker').remove(); + }, + render: function () { + this.setOptionsFromProps(); + return React.createElement( + 'div', + React.__spread({ref: 'picker'}, this.props), + this.props.children + ); } - }, - componentDidMount: function () { - var $this = this; - $this.$picker = $(this.refs.picker); - // initialize - $this.$picker.daterangepicker(this.getOptionsFromProps()); - // attach event listeners - ['Show', 'Hide', 'ShowCalendar', 'HideCalendar', 'Apply', 'Cancel'].forEach(function (event) { - var lcase = event.toLowerCase(); - $this.$picker.on(lcase + '.daterangepicker', $this.makeEventHandler('on' + event)); - }); - }, - componentWillUnmount: function () { - this.$picker.data('daterangepicker').remove(); - }, - render: function () { - this.setOptionsFromProps(); - return React.createElement( - 'div', - React.__spread({ref: 'picker'}, this.props), - this.props.children - ); - } -}); + }); +}(window || {})); diff --git a/package.json b/package.json index cbce1ac..c61304b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-bootstrap-daterangepicker", - "version": "1.0.2", + "version": "1.0.3", "description": "A date/time picker for react (using bootstrap). This is a react port of: https://github.com/dangrossman/bootstrap-daterangepicker", "main": "./lib/index.js", "scripts": {