#56, re render issue on props change, fixed (#57)

* codecov

* Resolved render issue on value chsnge from props #56

* Readme changes, version update

* Readme changes, version update

.github/workflows/node.js.yml

@@ -27,7 +27,6 @@ jobs:
     - name: install gh pages separately  
       run: npm install gh-pages [email protected] [email protected]
 
-
     - name: Upload coverage to Codecov
       uses: codecov/codecov-action@v1
 

README.md

@@ -6,6 +6,10 @@ Simple react component to generate cron expression
 
 Package helps to build linux scheduler cron expression.
 
+[![npm version](https://badge.fury.io/js/react-cron-generator.svg)](https://badge.fury.io/js/react-cron-generator) ![Downloads](https://img.shields.io/npm/dm/react-cron-generator.svg)
+<a href="https://github.com/sojinantony01/react-spread-sheet/blob/main/LICENSE">
+  <img src="https://img.shields.io/npm/l/react-cron-generator.svg" alt="license">
+</a>
 
 ```
 data = '* * * * * * *'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cron-generator",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "Simple react component to generate cron expression",
   "keywords": [
     "React cron generator",

src/index.tsx

@@ -7,9 +7,9 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <App />
-  </React.StrictMode>
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/lib/cron.tsx

@@ -20,28 +20,22 @@ interface State {
 const defaultCron = '0 0 00 1/1 * ? *';
 const Cron: React.FunctionComponent<CronProp>  = (props) => {
     const [state, setState] = useState<State>({value:[], headers: loadHeaders(props.options), locale: props.locale ? props.locale : 'en'})
-    useEffect(()=> {
-        setValue(props.value ? props.value : "") 
-        if(props.translateFn && !props.locale) {
-            console.log('Warning !!! locale not set while using translateFn');
-        }
-        // if(this.props.onRef) {
-        //     this.props.onRef(this);
-        // }
-    }, [])
     useEffect(() => {
         let newVal = '';
         newVal = state.value.toString().replace(/,/g,' ');
         newVal = newVal.replace(/!/g, ',');
         if(props.value !== newVal) {
             setValue(props.value ? props.value : "") 
         }
+        if(props.translateFn && !props.locale) {
+            console.warn('Warning !!! locale not set while using translateFn');
+        }
     }, [props.value])
     useEffect(() => {
-        parentChange(state.value)
+        state.value && state.value.length && parentChange(state.value)
     }, [state.value])
     const setValue = (value: string) => {
-        let prevState = state;
+        let prevState = {...state};
         prevState.value = value.replace(/,/g, '!').split(' ');;
         const allHeaders = loadHeaders();
         if(value && value.split(' ').length === 6) {
@@ -100,7 +94,7 @@ const Cron: React.FunctionComponent<CronProp>  = (props) => {
     }
     const getVal = () => {
         let val = cronstrue.toString(state.value.toString().replace(/,/g,' ').replace(/!/g, ','), { throwExceptionOnParseError: false, locale: state.locale })
-        if(val.search('undefined') === -1) {
+        if(val.search('undefined') === -1 && state.value && state.value.length) {
             return val;
         }
         return '-';