Refactor/inplace input (#541)

* wip * Changed all other components * Removed console log * Console.log * lint * Removed internal state * Fix * Lint
2023-07-09 01:45:52 +02:00
parent b3d0061e0d
commit e03d5ed8a7
47 changed files with 680 additions and 326 deletions
@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import styled from '@emotion/styled';
+import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
+
+import { RawLink } from '@/ui/components/links/RawLink';
+
+const StyledRawLink = styled(RawLink)`
+  overflow: hidden;
+
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+type OwnProps = {
+  value: string;
+};
+
+export function InplaceInputPhoneDisplayMode({ value }: OwnProps) {
+  return isValidPhoneNumber(value) ? (
+    <StyledRawLink
+      href={parsePhoneNumber(value, 'FR')?.getURI()}
+      onClick={(event: MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+      }}
+    >
+      {parsePhoneNumber(value, 'FR')?.formatInternational() || value}
+    </StyledRawLink>
+  ) : (
+    <StyledRawLink href="#">{value}</StyledRawLink>
+  );
+}