@cratis/showrunner. usher. react
为 Usher 反应组件, Showrunner 支持部分: 报告一个问题, 报告这个错误, 以及我的问题侧面
每期的谈话记录 建造在 @cratis/components 和生成的代理
@cratis/showrunner.usher。如何使用它: 文件/用户/反应。 。 。 .
构成部分等级
UsherProvider provides UsherContext, wraps ArcContext for correlation tracking, renders the dialogs once
├── ReportIssueDialog CommandDialog<ReportIssue>
│ ├── SentWithReport what is sent along: location, version, recent requests
│ └── AccessFields share identity / grant access / duration, with AccessNotice
├── ReportErrorDialog CommandDialog<ReportError>
│ ├── TechnicalDetails collapsed <details>: type, correlation id, stack frames
│ ├── SentWithReport
│ └── AccessFields
└── MyIssuesDialog Dialog placement='end', 720px
├── IssueList DataTableForObservableQuery<MyIssues>
└── IssueView also exported on its own
├── IssueHeader, StatusStrip, QuestionBanner
├── IssueConversationPanel ChatConversation; AnswerQuestion or AddDetails
├── IdentityPanel ShareIdentityDialog
├── AccessPanel GrantAccessDialog, revoke with confirmation, SupportSessions
└── IssueActions ReopenIssueDialog, withdraw with confirmation
ReportButton, MyIssuesButton open the dialogs through useUsher()
结构决定
- 一个提供商,一次完成对话框.
UsherProvider拥有useDialog包装; 按钮和useUsher()仅调用UsherContext。呼叫者的位置与useSliceContext()地点useUsher()实值 呼叫并传递到对话框, 因为对话框在提供者, 在呼叫者的切片范围之外渲染. - 通过HTTP头回调进行关联跟踪. Arc没有全局的指令或查询结果观察者,
但是Arc React 将每个命令和快照查询
httpHeadersCallback最远者ArcContext编辑 提供者将其包成添加X-Correlation-ID对每一次请求,都要记念它Correlation/) (中文(简体) ). Arc 的后端用途 id 一个请求携带。 可观察的查询通过Arc的共享中枢连接,没有被跟踪. UsherBoundary保留 乌舍出所报. Usher自己的组件与未跟踪者运行ArcContext内部<Slice>边框,所以它的请求没有随报告一起发送,它的代理人不会改变切片 上下文.- 授予共享身份的准入部队.
useAccessChoice沿着窗体通过onFieldChange和部队shareIdentity结束currentValues。 。 。 .shareIdentity被删除initialValues,因为表单合并initialValues结束currentValues。 。 。 .
状态
决定以纯的、指定的模块进行;组件渲染和电线事件:
| 模块 | 决定 |
|---|---|
Reporting/AccessChoice.ts | 访问选择转换,强制身份,直到访问持续 |
Reporting/reportValues.ts | 报告初始值、 错误细节 |
Issues/issueStates.ts | 州徽, 关闭州, 状态剥离阶梯 |
Issues/MyIssuesList.ts | 等待计数, 关闭过滤器, 修复已释放 |
Issues/conversationMessages.ts | 聊天作者和消息机构 |
Issues/accessStatus.ts | 支持是否在时钟上签名 |
Issues/MyIssues/MyIssuesNavigation.ts | 列表或发行,显示已关闭 |
Buttons/buttonModels.ts | 文本、工具提示和按钮的可访问名称 |
Labels/ | 英语默认值、 深重覆被、 占位符 |
CSS公约
一个样式表, styles.css,导出为 @cratis/showrunner.usher.react/styles建筑没有CSS管道,所以
组件不导入 CSS。 类为前缀 usher- 带有类似 BEM 的元素名称,以及每种颜色、边框和
半径来自 --cratis-* 标志 状态通过 data-* 属性( e)data-highlighted, (中文(简体) ),
data-reached, (中文(简体) ), data-current) (中文(简体) ).
扩展
- 新案文:添加到
UsherLabels财务报告和审定财务报表defaultUsherLabels;每个组件读取标签UsherContext。 。 。 . - 新对话条目类型: 添加其句子到
ConversationEventLabels并将其映射到conversationMessages.ts。 。 。 . - 一个新的对话框: 渲染它
useDialog包装UsherProvider并添加打开器到UsherContextValue财务报告和审定财务报表useUsher。 。 。 .