react-redux#ReactReduxContext TypeScript Examples

The following examples show how to use react-redux#ReactReduxContext. 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: Loading.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up 
export default function Loading(props: {
  showImmediately?: boolean;
}) {
  const redux = useContext(ReactReduxContext);
  useEffect(() => {
    var loadingShown = false;
    const show = () => {
      redux?.store?.dispatch?.(showLoading());
      loadingShown = true;
    };
    var timeout;
    if (props.showImmediately) {
      show();
    } else {
      timeout = setTimeout(show, delay);
    }
    return () => {
      clearTimeout(timeout);
      if (loadingShown) redux?.store?.dispatch?.(hideLoading());
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
  return (
    <Fade appear in timeout={props.showImmediately ? 0 : delay}>
      <CircularProgress style={{
        margin: 'auto',
        // This is just a patch, circular progress flashes unstyled with SSR taking up whole page.
        // Just at least don't cover the whole page...
        maxWidth: 40, maxHeight: 40,
      }} />
    </Fade>
  );
}
Example #2
Source File: index.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
injectReducer =
  ({ key, reducer }) =>
  WrappedComponent => {
    class ReducerInjector extends React.Component {
      static WrappedComponent = WrappedComponent;

      static contextType = ReactReduxContext;

      static displayName = `withReducer(${
        WrappedComponent.displayName || WrappedComponent.name || 'Component'
      })`;

      constructor(props, context) {
        super(props, context);

        getInjectors(context.store).injectReducer(key, reducer);
      }

      render() {
        return <WrappedComponent {...this.props} />;
      }
    }

    return hoistNonReactStatics(ReducerInjector, WrappedComponent);
  }
Example #3
Source File: ModalDialog.tsx    From kliveide with MIT License 4 votes vote down vote up 
ModalDialog: React.VFC<Props> = ({ targetId }) => {
  const { store } = useContext(ReactReduxContext);
  const [show, setShow] = useState(false);
  const [modalDialog, setModalDialog] = useState<IModalDialogDescriptor | null>(
    null
  );
  const [buttons, setButtons] = useState<ButtonPropsModel[]>([]);
  const [refreshCount, setRefreshCount] = useState(0);

  const handleClick = (click?: () => void | boolean) => {
    if (click?.()) {
      getModalDialogService().hide();
    }
  };

  // --- Set up the buttons according to the dialog definition
  const handleModalChanged = (modal: IModalDialogDescriptor) => {
    setModalDialog(modal);
    if (!modal) {
      return;
    }
    setRefreshCount(refreshCount + 1);

    const buttons: ButtonPropsModel[] = [];
    if (modal.button1Text) {
      buttons.push({
        buttonModel: {
          content: modal.button1Text,
          cssClass: "e-flat",
          isPrimary: modal.primaryButtonIndex === 1,
        },
        click: () => handleClick(modal.button1Clicked),
      });
    }
    if (modal.button2Text) {
      buttons.push({
        buttonModel: {
          content: modal.button2Text,
          cssClass: "e-flat",
          isPrimary: modal.primaryButtonIndex === 2,
        },
        click: () => handleClick(modal.button2Clicked),
      });
    }
    if (modal.button3Text) {
      buttons.push({
        buttonModel: {
          content: modal.button3Text,
          cssClass: "e-flat",
          isPrimary: modal.primaryButtonIndex === 3,
        },
        click: () => handleClick(modal.button3Clicked),
      });
    }
    setButtons(buttons);
  };

  // --- Show od hide the dialog
  const handleVisibilityChanged = (display: boolean) => setShow(display);

  // --- Close the dialog if the users decides so
  const modalDialogService = getModalDialogService();
  const onOverlayClick = () => modalDialogService.hide();
  const onDialogClose = () => {
    modalDialogService.hide();
    modalDialogService.disposeModalDialog();
  };

  useEffect(() => {
    // --- Mount
    modalDialogService.modalChanged.on(handleModalChanged);
    modalDialogService.visibilityChanged.on(handleVisibilityChanged);

    return () => {
      // --- Dismount
      modalDialogService.visibilityChanged.off(handleVisibilityChanged);
      modalDialogService.modalChanged.off(handleModalChanged);
    };
  });

  return (
    modalDialog &&
    buttons.length > 0 &&
    show && (
      <DialogComponent
        key={refreshCount}
        width={modalDialog.width}
        height={modalDialog.height}
        target={targetId}
        isModal={true}
        showCloseIcon={true}
        header={modalDialog.title}
        closeOnEscape={false}
        allowDragging={true}
        overlayClick={onOverlayClick}
        close={onDialogClose}
        buttons={buttons}
        animationSettings={{ effect: "None", delay: 0, duration: 0 }}
      >
        <div style={{ padding: "8px 15px", color: "white", fontSize: "1em" }}>
          {modalDialog?.createContentElement(modalDialogService.args)}
        </div>
      </DialogComponent>
    )
  );
}