アイマストドン独自コンポーネントをhooksに書き換え( #538 )をポート#540
Merged
Merged
Conversation
PureComponentから関数コンポーネント+memoに変更。handleClickは useCallbackで保持。propsとDOM出力は変更なしで、追加したsnapshot テスト+クリック挙動テスト(handler呼び出し/disabled/preventDefault) が引き続きpassすることを確認している。
PureComponentから関数コンポーネント+memoに変更。injectIntlを useIntlフックに置き換え、各ハンドラはuseCallbackで保持。 props/DOM出力は変更なしで、追加したsnapshot(3パターン)と4種 クリック挙動(add/remove × public/unlisted)テストがpass。
- PureComponentから関数コンポーネント+memoに変更 - 独自の背景画像レンダリングを廃止し、本家AvatarコンポーネントとAvatarOverlay の.account__avatar-overlay-base/.account__avatar-overlay-overlay構造に 揃えてsizeプロパティをコンテナとアバター画像両方に反映 - これにより通知欄(avatarSize=40)で公開範囲アイコンの位置が アバター画像の右下角からずれるバグも解消 - SVGアイコンをdisplay:blockにすることでwrapperの行高分の余白(line-box) によって縦位置が浮く問題も修正 - imastodon/statuses.scssから重複していた配置関連スタイルを削除し本家 .account__avatar-overlay-overlayの絶対配置に依存させる
- PureComponentから関数コンポーネント+memoに変更
- state2つ(lockedTag/lockedVisibility)はuseState、componentDidMount
とUNSAFE_componentWillUpdateはuseEffectに、injectIntlはuseIntl
に置き換え。後者はuseRefで初回スキップを実装
- li要素のkeyにtag.get('name')を使っていたため同一nameで異なる
visibilityのfavourite tagが衝突して片方しかレンダリングされない
ケースがあった。keyをtag.get('id')に変更し各エントリを一意化
従来はfullHeight=tags.size*30のような近似値をJSで計算してinline styleで渡していたが、要素ごとの実高さに対応できず内容が増えた時に 正確に折りたたみ/展開できなかった。 CSS Gridのgrid-template-rows: 0fr↔1frをtransitionする手法に変更し、 中身の実高さに自動追従させる。Foldableのfullheight/minHeightプロップ を廃止しisVisibleのみで制御するシンプルなAPIにした。 flex設定を持たせず純粋なgrid containerにすることで、 親フレックス コンテナ内でも 1fr が中身分のサイズに正しく解決され、 親が高さ干渉 でshrinkすると Foldable も追従して shrink、foldable__inner の overflow-y: auto で内部スクロールに切り替わる。
- compose-form: flex 0 0 auto に上書きし中身分のサイズで固定 (grow/shrink共に禁止)。compose-form__highlightable も flex-shrink: 0 で内部も縮ませない - compose__extra: margin-top: auto + flex 0 1 auto + min-height: 0 でサイドバー余白を上に集約してお気に入りタグ自身を下詰め配置。 flex-shrink: 1 により高さ干渉時はお気に入りタグだけがshrinkする これにより compose-form の表示領域は維持されたまま、お気に入り タグ一覧が中身全部入りきらない場合でも内部スクロールで確認できる。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.