Merge pull request #250 from acelaya-forks/feature/native-date-inputs

Feature/native date inputs

Author: acelaya

.eslintrc

@@ -7,6 +7,9 @@
     "project": "./tsconfig.json"
   },
   "rules": {
+    "jsx-a11y/label-has-associated-control": ["error", {
+      "controlComponents": ["Input", "DateInput"]
+    }],
     "react/no-unused-prop-types": "off"
   },
   "overrides": [{

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* *Nothing*
+
+### Changed
+* Replace `react-datepicker` with native `input[type="date"]` and `input[type="datetime-local"]` elements.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.5.0] - 2024-01-29
 ### Added
 * [#7](https://github.com/shlinkio/shlink-web-component/issues/7) Allow comparing visits for multiple short URLs, tags or domains.

package-lock.json

@@ -69,7 +69,6 @@
     "event-source-polyfill": "^1.0.31",
     "leaflet": "^1.9.4",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-datepicker": "^4.25.0",
     "react-external-link": "^2.2.0",
     "react-leaflet": "^4.2.1",
     "react-swipeable": "^7.0.1",
@@ -87,7 +86,6 @@
     "@types/leaflet": "^1.9.8",
     "@types/react": "^18.2.52",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-datepicker": "^4.19.5",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.2.2",

package.json

@@ -1,7 +1,6 @@
 @import './tags/react-tag-autocomplete';
 @import './utils/StickyCardPaginator.scss';
 @import 'leaflet/dist/leaflet.css';
-@import 'react-datepicker/dist/react-datepicker.min.css';
 
 .input-group-text.input-group-text {
   border-color: var(--input-border-color);
@@ -12,3 +11,17 @@
   top: $headerHeight;
   z-index: 10;
 }
+
+// This should probably go to shlink-frontend-kit
+$input-types: "text", "date", "datetime-local", "password", "number", "email", "search", "url";
+
+@each $type in $input-types {
+  .card input[type="#{$type}"]:not(:disabled),
+  .dropdown input[type="#{$type}"]:not(:disabled) {
+    background-color: var(--input-color) !important;
+  }
+}
+
+.dropdown label {
+  color: var(--text-color) !important;
+}

src/index.scss

@@ -15,9 +15,8 @@ import type { DomainSelectorProps } from '../domains/DomainSelector';
 import type { TagsSelectorProps } from '../tags/helpers/TagsSelector';
 import type { TagsList } from '../tags/reducers/tagsList';
 import { IconInput } from '../utils/components/IconInput';
-import type { DateTimeInputProps } from '../utils/dates/DateTimeInput';
-import { DateTimeInput } from '../utils/dates/DateTimeInput';
 import { formatIsoDate } from '../utils/dates/helpers/date';
+import { LabelledDateInput } from '../utils/dates/LabelledDateInput';
 import { useFeature } from '../utils/features';
 import { handleEventPreventingDefault, hasValue } from '../utils/helpers';
 import { ShortUrlFormCheckboxGroup } from './helpers/ShortUrlFormCheckboxGroup';
@@ -26,7 +25,6 @@ import './ShortUrlForm.scss';
 
 export type Mode = 'create' | 'create-basic' | 'edit';
 
-type DateFields = 'validSince' | 'validUntil';
 type NonDateFields = 'longUrl' | 'customSlug' | 'shortCodeLength' | 'domain' | 'maxVisits' | 'title';
 
 export interface ShortUrlFormProps<T extends ShlinkCreateShortUrlData | ShlinkEditShortUrlData> {
@@ -74,12 +72,9 @@ const ShortUrlForm: FCWithDeps<ShortUrlFormConnectProps, ShortUrlFormDeps> = (
     // value gets removed. Otherwise, set undefined so that it gets ignored.
     return hasValue(initialValue) ? null : undefined;
   };
-  const submit = handleEventPreventingDefault(async () => onSave({
-    ...shortUrlData,
-    validSince: formatIsoDate(shortUrlData.validSince) ?? null,
-    validUntil: formatIsoDate(shortUrlData.validUntil) ?? null,
-    maxVisits: !hasValue(shortUrlData.maxVisits) ? null : Number(shortUrlData.maxVisits),
-  }).then((result: any) => !isEdit && !isErrorAction(result) && reset()).catch(() => {}));
+  const submit = handleEventPreventingDefault(async () => onSave(shortUrlData)
+    .then((result: any) => !isEdit && !isErrorAction(result) && reset())
+    .catch(() => {}));
 
   useEffect(() => {
     setShortUrlData(initialState);
@@ -123,16 +118,6 @@ const ShortUrlForm: FCWithDeps<ShortUrlFormConnectProps, ShortUrlFormDeps> = (
       }))}
     />
   );
-  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateTimeInputProps> = {}) => (
-    <DateTimeInput
-      name={id}
-      selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
-      placeholderText={placeholder}
-      isClearable
-      onChange={(date) => setShortUrlData((prev) => ({ ...prev, [id]: date }))}
-      {...props}
-    />
-  );
   const basicComponents = (
     <>
       <FormGroup>
@@ -216,11 +201,44 @@ const ShortUrlForm: FCWithDeps<ShortUrlFormConnectProps, ShortUrlFormDeps> = (
 
             <div className="col-sm-6 mb-3">
               <SimpleCard title="Limit access to the short URL">
-                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
-                <div className="mb-3">
-                  {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined })}
+                <div className="row mb-3">
+                  <div className="col-lg-6">
+                    <LabelledDateInput
+                      label="Enabled since"
+                      withTime
+                      maxDate={shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined}
+                      name="validSince"
+                      value={shortUrlData.validSince ? toDate(shortUrlData.validSince) : null}
+                      onChange={(date) => setShortUrlData((prev) => ({ ...prev, validSince: formatIsoDate(date) }))}
+                    />
+                  </div>
+                  <div className="col-lg-6 mt-3 mt-lg-0">
+                    <LabelledDateInput
+                      label="Enabled until"
+                      withTime
+                      minDate={shortUrlData.validSince ? toDate(shortUrlData.validSince) : undefined}
+                      name="validUntil"
+                      value={shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : null}
+                      onChange={(date) => setShortUrlData((prev) => ({ ...prev, validUntil: formatIsoDate(date) }))}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="maxVisits" className="mb-1">Maximum visits allowed:</label>
+                  <Input
+                    name="maxVisits"
+                    id="maxVisits"
+                    type="number"
+                    min={1}
+                    placeholder="25..."
+                    value={shortUrlData.maxVisits ?? ''}
+                    onChange={(e) => setShortUrlData((prev) => ({
+                      ...prev,
+                      maxVisits: !hasValue(e.target.value) ? null : Number(e.target.value),
+                    }))}
+                  />
                 </div>
-                {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince ? toDate(shortUrlData.validSince) : undefined })}
               </SimpleCard>
             </div>
           </Row>

src/short-urls/ShortUrlForm.tsx

@@ -104,7 +104,7 @@ const ShortUrlsFilteringBar: FCWithDeps<ShortUrlsFilteringConnectProps, ShortUrl
       <Row className="flex-lg-row-reverse">
         <div className="col-lg-8 col-xl-6 mt-3">
           <div className="d-md-flex">
-            <div className="flex-fill">
+            <div className="flex-grow-1">
               <DateRangeSelector
                 defaultText="All short URLs"
                 dateRangeOrInterval={activeInterval ?? datesToDateRange(startDate, endDate)}

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -16,7 +16,7 @@ export const ShortUrlsFilterDropdown = (
   const onFilterClick = (key: keyof ShortUrlsFilter) => () => onChange({ ...selected, [key]: !selected?.[key] });
 
   return (
-    <DropdownBtn text="Filters" dropdownClassName={className} inline end minWidth={250}>
+    <DropdownBtn text="Filters" dropdownClassName={className} end minWidth={250}>
       <DropdownItem header aria-hidden>Visits:</DropdownItem>
       <DropdownItem active={excludeBots} onClick={onFilterClick('excludeBots')}>Ignore visits from bots</DropdownItem>
 

src/short-urls/helpers/ShortUrlsFilterDropdown.tsx

@@ -13,11 +13,6 @@
   background-color: var(--primary-color) !important;
 }
 
-.card .icon-input-container__input:not(:disabled),
-.dropdown .icon-input-container__input:not(:disabled) {
-  background-color: var(--input-color) !important;
-}
-
 .icon-input-container__icon {
   @include vertical-align();