@fugood/bricks-project 2.22.0-beta.9 → 2.22.0

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
+                }
+          }>
+        }
+    >
+  }

package/types/bricks/Lottie.ts

@@ -0,0 +1,159 @@
+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'
+
+/* Play animation */
+export type BrickLottieActionPlay = ActionWithParams & {
+  __actionName: 'BRICK_LOTTIE_PLAY'
+  params?: Array<
+    | {
+        input: 'startFrame'
+        value?: number | DataLink | EventProperty
+        mapping?: string
+      }
+    | {
+        input: 'endFrame'
+        value?: number | DataLink | EventProperty
+        mapping?: string
+      }
+  >
+}
+
+/* Pause animation */
+export type BrickLottieActionPause = Action & {
+  __actionName: 'BRICK_LOTTIE_PAUSE'
+}
+
+/* Resume animation */
+export type BrickLottieActionResume = Action & {
+  __actionName: 'BRICK_LOTTIE_RESUME'
+}
+
+/* Stop animation */
+export type BrickLottieActionStop = Action & {
+  __actionName: 'BRICK_LOTTIE_STOP'
+}
+
+/* Reset animation */
+export type BrickLottieActionReset = Action & {
+  __actionName: 'BRICK_LOTTIE_RESET'
+}
+
+interface BrickLottieDef {
+  /*
+Default property:
+{
+  "loop": true,
+  "autoPlay": true,
+  "resizeMode": "contain",
+  "renderMode": "auto"
+}
+  */
+  property?: BrickBasicProperty & {
+    /* The animation json config content from uri */
+    uri?: string | DataLink
+    /* The checksum of `uri` */
+    md5?: string | DataLink
+    /* The animation json config content（The `uri` will be ignored if `source` is defined) */
+    source?: {} | DataLink
+    /* The speed the animation will progress.  This only affects the imperative API.  Sending a negative value will reverse the animation. */
+    speed?: number | DataLink
+    /* A boolean flag indicating whether  or not the animation should loop. */
+    loop?: boolean | DataLink
+    /* A boolean flag indicating whether or not the animation  should start automatically when mounted.  This only affects the imperative API. */
+    autoPlay?: boolean | DataLink
+    /* The animation resize mode */
+    resizeMode?: 'cover' | 'contain' | 'center' | DataLink
+    /* A flag to set whether or not to render with hardware or software acceleration (Not supported for iOS) */
+    renderMode?: 'auto' | 'hardware' | 'software' | DataLink
+    /* Replace color (as hex string) by keypath */
+    colorFilters?:
+      | Array<
+          | DataLink
+          | {
+              keypath?: string | DataLink
+              color?: string | DataLink
+            }
+        >
+      | DataLink
+    /* Replace color (as hex string) by find text.  Use text filters will disable glyphs text render / force software render mode,  This means that a specific font needs to be loaded. */
+    textFilters?:
+      | Array<
+          | DataLink
+          | {
+              find?: string | DataLink
+              replace?: string | DataLink
+            }
+        >
+      | 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 long press */
+    onLongPress?: 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 animation finished */
+    onAnimationFinish?: Array<EventAction>
+    /* Event of the uri on load failed */
+    onAnimationFailure?: Array<EventAction>
+    /* Event of the animation on loop */
+    onAnimationLoop?: 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
+    onLongPress?: Animation
+    onFocus?: Animation
+    onBlur?: Animation
+    onAnimationFinish?: Animation
+    onAnimationFailure?: Animation
+    onAnimationLoop?: Animation
+  }
+}
+
+/* Lottie Adobe After Effects animations brick ([Tutorial](https://intercom.help/bricks-dag-inc/articles/5378583-lottie)) */
+export type BrickLottie = Brick &
+  BrickLottieDef & {
+    templateKey: 'BRICK_LOTTIE'
+    switches: Array<
+      SwitchDef &
+        BrickLottieDef & {
+          conds?: Array<{
+            method: '==' | '!=' | '>' | '<' | '>=' | '<='
+            cond:
+              | SwitchCondInnerStateCurrentCanvas
+              | SwitchCondData
+              | {
+                  __typename: 'SwitchCondInnerStateOutlet'
+                  outlet: 'brickPressing' | 'brickFocusing'
+                  value: any
+                }
+          }>
+        }
+    >
+  }