angular: propagate the enabled state to detail renderers instead of modifying their UI schema

オープン
  • 何か問題がありますか？
#2,630 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
68/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
angular, typescript
領域
frontend

調査の方向性

Start with packages/angular-material/src/library/util/detail-uischema.ts and the jsonforms-outlet, LayoutChildrenRenderPropsPipe, LayoutRenderer, array layout, object control, list-with-detail, and table renderer entry points named in the issue. Trace how enabled currently reaches React and Vue equivalents, then compare Angular's cloneDeep/setReadonly paths. Done means enabled state reaches nested detail renderers while the supplied UI schema remains unchanged.

索引モデルが issue の本文から書いたものです。

説明

angular material
Is your feature request related to a problem? Please describe.

Follow-up to #2628.

The Angular Material array layout, object control and list with detail disable their detail by calling setReadonly on its UI schema, which writes options.readonly: true into every control. That UI schema is the result of findUISchema, i.e. the user's options.detail or a UI schema from the uischemas registry. #2628 stopped modifying the user's object by deep cloning it first (createDetailUiSchemaResolver in packages/angular-material/src/library/util/detail-uischema.ts), but the renderers still render a modified copy instead of the given UI schema.

The other renderer sets never modify a given schema or UI schema. React and Vue hand the parent's state down as the enabled own prop of JsonFormsDispatch / DispatchRenderer, and isInherentlyEnabled (packages/core/src/mappers/util.ts) falls back to ownProps.enabled.

Downsides of the current Angular approach:

  • The detail UI schema is deep cloned whenever one of its inputs changes, and the renderers need memoization so that this does not happen on every state emission.
  • Toggling the enabled state produces a different UI schema. jsonforms-outlet compares UI schemas with isEqual, so it destroys and re-creates the whole detail, losing any view state inside it, e.g. the selected tab of a nested categorization.
  • Nested and custom renderers receive a UI schema containing readonly options the user never wrote.
Describe the solution you'd like

Propagate the enabled state through the Angular bindings like React and Vue do, and render the detail UI schema as-is:

  • jsonforms-outlet: accept enabled (already part of OwnPropsOfRenderer) in renderProps and hand it to the created renderer, e.g. as disabled on JsonFormsAbstractControl, which getOwnProps already maps to ownProps.enabled.
  • Layout renderers: forward the enabled state to their children, e.g. via LayoutChildrenRenderPropsPipe, so it reaches controls nested in layouts inside a detail. LayoutRenderer currently only takes label and visible from mapStateToLayoutProps.
  • Array layout, object control and list with detail: pass enabled: this.isEnabled() along with the detail's render props and drop the cloneDeep + setReadonly.
  • Table renderer: same for its generated cell UI schemas, which also get setReadonly today.
Describe alternatives you've considered
  • Keep cloning the detail UI schema (current state since #2628). It works and no longer modifies the user's UI schema, but keeps the costs and the view re-creation described above, and stays inconsistent with the other renderer sets.
  • Resolve the readonly state centrally in @jsonforms/core (e.g. a parent-enabled lookup by path) instead of passing props down. This would avoid touching every layout, but has no precedent in the other bindings.
Package

Angular Bindings, Angular Material Renderers

Additional context
  • Once nothing in Angular Material uses them anymore, setReadonly and unsetReadonly in @jsonforms/core (packages/core/src/util/uischema.ts) have no remaining users and could be deprecated.
  • This is a behaviour change for Angular users: controls inside a detail would be disabled via the inherited enabled state instead of a readonly option. For example, an enable rule on a control inside a disabled array keeps taking precedence in both approaches, but custom renderers reading uischema.options.readonly would no longer see it.
主要言語
TypeScript
スター
2.8k
フォーク
423
平均マージ
5日 16時間
マージ済み PR（30日）
9

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

eclipsesource/jsonforms のほかの issue

eclipsesource/jsonforms の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。