childPropsByPhase property

@override Map<TransitionPhase, Map?>? get childPropsByPhase

An optional map of props to apply to the single child based on the current transition phase.

This provides you with the ability to add CSS classes / other DOM attributes based on the granular transition states that are confined within the WithTransition component without having to utilize state change callbacks to update your component's state.

NOTE: These values will override any prop values set on the child itself if the key(s) in the Map are the same.

Example:

UiFactory<WithTransitionExampleProps> WithTransitionExample = uiFunction(
  (props) {
    final isShown = useState(false);

    return (WithTransition()
      ..isShown = isShown.value
      ..childPropsByPhase = useMemo(() => {
        TransitionPhase.PRE_SHOWING: domProps()..className = 'before-showing',
        TransitionPhase.SHOWING: domProps()..className = 'showing',
        TransitionPhase.SHOWN: domProps()..className = 'shown',
        TransitionPhase.HIDING: domProps()..className = 'hiding',
        TransitionPhase.HIDDEN: domProps()..className = 'hidden',
      })
    )(
      // The child that has CSS transitions
    );
  },
  _$WithTransitionExampleConfig, // ignore: undefined_identifier
);

Implementation

@override
Map<TransitionPhase, Map?>? get childPropsByPhase =>
    (props[_$key__childPropsByPhase__WithTransitionPropsMixin] ?? null)
        as Map<TransitionPhase, Map?>?;

@override set childPropsByPhase (Map<TransitionPhase, Map?>? value)

An optional map of props to apply to the single child based on the current transition phase.

This provides you with the ability to add CSS classes / other DOM attributes based on the granular transition states that are confined within the WithTransition component without having to utilize state change callbacks to update your component's state.

NOTE: These values will override any prop values set on the child itself if the key(s) in the Map are the same.

Example:

UiFactory<WithTransitionExampleProps> WithTransitionExample = uiFunction(
  (props) {
    final isShown = useState(false);

    return (WithTransition()
      ..isShown = isShown.value
      ..childPropsByPhase = useMemo(() => {
        TransitionPhase.PRE_SHOWING: domProps()..className = 'before-showing',
        TransitionPhase.SHOWING: domProps()..className = 'showing',
        TransitionPhase.SHOWN: domProps()..className = 'shown',
        TransitionPhase.HIDING: domProps()..className = 'hiding',
        TransitionPhase.HIDDEN: domProps()..className = 'hidden',
      })
    )(
      // The child that has CSS transitions
    );
  },
  _$WithTransitionExampleConfig, // ignore: undefined_identifier
);

Implementation

@override
set childPropsByPhase(Map<TransitionPhase, Map?>? value) =>
    props[_$key__childPropsByPhase__WithTransitionPropsMixin] = value;