cytoplasmic
    Preparing search index...

    Function Switch

    • A component that switches between different branches based on the value of a property on a cell. Designed for use with tagged unions and supports type narrowing. Checks for exhaustiveness when a default branch isn't provided via the else property.

      Type Parameters

      • TProp extends string | number | symbol
      • TObj extends { [k in string | number | symbol]: string | number | symbol }

      Parameters

      • props: {
            children: {
                [TName in string | number | symbol]: (
                    cell: Cell<TObj & { [k in string | number | symbol]: TName }>,
                ) => Element
            };
            on: TProp;
            with: Input<undefined | TObj>;
        }
        • children: {
              [TName in string | number | symbol]: (
                  cell: Cell<TObj & { [k in string | number | symbol]: TName }>,
              ) => Element
          }

          An object of branches. The key is the value to compare the property with and the value is a function that accepts the type narrowed object and returns an Element.

        • on: TProp

          The property of the object to select a branch based on.

        • with: Input<undefined | TObj>

          The object cell to pass to the selected branch.

      Returns Element

      type MyTaggedUnion = {
        type: 'num',
        num: number,
      } | { 
        type: 'str',
        str: string,
      };

      const a = cell<MyTaggedUnion>({type: 'num', num: 5});

      <Switch with={a} on='type'>{{
        'num': a => <span>The number is {a.props.num}</span>,
        'str': a => <span>The string is {a.props.str}</span>,
      }}</Switch>

    • Same as above but does not require a branch for every variation of the input type.

      Type Parameters

      • TProp extends string | number | symbol
      • TObj extends { [k in string | number | symbol]: string | number | symbol }

      Parameters

      • props: {
            children: {
                [TName in string | number | symbol]?: (
                    cell: Cell<TObj & { [k in string | number | symbol]: TName }>,
                ) => Element
            };
            else: ElementChildren;
            on: TProp;
            with: Input<undefined | TObj>;
        }
        • children: {
              [TName in string | number | symbol]?: (
                  cell: Cell<TObj & { [k in string | number | symbol]: TName }>,
              ) => Element
          }

          An object of branches. The key is the value to compare the property with and the value is a function that accepts the type narrowed object and returns an Element.

        • else: ElementChildren

          Alternative element to render when none of the branches provided in props.children match the input.

        • on: TProp

          The property of the object to select a branch based on.

        • with: Input<undefined | TObj>

          The object cell to pass to the selected branch.

      Returns Element

    • A simple switch without type narrowing for use with enums. The variant without an else-property does implement exhaustiveness checking.

      Type Parameters

      • TProp extends string | number | symbol

      Parameters

      • props: {
            children: { [TName in string | number | symbol]: Element };
            on: Input<undefined | TProp>;
        }
        • children: { [TName in string | number | symbol]: Element }

          An object of branches. The key is the value to compare the input value with and the value is an element.

        • on: Input<undefined | TProp>

          The value to select a branch based on.

      Returns Element

      type MyEnum = 'foo' | 'bar';
      const a = cell<MyEnum>('foo');

      <Switch on={a}>{{
         'foo': <span>a is foo</span>,
         'bar': <span>a is bar</span>,
      }}</Switch>

    • Same as above but does not require a branch for every input.

      Type Parameters

      • TProp extends string | number | symbol

      Parameters

      • props: {
            children: { [TName in string | number | symbol]?: Element };
            else: ElementChildren;
            on: Input<undefined | TProp>;
        }
        • children: { [TName in string | number | symbol]?: Element }

          An object of branches. The key is the value to compare the input value with and the value is an element.

        • else: ElementChildren

          Alternative element to render when none of the branches provided in props.children match the input.

        • on: Input<undefined | TProp>

          The value to select a branch based on.

      Returns Element

    Settings

    Member Visibility