feat: UI 5.0

alibaba · Apr 29, 2021 · 898ba2d · 898ba2d
1 parent bd01305
commit 898ba2d
Show file tree

Hide file tree

Showing 42 changed files with 845 additions and 518 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,31 +5,27 @@ module.exports = {
     project: './tsconfig.json',
   },
   extends: [
-    'airbnb',
+    'airbnb/hooks',
     'airbnb-typescript',
     'prettier',
-    'prettier/react',
-    'prettier/@typescript-eslint',
   ],
   env: {
     browser: true,
-    // jest: true,
+    jest: true,
   },
-  plugins: ['compat', 'react-hooks'],
+  plugins: ['compat'],
   rules: {
     'compat/compat': 'error',
     'import/prefer-default-export': 'off',
-    'no-underscore-dangle': 'off',
-    'react/jsx-filename-extension': 'off',
+    // 'no-underscore-dangle': 'off',
+    // 'react/jsx-filename-extension': 'off',
     'react/jsx-props-no-spreading': 'off',
-    'react/no-array-index-key': 'off',
-    'react/require-default-props': 'off',
+    // 'react/no-array-index-key': 'off',
+    // 'react/require-default-props': 'off',
     'react/prop-types': 'off',
-    'react-hooks/rules-of-hooks': 'error',
-    "react-hooks/exhaustive-deps": "warn",
-    'jsx-a11y/click-events-have-key-events': 'off',
-    'jsx-a11y/label-has-associated-control': 'off',
-    'jsx-a11y/label-has-for': 'off',
+    // 'jsx-a11y/click-events-have-key-events': 'off',
+    // 'jsx-a11y/label-has-associated-control': 'off',
+    // 'jsx-a11y/label-has-for': 'off',
   },
   settings: {
     polyfills: ['IntersectionObserver', 'Promise'],

diff --git a/gulpfile.js b/gulpfile.js
@@ -15,7 +15,11 @@ const paths = {
 };
 
 function fullStyle(cb) {
-  gulp.src('./src/styles/index.less').pipe(less()).pipe(postcss()).pipe(gulp.dest(paths.dest.dist));
+  gulp
+    .src(['./src/styles/index.less', './src/styles/chatui.less'])
+    .pipe(less())
+    .pipe(postcss())
+    .pipe(gulp.dest(paths.dest.dist));
 
   cb();
 }

diff --git a/src/components/Avatar/style.less b/src/components/Avatar/style.less
@@ -5,22 +5,22 @@
 
   img {
     display: block;
-    width: 36px;
-    height: 36px;
+    width: @avatar-size;
+    height: @avatar-size;
     object-fit: cover;
   }
 }
 
 .Avatar--sm img {
-  width: 24px;
-  height: 24px;
+  width: @avatar-size-sm;
+  height: @avatar-size-sm;
 }
 
 .Avatar--lg img {
-  width: 40px;
-  height: 40px;
+  width: @avatar-size-lg;
+  height: @avatar-size-lg;
 }
 
 .Avatar--square {
-  border-radius: 4px;
+  border-radius: @avatar-square-border-radius;
 }
diff --git a/src/components/Backdrop/index.tsx b/src/components/Backdrop/index.tsx
@@ -4,18 +4,19 @@ import clsx from 'clsx';
 export interface BackdropProps {
   className?: string;
   active?: boolean;
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
-export const Backdrop: React.FC<BackdropProps> = (props) => {
-  const { className, active, onClick } = props;
+export const Backdrop = (props: BackdropProps) => {
+  const { className, active, onClick, ...rest } = props;
   return (
     <div
       className={clsx('Backdrop', className, { active })}
       onClick={onClick}
       role="button"
       tabIndex={-1}
       aria-hidden
+      {...rest}
     />
   );
 };
diff --git a/src/components/Backdrop/style.less b/src/components/Backdrop/style.less
@@ -7,8 +7,9 @@
   transition: 0.3s;
   width: 100vw;
   height: 100vh;
-  background: var(--gray-5);
+  background: @backdrop-bg;
   opacity: 0;
+  outline: 0;
 
   &.active {
     opacity: 1;

diff --git a/src/components/Bubble/style.less b/src/components/Bubble/style.less
@@ -1,8 +1,7 @@
 .Bubble {
-  max-width: 680px;
+  max-width: @bubble-max-width;
   // min-width: 0;
-  // for IE bug
-  min-width: 1px;
+  min-width: 1px; // for IE bug
   background: @bubble-left-bg;
   border-radius: @bubble-left-border-radius;
 
@@ -17,12 +16,16 @@
   &.image {
     img {
       display: block;
-      max-width: 100%;
+      max-width: @bubble-img-max-width;
+      max-height: @bubble-img-max-height;
       height: auto;
       border-radius: inherit;
     }
   }
   &.typing {
-    padding: 8px 16px;
+    padding: @bubble-typing-padding;
+  }
+  p {
+    margin: 0;
   }
 }
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import { Icon } from '../Icon';
 
 export type ButtonVariant = 'text';
 
@@ -9,10 +10,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   className?: string;
   label?: string;
   color?: 'primary';
-  // title?: string;
   variant?: ButtonVariant;
   size?: ButtonSize;
   block?: boolean;
+  icon?: string;
   loading?: boolean;
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -60,6 +61,11 @@ export const Button: React.FC<ButtonProps> = (props) => {
       onClick={handleClick}
       {...other}
     >
+      {loading && (
+        <span className="Btn-icon">
+          <Icon type="spinner" spin />
+        </span>
+      )}
       {label || children}
     </button>
   );

diff --git a/src/components/Button/style.less b/src/components/Button/style.less
@@ -1,5 +1,8 @@
 .Btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
   margin: 0;
   padding: @btn-padding;
   border: @btn-border-width solid @btn-border-color;
@@ -10,22 +13,27 @@
   font-size: @btn-font-size;
   line-height: @btn-line-height;
   font-family: @btn-font-family;
+  text-transform: none;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   transition: @btn-transition;
   user-select: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
 
   &:not(:disabled) {
     cursor: pointer;
   }
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: 0;
   }
-  // &:hover,
-  // &:active {
-  //   background-color: rgba(0, 0, 0, 0.04);
-  // }
+  &:hover {
+    background: @btn-hover-bg;
+  }
+  &:active {
+    background: @btn-active-bg;
+  }
   &:disabled {
     pointer-events: none;
     border-color: @btn-disabled-border-color;
@@ -35,13 +43,18 @@
   &--primary {
     border-color: @btn-primary-border-color;
     background: @btn-primary-bg;
+    background-origin: border-box;
     color: @btn-primary-color;
 
-    // &:hover,
-    // &:active {
-    //   background-image: linear-gradient(90deg, #f2b830 0%, #f2a900 100%);
-    // }
+    &:hover {
+      background: @btn-primary-hover-bg;
+      background-origin: border-box;
+    }
+    &:active {
+      background: @btn-primary-active-bg;
+    }
     &:disabled {
+      border-color: @btn-primary-disabled-border-color;
       background: @btn-primary-disabled-bg;
       color: @btn-primary-disabled-color;
     }
@@ -82,4 +95,10 @@
       margin-top: @btn-block-spacing-y;
     }
   }
+  &-icon {
+    display: inline-flex;
+    align-self: center;
+    flex-shrink: 0;
+    margin-inline-end: 0.5rem;
+  }
 }
diff --git a/src/components/Card/style.less b/src/components/Card/style.less
@@ -67,7 +67,9 @@
     text-align: center;
   }
   &-title {
+    margin: 0;
     font-size: @card-title-font-size;
+    font-weight: @card-title-font-weight;
   }
   &-subtitle {
     color: @card-subtitle-color;
@@ -92,6 +94,9 @@
   .CardTitle + & {
     padding-top: 0;
   }
+  p {
+    margin: 0;
+  }
 }
 
 /* CardActions */
@@ -122,10 +127,20 @@
     border-top: 1px solid @card-btn-border-color;
     border-radius: 0;
     background: @card-column-btn-bg;
+    color: @card-column-btn-color;
 
     &:last-child {
       border-radius: 0 0 @card-border-radius @card-border-radius;
     }
+    &:hover {
+      background: @card-column-btn-hover-bg;
+    }
+    &:active {
+      background: @card-column-btn-active-bg;
+    }
+    &:disabled {
+      color: @card-column-btn-disabled-color;
+    }
   }
   .Btn + .Btn {
     margin: @card-btn-spacing-y;

diff --git a/src/components/Chat/style.less b/src/components/Chat/style.less
@@ -26,54 +26,6 @@
   background: rgba(242, 244, 245, 0.95);
 }
 
-/* common */
-.bordered {
-  border-radius: 12px;
-  box-shadow: var(--shadow-1);
-}
-
-/* utils */
-.animated {
-  animation-duration: 1s;
-  animation-fill-mode: both;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.fadeIn {
-  animation-name: fadeIn;
-}
-
-/* footer */
-.scrollable {
-  overflow: hidden;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.scroller {
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  margin-bottom: -18px;
-  padding-bottom: 18px;
-  white-space: nowrap;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
 /* animation */
 .slide-in-right-item {
   animation: slideInRight 0.5s ease-in-out both;

diff --git a/src/components/Composer/AccessoryWrap.tsx b/src/components/Composer/AccessoryWrap.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { ClickOutside } from '../ClickOutside';
+
+interface AccessoryWrapProps {
+  onClickOutside: () => void;
+  children: React.ReactNode;
+}
+
+export const AccessoryWrap = ({ onClickOutside, children }: AccessoryWrapProps) => (
+  <ClickOutside onClick={onClickOutside}>{children}</ClickOutside>
+);