Add DateInput/DateRange documentation in lightcord

LightcordApi/src/components/inputs/DateInput.tsx

@@ -209,6 +209,7 @@ export default class DateInput extends React.Component<DateInputProps, {
             color: "transparent",
             onMouseDown: this.toggleCalendarVisibility.bind(this),
             wrapper: false
+            //TODO: Add icon
         }, /*React.createElement(v.default, {
             className: _.default.calendarIcon,
             name: v.IconNames.CALENDAR
@@ -217,8 +218,118 @@ export default class DateInput extends React.Component<DateInputProps, {
             transitionAppear: false
         }, this.renderCalendarPicker()), window.document.body))
     }
+
+    static help = {
+        warn: "This component is still `experimental`. Please report issues to [Lightcord's developers](https://github.com/Lightcord/Lightcord/issues)."
+    }
+
+    static get AllPreviews(){
+        return AllPreviews || (AllPreviews = [
+            [
+                {
+                    dateFormat: DateConstants.DATE_FORMAT
+                },
+                {
+                    dateFormat: "dd/MM/yyyy"
+                },
+                {
+                    dateFormat: "MM/dd/yyyy"
+                }
+            ],
+            [
+                {
+                    defaultValue: new Date()
+                },
+                {
+                    defaultValue: null
+                },
+                {
+                    defaultValue: new Date(1597061085498)
+                }
+            ],
+            [
+                {
+                    filterDate: (date) => true
+                },
+                {
+                    filterDate: (date) => {
+                        if(date.getDay() !== 0)return false
+                        return true
+                    }
+                }
+            ],
+            [
+                {
+                    isModalInput: true
+                },
+                {
+                    isModalInput: false
+                }
+            ],
+            [
+                {
+                    maxDate: null
+                },
+                {
+                    maxDate: new Date(Date.now() + 6.048e+8)
+                }
+            ],
+            [
+                {
+                    minDate: null
+                },
+                {
+                    minDate: new Date(Date.now() - 6.048e+8)
+                }
+            ],
+            [
+                {
+                    onChange: (value, name) => {}
+                }
+            ],
+            [
+                {
+                    selectsStart: null
+                },
+                {
+                    selectsStart: new Date(Date.now() - (8.64e+7*2))
+                }
+            ],
+            [
+                {
+                    selectsEnd: null
+                },
+                {
+                    selectsEnd: new Date(Date.now() + (8.64e+7*2))
+                }
+            ],
+            [
+                {
+                    showMonthYearPicker: false
+                },
+                {
+                    showMonthYearPicker: true
+                }
+            ],
+            [
+                {
+                    startDate: null
+                },
+                {
+                    endDate: null
+                }
+            ],
+            [
+                {
+                    name: "api-preview-dateinput"
+                }
+            ]
+        ])
+    }
 }
 
+let AllPreviews
+
 export function isDateValid(date:Date){
     return (date instanceof Date || typeof date === "object" || Object.prototype.toString.call(date) === "[object Date]") && !isNaN(date.valueOf())
 }
@@ -257,22 +368,22 @@ export class AnimatedCalendarPicker extends React.Component<any, {
 
     render(){
         let props = this.props, 
-        r = props.value, 
+        value = props.value, 
-        n = props.onClickOutside, 
+        onClickOutside = props.onClickOutside, 
-        a = props.onSelect, 
+        onSelect = props.onSelect, 
-        i = props.minDate, 
+        minDate = props.minDate, 
-        o = props.maxDate, 
+        maxDate = props.maxDate, 
-        u = props.endDate, 
+        endDate = props.endDate, 
-        f = props.filterDate, 
+        filterDate = props.filterDate, 
-        c = props.startDate, 
+        startDate = props.startDate, 
-        d = props.selectsEnd, 
+        selectsEnd = props.selectsEnd, 
-        y = props.selectsStart, 
+        selectsStart = props.selectsStart, 
-        v = props.top, 
+        top = props.top, 
-        g = props.right, 
+        right = props.right, 
         isModalInput = props.isModalInput, 
-        h = props.showMonthYearPicker, 
+        showMonthYearPicker = props.showMonthYearPicker, 
         menuAnimation = this.state.menuAnimation, 
-        E = menuAnimation.interpolate({
+        interpolation = menuAnimation.interpolate({
             inputRange: [0, 1],
             outputRange: ["-10px", "0px"]
         });
@@ -288,24 +399,24 @@ export class AnimatedCalendarPicker extends React.Component<any, {
             }) : null].filter(e=>e).join(" "),
             style: {
                 opacity: menuAnimation,
-                right: g,
+                right: right,
-                top: v,
+                top: top,
                 transform: [{
-                    translateY: E
+                    translateY: interpolation
                 }]
             }
         }, React.createElement(CalendarPicker, {
-            minDate: i,
+            minDate: minDate,
-            maxDate: o,
+            maxDate: maxDate,
-            endDate: u,
+            endDate: endDate,
-            filterDate: f,
+            filterDate: filterDate,
-            startDate: c,
+            startDate: startDate,
-            selectsEnd: d,
+            selectsEnd: selectsEnd,
-            selectsStart: y,
+            selectsStart: selectsStart,
-            value: r,
+            value: value,
-            onSelect: a,
+            onSelect: onSelect,
-            onClickOutside: n,
+            onClickOutside: onClickOutside,
-            showMonthYearPicker: h,
+            showMonthYearPicker: showMonthYearPicker,
             onChange: console.log
         }))
     }

LightcordApi/src/components/inputs/DateRange.tsx

@@ -19,10 +19,50 @@ export type DateRangeProps = {
     filterDate?:() => void,
     showMonthYearPicker: boolean
 }
+let AllPreviews
 export default class DateRange extends React.Component<DateRangeProps, {
     end: Date,
     start: Date
 }> {
+    static get AllPreviews(){
+        return AllPreviews || (AllPreviews = [
+            [{
+                dateFormat: DateConstants.DATE_FORMAT
+            },{
+                dateFormat: "dd/MM/yyyy"
+            },{
+                dateFormat: "MM/dd/yyyy"
+            }],
+            [{
+                defaultEnd: new Date(Date.now() + 6.048e+8)
+            }],
+            [{
+                defaultStart: new Date(Date.now() - 6.048e+8)
+            }],
+            [{
+                onChange: (start, end) => {}
+            }],
+            [{
+                maxDate: new Date(Date.now() + (6.048e+8 * 2))
+            },{
+                maxDate: null
+            }],
+            [{
+                minDate: new Date(Date.now() - (6.048e+8 * 2))
+            },{
+                minDate: null
+            }],
+            [{
+                filterDate: (date) => true
+            }],
+            [{
+                showMonthYearPicker: false
+            },{
+                showMonthYearPicker: true
+            }]
+        ])
+    }
+
     static defaultProps:Partial<DateRangeProps> = {
         dateFormat: DateConstants.DATE_FORMAT
     }
@@ -108,4 +148,8 @@ export default class DateRange extends React.Component<DateRangeProps, {
             </FlexChild>
         </Flex>
     }
+
+    static help = {
+        warn: "This component is still `experimental`. Please report issues to [Lightcord's developers](https://github.com/Lightcord/Lightcord/issues)."
+    }
 }