Molecules-BoxSelectComponent
Admin私のストアMoleculesのBoxSelectComponentについて解説します。
BoxSelectComponentは選択したkeyとvalueを保持するコンポーネントです。選択肢はクリック時にリスト形式で表示されます。
BoxSelectComponentのテストではBoxComponentの配置リストをサンプルにしてテスト表示しています。
引数は位置、幅、高さ、選択肢の背景色、テキストの色、背景色です。
BoxSelectComponentは以下４つのComponentの組み合わせです。
- Atoms-RectComponent
- Molecules-ClickItemComponent
- Molecules-BoxTextComponent
- Molecules-ListVerticalComponent
RectComponentは配置を自由に決定できるコンポーネントです。選択した値をBoxTextComponentで表示し、その下にRectComponentで選択肢を表示しています。各選択肢は縦リスト形式で表示するため、ListVerticalComponentに選択肢のリストを設定します。選択肢をクリック時に選択中の値を選択した値に変更します。
BoxSelectComponentではいくつか処理に関する仕様を決めています。
クリック等のイベントを処理するイベントハンドラでは選択肢が展開中に他の要素をクリックした場合に選択肢の展開を閉じます。
また、描画の処理順は親コンポーネントから子コンポーネントへ深さ優先で描画していきます。他のコンポーネントと配置が重なった場合、展開されている選択肢が隠れる可能性があるため、レイヤーを設定しています。
BoxSelectComponentのBox Positionの場合、レイヤーが未設定の場合、選択肢は他のパラメータの表示で隠れてしまいます。しかし、レイヤーは設定された値の大きいものを描画処理順に関係なく後で描画するため、画像の通り手前に描画できます。