<TogglePattern /> というコンポーネントを書きました。

名前の通りトグルするボタンとかを実装するのを想定して作りましたが、 もっと汎用的にパターンマッチ的な感じの制御ができるようになってます(A/Bテスト的なやつにも使えそう)

使い方は、childrenに表示が切り替わる要素を置く形で書くようになっています。 (こういう親になるコンポーネントってなんというのだろう?)

次の例ではisEditingの値が

  • trueならばLeaveEditingButtonが表示
  • falseならばEnterEditingButtonが表示

という形になっています。

import {TogglePattern} from "react-toggle-pattern";
class ToggleButton extends React.Component {
    render(){
        return (
            <TogglePattern isEditing={this.props.isEditing}>
                <LeaveEditingButton isEditing={true} />
                <EnterEditingButton isEditing={false} />
            </TogglePattern>
        );
    }
}

プログラム的に書くと以下の事をやっているのと同じです。 ViewからできるだけIf文を消すために、TogglePatternのような宣言的に書けるようにしています。

const toggleButton = this.props.isEditing 
                     ? <LeaveEditingButton />
                     : <EnterEditingButton />

条件が1つだけならORかANDなのか気にしなくていいですが、<TogglePattern />は複数条件にも対応しています。 <TogglePattern />は<ToggleOrPattern />のエイリアスです。

OR

OR条件で表示を制御したい場合は<ToggleOrPattern />が利用できます。

<ToggleOrPattern a={true}>
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</ToggleOrPattern>

両方共条件を満たしているので、両方とも表示します。

<div class="TogglePattern ToggleOrPattern">
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</div>

AND

AND条件で表示を制御したい場合は<ToggleAndPattern />が利用できます。

<ToggleAndPattern a={true} b={false}>
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</ToggleAndPattern>

これはAND条件でマッチするのは LeaveEditingButton だけなので、次のような結果になります。

<LeaveEditingButton a={true} b={false} />

条件の値には真偽値以外も使えます。 次の例ではpatternに指定した文字列と一致するものが表示されます。

<TogglePattern pattern="one">
    <ComponentX pattern="one"/>
    <ComponentY pattern="two"/>
</TogglePattern>

なので、結果は<ComponentY />となります。

実装

実装は大した事はやってないですが、テストをenzymeで書いています。 普通にReact Componentのテストを書けるので面白い感じがします。