linglong-action-flow

基于营销系统 action flow 迁移的行为库。

简介

行为库包含了行为的配置表单组件。

安装

yarn add @activity-maker/linglong-action-flow --registry="https://registry.npmjs.org"
或
npm install @activity-maker/linglong-action-flow --registry="https://registry.npmjs.org"

也可以通过 script 标签进行引入，

<script src="//s1.xmcdn.com/yx/linglong-action-flow/last/lib/umd/linglong-action-flow.js"></script>

注意

@activity-maker/linglong-action-flow 将原营销系统中的 flowName、flowParams 和 renderFlow 字段收敛到 flow 字段下，分别命名为 name、params 和 render。类型声明如下：

interface Flow {
  name: FlowName;
  render?: RenderFlow; // RenderFlow 为原 Flow
  params?: Dictionary;
}

使用

工具库对外暴露了一个 ActionFlowForm 组件用于生成行为配置表单。

ActionFlowForm

ActionFlowForm 集成了九种行为的配置项，包括跳转、订阅专辑、领优惠券、领礼包、买会员、分享、锚点、打开弹窗、关闭弹窗。

引入

import { ActionFlowForm } from '@activity-maker/linglong-action-flow';

使用

由于组件的行为需要编辑器的能力，因此需要将 玲珑系统编辑界面 传递给 SettingForm 的编辑器能力传递给 ActionFlowForm。

编辑器提供的能力声明如下注释所示

interface EditorProps {
  id: string; // 当前组件 ID
  name: string; // 组件名
  type: "fixed" | "static" | "container" | "nested", //组件类型
  alias: string, // 组件别名
  elements: { // 已添加组件
    static: CommonComponent[]; // 已添加 static 组件
    fixed: CommonComponent[]; // 已添加 fixed 组件
    container: CommonComponent[]; // 已添加 container 组件
    nested: CommonComponent[]; // 已添加 nested 组件
  };
  componentList: CompProps[]; // 可用组件列表
  selectedComponent: EditorElement; // 当前选中组件
  addNestedComponent: (comp: CompProps, belongsTo: ExposedElement) => string; // 添加嵌套组件
  addModalComponent: (comp: CompProps) => string; // 添加弹窗
  selectComponent: (id: string) => void; // 选中组件
  deleteComponent: (id: string) => void; // 删除组件
  updateParentComponent: (id: string, parent: string, name: string, val: any) => void; // 更新父组件
}

const editorProps: EditorProps = { /* ... */ };

<ActionFlowForm {...editorProps} onChange={console.log} excludeFlows={['subscribe', 'coupon', 'giftpackage']}>

配置

1. value 可选项，表单的值
2. onChange 可选项，表单内容变化的回调
3. excludeFlows 当前配置需要忽略的行为

tips:

• 发布beta版本：yarn release -- --prerelease beta