feat: sync 2.4.2

Author: akai

src/components/Bubble/style.less

@@ -5,7 +5,8 @@
   background: @bubble-left-bg;
   border-radius: @bubble-left-border-radius;
 
-  &.text {
+  &.text,
+  &.typing {
     min-width: 40px;
     padding: @bubble-text-padding;
     box-sizing: border-box;
@@ -23,9 +24,6 @@
       border-radius: inherit;
     }
   }
-  &.typing {
-    padding: @bubble-typing-padding;
-  }
   p {
     margin: 0;
   }

src/components/Button/style.less

@@ -44,7 +44,8 @@
     color: var(--btn-primary-color);
 
     &:active {
-      background: @btn-primary-active-bg;
+      // background: @btn-primary-active-bg;
+      opacity: 0.8;
     }
   }
   &--outline&--primary {
@@ -80,7 +81,8 @@
     }
     &--primary:not(.Btn--outline) {
       &:hover {
-        background: @btn-primary-hover-bg;
+        background: var(--btn-primary-bg);
+        opacity: 0.9;
       }
     }
   }

src/components/Card/Card.tsx

@@ -6,7 +6,7 @@ export type CardSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface CardProps {
   className?: string;
   size?: CardSize;
-  fluid?: boolean;
+  fluid?: boolean | 'order';
   children?: React.ReactNode;
 }
 
@@ -16,6 +16,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
   return (
     <div
       className={clsx('Card', size && `Card--${size}`, { 'Card--fluid': fluid }, className)}
+      data-fluid={fluid}
       {...other}
       ref={ref}
     >

src/components/Card/style.less

@@ -25,6 +25,10 @@
   }
 }
 
+.Card[data-fluid="order"] {
+  max-width: 360px;
+}
+
 /* CardMedia */
 .CardMedia {
   position: relative;

src/components/Chat/style.less

@@ -44,51 +44,3 @@
   padding-bottom: var(--safe-bottom);
   background: var(--gray-7);
 }
-
-.slide-in-right-item {
-  animation: slideInRight 0.5s ease-in-out both;
-}
-
-.slide-in-right-item {
-  &:nth-child(2) {
-    animation-delay: 0.2s;
-  }
-  &:nth-child(3) {
-    animation-delay: 0.4s;
-  }
-  &:nth-child(4) {
-    animation-delay: 0.6s;
-  }
-  &:nth-child(5) {
-    animation-delay: 0.8s;
-  }
-  &:nth-child(6) {
-    animation-delay: 1s;
-  }
-  &:nth-child(7) {
-    animation-delay: 1.2s;
-  }
-  &:nth-child(8) {
-    animation-delay: 1.4s;
-  }
-  &:nth-child(9) {
-    animation-delay: 1.6s;
-  }
-  &:nth-child(10) {
-    animation-delay: 1.8s;
-  }
-  &:nth-child(11) {
-    animation-delay: 2s;
-  }
-}
-
-@keyframes slideInRight {
-  0% {
-    transform: translateX(100px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}

src/components/Composer/style.less

@@ -39,8 +39,8 @@
   border: @composer-input-border;
   border-radius: @composer-input-border-radius;
   background: @composer-input-bg;
-  line-height: (20 / 14);
-  word-break: break-all;
+  line-height: 20px;
+  font-size: 15px;
   caret-color: @composer-input-caret-color;
   transition: @composer-input-transition;
 }

src/components/LocaleProvider/locales/ar_EG.ts

@@ -1,4 +1,9 @@
 export default {
+  BackBottom: {
+    newMsgOne: '{n} رسالة جديدة',
+    newMsgOther: '{n} رسالة جديدة',
+    bottom: 'الأسفل',
+  },
   Time: {
     weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
     formats: {
@@ -8,4 +13,25 @@ export default {
       YT: 'HH:mm أمس',
     },
   },
+  Composer: {
+    send: 'إرسال',
+  },
+  SendConfirm: {
+    title: 'إرسال صورة',
+    send: 'أرسل',
+    cancel: 'إلغاء',
+  },
+  RateActions: {
+    up: 'التصويت',
+    down: 'تصويت سلبي',
+  },
+  Recorder: {
+    hold2talk: 'أستمر بالضغط لتتحدث',
+    release2send: 'حرر للإرسال',
+    releaseOrSwipe: 'حرر للإرسال ، اسحب لأعلى للإلغاء',
+    release2cancel: 'حرر للإلغاء',
+  },
+  Search: {
+    search: 'يبحث',
+  },
 };

src/components/LocaleProvider/locales/fr_FR.ts

@@ -1,11 +1,37 @@
 export default {
+  BackBottom: {
+    newMsgOne: '{n} nouveau message',
+    newMsgOther: '{n} nouveau messages',
+    bottom: 'Fond',
+  },
   Time: {
     weekdays: 'Dimanche_Lundi_Mardi_Mercredi_Jeudi_Vendredi_Samedi'.split('_'),
     formats: {
       LT: 'HH:mm',
       lll: 'D/M/YYYY HH:mm',
       WT: 'dddd HH:mm',
-      YT: 'Hier HH:mm', // TODO
+      YT: 'Hier HH:mm',
     },
   },
+  Composer: {
+    send: 'Envoyer',
+  },
+  SendConfirm: {
+    title: 'Envoyer une photo',
+    send: 'Envoyer',
+    cancel: 'Annuler',
+  },
+  RateActions: {
+    up: 'Voter pour',
+    down: 'Vote négatif',
+  },
+  Recorder: {
+    hold2talk: 'Tenir pour parler',
+    release2send: 'Libérer pour envoyer',
+    releaseOrSwipe: 'Relâchez pour envoyer, balayez vers le haut pour annuler',
+    release2cancel: 'Relâcher pour annuler',
+  },
+  Search: {
+    search: 'Chercher',
+  },
 };

src/components/Message/Message.tsx

@@ -39,7 +39,7 @@ export interface MessageProps {
   /**
    * 消息位置
    */
-  position?: 'left' | 'right' | 'center';
+  position?: 'left' | 'right' | 'center' | 'pop';
   /**
    * 是否显示时间
    */
@@ -56,31 +56,33 @@ export interface MessageProps {
 
 const Message = (props: MessageProps) => {
   const { renderMessageContent = () => null, ...msg } = props;
-  const { type, content, user, _id: id } = msg;
+  const { type, content, user = {}, _id: id, position = 'left', hasTime = true, createdAt } = msg;
+  const { name, avatar } = user;
 
   if (type === 'system') {
     return <SystemMessage content={content.text} action={content.action} />;
   }
 
+  const isRL = position === 'right' || position === 'left';
+
   return (
-    <div className={clsx('Message', msg.position)} data-id={id} data-type={type}>
-      {msg.hasTime && msg.createdAt && (
+    <div className={clsx('Message', position)} data-id={id} data-type={type}>
+      {hasTime && createdAt && (
         <div className="Message-meta">
-          <Time date={msg.createdAt} />
+          <Time date={createdAt} />
         </div>
       )}
-      <div className="Message-content" role="alert" aria-live="assertive" aria-atomic="false">
-        {user && user.avatar && <Avatar src={user.avatar} alt={user.name} url={user.url} />}
-        {type === 'typing' ? <Typing /> : renderMessageContent(msg)}
+      <div className="Message-main">
+        {isRL && avatar && <Avatar src={avatar} alt={name} url={user.url} />}
+        <div className="Message-inner">
+          {isRL && name && <div className="Message-author">{name}</div>}
+          <div className="Message-content" role="alert" aria-live="assertive" aria-atomic="false">
+            {type === 'typing' ? <Typing /> : renderMessageContent(msg)}
+          </div>
+        </div>
       </div>
     </div>
   );
 };
 
-Message.defaultProps = {
-  user: {},
-  position: 'left',
-  hasTime: true,
-};
-
 export default React.memo(Message);

src/components/Message/style.less

@@ -1,33 +1,43 @@
+@avatar-gap: 4px;
+
 .Message {
   position: relative;
 
   & + & {
     margin-top: @message-spacer-y;
   }
   &.left {
-    animation: msgLeft 0.5s ease-in-out;
-
+    .Message-main {
+      & > .Avatar {
+        margin-right: @avatar-gap;
+      }
+    }
     .Bubble {
       margin-right: @bubble-left-gutter;
     }
   }
   &.right {
-    animation: msgRight 0.5s ease-in-out;
-
+    .Message-main,
     .Message-content {
       flex-direction: row-reverse;
-
+    }
+    .Message-main {
       & > .Avatar {
-        margin-right: 0;
-        margin-left: 4px;
+        margin-left: @avatar-gap;
       }
     }
+    .Message-author {
+      text-align: right;
+    }
     .Bubble {
       margin-left: @bubble-right-gutter;
       border-radius: @bubble-right-border-radius;
       background: @bubble-right-bg;
     }
   }
+  &.pop {
+    display: none;
+  }
 }
 
 .Message-meta {
@@ -37,14 +47,22 @@
   text-align: center;
 }
 
+.Message-main,
 .Message-content {
   display: flex;
   align-items: flex-start;
+}
 
-  & > .Avatar {
-    flex-shrink: 0;
-    margin-right: 4px;
-  }
+.Message-inner {
+  flex: 1;
+  min-width: 0;
+}
+
+.Message-author {
+  margin-bottom: 6px;
+  color: var(--gray-2);
+  font-size: var(--font-size-xs);
+  line-height: 1.1;
 }
 
 // SystemMessage
@@ -66,33 +84,3 @@
   background: var(--gray-8);
   text-align: left;
 }
-
-@keyframes msgLeft {
-  0% {
-    transform: translateX(-20px);
-    opacity: 0;
-  }
-  50% {
-    transform: translateX(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes msgRight {
-  0% {
-    transform: translateX(20px);
-    opacity: 0;
-  }
-  20% {
-    transform: translateX(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}