@react-ag-components/date-input - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

es/index.js

@@ -8,6 +8,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import moment from 'moment';
-// import './ui-kit.css'
+import ClearImg from 'material-ui/svg-icons/content/clear';
+import IconButton from 'material-ui/IconButton';
+
 import './date-input.css';
@@ -39,2 +40,8 @@
 
+    _this.handleClear = function () {
+      if (typeof _this.props.handle === 'function') {
+        _this.props.handle('');
+      }
+    };
+
     _this.excuseKeyboard = function (event) {
@@ -45,8 +52,3 @@ event.target.focus();
     _this.handleFocus = function (event) {
-      console.log(event);
       _this.refs.datePicker.openDialog();
-      // event.target.blur();
-      // if (this.props.onFocus) {
-      //   this.props.onFocus(event);
-      // }
     };
@@ -64,7 +66,2 @@
     if (this.props.value && this.props.value !== '') {
-      // this.setState((prevState, props) => ({
-      //   day:moment(this.props.value).format('DD'),
-      //   month:moment(this.props.value).format('MM'),
-      //   year:moment(this.props.value).format('YYYY')
-      // }))
       this.setState(function (prevState, props) {
@@ -79,5 +76,2 @@ return {
   DateInput.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    // if(nextProps.clear){
-    //   this.clearFields();
-    // }
 
@@ -90,105 +84,18 @@ if (nextProps.value) {
       });
+    }
 
-      // this.setState((prevState, props) => ({
-      //   day:moment(nextProps.value).format('DD'),
-      //   month:moment(nextProps.value).format('MM'),
-      //   year:moment(nextProps.value).format('YYYY')
-      // }));
+    if (nextProps.value === '') {
+      this.setState(function (prevState, props) {
+        return {
+          value: ''
+        };
+      });
     }
   };
 
-  // clearFields(){
-  //   this.setState((prevState, props) => ({
-  //     day:'',
-  //     month:'',
-  //     year:'',
-  //     error:false
-  //   }));
-  // }
-
-  // handleChange = (event) => {
-  //   const target = event.target;
-  //   const value = target.value;
-  //   const name = target.name;
-  //
-  //   this.setState({
-  //     [name]: value
-  //   });
-  //
-  // }
-
-  // validate = () => {
-  //   let isValidDay = number => {
-  //     return ((number < 32) && number > 0);
-  //   }
-  //   let isValidMonth = number => {
-  //     return ((number < 13) && (number > 0));
-  //   }
-  //   let isValidYear = number => {
-  //     return (number.trim().length === 4);
-  //   }
-  //
-  //   if(this.state.day.trim().length !== 0){
-  //     if(!isValidDay(this.state.day)){
-  //       this.setState({
-  //         error: true
-  //       });
-  //       return;
-  //     }
-  //   }
-  //
-  //   if(this.state.month.trim().length !== 0){
-  //     if(!isValidMonth(this.state.month)){
-  //       this.setState({
-  //         error: true
-  //       });
-  //       return;
-  //     }
-  //   }
-  //
-  //   if(this.state.year.trim().length !== 0){
-  //     if(!isValidYear(this.state.year)){
-  //       this.setState({
-  //         error: true
-  //       });
-  //       return;
-  //     }
-  //   }
-  //
-  //   if(this.state.day.trim().length !== 0 &&
-  //       this.state.month.trim().length !== 0 &&
-  //       this.state.year.trim().length !== 0){
-  //     let date = this.state.year + '-' + this.state.month + '-' + this.state.day;
-  //     date = moment(date, "YYYY-MM-DD");
-  //     if(!date.isValid()){
-  //       this.setState({
-  //         error: true
-  //       });
-  //     } else {
-  //       this.setState({
-  //         error: false
-  //       });
-  //       if(typeof this.props.handle === 'function'){
-  //         this.props.handle(date.format('YYYY-MM-DD'));
-  //       }
-  //     }
-  //   }
-  // }
-  //
-  // handleBlur = (event) => {
-  //     let value = event.target.value;
-  //     if(value.trim() === ''){
-  //       this.setState({
-  //         error:true
-  //       });
-  //     }
-  //
-  //     this.validate();
-  // }
-
   DateInput.prototype.render = function render() {
 
     var style = {
-      'width': '100%',
-      'color': '#999'
+      'color': '#999',
+      display: 'inline-block'
     };
@@ -213,3 +120,11 @@
         autoOk: true
-      })
+      }),
+      React.createElement(
+        IconButton,
+        {
+          tooltip: 'Clear date',
+          style: { display: 'inline-block' },
+          onClick: this.handleClear },
+        React.createElement(ClearImg, null)
+      )
     );
@@ -221,9 +136,2 @@ };
 
-process.env.NODE_ENV !== "production" ? DateInput.propTypes = {
-  label: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  handle: PropTypes.func,
-  value: PropTypes.string
-} : void 0;
-
 export default DateInput;

lib/index.js

@@ -9,6 +9,2 @@ 'use strict';
 
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
 var _moment = require('moment');
@@ -18,2 +14,10 @@
 
+var _clear = require('material-ui/svg-icons/content/clear');
+
+var _clear2 = _interopRequireDefault(_clear);
+
+var _IconButton = require('material-ui/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
 require('./date-input.css');
@@ -32,5 +36,3 @@
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-// import './ui-kit.css'
 
-
 var DateInput = function (_React$Component) {
@@ -58,2 +60,8 @@ _inherits(DateInput, _React$Component);
 
+    _this.handleClear = function () {
+      if (typeof _this.props.handle === 'function') {
+        _this.props.handle('');
+      }
+    };
+
     _this.excuseKeyboard = function (event) {
@@ -64,8 +72,3 @@ event.target.focus();
     _this.handleFocus = function (event) {
-      console.log(event);
       _this.refs.datePicker.openDialog();
-      // event.target.blur();
-      // if (this.props.onFocus) {
-      //   this.props.onFocus(event);
-      // }
     };
@@ -83,7 +86,2 @@
     if (this.props.value && this.props.value !== '') {
-      // this.setState((prevState, props) => ({
-      //   day:moment(this.props.value).format('DD'),
-      //   month:moment(this.props.value).format('MM'),
-      //   year:moment(this.props.value).format('YYYY')
-      // }))
       this.setState(function (prevState, props) {
@@ -98,5 +96,2 @@ return {
   DateInput.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    // if(nextProps.clear){
-    //   this.clearFields();
-    // }
 
@@ -109,105 +104,18 @@ if (nextProps.value) {
       });
+    }
 
-      // this.setState((prevState, props) => ({
-      //   day:moment(nextProps.value).format('DD'),
-      //   month:moment(nextProps.value).format('MM'),
-      //   year:moment(nextProps.value).format('YYYY')
-      // }));
+    if (nextProps.value === '') {
+      this.setState(function (prevState, props) {
+        return {
+          value: ''
+        };
+      });
     }
   };
 
-  // clearFields(){
-  //   this.setState((prevState, props) => ({
-  //     day:'',
-  //     month:'',
-  //     year:'',
-  //     error:false
-  //   }));
-  // }
-
-  // handleChange = (event) => {
-  //   const target = event.target;
-  //   const value = target.value;
-  //   const name = target.name;
-  //
-  //   this.setState({
-  //     [name]: value
-  //   });
-  //
-  // }
-
-  // validate = () => {
-  //   let isValidDay = number => {
-  //     return ((number < 32) && number > 0);
-  //   }
-  //   let isValidMonth = number => {
-  //     return ((number < 13) && (number > 0));
-  //   }
-  //   let isValidYear = number => {
-  //     return (number.trim().length === 4);
-  //   }
-  //
-  //   if(this.state.day.trim().length !== 0){
-  //     if(!isValidDay(this.state.day)){
-  //       this.setState({
-  //         error: true
-  //       });
-  //       return;
-  //     }
-  //   }
-  //
-  //   if(this.state.month.trim().length !== 0){
-  //     if(!isValidMonth(this.state.month)){
-  //       this.setState({
-  //         error: true
-  //       });
-  //       return;
-  //     }
-  //   }
-  //
-  //   if(this.state.year.trim().length !== 0){
-  //     if(!isValidYear(this.state.year)){
-  //       this.setState({
-  //         error: true
-  //       });
-  //       return;
-  //     }
-  //   }
-  //
-  //   if(this.state.day.trim().length !== 0 &&
-  //       this.state.month.trim().length !== 0 &&
-  //       this.state.year.trim().length !== 0){
-  //     let date = this.state.year + '-' + this.state.month + '-' + this.state.day;
-  //     date = moment(date, "YYYY-MM-DD");
-  //     if(!date.isValid()){
-  //       this.setState({
-  //         error: true
-  //       });
-  //     } else {
-  //       this.setState({
-  //         error: false
-  //       });
-  //       if(typeof this.props.handle === 'function'){
-  //         this.props.handle(date.format('YYYY-MM-DD'));
-  //       }
-  //     }
-  //   }
-  // }
-  //
-  // handleBlur = (event) => {
-  //     let value = event.target.value;
-  //     if(value.trim() === ''){
-  //       this.setState({
-  //         error:true
-  //       });
-  //     }
-  //
-  //     this.validate();
-  // }
-
   DateInput.prototype.render = function render() {
 
     var style = {
-      'width': '100%',
-      'color': '#999'
+      'color': '#999',
+      display: 'inline-block'
     };
@@ -232,3 +140,11 @@
         autoOk: true
-      })
+      }),
+      _react2.default.createElement(
+        _IconButton2.default,
+        {
+          tooltip: 'Clear date',
+          style: { display: 'inline-block' },
+          onClick: this.handleClear },
+        _react2.default.createElement(_clear2.default, null)
+      )
     );
@@ -240,10 +156,3 @@ };
 
-process.env.NODE_ENV !== "production" ? DateInput.propTypes = {
-  label: _propTypes2.default.string.isRequired,
-  id: _propTypes2.default.string.isRequired,
-  handle: _propTypes2.default.func,
-  value: _propTypes2.default.string
-} : void 0;
-
 exports.default = DateInput;
 module.exports = exports['default'];

package.json

 {
   "name": "@react-ag-components/date-input",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "date-input React component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

-100%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

13696

-25.93%

Lines of code

239

-42.82%

No dependency changes