Move more existing examples to styleguide

Author: onurkerimov

src/components/Calendar/README.md

@@ -1,12 +1,10 @@
 ### Internationalization
 
 ```jsx inside Markdown
-import { Calendar } from 'react-date-range';
 import * as locales from 'react-date-range/dist/locale';
-import 'react-date-range/dist/styles.css'; // main style file
-import 'react-date-range/dist/theme/default.css'; // theme css file
 
 const [locale, setLocale] = React.useState('ja');
+
 <Calendar
   locale={locales[locale]}
   date={null}

src/components/DateRange/README.md

@@ -1,29 +1,40 @@
+### DateRange
+
 ```jsx inside Markdown
-<DateRange
-  onChange={()=> {}}
-  moveRangeOnFirstSelection={false}
-  ranges={[
+import {useState} from 'react'
+const [state, setState] = useState([
     {
       startDate: new Date(),
       endDate: null,
       key: 'selection'
     }
-  ]}
-  className={'PreviewArea'}
+  ]);
+  
+
+<DateRange
+  onChange={item => setState([item.selection])}
+  moveRangeOnFirstSelection={false}
+  ranges={state}
 />
 ```
 
+### Editable Date Inputs
+
 ```jsx inside Markdown
-<DateRange
-  editableDateInputs={true}
-  moveRangeOnFirstSelection={false}
-  ranges={[
+import {useState} from 'react'
+const [state, setState] = useState([
     {
       startDate: new Date(),
       endDate: null,
       key: 'selection'
     }
-  ]}
-  className={'PreviewArea'}
+  ]);
+  
+<DateRange
+  editableDateInputs={true}
+  onChange={item => setState([item.selection])}
+  moveRangeOnFirstSelection={false}
+  ranges={state}
+
 />
 ```

src/components/DateRangePicker/README.md

@@ -2,19 +2,22 @@
 
 ```jsx inside Markdown
 import { addDays } from 'date-fns';
+import { useState } from 'react';
+
+const [state, setState] = useState([
+  {
+    startDate: new Date(),
+    endDate: addDays(new Date(), 7),
+    key: 'selection'
+  }
+]);
 
 <DateRangePicker
+  onChange={item => setState([item.selection])}
   showSelectionPreview={true}
   moveRangeOnFirstSelection={false}
-  className={'PreviewArea'}
   months={2}
-  ranges={[
-    {
-      startDate: new Date(),
-      endDate: addDays(new Date(), 7),
-      key: 'selection'
-    }
-  ]}
+  ranges={state}
   direction="horizontal"
 />;
 ```
@@ -23,52 +26,59 @@ import { addDays } from 'date-fns';
 
 ```jsx inside Markdown
 import { addDays } from 'date-fns';
+import { useState } from 'react';
+
+const [state, setState] = useState({
+  selection: {
+    startDate: new Date(),
+    endDate: null,
+    key: 'selection'
+  },
+  compare: {
+    startDate: new Date(),
+    endDate: addDays(new Date(), 3),
+    key: 'compare'
+  }
+});
 
 <DateRangePicker
-  className={'PreviewArea'}
+  onChange={item => setState({ ...state, ...item })}
   months={1}
   minDate={addDays(new Date(), -300)}
   maxDate={addDays(new Date(), 900)}
   direction="vertical"
   scroll={{ enabled: true }}
-  ranges={[
-    {
-      startDate: new Date(),
-      endDate: null,
-      key: 'selection'
-    },
-    {
-      startDate: new Date(),
-      endDate: addDays(new Date(), 3),
-      key: 'compare'
-    }
-  ]}
+  ranges={[state.selection, state.compare]}
 />;
 ```
 
+### Multiple Range
+
 ```jsx inside Markdown
 import { addDays } from 'date-fns';
+import { useState } from 'react';
+
+const [state, setState] = useState({
+  selection1: {
+    startDate: addDays(new Date(), 1),
+    endDate: null,
+    key: 'selection1'
+  },
+  selection2: {
+    startDate: addDays(new Date(), 4),
+    endDate: addDays(new Date(), 8),
+    key: 'selection2'
+  },
+  selection3: {
+    startDate: addDays(new Date(), 8),
+    endDate: addDays(new Date(), 10),
+    key: 'selection3',
+    autoFocus: false
+  }
+});
 
 <DateRangePicker
-  ranges={[
-    {
-      startDate: addDays(new Date(), 1),
-      endDate: null,
-      key: 'selection1'
-    },
-    {
-      startDate: addDays(new Date(), 4),
-      endDate: addDays(new Date(), 8),
-      key: 'selection2'
-    },
-    {
-      startDate: addDays(new Date(), 8),
-      endDate: addDays(new Date(), 10),
-      key: 'selection3',
-      showDateDisplay: false,
-      autoFocus: false
-    }
-  ]}
-  className={'PreviewArea'}
-/>
+  onChange={item => setState({ ...state, ...item })}
+  ranges={[state.selection1, state.selection2, state.selection3]}
+/>;
 ```

src/components/DefinedRange/README.md

@@ -1,19 +1,72 @@
- <DefinedRange
-  ranges={[this.state.definedRange.selection]}
+### DateRange
+
+```jsx inside Markdown
+import { useState } from 'react';
+
+const renderStaticRangeLabel = () => (
+  <CustomStaticRangeLabelContent text={'This is a custom label content: '} />
+);
+
+class CustomStaticRangeLabelContent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentDateString: Date(),
+    };
+
+    this.intervalId = setInterval(() => {
+      this.setState({
+        currentDateString: Date(),
+      });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+  render() {
+    const { currentDateString } = this.state;
+    const { text } = this.props;
+
+    return (
+      <span>
+        <i>{text}</i>
+        <span className={'random-date-string'}>
+          <b>{currentDateString}</b>
+        </span>
+      </span>
+    );
+  }
+}
+
+const [state, setState] = useState([
+  {
+    startDate: new Date(),
+    endDate: null,
+    key: 'selection'
+  }
+]);
+
+<DefinedRanges
+  onChange={item => setState([item.selection])}
+  ranges={state}
   renderStaticRangeLabel={renderStaticRangeLabel}
   staticRanges={[
     {
       label: 'Hoy',
       hasCustomRendering: true,
       range: () => ({
         startDate: new Date(),
-        endDate: new Date(),
+        endDate: new Date()
       }),
       isSelected() {
         return true;
-      },
-    },
+      }
+    }
   ]}
-  onChange={this.handleRangeChange.bind(this, 'definedRange')}
-  className={'centered'}
-/>
+/>;
+```