@lynx-js/types 0.0.1 → 3.2.1

package/types/common/csstype.d.ts

@@ -0,0 +1,99 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import * as CSS from 'csstype';
+
+export type Modify<T, R> = Omit<T, keyof R> & R;
+
+export type CSSProperties = Modify<
+  CSS.Properties<string | number>,
+  {
+    position?: 'absolute' | 'relative' | 'fixed' | 'sticky';
+    boxSizing?: 'border-box' | 'content-box' | 'auto';
+    display?: 'none' | 'flex' | 'grid' | 'linear' | 'relative' | 'block' | 'auto';
+    overflow?: 'hidden' | 'visible' | (string & {});
+    whiteSpace?: 'normal' | 'nowrap';
+    textAlign?: 'left' | 'center' | 'right' | 'start' | 'end';
+    textOverflow?: 'clip' | 'ellipsis';
+    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    flexDirection?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
+    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'start' | 'end';
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end';
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    transform?:
+      | 'translate'
+      | 'translateX'
+      | 'translateY'
+      | 'translateZ'
+      | 'translate'
+      | 'translate3d'
+      | 'translate3D'
+      | 'rotate'
+      | 'rotateX'
+      | 'rotateY'
+      | 'rotateZ'
+      | 'scale'
+      | 'scaleX'
+      | 'scaleY'
+      | (string & {});
+    animationTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    transformOrigin?: 'left' | 'right' | 'top' | 'bottom' | 'center' | (string & {});
+    linearOrientation?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse';
+    linearGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'space-between' | 'start' | 'end' | 'center';
+    linearLayoutGravity?:
+      | 'none'
+      | 'top'
+      | 'bottom'
+      | 'left'
+      | 'right'
+      | 'center-vertical'
+      | 'center-horizontal'
+      | 'fill-vertical'
+      | 'fill-horizontal'
+      | 'center'
+      | 'stretch'
+      | 'start'
+      | 'end';
+    layoutAnimationCreateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    layoutAnimationCreateProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
+    layoutAnimationDeleteTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    layoutAnimationDeleteProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
+    layoutAnimationUpdateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    textDecoration?: 'none' | 'underline' | 'line-through' | (string & {});
+    visibility?: 'hidden' | 'visible' | 'none' | 'collapse';
+    transitionProperty?:
+      | 'none'
+      | 'opacity'
+      | 'scaleX'
+      | 'scaleY'
+      | 'scaleXY'
+      | 'width'
+      | 'height'
+      | 'background-color'
+      | 'visibility'
+      | 'left'
+      | 'top'
+      | 'right'
+      | 'bottom'
+      | 'transform'
+      | 'all'
+      | (string & {});
+    transitionTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    borderLeftStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderRightStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderTopStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderBottomStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    overflowX?: 'hidden' | 'visible' | (string & {});
+    overflowY?: 'hidden' | 'visible' | (string & {});
+    wordBreak?: 'normal' | 'break-all' | 'keep-all';
+    outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | (string & {});
+    direction?: 'normal' | 'lynx-rtl' | 'rtl' | 'ltr';
+    relativeCenter?: 'none' | 'vertical' | 'horizontal' | 'both';
+    linearCrossGravity?: 'none' | 'start' | 'end' | 'center' | 'stretch';
+    listMainAxisGap?: 'grayscale' | (string & {});
+  }
+>;

package/types/common/element/attributes.d.ts

@@ -0,0 +1,59 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { CSSProperties } from '../csstype';
+
+/**
+ * IntrinsicAttributes specifies extra properties used by the JSX framework
+ * which are not generally used by the components’ props or arguments.
+ * @see https://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking
+ *
+ * But in Lynx, we use this interface to specify the extra attributes
+ * just for Lynx components.
+ * @see Lynx/tasm/component_attributes.cc
+ */
+export interface IntrinsicAttributes {
+  /**
+   * A type helper for Lynx, DO NOT SET THIS.
+   */
+  __empty?: false;
+
+  /**
+   * The name of the component
+   */
+  name?: string;
+
+  /**
+   * The style set to the view of component.
+   *
+   * Has no effect when `removeComponentElement` enabled.
+   */
+  style?: string | CSSProperties;
+
+  // /**
+  //  * The CSS classes set to the view of component.
+  //  *
+  //  * Has no effect when `removeComponentElement` enabled.
+  //  */
+  // className?: string;
+  class?: string;
+
+  /**
+   * Set to `true` to enable overlapping rendering
+   */
+  overlap?: boolean;
+}
+
+type LynxIntrinsicAttributes = IntrinsicAttributes;
+
+declare global {
+  namespace JSX {
+    interface IntrinsicAttributes extends LynxIntrinsicAttributes {
+      /**
+       * A type helper for Lynx, DO NOT SET THIS.
+       */
+      __empty?: never;
+    }
+  }
+}

package/types/common/element/common.d.ts

@@ -0,0 +1,41 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { BaseEvent } from '../events';
+export interface BaseScrollInfo {
+  /**
+   * scroll top from start
+   */
+  scrollTop: number;
+  /**
+   * scroll left from start
+   */
+  scrollLeft: number;
+  /**
+   * scroll content height
+   */
+  scrollHeight: number;
+  /**
+   * scroll content width
+   */
+  scrollWidth: number;
+  /**
+   * X-axis scroll delta for this scroll. It's always 0 in some non-scroll related events.
+   */
+  deltaX: number;
+  /**
+   * Y-axis scroll delta for this scroll. It's always 0 in some non-scroll related events.
+   */
+  deltaY: number;
+}
+
+export interface ScrollToLowerEvent extends BaseEvent<'scrolltolower', BaseScrollInfo> {}
+export interface ScrollToUpperEvent extends BaseEvent<'scrolltoupper', BaseScrollInfo> {}
+export interface ScrollEvent extends BaseEvent<'scroll', BaseScrollInfo> {}
+export interface ScrollEndEvent extends BaseEvent<'scrollend', BaseScrollInfo> {}
+export interface ContentSizeChangedEvent extends BaseEvent<'contentsizechanged', BaseScrollInfo> {}
+export interface ScrollToUpperEdgeEvent extends BaseEvent<'scrolltoupperedge', BaseScrollInfo> {}
+export interface ScrollToLowerEdgeEvent extends BaseEvent<'scrolltoloweredge', BaseScrollInfo> {}
+export interface ScrollToNormalStateEvent extends BaseEvent<'scrolltonormalstate', BaseScrollInfo> {}
+export interface ScrollToNormalStateEvent extends BaseEvent<'scrolltonormalstate', BaseScrollInfo> {}

package/types/common/element/component.d.ts

@@ -0,0 +1,17 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { StandardProps } from '../props';
+
+/**
+ * Dynamic Component
+ */
+export interface ComponentProps extends StandardProps {
+  /**
+   * Component name
+   */
+  'is'?: string;
+
+  [key: string]: any;
+}

package/types/common/element/element.d.ts

@@ -0,0 +1,59 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { StandardProps } from '../props';
+import { NoProps } from '../props';
+import { ComponentProps } from './component';
+import { FilterImageProps } from './filter-image';
+import { ImageProps } from './image';
+import { ListItemProps, ListProps, ListRowProps, ListUIMethods } from './list';
+import { PageProps } from './page';
+import { ScrollViewProps, ScrollViewUIMethods } from './scroll-view';
+import { TextProps } from './text';
+import { ViewProps } from './view';
+
+export interface UIMethods {
+  'list': ListUIMethods;
+  'scroll-view': ScrollViewUIMethods;
+}
+
+// add also to global.JSX.IntrinsicElements
+export interface IntrinsicElements {
+  'component': ComponentProps;
+  'filter-image': FilterImageProps;
+  'image': ImageProps;
+  'inline-image': ImageProps;
+  'inline-text': TextProps;
+  'inline-truncation': NoProps;
+  'list': ListProps;
+  'list-item': ListItemProps;
+  'list-row': ListRowProps;
+  'page': PageProps;
+  'scroll-view': ScrollViewProps;
+  'text': TextProps;
+  'view': ViewProps;
+  'raw-text': StandardProps & { text: number | string };
+}
+
+declare module 'react' {
+  namespace JSX {
+    // Should copy from above IntrinsicElements
+    interface IntrinsicElements {
+      'component': ComponentProps;
+      'filter-image': FilterImageProps;
+      'image': ImageProps;
+      'inline-image': ImageProps;
+      'inline-text': TextProps;
+      'inline-truncation': NoProps;
+      'list': ListProps;
+      'list-item': ListItemProps;
+      'list-row': ListRowProps;
+      'page': PageProps;
+      'scroll-view': ScrollViewProps;
+      'text': TextProps;
+      'view': ViewProps;
+      'raw-text': StandardProps & { text: number | string };
+    }
+  }
+}

package/types/common/element/filter-image.d.ts

@@ -0,0 +1,67 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { StandardProps } from '../props';
+
+/**
+ * Provides image blur and shadow features, similar to the usage of images. Specially, shadow and blur effects can be displayed inside the padding area.
+ */
+export interface FilterImageLoadEvent {
+  detail: {
+    width: number;
+    height: number;
+  };
+}
+
+export interface FilterImageErrorEvent {
+  detail: {
+    errMsg: string;
+  };
+}
+
+export interface FilterImageProps extends StandardProps {
+  /**
+   * Supports http/https/base64
+   * @defaultValue ""
+   * @since 0.2
+   */
+  'src'?: string;
+
+  /**
+   * Specifies image cropping/scaling mode
+   * scaleToFill: Scales the image without preserving the aspect ratio, stretching the image to fill the element
+   * aspectFit: Scales the image while preserving aspect ratio so that the long side is fully visible
+   * aspectFill: Scales the image while preserving aspect ratio, ensuring the short side fills the element
+   * center: Does not scale the image; image is centered
+   * @defaultValue "scaleToFill"
+   * @since 0.2
+   */
+  'mode'?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'center';
+
+  /**
+   * Specifies the BoxBlur radius for the image
+   * @defaultValue "0px"
+   * @since 0.2
+   */
+  'blur-radius'?: string;
+
+  /**
+   * Specifies the shadow style for the image
+   * @defaultValue ""
+   * @since 0.2
+   */
+  'drop-shadow'?: string;
+
+  /**
+   * Image load success event
+   * @since 0.2
+   */
+  'bindload'?: (e: FilterImageLoadEvent) => void;
+
+  /**
+   * Image load error event
+   * @since 0.2
+   */
+  'binderror'?: (e: FilterImageErrorEvent) => void;
+}

package/types/common/element/image.d.ts

@@ -0,0 +1,121 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { BaseEvent, ImageErrorEvent, ImageLoadEvent } from '../events';
+import { StandardProps } from '../props';
+
+/**
+ * Used to display images
+ */
+export interface ImageProps extends StandardProps {
+  /**
+   * Supports http/https/base64
+   * @defaultValue ""
+   * @since 0.2
+   */
+  src?: string;
+
+  /**
+   * Specifies image cropping/scaling mode
+   * scaleToFill: Scales the image without preserving the aspect ratio, stretching the image to fill the element
+   * aspectFit: Scales the image while preserving aspect ratio so that the long side is fully visible
+   * aspectFill: Scales the image while preserving aspect ratio, ensuring the short side fills the element
+   * center: Does not scale the image; image is centered
+   * @defaultValue "scaleToFill"
+   * @since 0.2
+   */
+  mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'center';
+
+  /**
+   * ARGB_8888: 32-bit memory per pixel, supports semi-transparent images
+   * RGB_565: 16-bit memory per pixel, reduces memory usage but loses transparency
+   * @defaultValue "ARGB_8888"
+   * @since 1.4
+   */
+  'image-config'?: 'ARGB_8888' | 'RGB_565';
+
+  /**
+   * Placeholder image, used same as src
+   * @defaultValue ""
+   * @since 1.4
+   */
+  placeholder?: string;
+
+  /**
+   * Image blur radius
+   * @defaultValue "3px"
+   * @since 0.2
+   */
+  'blur-radius'?: string;
+
+  /**
+   * Stretchable area for 9patch images, in percentage or decimal, four values for top, right, bottom, left
+   * @defaultValue "0.2 10% 0.3 20%"
+   * @since 1.4
+   */
+  'cap-insets'?: string;
+
+  /**
+   * Number of times an animated image plays
+   * @defaultValue 1
+   * @since 1.4
+   */
+  'loop-count'?: number;
+
+  /**
+   * Image won't load if its size is 0, but will load if prefetch-width is set
+   * @defaultValue "100px"
+   * @since 1.4
+   */
+  'prefetch-width'?: string;
+
+  /**
+   * Image won't load if its size is 0, but will load if prefetch-height is set
+   * @defaultValue "100px"
+   * @since 1.4
+   */
+  'prefetch-height'?: string;
+
+  /**
+   * If true, URL mapping is skipped. LynxView's custom ImageInterceptor won't work
+   * @defaultValue false
+   * @since 1.5
+   */
+  'skip-redirection'?: boolean;
+
+  /**
+   * Reduces the chance of OOM by downsampling large images, requires container support
+   * @defaultValue false
+   * @since iOS 2.0
+   */
+  downsampling?: boolean;
+
+  /**
+   * Disables unexpected iOS built-in animations
+   * @defaultValue true
+   * @since iOS 2.0
+   */
+  'implicit-animation'?: boolean;
+
+  /**
+   * Image load success event
+   * @since 0.2
+   */
+  bindload?: (e: LoadEvent) => void;
+
+  /**
+   * Image load error event
+   * @since 0.2
+   */
+  binderror?: (e: ErrorEvent) => void;
+
+  /**
+   * Add custom parameters to image
+   * @since 2.17
+   */
+  'additional-custom-info'?: { [key: string]: string };
+}
+
+export type LoadEvent = BaseEvent<'load', ImageLoadEvent>;
+export type ErrorEvent = BaseEvent<'error', ImageErrorEvent>;

package/types/common/element/index.d.ts

@@ -0,0 +1,16 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+export * from './component';
+export * from './filter-image';
+export * from './image';
+export * from './list';
+export * from './page';
+export * from './scroll-view';
+export * from './text';
+export * from './view';
+export * from './element';
+export * from './methods';
+export * from './attributes';
+export * from './common';