armstrong-react - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

dist/components/form/inputs/datePickerInput.d.ts

@@ -16,2 +16,3 @@ import * as React from "react";
     showOnTop?: boolean;
+    isMobile?: boolean;
 }
@@ -18,0 +19,0 @@ export declare class DatePickerInput extends React.Component<IDatePickerInputProps, IDatePickerInputState> {

dist/components/form/inputs/datePickerInput.js

@@ -18,3 +18,3 @@ "use strict";
         var todaysDate = moment().startOf('day');
-        this.state = { displayedDate: todaysDate.clone(), selectedDate: todaysDate, pickerBodyVisible: false, showOnTop: false };
+        this.state = { displayedDate: todaysDate.clone(), selectedDate: todaysDate, pickerBodyVisible: false, showOnTop: false, isMobile: false };
         moment.locale(props.locale);
@@ -115,5 +115,15 @@ var seed = Math.random().toFixed(4);
     DatePickerInput.prototype.componentDidMount = function () {
+        var _this = this;
         this.inputElement = document.getElementById(this.inputElementId);
         this.bodyElement = document.getElementById(this.bodyElementId);
         window.addEventListener('mousedown', this);
+        window.addEventListener('resize', function () {
+            var width = window.innerWidth;
+            if (width < 500 && !_this.state.isMobile) {
+                _this.setState({ isMobile: true });
+            }
+            if (width > 500 && _this.state.isMobile) {
+                _this.setState({ isMobile: false });
+            }
+        });
     };
@@ -133,2 +143,5 @@ DatePickerInput.prototype.handleEvent = function (e) {
     DatePickerInput.prototype.shouldShowOnTop = function () {
+        if (window.innerWidth < 480) {
+            return;
+        }
         var height = this.bodyElement.clientHeight + 25;
@@ -153,13 +166,18 @@ var visibleBottom = (window.innerHeight + window.scrollY);
         return (React.createElement("div", {className: rootClasses, onMouseDown: function () { return _this.mouseDownOnCalendar = true; }, onMouseUp: function () { return _this.mouseDownOnCalendar = false; }}, 
-            React.createElement("input", {id: this.inputElementId, type: "text", defaultValue: this.state.selectedDate.format(this.props.format), onBlur: function (e) { return _this.checkDate(e.target.value); }, onFocus: function (e) { return _this.onInputFocus(); }}), 
+            !this.state.isMobile &&
+                React.createElement("input", {id: this.inputElementId, type: "text", defaultValue: this.state.selectedDate.format(this.props.format), onBlur: function (e) { return _this.checkDate(e.target.value); }, onFocus: function (e) { return _this.onInputFocus(); }}), 
+            this.state.isMobile &&
+                React.createElement("div", {onClick: function () { return _this.onInputFocus(); }}, this.state.selectedDate.format(this.props.format)), 
             React.createElement("div", {id: this.bodyElementId, className: classes}, 
-                React.createElement(grid_1.Grid, {className: "date-picker-header"}, 
-                    React.createElement(grid_1.Row, null, 
-                        React.createElement(grid_1.Col, {onClick: function () { return _this.changeMonth(-1); }, fixed: true}, "<"), 
-                        React.createElement(grid_1.Col, null, currentDisplayDate), 
-                        React.createElement(grid_1.Col, {onClick: function () { return _this.changeMonth(1); }, fixed: true}, ">"))
-                ), 
-                React.createElement("div", {className: "date-picker-days"}, 
-                    weekdays, 
-                    days))));
+                React.createElement("div", {className: "date-picker-body-wrapper"}, 
+                    React.createElement(grid_1.Grid, {responsive: "none", className: "date-picker-header"}, 
+                        React.createElement(grid_1.Row, null, 
+                            React.createElement(grid_1.Col, {onClick: function () { return _this.changeMonth(-1); }, fixed: true}, "<"), 
+                            React.createElement(grid_1.Col, null, currentDisplayDate), 
+                            React.createElement(grid_1.Col, {onClick: function () { return _this.changeMonth(1); }, fixed: true}, ">"))
+                    ), 
+                    React.createElement("div", {className: "date-picker-days"}, 
+                        weekdays, 
+                        days))
+            )));
     };
@@ -166,0 +184,0 @@ DatePickerInput.defaultProps = {

package.json

 {
   "name": "armstrong-react",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Rocketmakers Armstrong library of React components",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

327568

increased by0.45%

Lines of code

8997

increased by0.21%

No dependency changes