feat: sync 2.4.8

alibaba · Dec 13, 2022 · 631ce1e · 631ce1e
1 parent f87490f
commit 631ce1e
Show file tree

Hide file tree

Showing 75 changed files with 376 additions and 177 deletions.
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -12,9 +12,10 @@ export interface AvatarProps {
   url?: string;
   size?: AvatarSize;
   shape?: AvatarShape;
+  children?: React.ReactNode;
 }
 
-export const Avatar: React.FC<AvatarProps> = (props) => {
+export const Avatar = (props: AvatarProps) => {
   const { className, src, alt, url, size = 'md', shape = 'circle', children } = props;
 
   const Element = url ? 'a' : 'span';

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -12,14 +12,15 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   icon?: string;
   loading?: boolean;
   disabled?: boolean;
+  children?: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 function composeClass(type?: string) {
   return type && `Btn--${type}`;
 }
 
-export const Button = (props: ButtonProps) => {
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     className,
     label,
@@ -59,6 +60,7 @@ export const Button = (props: ButtonProps) => {
       type="button"
       disabled={disabled}
       onClick={handleClick}
+      ref={ref}
       {...other}
     >
       {icon && (
@@ -69,4 +71,4 @@ export const Button = (props: ButtonProps) => {
       {label || children}
     </button>
   );
-};
+});
diff --git a/src/components/Button/style.less b/src/components/Button/style.less
@@ -74,6 +74,10 @@
   }
 }
 
+[data-old-ios] .Btn:not(.Btn--block) {
+  display: inline-block;
+}
+
 @media (hover: hover) {
   .Btn {
     &:hover {

diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type CardActionsProps = {
+export interface CardActionsProps {
   className?: string;
   direction?: 'column' | 'row';
-};
+  children?: React.ReactNode;
+}
 
-export const CardActions: React.FC<CardActionsProps> = (props) => {
+export const CardActions = (props: CardActionsProps) => {
   const { children, className, direction, ...other } = props;
   return (
     <div

diff --git a/src/components/Card/CardContent.tsx b/src/components/Card/CardContent.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type CardContentProps = {
+export interface CardContentProps {
   className?: string;
-};
+  children?: React.ReactNode;
+}
 
-export const CardContent: React.FC<CardContentProps> = (props) => {
+export const CardContent = (props: CardContentProps) => {
   const { className, children, ...other } = props;
   return (
     <div className={clsx('CardContent', className)} {...other}>

diff --git a/src/components/Card/CardMedia.tsx b/src/components/Card/CardMedia.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import { Flex } from '../Flex';
 
-export type CardMediaProps = {
+export interface CardMediaProps {
   className?: string;
   aspectRatio?: 'square' | 'wide';
   color?: string;
   image?: string;
-};
+  children?: React.ReactNode;
+}
 
-export const CardMedia: React.FC<CardMediaProps> = (props) => {
+export const CardMedia = (props: CardMediaProps) => {
   const { className, aspectRatio = 'square', color, image, children, ...other } = props;
 
   const bgStyle = {

diff --git a/src/components/Card/CardText.tsx b/src/components/Card/CardText.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type CardTextProps = {
+export interface CardTextProps {
   className?: string;
-};
+  children?: React.ReactNode;
+}
 
-export const CardText: React.FC<CardTextProps> = (props) => {
+export const CardText = (props: CardTextProps) => {
   const { className, children, ...other } = props;
   return (
     <div className={clsx('CardText', className)} {...other}>

diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type CardTitleProps = {
+export interface CardTitleProps {
   className?: string;
   title?: React.ReactNode;
   subtitle?: React.ReactNode;
   center?: boolean;
-};
+  children?: React.ReactNode;
+}
 
-export const CardTitle: React.FC<CardTitleProps> = (props) => {
+export const CardTitle = (props: CardTitleProps) => {
   const { className, title, subtitle, center, children, ...other } = props;
   return (
     <div className={clsx('CardTitle', { 'CardTitle--center': center }, className)} {...other}>

diff --git a/src/components/Carousel/Item.tsx b/src/components/Carousel/Item.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 interface CarouselItemProps {
   width: string;
+  children?: React.ReactNode;
 }
 
-export const CarouselItem: React.FC<CarouselItemProps> = (props) => {
+export const CarouselItem = (props: CarouselItemProps) => {
   const { width, children } = props;
 
   return (

diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
@@ -8,7 +8,7 @@ import {
 } from '../MessageContainer';
 import { QuickReplies, QuickReplyItemProps } from '../QuickReplies';
 import { Composer as DComposer, ComposerProps, ComposerHandle } from '../Composer';
-import isSafari from '../../utils/isSafari';
+import { isSafari, getIOSMajorVersion } from '../../utils/ua';
 
 export type ChatProps = Omit<ComposerProps, 'onFocus' | 'onChange' | 'onBlur'> &
   MessageContainerProps & {
@@ -164,6 +164,7 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
     onQuickReplyScroll,
     renderQuickReplies,
     text,
+    textOnce,
     placeholder,
     onInputFocus,
     onInputChange,
@@ -192,8 +193,15 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
   }
 
   useEffect(() => {
+    const rootEl = document.documentElement;
     if (isSafari()) {
-      document.documentElement.dataset.safari = '';
+      rootEl.dataset.safari = '';
+    }
+
+    const v = getIOSMajorVersion();
+    // iOS 9、10 不支持按钮使用 flex
+    if (v && v < 11) {
+      rootEl.dataset.oldIos = '';
     }
   }, []);
 
@@ -228,6 +236,7 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
             ref={composerRef}
             inputType={inputType}
             text={text}
+            textOnce={textOnce}
             inputOptions={inputOptions}
             placeholder={placeholder}
             onAccessoryToggle={onAccessoryToggle}

diff --git a/src/components/Chat/style.less b/src/components/Chat/style.less
@@ -6,11 +6,14 @@
       height: calc(100vh - calc(100vh - 100%));
     }
   }
+
   body,
   #root {
     height: 100%;
   }
+
   body {
+    overflow: hidden;
     margin: 0;
   }
 }

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -8,7 +8,7 @@ export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: CheckboxValue;
 };
 
-export const Checkbox: React.FC<CheckboxProps> = (props) => {
+export const Checkbox = (props: CheckboxProps) => {
   const { className, label, checked, disabled, onChange, ...other } = props;
   return (
     <label

diff --git a/src/components/Checkbox/CheckboxGroup.tsx b/src/components/Checkbox/CheckboxGroup.tsx
@@ -12,7 +12,7 @@ export type CheckboxGroupProps = {
   onChange: (value: CheckboxValue[], event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
+export const CheckboxGroup = (props: CheckboxGroupProps) => {
   const { className, options, value, name, disabled, block, onChange } = props;
 
   function handleChange(val: CheckboxValue, e: React.ChangeEvent<HTMLInputElement>) {

diff --git a/src/components/ClickOutside/index.tsx b/src/components/ClickOutside/index.tsx
@@ -3,13 +3,14 @@ import React, { useEffect, useRef } from 'react';
 const doc = document;
 const html = doc.documentElement;
 
-export type ClickOutsideProps = {
+export interface ClickOutsideProps {
   onClick: (event: React.MouseEvent<HTMLElement>) => void;
   // mouseEvent?: 'click' | 'mousedown' | 'mouseup' | false;
   mouseEvent?: 'click' | 'mousedown' | 'mouseup';
-};
+  children?: React.ReactNode;
+}
 
-export const ClickOutside: React.FC<ClickOutsideProps> = (props) => {
+export const ClickOutside = (props: ClickOutsideProps) => {
   const { children, onClick, mouseEvent = 'mouseup', ...others } = props;
   const wrapper = useRef<HTMLDivElement>(null!);
 

diff --git a/src/components/ComponentsProvider/index.tsx b/src/components/ComponentsProvider/index.tsx
@@ -12,7 +12,7 @@ import {
 export { useComponents } from './useComponents';
 export type { ComponentsProviderProps, ComponentsMap };
 
-export const ComponentsProvider: React.FC<ComponentsProviderProps> = (props) => {
+export const ComponentsProvider = (props: ComponentsProviderProps) => {
   const { components, children } = props;
   const componentsRef = React.useRef<ComponentsMap>({ ...components });
 

diff --git a/src/components/ComponentsProvider/interface.ts b/src/components/ComponentsProvider/interface.ts
@@ -51,4 +51,5 @@ export interface ComponentsMap {
 
 export interface ComponentsProviderProps {
   components: ComponentsMap;
+  children?: React.ReactNode;
 }
diff --git a/src/components/Composer/Action.tsx b/src/components/Composer/Action.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, IconButtonProps } from '../IconButton';
 
-export const Action: React.FC<IconButtonProps> = (props) => (
+export const Action = (props: IconButtonProps) => (
   <div className="Composer-actions" data-action-icon={props.icon}>
     <IconButton size="lg" {...props} />
   </div>

diff --git a/src/components/Composer/ComposerInput.tsx b/src/components/Composer/ComposerInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import clsx from 'clsx';
 import { Input, InputProps } from '../Input';
 import { SendConfirm } from '../SendConfirm';
@@ -21,7 +21,6 @@ export const ComposerInput = ({
   ...rest
 }: ComposerInputProps) => {
   const [pastedImage, setPastedImage] = useState<File | null>(null);
-  const wrapRef = useRef<HTMLDivElement>(null);
 
   const handlePaste = useCallback((e: React.ClipboardEvent<any>) => {
     parseDataTransfer(e, setPastedImage);
@@ -40,13 +39,14 @@ export const ComposerInput = ({
   }, [onImageSend, pastedImage]);
 
   useEffect(() => {
-    if (canTouch && inputRef.current && wrapRef.current) {
-      riseInput(inputRef.current, wrapRef.current);
+    if (canTouch && inputRef.current) {
+      const $composer = document.querySelector('.Composer');
+      riseInput(inputRef.current, $composer);
     }
   }, [inputRef]);
 
   return (
-    <div className={clsx({ 'S--invisible': invisible })} ref={wrapRef}>
+    <div className={clsx({ 'S--invisible': invisible })}>
       <Input
         className="Composer-input"
         rows={1}

diff --git a/src/components/Composer/ToolbarItem.tsx b/src/components/Composer/ToolbarItem.tsx
@@ -7,7 +7,7 @@ type IToolbarItem = {
   onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 
-export const ToolbarItem: React.FC<IToolbarItem> = (props) => {
+export const ToolbarItem = (props: IToolbarItem) => {
   const { item, onClick } = props;
 
   return (

diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx
@@ -19,6 +19,7 @@ export type InputType = 'voice' | 'text';
 export type ComposerProps = {
   wideBreakpoint?: string;
   text?: string;
+  textOnce?: string;
   inputOptions?: InputProps;
   placeholder?: string;
   inputType?: InputType;
@@ -42,9 +43,10 @@ export interface ComposerHandle {
 export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props, ref) => {
   const {
     text: initialText = '',
+    textOnce: oTextOnce,
     inputType: initialInputType = 'text',
     wideBreakpoint,
-    placeholder = '请输入...',
+    placeholder: oPlaceholder = '请输入...',
     recorder = {},
     onInputTypeChange,
     onFocus,
@@ -60,6 +62,8 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
   } = props;
 
   const [text, setText] = useState(initialText);
+  const [textOnce, setTextOnce] = useState('');
+  const [placeholder, setPlaceholder] = useState(oPlaceholder);
   const [inputType, setInputType] = useState(initialInputType || 'text');
   const [isAccessoryOpen, setAccessoryOpen] = useState(false);
   const [accessoryContent, setAccessoryContent] = useState('');
@@ -105,6 +109,16 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
     }
   }, [isAccessoryOpen, onAccessoryToggle]);
 
+  useEffect(() => {
+    if (oTextOnce) {
+      setTextOnce(oTextOnce);
+      setPlaceholder(oTextOnce);
+    } else {
+      setTextOnce('');
+      setPlaceholder(oPlaceholder);
+    }
+  }, [oPlaceholder, oTextOnce]);
+
   useEffect(() => {
     isMountRef.current = true;
   }, []);
@@ -157,13 +171,20 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
   );
 
   const send = useCallback(() => {
-    onSend('text', text);
-    setText('');
-
+    if (text) {
+      onSend('text', text);
+      setText('');
+    } else if (textOnce) {
+      onSend('text', textOnce);
+    }
+    if (textOnce) {
+      setTextOnce('');
+      setPlaceholder(oPlaceholder);
+    }
     if (focused.current) {
       inputRef.current.focus();
     }
-  }, [onSend, text]);
+  }, [oPlaceholder, onSend, text, textOnce]);
 
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -289,7 +310,7 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
             aria-label={isAccessoryOpen ? '关闭工具栏' : '展开工具栏'}
           />
         )}
-        {text && <SendButton onClick={handleSendBtnClick} disabled={false} />}
+        {(text || textOnce) && <SendButton onClick={handleSendBtnClick} disabled={false} />}
       </div>
       {isAccessoryOpen && (
         <AccessoryWrap onClickOutside={handleAccessoryBlur}>