CHANGE | remove copy icon from user-form & update fields with copy-icon layouts (#15)

WEB. Відбувається накладання іконки копіювання вмісту поля на самий вміст.
Адмін панель / Сторінка користувачів / Прибрати копіювання

Reviewed-on: #15
Co-authored-by: Yevhen Romanenko <yevhen.romanenko.jetup@gmail.com>
Co-committed-by: Yevhen Romanenko <yevhen.romanenko.jetup@gmail.com>

src/components/Fields/DateField.tsx

@@ -56,8 +56,8 @@ export const DateField: FC<IProps> = ({
 
   return (
     <>
-      <p className="profile__data-tooltip">{label}</p>
       <div className="profile__data_card" style={style}>
+        <p className="profile__data-tooltip">{label}</p>
         <DatePicker
           allowClear={input ? input?.allowClear : allowClear}
           value={

src/containers/Chats/modals/user-info.modal.tsx

@@ -70,7 +70,7 @@ export const UserInfoModal: FC<UserInfoModalProps> = (props) => {
       toggle={props.toggle}
       modalHeaderClass="user-info"
     >
-      <form className="form container">
+      <form className="form container user-modal-container">
         <div className="top-block">
           <div className="avatar-wrap">
             <p className="avatar-label">Аватар</p>
@@ -92,6 +92,7 @@ export const UserInfoModal: FC<UserInfoModalProps> = (props) => {
                 user?.info?.lastName
               )}
               onChange={_.noop}
+              enableCopy={true}
             />
 
             <DateField
@@ -159,6 +160,7 @@ export const UserInfoModal: FC<UserInfoModalProps> = (props) => {
                 if (user?.status !== EUserStatus.Deleted)
                   window.open(`mailto:${user?.email}`);
               }}
+              enableCopy
             />
 
             <Button

src/containers/Chats/modals/user-info.styles.scss

@@ -11,6 +11,28 @@
   }
 }
 
+.user-modal-container {
+  .input-mask-field {
+    .input-container {
+      padding: 0px 0px;
+    }
+  }
+
+  .profile__data_card {
+    padding-right: 0px;
+
+    .profile__data-tooltip {
+      margin-bottom: 4px !important;
+    }
+
+    .contact-copy {
+      position: absolute;
+      cursor: pointer;
+      right: 10px;
+    }
+  }
+}
+
 .modal-header.user-info {
   margin-bottom: 7px;
 }

src/containers/Profile/components/form-user/form-user.component.tsx

@@ -103,7 +103,6 @@ export const FormUser: FC<IProps> = ({
                       validateFullName(text);
                     }}
                     value={value}
-                    enableCopy={true}
                   />
                 );
               }}
@@ -133,7 +132,6 @@ export const FormUser: FC<IProps> = ({
                       validateEmail(text);
                     }}
                     value={value}
-                    enableCopy={true}
                   />
                 );
               }}
@@ -186,7 +184,6 @@ export const FormUser: FC<IProps> = ({
                     value={value}
                     placeholder={"+38 (0xx) xxx xx xx"}
                     mask="+380 (999) 999 99 99"
-                    enableCopy={true}
                     onChange={(text) => {
                       setError({
                         ...errors,
@@ -244,7 +241,6 @@ export const FormUser: FC<IProps> = ({
                   value={value}
                   placeholder={"+38 (0xx) xxx xx xx"}
                   mask="+380 (999) 999 99 99"
-                  enableCopy={true}
                   onChange={(text) => {
                     setError({ ...errors, personalPhoneNumber: "" });
                     onChange(text.replace(/[^+\d]/g, ""));
@@ -256,21 +252,6 @@ export const FormUser: FC<IProps> = ({
           </div>
         </div>
 
-        {/* {profile.id != authProfileId && (
-        <Controller
-          name="factories"
-          control={control}
-          render={({ field }) => (
-            <TreeSelectField
-              label={"Підприємство"}
-              placeholder={"Підприємство"}
-              multiple
-              tree={genTree(_.cloneDeep(factory))}
-              register={field}
-            />
-          )}
-        />
-      )} */}
         <div
           className="row row-profile-user"
           // style={{ width: "100%", margin: 0, marginTop: 20 }}
@@ -288,7 +269,6 @@ export const FormUser: FC<IProps> = ({
                   onChange={onChange}
                   value={value}
                   error={fieldState?.error?.message}
-                  enableCopy={true}
                 />
               )}
             />
@@ -316,7 +296,6 @@ export const FormUser: FC<IProps> = ({
                     validateLogin(text);
                   }}
                   value={value}
-                  enableCopy={true}
                 />
               )}
             />

src/containers/User/components/FormUser/style.scss

@@ -87,6 +87,12 @@
       width: 50%;
     }
   }
+
+  .input-mask-field {
+    .input-container {
+      padding: 0px 0px;
+    }
+  }
 }
 
 .contact-row-field {

src/scss/containers/profile.scss

@@ -134,24 +134,32 @@
 
 .profile__data_card {
   width: 100%;
-  display: flex;
-  align-items: center;
-  background: #f5f5f5;
-  border-color: #d9d9d9;
-  border-radius: 10px;
-  padding-right: 10px;
+  // display: flex;
+  // align-items: center;
+  // background: #f5f5f5;
+  // border-color: #d9d9d9;
+  // border-radius: 10px;
+  // padding-right: 10px;
   .contact-copy {
+    position: absolute;
     cursor: pointer;
     width: 20px;
     height: 20px;
+    right: 10px;
+    bottom: 33px;
   }
   .ant-picker {
     margin-top: 0px !important;
   }
+
+  // .profile__data-tooltip {
+  //   margin-bottom: 10px !important;
+  // }
 }
 
 .profile__data-tooltip {
   font-size: 12px;
+
   // line-height: 1.7;
   color: $color-additional-text !important;
 }

src/shared/components/fields/contact-field.component.tsx

@@ -39,11 +39,13 @@ export const ContactField: FC<IProps> = ({
       <p className="contact-label">{label}</p>
       <div className="value-container">
         {!phone ? (
-          <span>{value || placeholder}</span>
+          <span title={String(value)}>{value || placeholder}</span>
         ) : (
-          <span>{formattedPhone || placeholder}</span>
+          <span title={String(formattedPhone)}>
+            {formattedPhone || placeholder}
+          </span>
         )}
-        <div>
+        <div className="images">
           <img src={svgIcon} />
           <img
             className="contact-copy"

src/shared/components/fields/functional-email-field.component.tsx

@@ -1,4 +1,6 @@
 import React, { FC, CSSProperties } from "react";
+import copySvg from "@/assets/img/copy-icon-1.svg";
+import { message } from "antd";
 import "./styles.scss";
 
 interface IProps {
@@ -6,6 +8,7 @@ interface IProps {
   value: string | number;
   style?: CSSProperties;
   onClick?: () => void;
+  enableCopy?: boolean;
 }
 
 export const FunctionalEmailField: FC<IProps> = ({
@@ -13,12 +16,32 @@ export const FunctionalEmailField: FC<IProps> = ({
   value,
   style,
   onClick,
+  enableCopy,
 }) => {
+  const onCopy = (value) => {
+    navigator.clipboard.writeText(value.toString());
+    message.info("Данні скопійовані!");
+  };
+
+  const handleIconClick = (event) => {
+    event.stopPropagation();
+
+    onCopy(value);
+  };
+
   return (
     <div className="functional-email-field" style={style}>
       <p className="functional-email-label">{label}</p>
       <div className="value-container" onClick={onClick}>
         <span>{value}</span>
+        {enableCopy && (
+          <img
+            className="contact-copy"
+            src={copySvg}
+            alt="copy"
+            onClick={handleIconClick}
+          />
+        )}
       </div>
     </div>
   );

src/shared/components/fields/input-mask-field.component.tsx

@@ -64,7 +64,6 @@ export const InputMaskField: FC<IProps> = ({
           inputStyle={{
             background: "transparent",
             paddingLeft: 0,
-            width: "100%",
           }}
           onChange={(value: string) => {
             onChange(value);

src/shared/components/fields/styles.scss

@@ -75,12 +75,13 @@ $border-radius: 10px;
   width: 100%;
   margin-bottom: 20px;
   position: relative;
+
   .contact-copy {
     width: 20px;
     height: 20px;
     position: absolute;
-    top: 33px;
-    right: 5px;
+    top: 34px;
+    right: 10px;
     cursor: pointer;
   }
 
@@ -369,7 +370,6 @@ $border-radius: 10px;
 
 .contact-field {
   width: 100%;
-  // margin-bottom: 20px;
 
   .contact-label {
     font-size: 12px;
@@ -384,31 +384,33 @@ $border-radius: 10px;
     border-radius: 10px;
     font-size: 16px;
     line-height: 16px;
-    // margin-top: 5px;
+
     justify-content: space-between;
     align-items: center;
     padding: 0px 20px 0px 20px;
+
     img {
-      // margin-top: 10px;
-      // fill: $color-primary;
       width: 24px;
       height: 24px;
     }
+
+    span {
+      max-width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .images {
+      display: flex;
+      flex-direction: row;
+    }
   }
 
   .contact-copy {
     margin-left: 15px;
     cursor: pointer;
   }
-
-  // input {
-  //   border: none !important;
-  //   border-radius: $border-radius !important;
-
-  //   &::placeholder {
-  //     color: $placeholder-color;
-  //   }
-  // }
 }
 
 .functional-email-field {
@@ -428,10 +430,16 @@ $border-radius: 10px;
     line-height: 16px;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 15px 10px 15px;
+    padding: 10px 10px 10px 15px;
 
     &:hover {
       cursor: pointer;
     }
+
+    .contact-copy {
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
+    }
   }
 }