react-transition-group#CSSTransitionGroup TypeScript Examples

The following examples show how to use react-transition-group#CSSTransitionGroup. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: BannerNotifications.tsx    From pPhone2 with MIT License 6 votes vote down vote up 
BannerNotifications: React.FC = () => {
  const state = useReduxState<INotif[]>((state) => state.notif);
  const { history } = useReactRouter();

  const onClicked = (notif: INotif) => {
    //todo remove notif on click
    history.push(notif.link);
  };

  return (
    <div className="banner-notification-container">
      <CSSTransitionGroup transitionName="notification" transitionEnterTimeout={400} transitionLeaveTimeout={400}>
        {state.map((notif) => (
          <Notification onClick={() => onClicked(notif)} key={notif.id} {...notif} />
        ))}
      </CSSTransitionGroup>
    </div>
  );
}
Example #2
Source File: voicemail-page.tsx    From pPhone2 with MIT License 4 votes vote down vote up 
VoicemailPage: React.FC = () => {
  const [state, SetState] = useState<PageState>({ editMode: false, voicemails: defaultVoicemails });

  const toggleEditMode = () => {
    const voicemails = state.editMode
      ? state.voicemails.map((mail) => {
          return { ...mail, selected: false };
        })
      : state.voicemails;
    SetState({ ...state, voicemails: voicemails, editMode: !state.editMode });
  };
  const markSelectedAsRead = () => {
    const voicemails = state.voicemails.map((mail) => {
      return { ...mail, selected: false, read: mail.selected || mail.read };
    });
    SetState({ ...state, voicemails: voicemails, editMode: false });
  };
  const deleteSelected = () => {
    const voicemails = state.voicemails.filter((mail) => !mail.selected);
    SetState({ ...state, voicemails: voicemails, editMode: false });
  };

  const onVoicemailClicked = (id: number) => {
    if (state.editMode) {
      SetState({
        ...state,
        voicemails: state.voicemails.map((mail) => (mail.id == id ? { ...mail, selected: !mail.selected } : mail)),
      });
    } else {
      SetState({
        ...state,
        playerMailId: state.playerMailId ? undefined : id,
        voicemails: state.voicemails.map((mail) => {
          return { ...mail, read: mail.id == id || mail.read };
        }),
      });
    }
  };

  const onVoicemailDelete = (id: number) => {
    SetState({ ...state, voicemails: state.voicemails.filter((mail) => mail.id != id), playerMailId: undefined });
  };

  const selectedItems = state.voicemails.filter((mail) => mail.selected);
  const hasSelectedItems = selectedItems.length > 0;
  const hasUnreadSelectedItems = selectedItems.filter((mail) => !mail.read).length > 0;

  const getVoiceMails = () => {
    return state.voicemails.map((mail) => (
      <Voicemail
        key={mail.id}
        {...mail}
        editMode={state.editMode}
        showPlayer={state.playerMailId == mail.id}
        onVoicemailClicked={() => onVoicemailClicked(mail.id)}
        onDeleteVoicemail={() => onVoicemailDelete(mail.id)}
      />
    ));
  };

  return (
    <div id="voicemail-page">
      <HeaderApp
        title="Voicemail"
        leftText="Greeting"
        rightText={state.editMode ? "Done" : "Edit"}
        rightOnClick={toggleEditMode}
        disable={state.playerMailId != undefined}
      />
      <div className="page-container">
        <ul id="voicemail-list" className={`list-view ${state.playerMailId != undefined ? "has-player" : ""}`}>
          <CSSTransitionGroup
            transitionName="voicemail-transition"
            transitionEnter={false}
            transitionLeaveTimeout={300}
          >
            {getVoiceMails()}
          </CSSTransitionGroup>
        </ul>
      </div>
      {state.editMode && (
        <div id="voicemail-options">
          <div onClick={markSelectedAsRead} className={hasUnreadSelectedItems ? "enable" : ""}>
            Mark as read
          </div>
          <div onClick={deleteSelected} className={hasSelectedItems ? "enable" : ""}>
            Delete
          </div>
        </div>
      )}
    </div>
  );
}