react-flatpickr - npm Package Compare versions

Comparing version 3.9.1 to 3.10.0

build/index.js

@@ -36,6 +36,6 @@ "use strict";
 
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -60,5 +60,57 @@
   function DateTimePicker() {
+    var _getPrototypeOf2;
+
+    var _this;
+
     _classCallCheck(this, DateTimePicker);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(DateTimePicker).apply(this, arguments));
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DateTimePicker)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "createFlatpickrInstance", function () {
+      var options = _objectSpread({
+        onClose: function onClose() {
+          _this.node.blur && _this.node.blur();
+        }
+      }, _this.props.options); // Add prop hooks to options
+
+
+      hooks.forEach(function (hook) {
+        if (_this.props[hook]) {
+          options[hook] = _this.props[hook];
+        }
+      });
+      _this.flatpickr = (0, _flatpickr["default"])(_this.node, options);
+
+      if (_this.props.hasOwnProperty('value')) {
+        _this.flatpickr.setDate(_this.props.value, false);
+      }
+
+      var onCreate = _this.props.onCreate;
+      if (onCreate) onCreate(_this.flatpickr);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "destroyFlatpickrInstance", function () {
+      var onDestroy = _this.props.onDestroy;
+      if (onDestroy) onDestroy(_this.flatpickr);
+
+      _this.flatpickr.destroy();
+
+      _this.flatpickr = null;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleNodeChange", function (node) {
+      _this.node = node;
+
+      if (_this.flatpickr) {
+        _this.destroyFlatpickrInstance();
+
+        _this.createFlatpickrInstance();
+      }
+    });
+
+    return _this;
   }
@@ -69,3 +121,3 @@
     value: function componentDidUpdate(prevProps) {
-      var _this = this;
+      var _this2 = this;
 
@@ -79,4 +131,4 @@ if (this.props.hasOwnProperty('value') && this.props.value !== prevProps.value) {
       hooks.forEach(function (hook) {
-        if (_this.props.hasOwnProperty(hook)) {
-          options[hook] = _this.props[hook];
+        if (_this2.props.hasOwnProperty(hook)) {
+          options[hook] = _this2.props[hook];
         } // Add prev ones too so we can compare against them later
@@ -108,24 +160,3 @@
     value: function componentDidMount() {
-      var _this2 = this;
-
-      var options = _objectSpread({
-        onClose: function onClose() {
-          _this2.node.blur && _this2.node.blur();
-        }
-      }, this.props.options); // Add prop hooks to options
-
-
-      hooks.forEach(function (hook) {
-        if (_this2.props[hook]) {
-          options[hook] = _this2.props[hook];
-        }
-      });
-      this.flatpickr = new _flatpickr["default"](this.node, options);
-
-      if (this.props.hasOwnProperty('value')) {
-        this.flatpickr.setDate(this.props.value, false);
-      }
-
-      var onCreate = this.props.onCreate;
-      if (onCreate) onCreate(this.flatpickr);
+      this.createFlatpickrInstance();
     }
@@ -135,5 +166,3 @@ }, {
     value: function componentWillUnmount() {
-      var onDestroy = this.props.onDestroy;
-      if (onDestroy) onDestroy(this.flatpickr);
-      this.flatpickr.destroy();
+      this.destroyFlatpickrInstance();
     }
@@ -143,4 +172,2 @@ }, {
     value: function render() {
-      var _this3 = this;
-
       // eslint-disable-next-line no-unused-vars
@@ -153,9 +180,5 @@ var _this$props = this.props,
           render = _this$props.render,
-          props = _objectWithoutProperties(_this$props, ["options", "defaultValue", "value", "children", "render"]);
+          props = _objectWithoutProperties(_this$props, ["options", "defaultValue", "value", "children", "render"]); // Don't pass hooks and callbacks to dom node
 
-      var ref = function ref(node) {
-        _this3.node = node;
-      }; // Don't pass hooks and callbacks to dom node
 
-
       hooks.forEach(function (hook) {
@@ -170,8 +193,8 @@ delete props[hook];
         value: value
-      }), ref);
+      }), this.handleNodeChange);
       return options.wrap ? _react["default"].createElement("div", _extends({}, props, {
-        ref: ref
+        ref: this.handleNodeChange
       }), children) : _react["default"].createElement("input", _extends({}, props, {
         defaultValue: defaultValue,
-        ref: ref
+        ref: this.handleNodeChange
       }));
@@ -178,0 +201,0 @@ }

lib/index.js

 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Flatpickr from 'flatpickr'
+import flatpickr from 'flatpickr'
 
@@ -92,2 +92,10 @@ const hooks = [
   componentDidMount() {
+    this.createFlatpickrInstance()
+  }
+
+  componentWillUnmount() {
+    this.destroyFlatpickrInstance()
+  }
+
+  createFlatpickrInstance = () => {
     const options = {
@@ -107,3 +115,3 @@ onClose: () => {
 
-    this.flatpickr = new Flatpickr(this.node, options)
+    this.flatpickr = flatpickr(this.node, options)
 
@@ -118,12 +126,20 @@ if (this.props.hasOwnProperty('value')) {
 
-  componentWillUnmount() {
+  destroyFlatpickrInstance = () => {
     const { onDestroy } = this.props
     if (onDestroy) onDestroy(this.flatpickr)
     this.flatpickr.destroy()
+    this.flatpickr = null
   }
 
+  handleNodeChange = (node) => {
+    this.node = node
+    if (this.flatpickr) {
+      this.destroyFlatpickrInstance()
+      this.createFlatpickrInstance()
+    }
+  }
+
   render() {
     // eslint-disable-next-line no-unused-vars
     const { options, defaultValue, value, children, render, ...props } = this.props
-    const ref = (node) => { this.node = node }
 
@@ -138,7 +154,7 @@ // Don't pass hooks and callbacks to dom node
 
-    if (render) return render({ ...props, defaultValue, value }, ref)
+    if (render) return render({ ...props, defaultValue, value }, this.handleNodeChange)
 
     return options.wrap
       ? (
-        <div {...props} ref={ref}>
+        <div {...props} ref={this.handleNodeChange}>
           { children }
@@ -148,3 +164,3 @@ </div>
       : (
-        <input {...props} defaultValue={defaultValue} ref={ref} />
+        <input {...props} defaultValue={defaultValue} ref={this.handleNodeChange} />
       )
@@ -151,0 +167,0 @@ }

package.json

 {
   "name": "react-flatpickr",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "description": "flatpickr for React",
@@ -60,7 +60,9 @@ "main": "build/index.js",
     "jest": "^24.8.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "semantic-ui-react": "^0.88.2",
     "style-loader": "^0.19.0",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.3"
   },
@@ -67,0 +69,0 @@ "eslintConfig": {

Readme.md

@@ -1,2 +0,1 @@
-
 [![NPM version][npm-img]][npm-url]
@@ -10,10 +9,42 @@ [![License][license-img]][license-url]
 
+## Table of contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Basic props](#basic-props)
+  - [defaultValue](#defaultValue)
+  - [value](#value)
+  - [children](#children)
+  - [className](#className)
+- [Event handlers](#event-handlers)
+- [Advanced props](#advanced-props)
+- [Troubleshooting](#troubleshooting)
+
+## Installation
+
+This package can be install with `yarn` or `npm`
+
+`npm`
+
+```bash
+npm install --save react-flatpickr
+```
+
+`yarn`
+
+```bash
+yarn add react-flatpickr
+```
+
 ## Usage
 
 ```jsx
-import 'flatpickr/dist/themes/material_green.css'
+// Keep in mind that these are the styles from flatpickr package
+// See troubleshooting section in case you have problems importing the styles
 
-import Flatpickr from 'react-flatpickr'
-import { Component } from 'react'
+import "flatpickr/dist/themes/material_green.css";
 
+import Flatpickr from "react-flatpickr";
+import { Component } from "react";
+
 class App extends Component {
@@ -31,20 +62,136 @@ constructor() {
     return (
-      <Flatpickr data-enable-time
+      <Flatpickr
+        data-enable-time
         value={date}
-        onChange={date => { this.setState({date}) }} />
-    )
+        onChange={date => {
+          this.setState({ date });
+        }}
+      />
+    );
   }
 }
 ```
-* `flatpickr options`: you can pass all `flatpickr parameters` to `props.options`
-* All flatpickr [hooks][hooks] can be passed as a react prop, or to `props.options`
 
+## Basic props
+
+### defaultValue
+
+> `string` | optional
+
+This is the default value that will be passed to the inner input
+
+### value
+
+> `string || array || object || number` | optional
+
+Same as below
+
+### options
+
+> `Object` | optional
+
+- `Flatpickr options`: you can pass all `Flatpickr parameters` here.
+- All `Flatpickr` [hooks][hooks] can be passed within this option too.
+
+_*Example*_:
+
 ```jsx
-<Flatpickr options={{minDate: '2017-01-01'}} />
+<Flatpickr options={{ minDate: "2017-01-01" }} />
 ```
 
-### Themes
-Please import themes directly from the `flatpickr` dependency. In most cases, you should just be able to `import 'flatpickr/dist/themes/theme.css'`, but in some cases npm or yarn may install `flatpickr` in `node_modules/react-flatpickr/node_modules/flatpickr`. If that happens, removing your `node_modules` dir and reinstalling should put flatpickr in the root `node_modules` dir, or you can import from `react-flatpickr/node_modules/flatpickr` manually.
+### children
 
+> `node` | optional
+
+This option is closely related with the [wrap option](https://flatpickr.js.org/examples/#flatpickr-external-elements) from `Flatpickr`, please refer to the former link for more information.
+
+### className
+
+> `string` | optional
+
+Custom className that will be applied to the inner `input` element. In case you need to modify the rendered `input` styles this is the `prop` you should use.
+
+## Event handlers
+
+The following `props` are provided in order to customize the `Flatpickr's functions` default behaviour. Please refer to the [Events & Hooks section](https://flatpickr.js.org/events/) from `Flatpickr` library.
+
+### onChange
+
+> `function` | optional
+
+### onOpen: function
+
+> `function` | optional
+
+### onClose: function
+
+> `function` | optional
+
+### onMonthChange: function
+
+> `function` | optional
+
+### onYearChange: function
+
+> `function` | optional
+
+### onReady: function
+
+> `function` | optional
+
+### onValueUpdate: function
+
+> `function` | optional
+
+### onDayCreate: function
+
+> `function` | optional
+
+### onDestroy: function
+
+> `function` | optional
+
+## Advanced props
+
+### render
+
+> `function` | optional
+
+Use this `prop` if you want to `render` your custom component, this is a [Render props pattern](https://reactjs.org/docs/render-props.html).
+
+_Example usage_:
+
+```jsx
+  import React from 'react';
+  import Flatpickr from 'react-flatpickr';
+
+  const CustomInput = ({ value, defaultValue, inputRef, ...props }) => {
+    return <input {...props} defaultValue={defaultValue} ref={inputRef} />;
+  };
+
+  export default function App {
+    return (
+      <Flatpickr
+        render={
+          ({defaultValue, value, ...props}, ref) => {
+            return <CustomInput defaultValue={defaultValue} inputRef={ref} />
+          }
+        }
+      />
+    )
+  }
+```
+
+## Themes
+
+Please import themes directly from the `flatpickr` dependency.
+
+## Troubleshooting
+
+#### Help, the Date Picker doesn't have any styling!
+
+> In most cases, you should just be able to `import 'flatpickr/dist/themes/airbnb.css'`, but in some cases npm or yarn may install `flatpickr` in `node_modules/react-flatpickr/node_modules/flatpickr`. If that happens, removing your `node_modules` dir and reinstalling should put flatpickr in the root `node_modules` dir, or you can import from `react-flatpickr/node_modules/flatpickr` manually.
+
 ## License
+
 MIT
@@ -51,0 +198,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Improved metrics

Total package byte prevSize

21732

increased by22.19%

Lines of code

313

increased by9.82%

Number of lines in readme file

208

increased by240.98%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

35

increased by6.06%

No dependency changes