@protonapp/react-mobile-date-picker - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

lib/index.js

@@ -122,3 +122,4 @@ 'use strict';
           date = _props.date,
-          customStyles = _props.customStyles;
+          customStyles = _props.customStyles,
+          mode = _props.mode;
 
@@ -132,2 +133,4 @@ var dateObj = (0, _moment2.default)(date);
 
+      var format = mode === 'dateOnly' ? 'dddd, ll' : 'llll';
+
       var styles = _extends({}, customStyles.dateInput, { borderStyle: borderStyle, boxShadow: boxShadow });
@@ -158,2 +161,4 @@
 
+        var inputType = mode === 'dateOnly' ? 'date' : 'datetime-local';
+
         return _react2.default.createElement(
@@ -167,3 +172,3 @@ 'div',
             className: 'date-picker-native-input',
-            type: 'datetime-local',
+            type: inputType,
             value: this.getInputValue(),
@@ -186,3 +191,3 @@ onChange: this.handleChangeInput,
           },
-          dateObj.format('llll')
+          dateObj.format(format)
         ),
@@ -205,2 +210,3 @@ _react2.default.createElement(
                 return _react2.default.createElement(_PickerModal2.default, {
+                  mode: mode,
                   date: date,
@@ -223,2 +229,3 @@ onChangeDate: _this2.handleSelectDate,
   date: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
+  mode: _propTypes2.default.oneOf(['date', 'dateOnly']),
   onDateChange: _propTypes2.default.func,
@@ -229,5 +236,6 @@ customStyles: _propTypes2.default.object
   customStyles: {},
-  date: String(new Date())
+  date: String(new Date()),
+  mode: 'date'
 };
 exports.default = DateInput;
 //# sourceMappingURL=index.js.map

lib/PickerModal.js

@@ -77,24 +77,3 @@ 'use strict';
           ),
-          _react2.default.createElement(
-            'div',
-            { className: 'date-picker-modal-selects' },
-            _react2.default.createElement(_Select2.default, {
-              options: this.getOptions('day', _dates.dateFriendly),
-              onChange: this.handleSelectChange
-            }),
-            _react2.default.createElement(_Select2.default, {
-              numeric: true,
-              options: this.getOptions('hour', 'h'),
-              onChange: this.handleSelectChange
-            }),
-            _react2.default.createElement(_Select2.default, {
-              numeric: true,
-              options: this.getOptions('minute', 'mm'),
-              onChange: this.handleSelectChange
-            }),
-            _react2.default.createElement(_Select2.default, {
-              options: this.getAMPMOptions(),
-              onChange: this.handleSelectChange
-            })
-          )
+          this.renderSelects()
         )
@@ -183,2 +162,49 @@ );
   };
+
+  this.renderSelects = function () {
+    var mode = _this2.props.mode;
+
+
+    if (mode === 'dateOnly') {
+      return _react2.default.createElement(
+        'div',
+        { className: 'date-picker-modal-selects' },
+        _react2.default.createElement(_Select2.default, {
+          options: _this2.getOptions('month', 'MMMM'),
+          onChange: _this2.handleSelectChange
+        }),
+        _react2.default.createElement(_Select2.default, {
+          options: _this2.getOptions('day', 'D'),
+          onChange: _this2.handleSelectChange
+        }),
+        _react2.default.createElement(_Select2.default, {
+          options: _this2.getOptions('year', 'YYYY'),
+          onChange: _this2.handleSelectChange
+        })
+      );
+    }
+
+    return _react2.default.createElement(
+      'div',
+      { className: 'date-picker-modal-selects' },
+      _react2.default.createElement(_Select2.default, {
+        options: _this2.getOptions('day', _dates.dateFriendly),
+        onChange: _this2.handleSelectChange
+      }),
+      _react2.default.createElement(_Select2.default, {
+        numeric: true,
+        options: _this2.getOptions('hour', 'h'),
+        onChange: _this2.handleSelectChange
+      }),
+      _react2.default.createElement(_Select2.default, {
+        numeric: true,
+        options: _this2.getOptions('minute', 'mm'),
+        onChange: _this2.handleSelectChange
+      }),
+      _react2.default.createElement(_Select2.default, {
+        options: _this2.getAMPMOptions(),
+        onChange: _this2.handleSelectChange
+      })
+    );
+  };
 };
@@ -185,0 +211,0 @@

package.json

 {
   "name": "@protonapp/react-mobile-date-picker",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React (web) implementation of mobile-style date picker",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/index.js

@@ -16,2 +16,3 @@ import React, { Component } from 'react'
     ]),
+    mode: PropTypes.oneOf(['date', 'dateOnly']),
     onDateChange: PropTypes.func,
@@ -23,3 +24,4 @@ customStyles: PropTypes.object
     customStyles: {},
-    date: String(new Date())
+    date: String(new Date()),
+    mode: 'date',
   }
@@ -85,3 +87,3 @@
     let { open } = this.state
-    let { date, customStyles } = this.props
+    let { date, customStyles, mode } = this.props
     let dateObj = moment(date)
@@ -97,2 +99,4 @@ date = moment.utc(date).format()
 
+    let format = mode === 'dateOnly' ? 'dddd, ll' : 'llll'
+
     let styles = { ...customStyles.dateInput, borderStyle, boxShadow }
@@ -125,2 +129,4 @@
 
+      let inputType = mode === 'dateOnly' ? 'date' : 'datetime-local'
+
       return (
@@ -133,3 +139,3 @@ <div
             className="date-picker-native-input"
-            type="datetime-local"
+            type={inputType}
             value={this.getInputValue()}
@@ -150,3 +156,3 @@ onChange={this.handleChangeInput}
         >
-          {dateObj.format('llll')}
+          {dateObj.format(format)}
         </div>
@@ -163,2 +169,3 @@ <ModalWrapper>
                 <PickerModal
+                  mode={mode}
                   date={date}
@@ -165,0 +172,0 @@ onChangeDate={this.handleSelectDate}

src/PickerModal.js

@@ -85,2 +85,48 @@ import React, { Component } from 'react'
 
+  renderSelects = () => {
+    let { mode } = this.props
+
+    if (mode === 'dateOnly') {
+      return (
+        <div className="date-picker-modal-selects">
+          <Select
+            options={this.getOptions('month', 'MMMM')}
+            onChange={this.handleSelectChange}
+          />
+          <Select
+            options={this.getOptions('day', 'D')}
+            onChange={this.handleSelectChange}
+          />
+          <Select
+            options={this.getOptions('year', 'YYYY')}
+            onChange={this.handleSelectChange}
+          />
+        </div>
+      )
+    }
+
+    return (
+      <div className="date-picker-modal-selects">
+        <Select
+          options={this.getOptions('day', dateFriendly)}
+          onChange={this.handleSelectChange}
+        />
+        <Select
+          numeric
+          options={this.getOptions('hour', 'h')}
+          onChange={this.handleSelectChange}
+        />
+        <Select
+          numeric
+          options={this.getOptions('minute', 'mm')}
+          onChange={this.handleSelectChange}
+        />
+        <Select
+          options={this.getAMPMOptions()}
+          onChange={this.handleSelectChange}
+        />
+      </div>
+    )
+  }
+
   render() {
@@ -104,22 +150,3 @@ let { onCancel } = this.props
           </div>
-          <div className="date-picker-modal-selects">
-            <Select
-              options={this.getOptions('day', dateFriendly)}
-              onChange={this.handleSelectChange}
-            />
-            <Select
-              numeric
-              options={this.getOptions('hour', 'h')}
-              onChange={this.handleSelectChange}
-            />
-            <Select
-              numeric
-              options={this.getOptions('minute', 'mm')}
-              onChange={this.handleSelectChange}
-            />
-            <Select
-              options={this.getAMPMOptions()}
-              onChange={this.handleSelectChange}
-            />
-          </div>
+          {this.renderSelects()}
         </div>
@@ -126,0 +153,0 @@ </div>

stories/index.js

@@ -34,3 +34,3 @@ import React, { Component } from 'react'
 storiesOf('DatePicker', module)
-  .add('simple', () => (
+  .add('datetime', () => (
     <Wrapper
@@ -56,1 +56,23 @@ date={NOW}
   ))
+  .add('date-only', () => (
+    <Wrapper
+      mode="dateOnly"
+      date={NOW}
+      onDateChange={action('Changed date!')}
+      customStyles={{
+        dateInput: {
+          borderWidth: 5,
+          borderColor: '#0f0',
+          background: '#eee',
+          shadowOffset: [0, 4],
+          shadowRadius: 8,
+          shadowColor: 'rgba(0, 0, 0, 0.2)',
+          shadowOpacity: 1,
+          marginLeft: 50,
+          marginRight: 50,
+          marginTop: 50,
+          height: 50,
+        }
+      }}
+    />
+  ))

No alert changes

Improved metrics

Total package byte prevSize

70832

increased by5.7%

Lines of code

1235

increased by6.83%

No dependency changes