Giter Club home page Giter Club logo

Comments (14)

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024 1

Looks like it did get removed, adding it back and will roll out a patch shortly.

from react-idle-timer.

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024 1

Hey @mellis481,

Hoping to have this out today. Just seeing what I can do about supporting CSP. RegeneratorRuntime is broken IMO, but looking for a work around. If I come up dry I will just release these fixes today and work on it for another patch.

from react-idle-timer.

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024 1

@mellis481 4.6.3 published to latest tag!

from react-idle-timer.

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024

Hi @paigeflourin, IdleTImer has been implemented with typescript before but the definitions were never committed. Here is a declaration file by @kamranayub:

declare module "react-idle-timer" {
  import * as React from "react";

  class IdleTimer extends React.Component<IdleTimerProps> {
    /**
     * Restore initial state and restart timer
     */
    reset(): void;

    /**
     * Store remaining time and stop timer
     */
    pause(): void;

    /**
     * Resumes a paused timer
     */
    resume(): void;

    /**
     * Time remaining before idle (number of ms)
     */
    getRemainingTime(): number;

    /**
     * How much time has elapsed (timestamp)
     */
    getElapsedTime(): number;

    /**
     * Last time the user was active
     */
    getLastActiveTime(): number;

    /**
     * Returns wether or not the user is idle
     */
    isIdle(): boolean;
  }

  namespace IdleTimer {

  }

  interface IdleTimerProps {
    ref: (ref: IdleTimer) => any;

    /**
     * Activity Timeout in milliseconds default: 1200000
     */
    timeout?: number;

    /**
     * DOM events to listen to default: see [default events](https://github.com/SupremeTechnopriest/react-idle-timer#default-events)
     */
    events?: string[];

    /**
     * Element reference to bind activity listeners to default: document
     */
    element?: Node;

    /**
     * Start the timer on mount default: true
     */
    startOnMount?: boolean;

    /**
     * Bind events passively default: true
     */
    passive?: boolean;

    /**
     * Capture events default: true
     */
    capture?: boolean;

    /**
     * Function to call when user becomes active
     */
    onActive?: () => void;

    /**
     * Function to call when user is idle
     */
    onIdle?: () => void;
  }

  export = IdleTimer;
}

You can see this closed issue. Feel free to open a Pull Request. I'll get it pushed up quick.

from react-idle-timer.

sl45sms avatar sl45sms commented on May 17, 2024

based on @kamranayub work to add the new properties , onAction throttle stopOnIdle

/// <reference types="react"/>

declare module "react-idle-timer" {
  import * as React from "react";

  class IdleTimer extends React.Component<IdleTimerProps> {
    /**
     * Restore initial state and restart timer
     */
    reset(): void;

    /**
     * Store remaining time and stop timer
     */
    pause(): void;

    /**
     * Resumes a paused timer
     */
    resume(): void;

    /**
     * Time remaining before idle (number of ms)
     */
    getRemainingTime(): number;

    /**
     * How much time has elapsed (timestamp)
     */
    getElapsedTime(): number;

    /**
     * Last time the user was active
     */
    getLastActiveTime(): number;

    /**
     * Returns wether or not the user is idle
     */
    isIdle(): boolean;
  }

  namespace IdleTimer {

  }

  interface IdleTimerProps {
    ref: (ref: IdleTimer) => any;

    /**
     * Activity Timeout in milliseconds default: 1200000
     */
    timeout?: number;


    /**
     * DOM events to listen to default: see [default events](https://github.com/SupremeTechnopriest/react-idle-timer#default-events)
     */
    events?: string[];

    /**
     * Function to call when user is idle
     */
    onIdle?: () => void;
    
    /**
     * Function to call when user becomes active
     */
    onActive?: () => void;    

    /**
     * Function to call when user have an activity
     */
    onAction?: () => void;

    /**
     * Debounce the onAction function by setting delay in milliseconds default: 0
     */
    debounce?: number;

    /**
     * Throttle the onAction function by setting delay in milliseconds default: 0
     */
    throttle?: number;

    /**
     * Element reference to bind activity listeners to default: document
     */
    element?: Node;

    /**
     * Start the timer on mount default: true
     */
    startOnMount?: boolean;

    /**
     * Once the user goes idle the IdleTimer will not reset on user input instead, reset() must be called manually to restart the timer default: false
     */
    stopOnIdle?: boolean;

    /**
     * Bind events passively default: true
     */
    passive?: boolean;

    /**
     * Capture events default: true
     */
    capture?: boolean;

  }

  export = IdleTimer;
}

from react-idle-timer.

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024

I added the typescript file to the repository and I will keep it maintained. See version 4.2.1

from react-idle-timer.

mellis481 avatar mellis481 commented on May 17, 2024

@SupremeTechnopriest I'm having an issue with the ref property not existing for the IdleTimer component in my Typescript project. I'm seeing that it was removed with this commit with the note "remove ref completely from typedef. It is included with Component", but it seems like ref may have been removed from React's Component interface because I'm not seeing it.

from react-idle-timer.

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024

Let me check on that.

from react-idle-timer.

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024

@mellis481 Can you try out 4.6.3-rc.1 by npm i react-idle-timer@next? Should be all set now.

from react-idle-timer.

mellis481 avatar mellis481 commented on May 17, 2024

Can you try out 4.6.3-rc.1 by npm i react-idle-timer@next? Should be all set now.

@SupremeTechnopriest Looks good!

from react-idle-timer.

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024

Cool! WIll be rolling this to the latest tag today hopefully. Just working on fixing a few other things. I will update you here when you can switch back.

from react-idle-timer.

mellis481 avatar mellis481 commented on May 17, 2024

@SupremeTechnopriest Just checking in to see when the new package can be published.

from react-idle-timer.

mellis481 avatar mellis481 commented on May 17, 2024

@SupremeTechnopriest Just wondering if this type fix can be separated from the other work so it can be released now.

from react-idle-timer.

SupremeTechnopriest avatar SupremeTechnopriest commented on May 17, 2024

I should be rolling this out today. In the mean time you can use:

// @ts-ignore 

to ignore type checking for the ref. If they don't get back to me today on their issues, I will roll out a patch this evening.

from react-idle-timer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.