@fugood/bricks-project 2.22.0-beta.27 → 2.22.0-beta.28

package/types/bricks/Image.ts

@@ -0,0 +1,101 @@
+import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
+import type { Data, DataLink } from '../data'
+import type { Animation, AnimationBasicEvents } from '../animation'
+import type {
+  Brick,
+  EventAction,
+  EventActionForItem,
+  ActionWithDataParams,
+  ActionWithParams,
+  Action,
+  EventProperty,
+} from '../common'
+import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+
+interface BrickImageDef {
+  /*
+Default property:
+{
+  "path": "",
+  "fadeDuration": 0,
+  "blurBackgroundRadius": 8,
+  "loadSystemIos": "auto",
+  "loadSystemAndroid": "auto"
+}
+  */
+  property?: BrickBasicProperty & {
+    /* The image resize mode */
+    resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat' | DataLink
+    /* The image file path (File, URL) */
+    path?: string | DataLink
+    /* The checksum of file */
+    md5?: string | DataLink
+    /* The image fade duration */
+    fadeDuration?: number | DataLink
+    /* The image avatar mode */
+    avatar?: boolean | DataLink
+    /* The image fixed width with `avatar` */
+    width?: number | DataLink
+    /* Add blurred image at background if photo is not full */
+    enableBlurBackground?: boolean | DataLink
+    /* The blur radius of the blur filter added to the image background */
+    blurBackgroundRadius?: number | DataLink
+    /* [iOS] The use priority of image loading system (Auto: sdwebimage, fallback to default if failed) */
+    loadSystemIos?: 'auto' | 'sdwebimage' | 'default' | DataLink
+    /* [Android] The use priority of image loading system (Auto: glide, fallback to fresco if failed) */
+    loadSystemAndroid?: 'auto' | 'glide' | 'fresco' | DataLink
+  }
+  events?: BrickBasicEvents & {
+    /* Event of the brick press */
+    onPress?: Array<EventAction>
+    /* Event of the brick press in */
+    onPressIn?: Array<EventAction>
+    /* Event of the brick press out */
+    onPressOut?: Array<EventAction>
+    /* Event of the brick focus (Use TV Device with controller) */
+    onFocus?: Array<EventAction>
+    /* Event of the brick blur (Use TV Device with controller) */
+    onBlur?: Array<EventAction>
+    /* Event of the image on load */
+    onLoad?: Array<EventAction>
+    /* Event of the image on error */
+    onError?: Array<EventAction>
+  }
+  outlets?: {
+    /* Brick is pressing */
+    brickPressing?: () => Data
+    /* Brick is focusing (Use TV Device with controller) */
+    brickFocusing?: () => Data
+  }
+  animation?: AnimationBasicEvents & {
+    onPress?: Animation
+    onPressIn?: Animation
+    onPressOut?: Animation
+    onFocus?: Animation
+    onBlur?: Animation
+    onLoad?: Animation
+    onError?: Animation
+  }
+}
+
+/* Image brick ([Tutorial](https://intercom.help/bricks-dag-inc/articles/5378576-image)) */
+export type BrickImage = Brick &
+  BrickImageDef & {
+    templateKey: 'BRICK_IMAGE'
+    switches: Array<
+      SwitchDef &
+        BrickImageDef & {
+          conds?: Array<{
+            method: '==' | '!=' | '>' | '<' | '>=' | '<='
+            cond:
+              | SwitchCondInnerStateCurrentCanvas
+              | SwitchCondData
+              | {
+                  __typename: 'SwitchCondInnerStateOutlet'
+                  outlet: 'brickPressing' | 'brickFocusing'
+                  value: any
+                }
+          }>
+        }
+    >
+  }

package/types/bricks/Items.ts

@@ -0,0 +1,461 @@
+import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
+import type { Data, DataLink } from '../data'
+import type { Animation, AnimationBasicEvents } from '../animation'
+import type {
+  Brick,
+  EventAction,
+  EventActionForItem,
+  ActionWithDataParams,
+  ActionWithParams,
+  Action,
+  EventProperty,
+} from '../common'
+import type { BrickBasicProperty, BrickBasicEvents, BrickBasicEventsForItem } from '../brick-base'
+
+/* prev page */
+export type BrickItemsActionPrevPage = Action & {
+  __actionName: 'BRICK_ITEMS_PREV_PAGE'
+}
+
+/* next page */
+export type BrickItemsActionNextPage = Action & {
+  __actionName: 'BRICK_ITEMS_NEXT_PAGE'
+}
+
+/* jump page */
+export type BrickItemsActionJumpPage = ActionWithParams & {
+  __actionName: 'BRICK_ITEMS_JUMP_PAGE'
+  params?: Array<{
+    input: 'pageIndex'
+    value?: number | DataLink | EventProperty
+    mapping?: string
+  }>
+}
+
+/* open detail */
+export type BrickItemsActionOpenDetail = ActionWithParams & {
+  __actionName: 'BRICK_ITEMS_OPEN_DETAIL'
+  params?: Array<{
+    input: 'detailIndex'
+    value?: number | DataLink | EventProperty
+    mapping?: string
+  }>
+}
+
+/* back list */
+export type BrickItemsActionBackList = Action & {
+  __actionName: 'BRICK_ITEMS_BACK_LIST'
+}
+
+/* Trigger dynamic animation of item by data id or index */
+export type BrickItemsActionDynamicAnimation = ActionWithParams & {
+  __actionName: 'BRICK_ITEMS_DYNAMIC_ANIMATION'
+  params?: Array<
+    | {
+        input: 'mode'
+        value?: 'list' | 'detail' | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'brickId'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'dataId'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'index'
+        value?: number | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'animationId'
+        value?: string | DataLink | (() => Animation) | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'animationType'
+        value?: 'once' | 'loop' | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'animationResetInitialValue'
+        value?: boolean | DataLink | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+/* Reset dynamic action of item by data id or index */
+export type BrickItemsActionDynamicAnimationReset = ActionWithParams & {
+  __actionName: 'BRICK_ITEMS_DYNAMIC_ANIMATION_RESET'
+  params?: Array<
+    | {
+        input: 'mode'
+        value?: 'list' | 'detail' | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'brickId'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'dataId'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'index'
+        value?: number | DataLink | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+/* Stop dynamic action of item by data id or index */
+export type BrickItemsActionDynamicAnimationStop = ActionWithParams & {
+  __actionName: 'BRICK_ITEMS_DYNAMIC_ANIMATION_STOP'
+  params?: Array<
+    | {
+        input: 'mode'
+        value?: 'list' | 'detail' | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'brickId'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'dataId'
+        value?: string | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'index'
+        value?: number | DataLink | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+interface BrickItemsDef {
+  /*
+Default property:
+{
+  "mode": "list",
+  "items": [],
+  "transformScriptEnabled": false,
+  "transformScriptCode": "\/\* Global variable: inputs = { items, variables } \*\/\nreturn inputs.items",
+  "transformScriptVariables": {},
+  "postTransformScriptEnabled": false,
+  "postTransformScriptCode": "\/\*\n * Global variable: inputs = {\n *   itemsLength, // items data length\n *   collections, // [{ index, item, renderList }] (all items data)\n *   collectionsCurrentPage, // [{ index, item, renderList }] (current page items data)\n *   renderList, // Flattened bricks of current page { frame: { x, y, width, height ... }, ... }\n *   variables\n * }\n \*\/\nreturn inputs.renderList",
+  "postTransformScriptVariables": {},
+  "pageIndex": 0,
+  "selectedItemIndex": 0,
+  "allowPageOutOfBound": true,
+  "standbySequenceInterval": 500,
+  "standbySequenceRandom": 0,
+  "brickEditWidth": 10,
+  "brickEditHeight": 10,
+  "detailBrickEditWidth": 50,
+  "detailBrickEditHeight": 50,
+  "orderMode": "horizontal",
+  "resizeMode": "auto",
+  "justifyContent": "start",
+  "alignContent": "stretch",
+  "detailResizeMode": "auto",
+  "detailJustifyContent": "start",
+  "detailAlignContent": "stretch"
+}
+  */
+  property?: BrickBasicProperty & {
+    /* Set current display to `list` or `detail` mode */
+    mode?: 'list' | 'detail' | DataLink
+    /* Items to generate bricks for rendering */
+    items?: Array<any> | DataLink
+    /* Enable Transform Script */
+    transformScriptEnabled?: boolean | DataLink
+    /* Code of Transform Script */
+    transformScriptCode?: string | DataLink
+    /* Variables used in Transform Script (object) */
+    transformScriptVariables?: {} | DataLink
+    /* Enable Post Transform Script */
+    postTransformScriptEnabled?: boolean | DataLink
+    /* Code of Post Transform Script */
+    postTransformScriptCode?: string | DataLink
+    /* Variables used in Post Transform Script (object) */
+    postTransformScriptVariables?: {} | DataLink
+    /* Path to get item property for generate brick id instead of use index */
+    dataKeyPath?: string | DataLink
+    /* Items per page (Default: Items size) */
+    itemsPerPage?: number | DataLink
+    /* Current page index for `list` mode */
+    pageIndex?: number | DataLink
+    /* Current selected item index for `detail` mode */
+    selectedItemIndex?: number | DataLink
+    /* Allow page out of bound */
+    allowPageOutOfBound?: boolean | DataLink
+    /* Sequentially run Standby Transition for each item */
+    standbySequenceEnabled?: boolean | DataLink
+    /* Delay time (ms) between each item */
+    standbySequenceInterval?: number | DataLink
+    /* Random delay time (ms) increase or decrease between each item (e.g. if 100ms then delay time will be -100ms ~ 100ms) */
+    standbySequenceRandom?: number | DataLink
+    /* Define frame width of Brick List editor */
+    brickEditWidth?: number | DataLink
+    /* Define frame height of Brick List editor */
+    brickEditHeight?: number | DataLink
+    /* Define frame width of Brick List editor for detail mode */
+    detailBrickEditWidth?: number | DataLink
+    /* Define frame height of Brick List editor */
+    detailBrickEditHeight?: number | DataLink
+    /* order of horizontal first or vertical first */
+    orderMode?: 'horizontal' | 'vertical' | DataLink
+    /* Max horizontal item quantity */
+    horizontalMaxQuantity?: number | DataLink
+    /* Max vertical item quantity */
+    verticalMaxQuantity?: number | DataLink
+    /* Resize mode */
+    resizeMode?: 'auto' | 'fix' | DataLink
+    /* Justify Content */
+    justifyContent?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | DataLink
+    /* Align Content */
+    alignContent?:
+      | 'stretch'
+      | 'start'
+      | 'end'
+      | 'center'
+      | 'space-between'
+      | 'space-around'
+      | DataLink
+    /* Resize mode for detail mode */
+    detailResizeMode?: 'auto' | 'fix' | DataLink
+    /* Align Content for detail mode */
+    detailJustifyContent?: 'start' | 'end' | 'center' | DataLink
+    /* Align Content for detail mode */
+    detailAlignContent?: 'stretch' | 'start' | 'end' | 'center' | DataLink
+  }
+  /* Brick Definitions for render bricks for each item of `items` on `list` mode */
+  brickList?:
+    | Array<
+        | DataLink
+        | {
+            title?: string | DataLink
+            description?: string | DataLink
+            hidden?: boolean | DataLink
+            brickId?: string | DataLink
+            brickIdPrefix?: string | DataLink
+            templateKey?: string | DataLink
+            property?: {} | DataLink
+            animation?: {} | DataLink
+            eventMap?: {} | DataLink
+            outlet?: {} | DataLink
+            stateGroup?: any
+            propertyMapping?: {} | DataLink
+            frame?:
+              | DataLink
+              | {
+                  x?: number | DataLink
+                  y?: number | DataLink
+                  width?: number | DataLink
+                  height?: number | DataLink
+                  standbyMode?: 'custom' | 'top' | 'bottom' | 'left' | 'right' | DataLink
+                  standbyFrame?: DataLink | {}
+                  standbyOpacity?: number | DataLink
+                  standbyDelay?: number | DataLink
+                  standbyDelayRandom?: number | DataLink
+                  standbyEasing?:
+                    | DataLink
+                    | {
+                        default?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        x?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        y?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        width?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        height?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        opacity?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                      }
+                  showingDelay?: number | DataLink
+                  renderOutOfViewport?: boolean | DataLink
+                }
+            show?: string | DataLink
+            pressToOpenDetail?: boolean | DataLink
+          }
+      >
+    | DataLink
+  /* Brick Definitions for render bricks for each item of `items` on `detail` mode */
+  brickDetails?:
+    | Array<
+        | DataLink
+        | {
+            title?: string | DataLink
+            description?: string | DataLink
+            hidden?: boolean | DataLink
+            brickId?: string | DataLink
+            brickIdPrefix?: string | DataLink
+            templateKey?: string | DataLink
+            property?: {} | DataLink
+            animation?: {} | DataLink
+            eventMap?: {} | DataLink
+            outlet?: {} | DataLink
+            stateGroup?: any
+            propertyMapping?: {} | DataLink
+            frame?:
+              | DataLink
+              | {
+                  x?: number | DataLink
+                  y?: number | DataLink
+                  width?: number | DataLink
+                  height?: number | DataLink
+                  standbyMode?: 'custom' | 'top' | 'bottom' | 'left' | 'right' | DataLink
+                  standbyFrame?: DataLink | {}
+                  standbyOpacity?: number | DataLink
+                  standbyDelay?: number | DataLink
+                  standbyDelayRandom?: number | DataLink
+                  standbyEasing?:
+                    | DataLink
+                    | {
+                        default?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        x?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        y?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        width?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        height?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                        opacity?:
+                          | DataLink
+                          | {
+                              method?: string | DataLink
+                              duration?: number | DataLink
+                            }
+                      }
+                  showingDelay?: number | DataLink
+                  renderOutOfViewport?: boolean | DataLink
+                }
+            show?: string | DataLink
+            pressToBackList?: boolean | DataLink
+          }
+      >
+    | DataLink
+  events?: BrickBasicEventsForItem & {
+    /* Event on page render finished */
+    onPageRender?: Array<EventActionForItem>
+    /* Event on page change. */
+    onPageChange?: Array<EventActionForItem>
+    /* Event on page index out of bound. */
+    onPageOutOfBound?: Array<EventActionForItem>
+    /* Event on into `detail` mode */
+    onIntoDetailMode?: Array<EventActionForItem>
+    /* Event on into `list` mode. */
+    onIntoListMode?: Array<EventActionForItem>
+    /* Event on render error */
+    onError?: Array<EventActionForItem>
+  }
+  outlets?: {
+    /* Catched error message */
+    error?: () => Data
+    /* Current render mode */
+    mode?: () => Data
+    /* Current page index */
+    pageIndex?: () => Data
+    /* Current page size */
+    pageSize?: () => Data
+    /* Selected item index of detail mode */
+    selectedItemIndex?: () => Data
+    /* Page is out of bound */
+    pageIsOutOfBound?: () => Data
+  }
+  animation?: AnimationBasicEvents & {
+    onPageRender?: Animation
+    onPageChange?: Animation
+    onPageOutOfBound?: Animation
+    onIntoDetailMode?: Animation
+    onIntoListMode?: Animation
+    onError?: Animation
+  }
+}
+
+/* Brick items component */
+export type BrickItems = Brick &
+  BrickItemsDef & {
+    templateKey: 'BRICK_ITEMS'
+    switches: Array<
+      SwitchDef &
+        BrickItemsDef & {
+          conds?: Array<{
+            method: '==' | '!=' | '>' | '<' | '>=' | '<='
+            cond:
+              | SwitchCondInnerStateCurrentCanvas
+              | SwitchCondData
+              | {
+                  __typename: 'SwitchCondInnerStateOutlet'
+                  outlet:
+                    | 'error'
+                    | 'mode'
+                    | 'pageIndex'
+                    | 'pageSize'
+                    | 'selectedItemIndex'
+                    | 'pageIsOutOfBound'
+                  value: any
+                }
+          }>
+        }
+    >
+  }