feat(hippy-react): modal visible default true and optional props (#3446)

* fix(hippy-react): modal visible default true and optional props * fix(hippy-react): repeatCount can be 'loop' * fix(hippy-react): fix ts declaration * fix(hippy-react): borderStyle can be none * fix(hippy-react): flex can be number% * fix(hippy-react-web): flex style declaration * fix(hippy-react): remove unused virtual --------- Co-authored-by: OpenHippy <[email protected]>
Tencent · Aug 28, 2023 · 26f04c2 · 26f04c2
1 parent 149fa49
commit 26f04c2
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 21 deletions.
diff --git a/packages/global.d.ts b/packages/global.d.ts
@@ -73,7 +73,7 @@ declare namespace HippyTypes {
     height: number | undefined;
   }
 
-  export type Color = string | number;
+  export type Color = string;
   export type Colors = Color[];
   export type tintColor = Color;
   export type tintColors = Colors;
@@ -101,12 +101,11 @@ declare namespace HippyTypes {
     | 'space-around';
     alignItems?: FlexAlignType;
     alignSelf?: 'auto' | FlexAlignType;
-    aspectRatio?: number | string;
     bottom?: DimensionValue;
     collapse?: boolean;
     collapsable?: boolean;
     display?: 'none' | 'flex';
-    flex?: number;
+    flex?: DimensionValue;
     flexBasis?: DimensionValue;
     flexDirection?:
     | 'row'
@@ -191,11 +190,11 @@ declare namespace HippyTypes {
     skewY?: string | Animation;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface TransformsStyle {
-    transform?: Transform[];
   }
 
-  export type BorderStyle = 'solid' | 'dotted' | 'dashed';
+  export type BorderStyle = 'solid' | 'dotted' | 'dashed' | 'none';
   export interface BorderBoxStyle {
     borderStyle?: BorderStyle;
     borderTopStyle?: BorderStyle;
@@ -229,7 +228,6 @@ declare namespace HippyTypes {
 
   export interface ViewStyle extends FlexStyle, BoxShadowStyle, BorderBoxStyle, TransformsStyle, BackgroundStyle {
     opacity?: DimensionValue;
-    pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
   }
 
   export type TextStyleIOS = ViewStyle;
@@ -265,7 +263,6 @@ declare namespace HippyTypes {
     ;
     letterSpacing?: number;
     lineHeight?: number;
-    textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
     textDecorationLine?:
     | 'none'
     | 'underline'
@@ -293,8 +290,14 @@ declare namespace HippyTypes {
   export interface Style extends ViewStyle, TextStyle, ImageStyle {
     [props: string]: any
   }
+  type Falsy = undefined | null | false;
+  type RecursiveArray<T> = Array<T | ReadonlyArray<T> | RecursiveArray<T>>;
+  export type GenericStyleProp<T> =
+  | T
+  | RegisteredStyle<T>
+  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
+  | Falsy;
 
-  type GenericStyleProp<T> = T | T[];
   export type StyleProp = GenericStyleProp<Style>;
   export type ViewStyleProp = GenericStyleProp<ViewStyle>;
   export type ImageStyleProp = GenericStyleProp<ImageStyle>;
@@ -403,6 +406,8 @@ declare namespace HippyTypes {
     height: number;
     scale: number;
     statusBarHeight: number;
+    // Android bottom navigatorBar height; supported version is 2.3.4
+    navigatorBarHeight: number;
     width: number;
   }
 

diff --git a/packages/hippy-react-web/src/components/list-view.tsx b/packages/hippy-react-web/src/components/list-view.tsx
@@ -31,7 +31,7 @@ import { DEFAULT_DISTANCE_TO_REFRESH, REFRESH_DISTANCE_SCREEN_Y_OFFSET } from '.
 import View from './view';
 
 interface ListViewItemProps {
-  style?: any;
+  style?: HippyTypes.StyleProp;
   height?: any;
   children?: any;
   type?: any;
@@ -352,7 +352,7 @@ const ListView: React.FC<ListViewProps> = React.forwardRef((props, ref) => {
       }
     }, [pullHeaderRef]);
     return (
-      <div ref={pullHeaderRef} style={{  ...styles.pullHeaderContainer }}>
+      <div ref={pullHeaderRef} style={styles.pullHeaderContainer}>
         {renderPullHeader()}
       </div>
     );

diff --git a/packages/hippy-react-web/src/components/modal.tsx b/packages/hippy-react-web/src/components/modal.tsx
@@ -31,6 +31,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   container: {
+    // @ts-ignore
     position: 'fixed',
     top: 0,
     right: 0,
@@ -64,10 +65,12 @@ const styles = StyleSheet.create({
     animationName: 'fadeout',
   },
   slideIn: {
+    // @ts-ignore
     transform: 'translateY(0%)',
     animationName: 'slidein',
   },
   slideOut: {
+    // @ts-ignore
     transform: 'translateY(100%)',
     animationName: 'slideout',
   },

diff --git a/packages/hippy-react-web/src/modules/stylesheet.ts b/packages/hippy-react-web/src/modules/stylesheet.ts
@@ -20,6 +20,10 @@
 
 // @ts-nocheck
 import { Device } from '../native';
+export interface StyleObj {
+  [key: string]: HippyTypes.Style | HippyTypes.ViewStyle | HippyTypes.ImageStyle | HippyTypes.TextStyle;
+}
+
 
 const ratio = Device.screen.scale;
 let onePixel = Math.round(0.4 * ratio) / ratio;
@@ -28,7 +32,7 @@ if (onePixel === 0) {
 }
 
 const StyleSheet = {
-  create: styleObj => styleObj,
+  create: (styleObj: StyleObj): StyleObj => styleObj,
   hairlineWidth: onePixel,
   compose: (style: any, style2: Record<string, any>) => {
     let cloneStyle = {};

diff --git a/packages/hippy-react/src/components/modal.tsx b/packages/hippy-react/src/components/modal.tsx
@@ -33,9 +33,9 @@ export interface ModalProps {
   /**
    * Show or hide
    *
-   * Default false
+   * Default true
    */
-  visible: boolean;
+  visible?: boolean;
 
   /**
    * Primary key

diff --git a/packages/hippy-react/src/components/text-input.tsx b/packages/hippy-react/src/components/text-input.tsx
@@ -117,7 +117,7 @@ export interface TextInputProps extends LayoutableProps, ClickableProps {
   /**
    * The string that will be rendered before text input has been entered.
    */
-  placeholder?: number;
+  placeholder?: string;
 
   /**
    * The text color of the placeholder string.

diff --git a/packages/hippy-react/src/components/text.tsx b/packages/hippy-react/src/components/text.tsx
@@ -57,7 +57,7 @@ export interface TextProps extends LayoutableProps, ClickableProps {
    * The default is `tail`.
    */
   ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-  children: number | string | string[];
+  children: number | string | string[] | React.ReactNode;
   text?: string;
   style?: HippyTypes.TextStyleProp;
 
@@ -76,7 +76,7 @@ export interface TextProps extends LayoutableProps, ClickableProps {
 function forwardRef(
   { style, forbidUnicodeToChar, ...nativeProps }: TextProps,
   // eslint-disable-next-line max-len
-  ref: string | ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined,
+  ref: string | React.ReactNode | ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined,
 ) {
   const nativeStyle = style;
 

diff --git a/packages/hippy-react/src/components/view.tsx b/packages/hippy-react/src/components/view.tsx
@@ -93,7 +93,7 @@ export class View extends React.Component<ViewProps, {}> {
   }
 
   public render() {
-    const { collapsable, style = {}, ...nativeProps } = this.props;
+    const { collapsable, style = {}, onFocus, ...nativeProps } = this.props;
     let nativeStyle: HippyTypes.StyleProp = style;
     const { nativeBackgroundAndroid } = nativeProps;
     if (typeof collapsable === 'boolean') {
@@ -116,6 +116,8 @@ export class View extends React.Component<ViewProps, {}> {
         nativeName="View"
         // @ts-ignore
         style={nativeStyle}
+        // @ts-ignore
+        onFocus={onFocus}
         {...nativeProps}
       />
     );

diff --git a/packages/hippy-react/src/modules/animation-set.ts b/packages/hippy-react/src/modules/animation-set.ts
@@ -38,8 +38,7 @@ interface AnimationChild {
 
 interface AnimationSetOption {
   children: AnimationChild[];
-  repeatCount: number;
-  virtual: any; // TODO: What's it?
+  repeatCount: number | 'loop';
 }
 
 interface AnimationSet extends Animation {

diff --git a/packages/hippy-react/src/modules/animation.ts b/packages/hippy-react/src/modules/animation.ts
@@ -74,7 +74,7 @@ interface AnimationOptions {
   /**
    * Animation repeat times, use 'loop' to be always repeating.
    */
-  repeatCount?: number;
+  repeatCount?: number | 'loop';
 
   inputRange?: any[];
   outputRange?: any[];
@@ -277,7 +277,7 @@ class Animation implements Animation {
    *
    * @param {Object} newConfig - new animation schema
    */
-  public updateAnimation(newConfig: AnimationOptions) {
+  public updateAnimation(newConfig: Partial<AnimationOptions>) {
     if (typeof newConfig !== 'object') {
       throw new TypeError('Invalid arguments');
     }

diff --git a/packages/hippy-react/src/types/global.d.ts b/packages/hippy-react/src/types/global.d.ts
@@ -28,3 +28,18 @@ declare global {
     interface Global extends HippyTypes.HippyGlobal {};
   }
 };
+
+declare namespace HippyTypes {
+  export interface FlexStyle {
+    aspectRatio?: number | string;
+  }
+  export interface ViewStyle extends FlexStyle, BoxShadowStyle, BorderBoxStyle, TransformsStyle, BackgroundStyle {
+    pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
+  }
+  export interface TransformsStyle {
+    transform?: Transform[];
+  }
+  export interface TextStyle {
+    textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+  }
+}
diff --git a/packages/hippy-react/src/types/index.ts b/packages/hippy-react/src/types/index.ts
@@ -69,6 +69,8 @@ export interface LayoutableProps {
    * @param {number} evt.layout.height - The height of component
    */
   onLayout?: (evt: LayoutEvent) => void;
+  onAttachedToWindow?: () => void;
+  onDetachedFromWindow?: () => void;
 }
 
 export interface ClickableProps {