release v2.6.0

jquense · Apr 27, 2015 · 82522d9 · 82522d9
1 parent 030c94b
commit 82522d9
Show file tree

Hide file tree

Showing 18 changed files with 133 additions and 72 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "react-widgets",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "main": "dist/react-widgets.js",
   "description": "A set of input widgets for React",
   "homepage": "http://jquense.github.io/react-widgets/docs",

diff --git a/dist/css/react-widgets.css b/dist/css/react-widgets.css
@@ -120,6 +120,7 @@ input.rw-input::-moz-focus-inner {
   height: 2.286em;
   line-height: 2.286em;
   padding: 0.429em 0.857em;
+  background-color: #ffffff;
 }
 .rw-input[disabled] {
   -webkit-box-shadow: none;

diff --git a/dist/react-widgets.js b/dist/react-widgets.js
diff --git a/docs/public/docs.css b/docs/public/docs.css
diff --git a/docs/public/docs.js b/docs/public/docs.js
diff --git a/lib/Combobox.js b/lib/Combobox.js
@@ -91,8 +91,8 @@ var ComboBox = React.createClass({
     };
   },
 
-  componentDidMount: function () {
-    validateList(this.refs.list);
+  componentDidUpdate: function () {
+    this.refs.list && validateList(this.refs.list);
   },
 
   shouldComponentUpdate: function (nextProps, nextState) {
@@ -133,6 +133,7 @@ var ComboBox = React.createClass({
     var listID = this._id("_listbox");
     var optID = this._id("_option");
     var dropUp = this.props.dropUp;
+    var renderList = _.isFirstFocusedRender(this) || this.props.open;
     var List = this.props.listComponent || this.props.groupBy && GroupableList || PlainList;
     var completeType = this.props.suggest ? this.props.filter ? "both" : "inline" : this.props.filter ? "list" : "";
 
@@ -199,7 +200,7 @@ var ComboBox = React.createClass({
         React.createElement(
           "div",
           null,
-          React.createElement(List, babelHelpers._extends({ ref: "list"
+          renderList && React.createElement(List, babelHelpers._extends({ ref: "list"
           }, _.pick(this.props, Object.keys(compat.type(List).propTypes)), {
             id: listID,
             optID: optID,

diff --git a/lib/ComboboxInput.js b/lib/ComboboxInput.js
@@ -5,7 +5,8 @@ var React = require("react"),
     compat = require("./util/compat");
 
 module.exports = React.createClass({
-  displayName: "exports",
+
+  displayName: "ComboboxInput",
 
   propTypes: {
     value: React.PropTypes.string,

diff --git a/lib/DateTimePicker.js b/lib/DateTimePicker.js
@@ -114,6 +114,7 @@ var DateTimePicker = React.createClass({
     var timeOptID = this._id("_time_option");
     var dateListID = this._id("_cal");
     var dropUp = this.props.dropUp;
+    var renderPopup = _.isFirstFocusedRender(this) || this.props.open;
     var value = dateOrNull(this.props.value);
     var owns;
 
@@ -211,7 +212,7 @@ var DateTimePicker = React.createClass({
         React.createElement(
           "div",
           null,
-          React.createElement(Time, { ref: "timePopup",
+          renderPopup && React.createElement(Time, { ref: "timePopup",
             id: timeListID,
             optID: timeOptID,
             "aria-hidden": !this.props.open,
@@ -234,7 +235,7 @@ var DateTimePicker = React.createClass({
           open: this.props.open === popups.CALENDAR,
           duration: this.props.duration,
           onRequestClose: this.close },
-        React.createElement(Calendar, babelHelpers._extends({}, calProps, {
+        renderPopup && React.createElement(Calendar, babelHelpers._extends({}, calProps, {
           ref: "calPopup",
           tabIndex: "-1",
           id: dateListID,
@@ -324,15 +325,19 @@ var DateTimePicker = React.createClass({
 
   _parse: function (string) {
     var format = getFormat(this.props, true),
+        editFormat = this.props.editFormat,
+        parse = this.props.parse,
         formats = [];
 
-    if (typeof this.props.parse === "function") return this.props.parse(string, this.props.culture);
+    if (typeof parse === "function") return parse(string, this.props.culture);
 
-    if (typeof format !== "function") formats.push(format);
+    if (typeof format === "string") formats.push(format);
 
-    if (this.props.parse) formats = formats.concat(this.props.parse);
+    if (typeof editFormat === "string") formats.push(editFormat);
 
-    invariant(formats.length, "React Widgets: there are no specified `parse` formats provided and the `format` prop is a function. " + "the DateTimePicker is unable to parse `%s` into a dateTime, " + "please provide either a parse function or Globalize.js compatible string format", string);
+    if (parse) formats = formats.concat(this.props.parse);
+
+    invariant(formats.length, "React Widgets: there are no specified `parse` formats provided and the `format` prop is a function. " + "the DateTimePicker is unable to parse `%s` into a dateTime, " + "please provide either a parse function or Globalize.js compatible string for `format`", string);
 
     return formatsParser(formats, this.props.culture, string);
   },

diff --git a/lib/DropdownList.js b/lib/DropdownList.js
@@ -87,8 +87,8 @@ var DropdownList = React.createClass({
       focusedItem: data[initialIdx] || data[0] };
   },
 
-  componentDidMount: function () {
-    validateList(this.refs.list);
+  componentDidUpdate: function () {
+    this.refs.list && validateList(this.refs.list);
   },
 
   componentWillReceiveProps: function (props) {
@@ -115,6 +115,7 @@ var DropdownList = React.createClass({
     var valueItem = this._dataItem(data, this.props.value);
     var optID = this._id("_option");
     var dropUp = this.props.dropUp;
+    var renderList = _.isFirstFocusedRender(this) || this.props.open;
     var List = this.props.listComponent || this.props.groupBy && GroupableList || PlainList;
 
     return React.createElement(
@@ -175,7 +176,7 @@ var DropdownList = React.createClass({
           "div",
           null,
           this.props.filter && this._renderFilter(),
-          React.createElement(List, babelHelpers._extends({ ref: "list"
+          renderList && React.createElement(List, babelHelpers._extends({ ref: "list"
           }, _.pick(this.props, Object.keys(compat.type(List).propTypes)), {
             data: data,
             optID: optID,

diff --git a/lib/Month.js b/lib/Month.js
@@ -36,7 +36,7 @@ module.exports = React.createClass({
 
   render: function () {
     var props = _.omit(this.props, ["max", "min", "value", "onChange"]),
-        month = dates.visibleDays(this.props.value),
+        month = dates.visibleDays(this.props.value, this.props.culture),
         rows = _.chunk(month, 7);
 
     return React.createElement(

diff --git a/lib/Multiselect.js b/lib/Multiselect.js
@@ -93,8 +93,8 @@ var Multiselect = React.createClass({
     };
   },
 
-  componentDidMount: function () {
-    validateList(this.refs.list);
+  componentDidUpdate: function () {
+    this.refs.list && validateList(this.refs.list);
   },
 
   componentWillReceiveProps: function (nextProps) {
@@ -127,7 +127,7 @@ var Multiselect = React.createClass({
     var items = this._data();
     var values = this.state.dataItems;
     var dropUp = this.props.dropUp;
-
+    var renderPopup = _.isFirstFocusedRender(this) || this.props.open;
     var List = this.props.listComponent || this.props.groupBy && GroupableList || PlainList;
     var listProps = _.pick(this.props, Object.keys(compat.type(List).propTypes));
 
@@ -189,7 +189,7 @@ var Multiselect = React.createClass({
         React.createElement(
           "div",
           null,
-          React.createElement(List, babelHelpers._extends({ ref: "list"
+          renderPopup && [React.createElement(List, babelHelpers._extends({ ref: "list", key: "0"
           }, listProps, {
             readOnly: !!listProps.readOnly,
             disabled: !!listProps.disabled,
@@ -203,10 +203,9 @@ var Multiselect = React.createClass({
             onMove: this._scrollTo,
             messages: {
               emptyList: this.props.data.length ? this.props.messages.emptyFilter : this.props.messages.emptyList
-            } })),
-          this._shouldShowCreate() && React.createElement(
+            } })), this._shouldShowCreate() && React.createElement(
             "ul",
-            { className: "rw-list rw-multiselect-create-tag" },
+            { className: "rw-list rw-multiselect-create-tag", key: "1" },
             React.createElement(
               "li",
               { onClick: this._onCreate.bind(null, this.props.searchTerm),
@@ -222,7 +221,7 @@ var Multiselect = React.createClass({
               " ",
               this.props.messages.createNew
             )
-          )
+          )]
         )
       )
     );

diff --git a/lib/Popup.js b/lib/Popup.js
@@ -6,11 +6,34 @@ var React = require("react"),
     cn = require("classnames"),
     compat = require("./util/compat");
 
+var transform = config.animate.transform,
+    support = !!config.animate.endEvent;
+
+function properties(prop, value) {
+  var TRANSLATION_MAP = config.animate.TRANSLATION_MAP;
+
+  if (TRANSLATION_MAP && TRANSLATION_MAP[prop]) return (function () {
+    var _ref = {};
+    _ref[transform] = "" + TRANSLATION_MAP[prop] + "(" + value + ")";
+    return _ref;
+  })();
+
+  return (function () {
+    var _ref2 = {};
+    _ref2[prop] = value;
+    return _ref2;
+  })();
+}
+
 var PopupContent = React.createClass({
   displayName: "PopupContent",
 
   render: function () {
-    var child = React.Children.only(this.props.children);
+    var child = this.props.children;
+
+    if (!child) return React.createElement("span", { className: "rw-popup rw-widget" });
+
+    child = React.Children.only(this.props.children);
 
     return compat.cloneElement(child, {
       className: cn(child.props.className, "rw-popup rw-widget")
@@ -19,7 +42,8 @@ var PopupContent = React.createClass({
 });
 
 module.exports = React.createClass({
-  displayName: "exports",
+
+  displayName: "Popup",
 
   propTypes: {
     open: React.PropTypes.bool,
@@ -47,8 +71,11 @@ module.exports = React.createClass({
       onOpen: function () {} };
   },
 
-  componentDidMount: function () {
-    !this.props.open && this.close(0);
+  // componentDidMount(){
+  //   !this.props.open && this.close(0)
+  // },
+  componentWillMount: function () {
+    !this.props.open && (this._initialPosition = true);
   },
 
   componentWillReceiveProps: function (nextProps) {
@@ -71,12 +98,18 @@ module.exports = React.createClass({
     var open = _props.open;
     var dropUp = _props.dropUp;
     var props = babelHelpers.objectWithoutProperties(_props, ["className", "open", "dropUp"]);
+    var display = open ? "block" : void 0;
+    var styles = {};
+
+    if (this._initialPosition) {
+      display = "none";
+    }
 
     return React.createElement(
       "div",
       babelHelpers._extends({}, props, {
         style: babelHelpers._extends({
-          display: open ? "block" : void 0,
+          display: display,
           height: this.state.height }, props.style),
         className: cn(className, "rw-popup-container", { "rw-dropup": dropUp })
       }),
@@ -88,6 +121,16 @@ module.exports = React.createClass({
     );
   },
 
+  reset: function () {
+    var container = compat.findDOMNode(this),
+        content = compat.findDOMNode(this.refs.content),
+        style = { display: "block", overflow: "hidden" };
+
+    $.css(container, style);
+    this.height();
+    $.css(content, properties("top", this.props.dropUp ? "100%" : "-100%"));
+  },
+
   height: function () {
     var el = compat.findDOMNode(this),
         content = compat.findDOMNode(this.refs.content),
@@ -107,9 +150,13 @@ module.exports = React.createClass({
         el = compat.findDOMNode(this.refs.content);
 
     this.ORGINAL_POSITION = $.css(el, "position");
-
     this._isOpening = true;
-    this.height();
+
+    if (this._initialPosition) {
+      this._initialPosition = false;
+      this.reset();
+    } else this.height();
+
     this.props.onOpening();
 
     anim.className += " rw-popup-animating";

diff --git a/lib/SelectList.js b/lib/SelectList.js
@@ -244,6 +244,7 @@ var SelectList = React.createClass({
     this.setTimeout("focus", function () {
       if (focused) compat.findDOMNode(_this).focus();
       if (focused !== _this.state.focused) {
+        _this.notify(focused ? "onFocus" : "onBlur", e);
         _this.setState({ focused: focused });
       }
     });

diff --git a/lib/less/core.less b/lib/less/core.less
@@ -29,10 +29,11 @@
 }
 
 .rw-input {
-  color:          @input-color;
-  height:         @input-height;
-  line-height:    @input-height;
-  padding:        @input-padding;
+  color:            @input-color;
+  height:           @input-height;
+  line-height:      @input-height;
+  padding:          @input-padding;
+  background-color: @input-bg;
 
   &[disabled] {
     .state-disabled();

diff --git a/lib/util/_.js b/lib/util/_.js
@@ -76,6 +76,12 @@ var _ = module.exports = {
     return "" + ((prefix == null ? "" : prefix) + ++idCount);
   },
 
+  //-- Really specific Component Utilities --
+
+  isFirstFocusedRender: function (component) {
+    return component._firstFocus || component.state.focused && (component._firstFocus = true);
+  },
+
   ifNotDisabled: function (disabledOnly, fn) {
     if (arguments.length === 1) fn = disabledOnly, disabledOnly = false;
 

diff --git a/lib/util/dates.js b/lib/util/dates.js
@@ -90,19 +90,19 @@ var dates = module.exports = _.assign(dateMath, {
     return dates.add(dates.firstOfCentury(date), 99, "year");
   },
 
-  firstVisibleDay: function (date) {
+  firstVisibleDay: function (date, culture) {
     var firstOfMonth = dates.startOf(date, "month");
-    return dates.startOf(firstOfMonth, "week");
+    return dates.startOf(firstOfMonth, "week", dates.startOfWeek(culture));
   },
 
-  lastVisibleDay: function (date) {
+  lastVisibleDay: function (date, culture) {
     var endOfMonth = dates.endOf(date, "month");
-    return dates.endOf(endOfMonth, "week");
+    return dates.endOf(endOfMonth, "week", dates.startOfWeek(culture));
   },
 
-  visibleDays: function (date) {
-    var current = dates.firstVisibleDay(date),
-        last = dates.lastVisibleDay(date),
+  visibleDays: function (date, culture) {
+    var current = dates.firstVisibleDay(date, culture),
+        last = dates.lastVisibleDay(date, culture),
         days = [];
 
     while (dates.lte(current, last, "day")) {

diff --git a/lib/util/dom/animate.js b/lib/util/dom/animate.js
@@ -30,6 +30,8 @@ if (canUseDOM) {
 }
 
 animate.endEvent = transition.endEvent;
+animate.transform = transform;
+animate.TRANSLATION_MAP = TRANSLATION_MAP;
 
 module.exports = animate;
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-widgets",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "A set of input widgets for React",
   "main": "lib/index.js",
   "author": {
@@ -108,4 +108,4 @@
     "webpack": "^1.7.0",
     "webpack-dev-server": "^1.7.0"
   }
-}
+}