Event Datepicker (#2428)

* new datepicker

* dev

* dev

* dev

* fix for version 0.10

* added rounded corners for date range

* lint

* Commented out some Select.test.

* improved date range selection

* improved functions with useCallback

* improved Select.test.jsx

* keyboard navigation

* keyboard navigation

* added dropdown menu icon

* Hide filters on xs, Button to show

* check if to far left before right

* Filter button text

* improved local timezone

web/src/components/DatePicker.jsx

@@ -0,0 +1,162 @@
+import { h } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+
+export const DateFilterOptions = [
+  {
+    label: 'All',
+    value: ['all'],
+  },
+  {
+    label: 'Today',
+    value: {
+      //Before
+      before: new Date().setHours(24, 0, 0, 0) / 1000,
+      //After
+      after: new Date().setHours(0, 0, 0, 0) / 1000,
+    },
+  },
+  {
+    label: 'Yesterday',
+    value: {
+      //Before
+      before: new Date(new Date().setDate(new Date().getDate() - 1)).setHours(24, 0, 0, 0) / 1000,
+      //After
+      after: new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0, 0, 0, 0) / 1000,
+    },
+  },
+  {
+    label: 'Last 7 Days',
+    value: {
+      //Before
+      before: new Date().setHours(24, 0, 0, 0) / 1000,
+      //After
+      after: new Date(new Date().setDate(new Date().getDate() - 7)).setHours(0, 0, 0, 0) / 1000,
+    },
+  },
+  {
+    label: 'This Month',
+    value: {
+      //Before
+      before: new Date().setHours(24, 0, 0, 0) / 1000,
+      //After
+      after: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime() / 1000,
+    },
+  },
+  {
+    label: 'Last Month',
+    value: {
+      //Before
+      before: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime() / 1000,
+      //After
+      after: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1).getTime() / 1000,
+    },
+  },
+  {
+    label: 'Custom Range',
+    value: 'custom_range',
+  },
+];
+
+export default function DatePicker({
+  helpText,
+  keyboardType = 'text',
+  inputRef,
+  label,
+  leadingIcon: LeadingIcon,
+  onBlur,
+  onChangeText,
+  onFocus,
+  readonly,
+  trailingIcon: TrailingIcon,
+  value: propValue = '',
+  ...props
+}) {
+  const [isFocused, setFocused] = useState(false);
+  const [value, setValue] = useState(propValue);
+
+  useEffect(() => {
+    if (propValue !== value) {
+      setValue(propValue);
+    }
+  }, [propValue, setValue, value]);
+
+  const handleFocus = useCallback(
+    (event) => {
+      setFocused(true);
+      onFocus && onFocus(event);
+    },
+    [onFocus]
+  );
+
+  const handleBlur = useCallback(
+    (event) => {
+      setFocused(false);
+      onBlur && onBlur(event);
+    },
+    [onBlur]
+  );
+
+  const handleChange = useCallback(
+    (event) => {
+      const { value } = event.target;
+      setValue(value);
+      onChangeText && onChangeText(value);
+    },
+    [onChangeText, setValue]
+  );
+
+  const onClick = (e) => {
+    props.onclick(e);
+  };
+  const labelMoved = isFocused || value !== '';
+
+  return (
+    <div className="w-full">
+      {props.children}
+      <div
+        className={`bg-gray-100 dark:bg-gray-700 rounded rounded-b-none border-gray-400 border-b p-1 pl-4 pr-3 ${
+          isFocused ? 'border-blue-500 dark:border-blue-500' : ''
+        }`}
+        ref={inputRef}
+      >
+        <label
+          className="flex space-x-2 items-center"
+          data-testid={`label-${label.toLowerCase().replace(/[^\w]+/g, '_')}`}
+        >
+          {LeadingIcon ? (
+            <div className="w-10 h-full">
+              <LeadingIcon />
+            </div>
+          ) : null}
+          <div className="relative w-full">
+            <input
+              className="h-6 mt-6 w-full bg-transparent focus:outline-none focus:ring-0"
+              type={keyboardType}
+              readOnly
+              onBlur={handleBlur}
+              onFocus={handleFocus}
+              onInput={handleChange}
+              tabIndex="0"
+              onClick={onClick}
+              value={propValue}
+              {...props}
+            />
+            <div
+              className={`absolute top-3 transition transform text-gray-600 dark:text-gray-400 ${
+                labelMoved ? 'text-xs -translate-y-2' : ''
+              } ${isFocused ? 'text-blue-500 dark:text-blue-500' : ''}`}
+            >
+              <p>{label}</p>
+            </div>
+          </div>
+          {TrailingIcon ? (
+            <div className="w-10 h-10">
+              <TrailingIcon />
+            </div>
+          ) : null}
+        </label>
+      </div>
+      {helpText ? <div className="text-xs pl-3 pt-1">{helpText}</div> : null}
+    </div>
+  );
+}