Merge pull request #498 from rossneilson/release/v2.4.0

Small link improvement & fixing date input
DXgovernance · Jan 18, 2023 · 9eed8f2 · 9eed8f2
2 parents c1487bc + 7f76abd
commit 9eed8f2
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 103 deletions.
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "@sentry/react": "^7.30.0",
     "@tiptap/extension-focus": "^2.0.0-beta.39",
     "@tiptap/extension-highlight": "^2.0.0-beta.32",
+    "@tiptap/extension-link": "^2.0.0-beta.209",
     "@tiptap/extension-placeholder": "^2.0.0-beta.48",
     "@tiptap/react": "^2.0.0-beta.105",
     "@tiptap/starter-kit": "^2.0.0-beta.171",
@@ -92,7 +93,7 @@
     "react": "^18.2.0",
     "react-app-rewired": "^2.1.8",
     "react-countdown": "^2.3.2",
-    "react-datetime": "^3.1.1",
+    "react-datepicker": "^4.8.0",
     "react-device-detect": "^2.1.2",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "^18.2.0",

diff --git a/src/components/ActionsBuilder/SupportedActions/GenericCall/GenericCallParamsMatcher.tsx b/src/components/ActionsBuilder/SupportedActions/GenericCall/GenericCallParamsMatcher.tsx
@@ -4,7 +4,7 @@ import { ChildrenNode, Matcher, MatchResponse, Node } from 'interweave';
 import moment from 'moment';
 import { BlockExplorerLink } from 'components/primitives/Links';
 import { FunctionParamWithValue } from 'components/ActionsBuilder/SupportedActions/GenericCall/GenericCallInfoLine';
-import { capitalizeFirstLetter } from 'utils';
+import { getDurationData } from 'hooks/Guilds/useDuration/getDurationData';
 interface MatcherOptions {
   params: FunctionParamWithValue[];
 }
@@ -37,9 +37,9 @@ export const renderGenericCallParamValue = (
       return `${moment.unix(Number(param.value)).utc().format('LLLL')} UTC`;
     case 'duration':
     case 'time':
-      return capitalizeFirstLetter(
-        moment.duration(Number(param.value), 'seconds').humanize()
-      );
+      return param.value === '0'
+        ? '0 seconds'
+        : getDurationData(Number(param.value))?.string;
     case 'boolean':
       return `${param.value}`;
     case 'tokenAmount':

diff --git a/...Builder/SupportedActions/GenericCall/__snapshots__/GenericCallParamsMatcher.test.tsx.snap b/...Builder/SupportedActions/GenericCall/__snapshots__/GenericCallParamsMatcher.test.tsx.snap
@@ -169,7 +169,7 @@ exports[`GenericCallParamsMatcher Should match snapshot for all component types
 exports[`GenericCallParamsMatcher Should match snapshot for all component types 5`] = `
 <div>
    
-  52 years
+  53 years, 2 months, 1 day, 18 hours, 17 minutes and 18 seconds
    
 </div>
 `;
@@ -399,7 +399,7 @@ exports[`GenericCallParamsMatcher replaces all component types correctly 5`] = `
     matchedparam="timeParam"
     style="display: inline-block;"
   >
-    52 years
+    53 years, 2 months, 1 day, 18 hours, 17 minutes and 18 seconds
   </span>
    
 </div>

diff --git a/src/components/Editor/useTextEditor.tsx b/src/components/Editor/useTextEditor.tsx
@@ -3,6 +3,7 @@ import StarterKit from '@tiptap/starter-kit';
 import Focus from '@tiptap/extension-focus';
 import Highlight from '@tiptap/extension-highlight';
 import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
 import { Editor } from './components/Editor';
 import TurndownService from 'turndown';
 import useLocalStorageWithExpiry from 'hooks/Guilds/useLocalStorageWithExpiry';
@@ -44,6 +45,7 @@ export const useTextEditor = (
         placeholder,
       }),
       Highlight,
+      Link,
     ],
     onUpdate: ({ editor }) => {
       const html = editor.getHTML();

diff --git a/src/components/ProposalDescription/ProposalDescription.tsx b/src/components/ProposalDescription/ProposalDescription.tsx
@@ -21,7 +21,15 @@ export const ProposalDescription: React.FC<ProposalDescriptionProps> = ({
   return (
     <ProposalDescriptionWrapper>
       {metadata?.description ? (
-        <Markdown>{metadata.description}</Markdown>
+        <Markdown
+          options={{
+            overrides: {
+              a: { props: { target: '_blank' } },
+            },
+          }}
+        >
+          {metadata.description}
+        </Markdown>
       ) : (
         <Loading loading text skeletonProps={{ width: '100%' }} />
       )}

diff --git a/src/components/primitives/Forms/DateInput/DateInput.tsx b/src/components/primitives/Forms/DateInput/DateInput.tsx
@@ -1,86 +1,77 @@
-import styled from 'styled-components';
-import DateTime from 'react-datetime';
-import { Moment } from 'moment';
-import 'react-datetime/css/react-datetime.css';
+import { createGlobalStyle } from 'styled-components';
+import DatePicker from 'react-datepicker';
+import moment, { Moment } from 'moment';
+import 'react-datepicker/dist/react-datepicker.css';
 import { Input, InputProps } from 'components/primitives/Forms/Input';
-import { useMemo } from 'react';
+import { forwardRef } from 'react';
 
-const StyledDateTime = styled(DateTime)`
-  .rdtPicker {
-    background: ${({ theme }) => theme.colors.bg3};
-    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+const GlobalDatePickerStyles = createGlobalStyle`
+  .react-datepicker {
+    background-color: ${({ theme }) => theme.colors.bg3};
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
     border: 1px solid ${({ theme }) => theme.colors.border1};
-    padding: 1.5rem;
     border-radius: 0.625rem;
     font-family: ${({ theme }) => theme.fonts.body};
-    color: ${({ theme }) => theme.colors.grey};
-    position: fixed;
+    color: ${({ theme }) => theme.colors.white};
   }
-
-  .rdtPicker .rdtMonths td,
-  .rdtPicker .rdtYears td {
-    height: 3.5rem;
+  .react-datepicker__day, .react-datepicker__day-name {
+    color: ${({ theme }) => theme.colors.white};
+    width: 2.5rem;
+    line-height: 2.5rem;
+  }
+  .react-datepicker__header {
+    color: ${({ theme }) => theme.colors.white};
+    background-color: transparent;
+    border-bottom: none;
+    padding-top: 16px;
   }
 
-  .rdtPicker .rdtDays td,
-  .rdtPicker .rdtDays th,
-  .rdtPicker .rdtMonths th,
-  .rdtPicker .rdtYears th {
-    height: 2.5rem;
-    width: 2.5rem;
+  .react-datepicker__navigation--previous {
+    left: 8px;
+    top: 10px;
   }
 
-  .rdtPicker td.rdtYear:hover,
-  .rdtPicker td.rdtMonth:hover,
-  .rdtPicker td.rdtDay:hover,
-  .rdtPicker td.rdtHour:hover,
-  .rdtPicker td.rdtMinute:hover,
-  .rdtPicker td.rdtSecond:hover {
-    background: ${({ theme }) => theme.colors.bg4};
-    border-radius: 50%;
-    outline: 1px solid ${({ theme }) => theme.colors.text};
+  .react-datepicker__navigation--next {
+    right: 8px;
+    top: 8.5px;
   }
 
-  .rdtPicker td.rdtTimeToggle:hover,
-  .rdtPicker td.rdtSwitch:hover {
-    background: ${({ theme }) => theme.colors.bg4};
-    cursor: pointer;
+  .react-datepicker__day-names {
+    margin-top: 16px;
+    margin-bottom: -16px;
+  } 
+
+  .react-datepicker__day--keyboard-selected {
+    background-color: transparent;
   }
 
-  .rdtPicker td.rdtOld,
-  .rdtPicker td.rdtNew {
-    color: ${({ theme }) => theme.colors.grey};
+  .react-datepicker__current-month, .react-datepicker__day-name {
+    color: ${({ theme }) => theme.colors.white};
   }
 
-  .rdtPicker td.rdtToday:before {
-    display: none;
+  .react-datepicker__day:hover {
+    background: ${({ theme }) => theme.colors.bg4};
+    border-radius: 50%;
+    outline: 1px solid ${({ theme }) => theme.colors.text};
   }
 
-  .rdtPicker td.rdtActive,
-  .rdtPicker td.rdtActive:hover {
+  .react-datepicker__day--selected {
     border-radius: 50%;
     background-color: ${({ theme }) => theme.colors.bg1};
     cursor: pointer;
   }
 
-  .rdtPicker th {
-    border: none;
-  }
-
-  .rdtPicker th.rdtNext,
-  .rdtPicker th.rdtPrev {
-    vertical-align: middle;
+  .react-datepicker__day--outside-month {
+    color: ${({ theme }) => theme.colors.grey};
   }
 
-  .rdtPicker th.rdtSwitch:hover,
-  .rdtPicker th.rdtNext:hover,
-  .rdtPicker th.rdtPrev:hover,
-  .rdtPicker .rdtCounter .rdtBtn:hover {
-    background: ${({ theme }) => theme.colors.bg4};
-    cursor: pointer;
+  .react-datepicker__triangle::before, .react-datepicker__triangle::after{
+    border-top-color: ${({ theme }) => theme.colors.bg3} !important;
+    border-bottom-color: ${({ theme }) => theme.colors.bg3} !important;
   }
 `;
 
+// TODO: Implement time and datetime
 export enum InputType {
   DATE,
   TIME,
@@ -101,36 +92,23 @@ export const DateInput: React.FC<DateInputProps> = ({
   isValidDate = () => true,
   ...rest
 }) => {
-  const { dateFormat, timeFormat } = useMemo(() => {
-    if (inputType === InputType.DATETIME) {
-      return {
-        dateFormat: 'DD/MM/YYYY',
-        timeFormat: 'HH:mm:ss A',
-      };
-    } else if (inputType === InputType.TIME) {
-      return {
-        dateFormat: false,
-        timeFormat: 'HH:mm:ss A',
-      };
-    }
-
-    return {
-      dateFormat: 'DD/MM/YYYY',
-      timeFormat: false,
-    };
-  }, [inputType]);
+  const CustomInput = forwardRef(({ value, onClick }: any, ref) => (
+    <Input onClick={onClick} readOnly value={value} {...rest} />
+  ));
 
   return (
-    <StyledDateTime
-      value={value}
-      onChange={onChange}
-      dateFormat={dateFormat}
-      timeFormat={timeFormat}
-      isValidDate={isValidDate}
-      utc={isUTC}
-      renderInput={(props, openCalendar) => (
-        <Input onClick={openCalendar} readOnly {...props} {...rest} />
-      )}
-    />
+    <>
+      <GlobalDatePickerStyles />
+      <DatePicker
+        selected={value && moment(value).toDate()}
+        onChange={date => {
+          onChange(moment(date));
+        }}
+        dateFormat={'dd/MM/yyyy'}
+        onMonthChange={() => {}}
+        closeOnScroll={true}
+        customInput={<CustomInput />}
+      />
+    </>
   );
 };