├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github └── dependabot.yml ├── .gitignore ├── .npmignore ├── .npmrc ├── .nvmrc ├── .vscode ├── launch.json └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── _config.yml ├── appveyor.yml ├── bower.json ├── build ├── react-live-clock.js ├── react-live-clock.js.map └── react-live-clock.min.js ├── circle.yml ├── cli.js ├── example ├── bundle.js ├── bundle.js.map └── index.html ├── index.d.ts ├── index.html ├── lib ├── Component.js ├── Component.js.map ├── ReactLiveClock.js ├── ReactLiveClock.js.map ├── index.js └── index.js.map ├── nightwatch.json ├── package-scripts.js ├── package.json ├── src ├── Component.js ├── example │ ├── App │ │ ├── App.css │ │ └── index.js │ └── Example.js └── index.js ├── test-e2e └── Smoketest.js ├── test ├── ReactComponentTemplate-test.js ├── example │ └── App-test.js └── index.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react" 5 | ], 6 | "plugins": [ 7 | "transform-object-rest-spread" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | indent_style = space 10 | indent_size = 2 11 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /example/ 2 | /lib/ 3 | /node_modules/ 4 | /build/ 5 | /reports/ 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true, 5 | "es6": true 6 | }, 7 | 8 | "parser": "babel-eslint", 9 | "parserOptions": { 10 | "ecmaVersion": 6, 11 | "sourceType": "module", 12 | "ecmaFeatures": { 13 | "modules": true 14 | } 15 | }, 16 | 17 | "plugins": ["react"], 18 | 19 | "rules": { 20 | // 21 | //Possible Errors 22 | // 23 | // The following rules point out areas where you might have made mistakes. 24 | // 25 | "comma-dangle": 2, // disallow or enforce trailing commas (recommended) 26 | "no-cond-assign": 2, // disallow assignment in conditional expressions (recommended) 27 | "no-console": 2, // disallow use of console (recommended) 28 | "no-constant-condition": 2, // disallow use of constant expressions in conditions (recommended) 29 | "no-control-regex": 2, // disallow control characters in regular expressions (recommended) 30 | "no-debugger": 2, // disallow use of debugger (recommended) 31 | "no-dupe-args": 2, // disallow duplicate arguments in functions (recommended) 32 | "no-dupe-keys": 2, // disallow duplicate keys when creating object literals (recommended) 33 | "no-duplicate-case": 2, // disallow a duplicate case label. (recommended) 34 | "no-empty": 2, // disallow empty block statements (recommended) 35 | "no-empty-character-class": 2, // disallow the use of empty character classes in regular expressions (recommended) 36 | "no-ex-assign": 2, // disallow assigning to the exception in a catch block (recommended) 37 | "no-extra-boolean-cast": 2, // disallow double-negation boolean casts in a boolean context (recommended) 38 | //"no-extra-parens": 2, // disallow unnecessary parentheses 39 | "no-extra-semi": 2, // disallow unnecessary semicolons (recommended) (fixable) 40 | "no-func-assign": 2, // disallow overwriting functions written as function declarations (recommended) 41 | "no-inner-declarations": 2, // disallow function or variable declarations in nested blocks (recommended) 42 | "no-invalid-regexp": 2, // disallow invalid regular expression strings in the RegExp constructor (recommended) 43 | "no-irregular-whitespace": 2, // disallow irregular whitespace outside of strings and comments (recommended) 44 | "no-negated-in-lhs": 2, // disallow negation of the left operand of an in expression (recommended) 45 | "no-obj-calls": 2, // disallow the use of object properties of the global object (Math and JSON) as functions (recommended) 46 | "no-regex-spaces": 2, // disallow multiple spaces in a regular expression literal (recommended) 47 | "no-sparse-arrays": 2, // disallow sparse arrays (recommended) 48 | "no-unexpected-multiline": 2, // Avoid code that looks like two expressions but is actually one (recommended) 49 | "no-unreachable": 2, // disallow unreachable statements after a return, throw, continue, or break statement (recommended) 50 | "use-isnan": 2, // disallow comparisons with the value NaN (recommended) 51 | "valid-jsdoc": 2, // Ensure JSDoc comments are valid 52 | "valid-typeof": 2, // Ensure that the results of typeof are compared against a valid string (recommended) 53 | 54 | 55 | // 56 | // Best Practices 57 | // 58 | // These are rules designed to prevent you from making mistakes. 59 | // They either prescribe a better way of doing something or help you avoid footguns. 60 | // 61 | "accessor-pairs": 2, // Enforces getter/setter pairs in objects 62 | "array-callback-return": 2, // Enforces return statements in callbacks of array's methods 63 | "block-scoped-var": 2, // treat var statements as if they were block scoped 64 | "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program 65 | "consistent-return": 2, // require return statements to either always or never specify values 66 | "curly": 2, // specify curly brace conventions for all control statements 67 | "default-case": 2, // require default case in switch statements 68 | "dot-location": [2, "property"], // enforces consistent newlines before or after dots 69 | "dot-notation": 2, // encourages use of dot notation whenever possible 70 | "eqeqeq": 2, // require the use of === and !== 71 | "guard-for-in": 2, // make sure for-in loops have an if statement 72 | "no-alert": 2, // disallow the use of alert, confirm, and prompt 73 | "no-caller": 2, // disallow use of arguments.caller or arguments.callee 74 | "no-case-declarations": 2, // disallow lexical declarations in case clauses (recommended) 75 | "no-div-regex": 2, // disallow division operators explicitly at beginning of regular expression 76 | "no-else-return": 2, // disallow else after a return in an if 77 | "no-empty-function": 2, // disallow use of empty functions 78 | "no-empty-pattern": 2, // disallow use of empty destructuring patterns (recommended) 79 | "no-eq-null": 2, // disallow comparisons to null without a type-checking operator 80 | "no-eval": 2, // disallow use of eval() 81 | "no-extend-native": 2, // disallow adding to native types 82 | "no-extra-bind": 2, // disallow unnecessary function binding 83 | "no-extra-label": 2, // disallow unnecessary labels 84 | "no-fallthrough": 2, // disallow fallthrough of case statements (recommended) 85 | "no-floating-decimal": 2, // disallow the use of leading or trailing decimal points in numeric literals 86 | "no-implicit-coercion": 2, // disallow the type conversions with shorter notations 87 | "no-implicit-globals": 2, // disallow var and named functions in global scope 88 | "no-implied-eval": 2, // disallow use of eval()-like methods 89 | "no-invalid-this": 2, // disallow this keywords outside of classes or class-like objects 90 | "no-iterator": 2, // disallow usage of __iterator__ property 91 | "no-labels": 2, // disallow use of labeled statements 92 | "no-lone-blocks": 2, // disallow unnecessary nested blocks 93 | "no-loop-func": 2, // disallow creation of functions within loops 94 | "no-magic-numbers": 0, // disallow the use of magic numbers 95 | "no-multi-spaces": 2, // disallow use of multiple spaces (fixable) 96 | "no-multi-str": 2, // disallow use of multiline strings 97 | "no-native-reassign": 2, // disallow reassignments of native objects 98 | "no-new": 2, // disallow use of the new operator when not part of an assignment or comparison 99 | "no-new-func": 2, // disallow use of new operator for Function object 100 | "no-new-wrappers": 2, // disallows creating new instances of String,Number, and Boolean 101 | "no-octal": 2, // disallow use of octal literals (recommended) 102 | "no-octal-escape": 2, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251"; 103 | "no-param-reassign": 2, // disallow reassignment of function parameters 104 | "no-process-env": 0, // disallow use of process.env 105 | "no-proto": 2, // disallow usage of __proto__ property 106 | "no-redeclare": 2, // disallow declaring the same variable more than once (recommended) 107 | "no-return-assign": 2, // disallow use of assignment in return statement 108 | "no-script-url": 2, // disallow use of javascript: urls. 109 | "no-self-assign": 2, // disallow assignments where both sides are exactly the same (recommended) 110 | "no-self-compare": 2, // disallow comparisons where both sides are exactly the same 111 | "no-sequences": 2, // disallow use of the comma operator 112 | "no-throw-literal": 2, // restrict what can be thrown as an exception 113 | "no-unmodified-loop-condition": 2, // disallow unmodified conditions of loops 114 | "no-unused-expressions": 2, // disallow usage of expressions in statement position 115 | "no-unused-labels": 2, // disallow unused labels (recommended) 116 | "no-useless-call": 2, // disallow unnecessary .call() and .apply() 117 | "no-useless-concat": 2, // disallow unnecessary concatenation of literals or template literals 118 | "no-void": 2, // disallow use of the void operator 119 | "no-warning-comments": 0, // disallow usage of configurable warning terms in comments - e.g. TODO or FIXME 120 | "no-with": 2, // disallow use of the with statement 121 | "radix": 2, // require use of the second argument for parseInt() 122 | "vars-on-top": 2, // require declaration of all vars at the top of their containing scope 123 | "wrap-iife": 2, // require immediate function invocation to be wrapped in parentheses 124 | "yoda": 2, // require or disallow Yoda conditions 125 | 126 | 127 | // 128 | // Strict Mode 129 | // 130 | // These rules relate to using strict mode. 131 | // 132 | "strict": 0, // controls location of Use Strict Directives. 0: required by babel-eslint 133 | 134 | 135 | // 136 | // Variables 137 | // 138 | // These rules have to do with variable declarations. 139 | // 140 | "init-declarations": 0, // enforce or disallow variable initializations at definition 141 | "no-catch-shadow": 2, // disallow the catch clause parameter name being the same as a variable in the outer scope 142 | "no-delete-var": 2, // disallow deletion of variables (recommended) 143 | "no-label-var": 2, // disallow labels that share a name with a variable 144 | "no-restricted-globals": 0, // restrict usage of specified global variables 145 | "no-shadow": 2, // disallow declaration of variables already declared in the outer scope 146 | "no-shadow-restricted-names": 2, // disallow shadowing of names such as arguments 147 | "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block (recommended) 148 | "no-undef-init": 2, // disallow use of undefined when initializing variables 149 | "no-undefined": 2, // disallow use of undefined variable 150 | "no-unused-vars": [2, {"argsIgnorePattern": "^_", "varsIgnorePattern": "^_"}], // disallow declaration of variables that are not used in the code (recommended) 151 | "no-use-before-define": 2, // disallow use of variables before they are defined 152 | 153 | // 154 | // Node.js and CommonJS 155 | // 156 | // These rules are specific to JavaScript running on Node.js or using CommonJS in the browser. 157 | // 158 | "callback-return": 2, // enforce return after a callback 159 | "global-require": 0, // enforce require() on top-level module scope 160 | "handle-callback-err": 2, // enforce error handling in callbacks 161 | "no-mixed-requires": 2, // disallow mixing regular variable and require declarations 162 | "no-new-require": 2, // disallow use of new operator with the require function 163 | "no-path-concat": 2, // disallow string concatenation with __dirname and __filename 164 | "no-process-exit": 0, // disallow process.exit() 165 | "no-restricted-imports": 0, // restrict usage of specified node imports 166 | "no-restricted-modules": 0, // restrict usage of specified node modules 167 | "no-sync": 2, // disallow use of synchronous methods 168 | // 169 | // Stylistic Issues 170 | // 171 | // These rules are purely matters of style and are quite subjective. 172 | // 173 | "array-bracket-spacing": [2, "never"], // enforce spacing inside array brackets (fixable) 174 | "block-spacing": [2, "always"], // disallow or enforce spaces inside of single line blocks (fixable) 175 | "brace-style": 2, // enforce one true brace style 176 | "camelcase": 2, // require camel case names 177 | "comma-spacing": [2, {"before": false, "after": true}], // enforce spacing before and after comma (fixable) 178 | "comma-style": [2, "last"], // enforce one true comma style 179 | "computed-property-spacing": [2, "never"], // require or disallow padding inside computed properties (fixable) 180 | "consistent-this": [2, "_this"], // enforce consistent naming when capturing the current execution context 181 | "eol-last": 2, // enforce newline at the end of file, with no multiple empty lines (fixable) 182 | "func-names": 0, // require function expressions to have a name 183 | "func-style": 0, // enforce use of function declarations or expressions 184 | "id-blacklist": 0, // blacklist certain identifiers to prevent them being used 185 | "id-length": 0, // this option enforces minimum and maximum identifier lengths (variable names, property names etc.) 186 | "id-match": 0, // require identifiers to match the provided regular expression 187 | "indent": [2, 2, {"SwitchCase": 1}], // specify tab or space width for your code (fixable) 188 | "jsx-quotes": [2, "prefer-double"], // specify whether double or single quotes should be used in JSX attributes (fixable) 189 | "key-spacing": [2, {"beforeColon": false, "afterColon": true}], // enforce spacing between keys and values in object literal properties 190 | "keyword-spacing": [2, {"before": true, "after": true}], // enforce spacing before and after keywords (fixable) 191 | "linebreak-style": [2, "unix"], // disallow mixed 'LF' and 'CRLF' as linebreaks 192 | "lines-around-comment": [2, {"beforeBlockComment": true, "afterBlockComment": false, "afterLineComment": false}], // enforce empty lines around comments 193 | "max-depth": [2, 3], // specify the maximum depth that blocks can be nested 194 | "max-len": [2, 100, 2], // specify the maximum length of a line in your program 195 | "max-nested-callbacks": [2, 3], // specify the maximum depth callbacks can be nested 196 | "max-params": [2, 5], // limits the number of parameters that can be used in the function declaration 197 | "max-statements": 0, // specify the maximum number of statement allowed in a function 198 | "new-cap": [2, {"newIsCap": true, "capIsNew": false}], // require a capital letter for constructors 199 | "new-parens": 2, // disallow the omission of parentheses when invoking a constructor with no arguments 200 | "newline-after-var": [2, "always"], // require or disallow an empty newline after variable declarations 201 | "newline-per-chained-call": 0, // enforce newline after each call when chaining the calls 202 | "no-array-constructor": 2, // disallow use of the Array constructor 203 | "no-bitwise": 2, // disallow use of bitwise operators 204 | "no-continue": 2, // disallow use of the continue statement 205 | "no-inline-comments": 2, // disallow comments inline after code 206 | "no-lonely-if": 2, // disallow if as the only statement in an else block 207 | "no-mixed-spaces-and-tabs": 2, // disallow mixed spaces and tabs for indentation (recommended) 208 | "no-multiple-empty-lines": [2, {"max": 2}], // disallow multiple empty lines 209 | "no-negated-condition": 2, // disallow negated conditions 210 | "no-nested-ternary": 2, // disallow nested ternary expressions 211 | "no-new-object": 2, // disallow the use of the Object constructor 212 | "no-plusplus": 2, // disallow use of unary operators, ++ and -- 213 | "no-restricted-syntax": [2, "WithStatement"], // disallow use of certain syntax in code 214 | "no-spaced-func": 2, // disallow space between function identifier and application (fixable) 215 | "no-ternary": 0, // disallow the use of ternary operators 216 | "no-trailing-spaces": 2, // disallow trailing whitespace at the end of lines (fixable) 217 | "no-underscore-dangle": 2, // disallow dangling underscores in identifiers 218 | "no-unneeded-ternary": 2, // disallow the use of ternary operators when a simpler alternative exists 219 | "no-whitespace-before-property": 2, // disallow whitespace before properties 220 | "object-curly-spacing": [2, "never"], // require or disallow padding inside curly braces (fixable) 221 | "one-var": [2, "never"], // require or disallow one variable declaration per function 222 | "one-var-declaration-per-line": 2, // require or disallow an newline around variable declarations 223 | "operator-assignment": [2, "never"], // require assignment operator shorthand where possible or prohibit it entirely 224 | "operator-linebreak": [2, "after"], // enforce operators to be placed before or after line breaks 225 | "padded-blocks": [2, "never"], // enforce padding within blocks 226 | "quote-props": [2, "as-needed"], // require quotes around object literal property names 227 | "quotes": [2, "single"], // specify whether backticks, double or single quotes should be used (fixable) 228 | "require-jsdoc": 0, // Require JSDoc comment 229 | "semi": [2, "always"], // require or disallow use of semicolons instead of ASI (fixable) 230 | "semi-spacing": [2, {"before": false, "after": true}], // enforce spacing before and after semicolons (fixable) 231 | "sort-imports": 0, // sort import declarations within module 232 | "sort-vars": 0, // sort variables within the same declaration block 233 | "space-before-blocks": [2, "always"], // require or disallow a space before blocks (fixable) 234 | "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], // require or disallow a space before function opening parenthesis (fixable) 235 | "space-in-parens": [2, "never"], // require or disallow spaces inside parentheses (fixable) 236 | "space-infix-ops": 2, // require spaces around operators (fixable) 237 | "space-unary-ops": [2, {"words": true, "nonwords": false}], // require or disallow spaces before/after unary operators (fixable) 238 | "spaced-comment": [2, "always"], // require or disallow a space immediately following the // or /* in a comment 239 | "wrap-regex": 0, // require regex literals to be wrapped in parentheses 240 | // 241 | // ECMAScript 6 242 | // 243 | // These rules are only relevant to ES6 environments and are off by default. 244 | // 245 | "arrow-body-style": [2, "as-needed"], // require braces in arrow function body 246 | "arrow-parens": [2, "as-needed"], // require parens in arrow function arguments 247 | "arrow-spacing": 2, // require space before/after arrow function's arrow (fixable) 248 | "constructor-super": 2, // verify calls of super() in constructors (recommended) 249 | "generator-star-spacing": [2, "before"], // enforce spacing around the * in generator functions (fixable) 250 | "no-class-assign": 2, // disallow modifying variables of class declarations (recommended) 251 | "no-confusing-arrow": 0, // disallow arrow functions where they could be confused with comparisons 252 | "no-const-assign": 2, // disallow modifying variables that are declared using const (recommended) 253 | "no-dupe-class-members": 2, // disallow duplicate name in class members (recommended) 254 | "no-new-symbol": 2, // disallow use of the new operator with the Symbol object (recommended) 255 | "no-this-before-super": 2, // disallow use of this/super before calling super() in constructors (recommended) 256 | "no-useless-constructor": 2, // disallow unnecessary constructor 257 | "no-var": 2, // require let or const instead of var 258 | "object-shorthand": 2, // require method and property shorthand syntax for object literals 259 | "prefer-arrow-callback": 2, // suggest using arrow functions as callbacks 260 | "prefer-const": 2, // suggest using const declaration for variables that are never modified after declared 261 | "prefer-reflect": 0, // suggest using Reflect methods where applicable 262 | "prefer-rest-params": 2, // suggest using the rest parameters instead of arguments 263 | "prefer-spread": 2, // suggest using the spread operator instead of .apply() 264 | "prefer-template": 2, // suggest using template literals instead of strings concatenation 265 | "require-yield": 2, // disallow generator functions that do not have yield 266 | "template-curly-spacing": 2, // enforce spacing around embedded expressions of template strings (fixable) 267 | "yield-star-spacing": 2, // enforce spacing around the * in yield* expressions (fixable) 268 | // 269 | // eslint-plugin-react 270 | // 271 | // List of supported rules 272 | // 273 | "react/display-name": 0, // Prevent missing displayName in a React component definition 274 | "react/forbid-prop-types": [2, {"forbid": ["any", "array"]}], // Forbid certain propTypes 275 | "react/no-danger": 2, // Prevent usage of dangerous JSX properties 276 | "react/no-deprecated": 2, // Prevent usage of deprecated methods 277 | "react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount 278 | "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate 279 | "react/no-direct-mutation-state": 2, // Prevent direct mutation of this.state 280 | "react/no-is-mounted": 2, // Prevent usage of isMounted 281 | "react/no-multi-comp": 0, // Prevent multiple component definition per file 282 | "react/no-set-state": 0, // Prevent usage of setState 283 | "react/no-string-refs": 2, // Prevent using string references in ref attribute. 284 | "react/no-unknown-property": 2, // Prevent usage of unknown DOM property (fixable) 285 | "react/prefer-es6-class": 0, // Enforce ES5 or ES6 class for React Components 286 | "react/prefer-stateless-function": 0, // Enforce stateless React Components to be written as a pure function 287 | "react/prop-types": 2, // Prevent missing props validation in a React component definition 288 | "react/react-in-jsx-scope": 2, // Prevent missing React when using JSX 289 | "react/self-closing-comp": 2, // Prevent extra closing tags for components without children 290 | "react/sort-comp": 2, // Enforce component methods order 291 | // 292 | // JSX-specific rules 293 | // 294 | "react/jsx-boolean-value": [2, "always"], // Enforce boolean attributes notation in JSX (fixable) 295 | "react/jsx-closing-bracket-location": [2, {"selfClosing": "after-props", "nonEmpty": "after-props"}], // Validate closing bracket location in JSX 296 | "react/jsx-curly-spacing": [2, "never"], // Enforce or disallow spaces inside of curly braces in JSX attributes (fixable) 297 | "react/jsx-equals-spacing": 2, // Enforce or disallow spaces around equal signs in JSX attributes 298 | "react/jsx-handler-names": [2, {"eventHandlerPrefix": "on", "eventHandlerPropPrefix": "on"}], // Enforce event handler naming conventions in JSX 299 | "react/jsx-indent-props": [2, 2], // Validate props indentation in JSX 300 | "react/jsx-indent": [2, 2], // Validate JSX indentation 301 | "react/jsx-key": 2, // Validate JSX has key prop when in array or iterator 302 | "react/jsx-max-props-per-line": [2, {"maximum": 4}], // Limit maximum of props on a single line in JSX 303 | "react/jsx-no-bind": [2, {"allowArrowFunctions": true}], // Prevent usage of .bind() and arrow functions in JSX props 304 | "react/jsx-no-duplicate-props": [2, {"ignoreCase": true}], // Prevent duplicate props in JSX 305 | "react/jsx-no-literals": 0, // Prevent usage of unwrapped JSX strings 306 | "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX 307 | "react/jsx-pascal-case": 2, // Enforce PascalCase for user-defined JSX components 308 | "react/jsx-sort-prop-types": 0, // Enforce propTypes declarations alphabetical sorting 309 | "react/jsx-sort-props": 2, // Enforce props alphabetical sorting 310 | "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }], // Validate spacing before closing bracket in JSX (fixable) 311 | "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused 312 | "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused 313 | "react/jsx-wrap-multilines": 2 314 | }, 315 | "settings": { 316 | "react": { 317 | "version": "detect" 318 | } 319 | } 320 | } 321 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "daily" 7 | target-branch: "master" 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Dependency directory 11 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 12 | /node_modules/ 13 | 14 | /.coveralls.yml 15 | /reports/ 16 | 17 | /.eslintcache 18 | 19 | # Filesystem Files 20 | .DS_Store 21 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.*/ 2 | /.* 3 | /reports/ 4 | /src/.* 5 | /test/ 6 | /test-e2e/ 7 | /circle.yml 8 | /webpack.config.js 9 | /nightwatch.json 10 | /appveyor.yml 11 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact = true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16.15.0 2 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:8080", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "codecov", 4 | "cond", 5 | "cyclomatic", 6 | "eqeqeq", 7 | "iife", 8 | "isnan", 9 | "lcov", 10 | "nvmrc", 11 | "nyan", 12 | "paren", 13 | "Pavlo", 14 | "pids", 15 | "pvoznyuk", 16 | "unmount", 17 | "Vozniuk" 18 | ], 19 | "cSpell.ignorePaths": [ 20 | "**/package-lock.json", 21 | "**/node_modules/**", 22 | "**/vscode-extension/**", 23 | "**/.git/objects/**", 24 | ".vscode", 25 | "**/lib/**", 26 | "**/build/**" 27 | ], 28 | "cSpell.enabledLanguageIds": [ 29 | "asciidoc", 30 | "c", 31 | "cpp", 32 | "csharp", 33 | "css", 34 | "dotenv", 35 | "go", 36 | "handlebars", 37 | "html", 38 | "ignore", 39 | "jade", 40 | "java", 41 | "javascript", 42 | "javascriptreact", 43 | "json", 44 | "jsonc", 45 | "latex", 46 | "less", 47 | "markdown", 48 | "php", 49 | "plaintext", 50 | "pug", 51 | "python", 52 | "restructuredtext", 53 | "rust", 54 | "scala", 55 | "scss", 56 | "text", 57 | "typescript", 58 | "typescriptreact", 59 | "yaml", 60 | "yml", 61 | "COBOL", 62 | "ACUCOBOL" 63 | ] 64 | } 65 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [6.1.25] 4 | Bump elliptic from 6.5.7 to 6.6.0 #323 5 | 6 | ## [6.1.24] 7 | Bump elliptic from 6.5.4 to 6.5.7 (#322) 8 | Bump express from 4.19.2 to 4.21.0 (#321) 9 | 10 | ## [6.1.23-beta] 11 | Adds code to fix changing locale on the fly 12 | 13 | ## [6.1.22] 14 | Fixes problem with react-syntax-highlighter 15 | 16 | ## [6.1.21] 17 | Bump react-router-dom from 6.22.2 to 6.22.3 (#315) 18 | Bump follow-redirects from 1.15.4 to 1.15.6 (#316) 19 | Bump eslint-plugin-react from 7.34.0 to 7.34.1 (#317) 20 | Bump express from 4.18.2 to 4.19.2 (#318) 21 | 22 | 23 | ## [6.1.20] 24 | Bump eslint-plugin-react from 7.33.2 to 7.34.0 25 | Bump es5-ext from 0.10.62 to 0.10.64 (#313) 26 | Bump react-router-dom from 6.21.1 to 6.22.2 (#314) 27 | Bump eslint from 8.56.0 to 8.57.0 (#312) 28 | Bump moment-timezone from 0.5.43 to 0.5.45 (#310) 29 | Bump follow-redirects from 1.15.3 to 1.15.4 (#306) 30 | Bump moment from 2.29.4 to 2.30.1 (#304) 31 | 32 | ## [6.1.19] 33 | Bump eslint from 8.53.0 to 8.56.0 (#301) 34 | Bump react-router-dom from 6.18.0 to 6.21.1 (#302) 35 | 36 | ## [6.1.18] 37 | Bump eslint from 8.52.0 to 8.53.0 (#294) 38 | 39 | ## [6.1.17] 40 | Bump react-router-dom from 6.15.0 to 6.18.0 (#293) 41 | Bump eslint from 8.49.0 to 8.52.0 (#291) 42 | Bump browserify-sign from 4.2.1 to 4.2.2 (#292) 43 | Adds remark dev dep 44 | Updates yarn lock 45 | 46 | ## [6.1.16] 47 | now was a number not a date object. #283 (updates typescript definition) 48 | Bump eslint from 8.47.0 to 8.49.0 #286 49 | Adds 'use client' Directive to component #284 50 | 51 | ## [6.1.15] 52 | Bump word-wrap from 1.2.3 to 1.2.4 #273 53 | Bump react-router-dom from 6.13.0 to 6.15.0 #279 54 | Bump eslint from 8.42.0 to 8.47.0 #280 55 | Bump eslint-plugin-react from 7.32.2 to 7.33.2 #281 56 | Fix onChange event. Date param was missing in the index.d.ts file. #282 57 | 58 | ## [6.1.14] 59 | Bump eslint from 8.35.0 to 8.42.0 (#253, #256, #257, #263) 60 | Bump react-router-dom from 6.8.2 to 6.13.0 (#254, #266) 61 | Bump moment-timezone from 0.5.41 to 0.5.43 (#255) 62 | 63 | ## [6.1.13] 64 | Bump react-router-dom from 6.8.1 to 6.8.2 (#249) 65 | Bump eslint from 8.34.0 to 8.35.0 (#247) 66 | Bump moment-timezone from 0.5.40 to 0.5.41 (#248) 67 | 68 | ## [6.1.12] 69 | Bump eslint from 8.33.0 to 8.34.0 #246 70 | 71 | ## [6.1.11] 72 | Updates TypeScript thingies 73 | 74 | ## [6.1.10] 75 | Updates TypeScript thingies 76 | 77 | ## [6.1.9] 78 | Bump react-router-dom from 6.8.0 to 6.8.1 #245 79 | 80 | ## [6.1.8] 81 | Nothing Changed 82 | 83 | ## [6.1.7] 84 | Add Missing Typescript thingies 85 | 86 | ## [6.1.6] 87 | Bump eslint from 8.32.0 to 8.33.0 (#244) 88 | Bump react-router-dom from 6.7.0 to 6.8.0 (#241) 89 | Bump ua-parser-js from 0.7.28 to 0.7.33 (#242) 90 | Bump eslint-plugin-react from 7.32.1 to 7.32.2 (#243) 91 | 92 | ## [6.1.5] 93 | Fix Deprication warning about Support for defaultProps (#235) 94 | 95 | ## [6.1.4] 96 | Bump react-router-dom from 6.6.1 to 6.7.0 (#240) 97 | Bump eslint-plugin-react from 7.31.11 to 7.32.1 (#239) 98 | Bump react-moment from 1.1.2 to 1.1.3 (#237) 99 | Bump react-moment from 1.1.2 to 1.1.3 (#237) 100 | 101 | ## [6.1.3] 102 | Allow PropTypes.object for element prop 103 | 104 | ## [6.1.2] 105 | Bump eslint from 8.29.0 to 8.31.0 (#233) 106 | Bump react-router-dom from 6.4.4 to 6.6.1 (#231) 107 | Bump moment-timezone from 0.5.39 to 0.5.40 (#225) 108 | Bump express from 4.17.1 to 4.18.2 (#226) 109 | update type declaration (#232) 110 | 111 | ## [6.1.1] 112 | Bump decode-uri-component from 0.2.0 to 0.2.2 (#223) 113 | Bump react-router-dom from 6.4.3 to 6.4.4 (#221) 114 | 115 | ## [6.1.0] 116 | Moves some dependencies around to solve #77 117 | 118 | ## [6.0.8] 119 | Bump eslint from 8.27.0 to 8.28.0 (#219) 120 | Bump moment-timezone from 0.5.38 to 0.5.39 (#217) 121 | Bump eslint-plugin-react from 7.31.10 to 7.31.11 122 | 123 | ## [6.0.7] 124 | ***Bump eslint from 8.21.0 to 8.27.0*** 125 | Bump eslint from 8.21.0 to 8.22.0 (#195) 126 | Bump eslint from 8.22.0 to 8.23.0 (#200) 127 | Bump eslint from 8.23.0 to 8.23.1 (#205) 128 | Bump eslint from 8.23.1 to 8.27.0 (#216) 129 | 130 | ***Bump eslint-plugin-react from 7.30.1 to 7.31.10*** 131 | Bump eslint-plugin-react from 7.30.1 to 7.31.1 (#199) 132 | Bump eslint-plugin-react from 7.31.1 to 7.31.6 (#201) 133 | Bump eslint-plugin-react from 7.31.6 to 7.31.8 (#203) 134 | Bump eslint-plugin-react from 7.31.8 to 7.31.10 (#212) 135 | 136 | ***Bump moment-timezone from 0.5.34 to 0.5.38*** 137 | Bump moment-timezone from 0.5.34 to 0.5.37 (#198) 138 | Bump moment-timezone from 0.5.37 to 0.5.38 (#213) 139 | 140 | ***Bump react-router-dom from 6.3.0 to 6.4.3*** 141 | Bump react-router-dom from 6.3.0 to 6.4.3 (#215) 142 | 143 | ## [6.0.6] 144 | Bump eslint from 8.20.0 to 8.21.0 (#194) 145 | 146 | ## [6.0.5] 147 | Bump eslint from 8.18.0 to 8.20.0 (#192) 148 | Bump moment from 2.29.3 to 2.29.4 (#190) 149 | 150 | ## [6.0.4] 151 | Bumps eslint from 8.17.0 to 8.18.0 #185 152 | 153 | ## [6.0.3] 154 | Bumps eslint-plugin-react from 7.30.0 to 7.30.1 #187 155 | Bumps react-dom from 18.1.0 to 18.2.0 #186 156 | 157 | ## [6.0.2] 158 | fix: missing blinking in type definition. #188 159 | 160 | ## [6.0.1] 161 | Bumps react from 18.1.0 to 18.2.0 (#183) 162 | 163 | ## [6.0.0] 164 | Updates node version from 15.2.1 to 16.15.0 165 | Bumps eslint-plugin-react from 7.29.4 to 7.30.0 (#179) 166 | Adds ```noSsr``` option to fix prop missmatch 167 | 168 | ## [5.10.0] 169 | Adds documentation about blinking 170 | Adds ```all``` option to the blinking 171 | 172 | ## [5.9.0] 173 | Fixes wrong deploy 174 | 175 | ## [5.9.0] 176 | Bumps eslint from 8.14.0 to 8.15.0 (#176) 177 | Bumps react from 18.0.0 to 18.1.0 (#174) 178 | Bumps react-dom from 18.0.0 to 18.1.0 (#175) 179 | 180 | ## [5.8.2] 181 | Bumps moment from 2.29.2 to 2.29.3 (#172) 182 | 183 | ## [5.8.1] 184 | Allows Installation on React V18 185 | 186 | ## [5.8.0] 187 | Bumps eslint from 8.11.0 to 8.13.0 (#171) 188 | Bumps moment from 2.29.1 to 2.29.2 (#170) 189 | Bumps react-moment from 1.1.1 to 1.1.2 (#169) 190 | Bumps moment from 2.29.1 to 2.29.2 (#168) 191 | Bumps react-router-dom from 6.2.2 to 6.3.0 (#166) 192 | 193 | ## [5.7.0] 194 | Bumps eslint from 8.10.0 to 8.11.0 #163 195 | Bumps react-syntax-highlighter from 15.4.5 to 15.5.0 #162 196 | Bumps react-router-dom from 6.2.1 to 6.2.2 #159 197 | Bumps eslint-plugin-react from 7.29.2 to 7.29.4 #161 198 | Bumps react-router-dom from 6.2.1 to 6.2.2 #159 199 | 200 | ## [5.6.1] 201 | Fixes proptype validation 202 | 203 | ## [5.6.0] 204 | Adds Element passthrough prop 205 | Bumps eslint from 8.6.0 to 8.7.0 #149 206 | Bumps follow-redirects from 1.13.3 to 1.14.7 #148 207 | Relaces react-highlight.js for react-syntax-highlighter 208 | 209 | ## [5.5.1] 210 | Rebuilds to insure proper updates 211 | 212 | ## [5.5.0] 213 | Adds suport back for custom Date in the past or future that ticks 214 | 215 | ## [5.4.2] 216 | Bump react-router-dom from 5.3.0 to 6.2.1 #141 217 | 218 | ## [5.4.1] 219 | Bumps prop-types from 15.7.2 to 15.8.1 #146 220 | Bumps eslint from 8.0.1 to 8.6.0 #145 221 | Bumps eslint-plugin-react from 7.26.1 to 7.28.0 #144 222 | Bumps moment-timezone from 0.5.33 to 0.5.34 #130 223 | 224 | ## [5.4.0] 225 | Adds onReady Prop 226 | 227 | ## [5.3.3] 228 | Corrects Documentation #129 229 | 230 | ## [5.3.2] 231 | Update the example page to show how to set a language + sort props destruction asc in Component.js (#123) 232 | 233 | ## [5.3.1] 234 | Updates typescript index 235 | 236 | ## [5.3.0] 237 | Adds Class name to typescript 238 | Updates Dependencies 239 | 240 | ## [5.2.0] 241 | Adds locale prop 242 | 243 | ## [5.1.0] 244 | Adds Filter Prop 245 | Changes from NPM to YARN 246 | 247 | ## [5.0.13] 248 | Bumps .nvmrc version from 7 to 15.2.1 249 | Corects Cspell words order 250 | Adds suport for react 17 251 | 252 | ## [5.0.12] 253 | 254 | Bump eslint from 7.12.1 to 7.13.0 255 | Bump moment-timezone from 0.5.31 to 0.5.32 256 | 257 | ## [5.0.11] 258 | 259 | Bump eslint from 7.12.0 to 7.12.1 260 | 261 | ## [5.0.10] 262 | 263 | Bump eslint from 7.11.0 to 7.12.0 264 | Bump eslint-plugin-react from 7.21.4 to 7.21.5 265 | 266 | ## [5.x.x] 267 | 268 | This was a rewrite of the program to use react hooks 269 | 270 | ## [4.0.5] - 2020-03-16 271 | 272 | Fixes 273 | * Fixes ticking stoping caused in 4.0.4 274 | 275 | Adds 276 | * Nothing 277 | 278 | Removes 279 | * Nothing 280 | 281 | ## [4.0.4] - 2020-03-11 282 | 283 | Fixes 284 | * Trying to update state on unmounted component [#36](https://github.com/pvoznyuk/react-live-clock/issues/36#issuecomment-597352873) 285 | 286 | Adds 287 | * Nothing 288 | 289 | Removes 290 | * Nothing 291 | 292 | ## [4.0.1] - 2020-01-20 293 | 294 | Fixes 295 | * Over rendering 296 | * Runing onChange too often 297 | 298 | Adds 299 | * typescript definition 300 | 301 | Removes 302 | * Nothing 303 | 304 | ## [4.0.0-beta] - 2020-01-27 305 | As of version 4.0.0 react live lock uses react hooks. 306 | 307 | Minimum requirement(s): 308 | * "react": "^16.8" 309 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Pavlo Vozniuk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-live-clock [![npm](https://img.shields.io/npm/v/react-live-clock.svg?style=flat-square)](https://www.npmjs.com/package/react-live-clock) 2 | 3 | [![Gitter](https://img.shields.io/gitter/room/pvoznyuk/help.svg?style=flat-square)](https://gitter.im/pvoznyuk/help) 4 | [![Dependencies](https://img.shields.io/david/pvoznyuk/react-live-clock.svg?style=flat-square)](https://david-dm.org/pvoznyuk/react-live-clock) 5 | [![Dev Dependencies](https://img.shields.io/david/dev/pvoznyuk/react-live-clock.svg?style=flat-square)](https://david-dm.org/pvoznyuk/react-live-clock#info=devDependencies) 6 | 7 | React clock with time-zones 8 | [DEMO](https://pvoznyuk.github.io/react-live-clock/) 9 | 10 | ## Installation 11 | 12 | ### NPM 13 | ```sh 14 | npm install --save react react-live-clock 15 | ``` 16 | 17 | Don't forget to manually install peer dependencies (`react`) if you use npm@3. 18 | 19 | ## Demo 20 | 21 | [http://pvoznyuk.github.io/react-live-clock](http://pvoznyuk.github.io/react-live-clock) 22 | 23 | 24 | ## Usage 25 | ```js 26 | import React from 'react'; 27 | import Clock from 'react-live-clock'; 28 | 29 | exports default class MyComponent extends React.Component { 30 | render() { 31 | 32 | } 33 | } 34 | ``` 35 | 36 | Outputs: 37 | 38 | ```html 39 | 40 | ``` 41 | 42 | ** Shows current time for 'US/Pacific' timezone and updates every second 43 | 44 | ### React Native 45 | 46 | React Native requires that you wrap text in a `````` like this: 47 | ```JSX 48 | import { Text, View } from "react-native"; 49 | import Clock from "react-live-clock"; 50 | 51 | export default function ClockPage() { 52 | return ( 53 | 54 | Clock page 55 | 56 | 57 | ); 58 | } 59 | ``` 60 | If you don't you will get the error ```Invariant Violation: Text strings must be rendered within a component.``` 61 | 62 | 63 | 64 | ### Formatting 65 | 66 | you can use any formatting from [moment.js](https://momentjs.com/docs/#/displaying/format/) date library 67 | 68 | ### Properties 69 | 70 | | Property | Type | Default Value | Description | 71 | |------------|---------------------|---------------|-------------| 72 | | `date` | timestamp or string | current date | Date to output, If nothing is set then it take current date. | 73 | | `format` | string | 'HH:MM' | Formatting from [moment.js](https://momentjs.com/docs/#/displaying/format/) library. 74 | | `locale` | string | null | Changes the language of the component via prop 75 | | `filter` | function | (date: String) => date | Filtering the value before the output . 76 | | `timezone` | string | null | If timezone is set, the date is show in this timezone. You can find the list. [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones), the TZ column. 77 | | `ticking` | boolean | false | If you want the clock to be auto-updated every `interval` seconds. 78 | | `blinking` | boolean, string | false | If you want the clock's last colon to blink. Set it to `all` to make them all blink. 79 | | `noSsr` | boolean | false | Makes the component not render on the server to fix mismatch. 80 | | `interval` | integer | 1000 | Auto-updating period for the clock. 1 second is a default value. 81 | | `className`| string | null | Extra class. 82 | | `style` | CSSProperties | null | CSSProperties Customized inline style . 83 | | `children` | string | null | `date` can be set as a children prop. 84 | | `onChange` | function | ({output, previousOutput, moment}) => {} | callback function on each output update 85 | 86 | ## Development and testing 87 | 88 | Currently is being developed and tested with the latest stable `Node 7` on `OSX` and `Windows`. 89 | 90 | To run example covering all `ReactLiveClock` features, use `npm start dev`, which will compile `src/example/Example.js` 91 | 92 | ```bash 93 | git clone git@github.com:pvoznyuk/react-live-clock.git 94 | cd react-live-clock 95 | npm install 96 | npm start dev 97 | 98 | # then 99 | open http://localhost:8080 100 | ``` 101 | 102 | ## Tests 103 | 104 | ```bash 105 | # to run tests 106 | npm start test 107 | 108 | # to generate test coverage (./reports/coverage) 109 | npm start test.cov 110 | 111 | # to run end-to-end tests 112 | npm start test.e2e 113 | ``` 114 | 115 | ### License 116 | This software is released under the MIT license. See LICENSE for more details. 117 | 118 | ### Contributors 119 | 120 | * [pvoznyuk](https://github.com/pvoznyuk) 121 | * [anthony0030](https://github.com/anthony0030) 122 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | branches: 2 | only: 3 | - master 4 | 5 | environment: 6 | nodejs_version: '5.2.0' 7 | 8 | install: 9 | - ps: Install-Product node $env:nodejs_version 10 | - set CI=true 11 | - set PATH=%APPDATA%\npm;%PATH% 12 | - npm install 13 | 14 | build: off 15 | version: '{build}' 16 | shallow_clone: true 17 | clone_depth: 1 18 | 19 | test_script: 20 | - node --version 21 | - npm --version 22 | - npm test 23 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-live-clock", 3 | "version": "1.1.1", 4 | "description": "React Live Clock", 5 | "main": [ 6 | "build/react-live-clock.js", 7 | "build/react-live-clock.js.map", 8 | "build/react-live-clock.min.js", 9 | "build/react-live-clock.min.js.map" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/pvoznyuk/react-live-clock.git" 14 | }, 15 | "keywords": [ 16 | "date", 17 | "moment", 18 | "react", 19 | "time", 20 | "timezone" 21 | ], 22 | "authors": [ 23 | "Pavlo Vozniuk " 24 | ], 25 | "license": "MIT", 26 | "homepage": "https://github.com/pvoznyuk/react-live-clock", 27 | "dependencies": { 28 | "react": "^0.14 || ^15" 29 | }, 30 | "ignore": [ 31 | "**/.*", 32 | "node_modules", 33 | "bower_components", 34 | "test", 35 | "tests" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: v7.6.0 4 | 5 | test: 6 | override: 7 | - npm start ci.lint 8 | - npm start ci.test 9 | - npm start ci.cov 10 | - npm start ci.e2e 11 | 12 | post: 13 | - npm start ci.codecov 14 | -------------------------------------------------------------------------------- /cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | 4 | const config = require.resolve('react-live-clock/package-scripts'); 5 | const ps = require.resolve('p-s/dist/bin/nps'); 6 | 7 | 8 | require('child_process') 9 | .spawn('node', [ps, '--config', config].concat(process.argv.slice(2)), { 10 | cwd: process.cwd(), 11 | env: process.env, 12 | stdio: [process.stdin, process.stdout, process.stderr] 13 | }); 14 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Webpack App 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | interface Props { 4 | readonly blinking?: boolean | string; 5 | readonly className?: string; 6 | readonly date?: number | string; 7 | readonly element?: string | React.ReactElement | object; 8 | readonly filter?: () => void; 9 | readonly format?: string; 10 | readonly interval?: number; 11 | readonly locale?: string; 12 | readonly onChange?: (date: number) => void; 13 | readonly onReady?: () => void; 14 | readonly style?: React.CSSProperties; 15 | readonly ticking?: boolean; 16 | readonly timezone?: string; 17 | readonly noSsr?: boolean; 18 | readonly children?: string; 19 | } 20 | 21 | declare class SimpleSelect extends Component {} 22 | 23 | export default SimpleSelect; 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Live clock 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lib/Component.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 'use client'; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | 8 | var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); 9 | 10 | exports.default = ReactLiveClock; 11 | 12 | var _react = require('react'); 13 | 14 | var _react2 = _interopRequireDefault(_react); 15 | 16 | var _propTypes = require('prop-types'); 17 | 18 | var _propTypes2 = _interopRequireDefault(_propTypes); 19 | 20 | var _reactMoment = require('react-moment'); 21 | 22 | var _reactMoment2 = _interopRequireDefault(_reactMoment); 23 | 24 | var _momentTimezone = require('moment-timezone'); 25 | 26 | var _momentTimezone2 = _interopRequireDefault(_momentTimezone); 27 | 28 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 29 | 30 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 31 | 32 | function ReactLiveClock(props) { 33 | var _props$blinking = props.blinking, 34 | blinking = _props$blinking === undefined ? false : _props$blinking, 35 | className = props.className, 36 | _props$date = props.date, 37 | date = _props$date === undefined ? null : _props$date, 38 | _props$element = props.element, 39 | element = _props$element === undefined ? 'time' : _props$element, 40 | filter = props.filter, 41 | _props$format = props.format, 42 | format = _props$format === undefined ? 'HH:mm' : _props$format, 43 | _props$interval = props.interval, 44 | interval = _props$interval === undefined ? 1000 : _props$interval, 45 | locale = props.locale, 46 | _props$onChange = props.onChange, 47 | onChange = _props$onChange === undefined ? false : _props$onChange, 48 | _props$onReady = props.onReady, 49 | onReady = _props$onReady === undefined ? false : _props$onReady, 50 | style = props.style, 51 | _props$ticking = props.ticking, 52 | ticking = _props$ticking === undefined ? false : _props$ticking, 53 | _props$timezone = props.timezone, 54 | timezone = _props$timezone === undefined ? null : _props$timezone; 55 | 56 | var _useState = (0, _react.useState)(Date.now()), 57 | _useState2 = _slicedToArray(_useState, 2), 58 | startTime = _useState2[0], 59 | setStartTime = _useState2[1]; // eslint-disable-line no-unused-vars 60 | 61 | 62 | var _useState3 = (0, _react.useState)(date ? new Date(date).getTime() : Date.now()), 63 | _useState4 = _slicedToArray(_useState3, 2), 64 | currentTime = _useState4[0], 65 | setCurrentTime = _useState4[1]; 66 | 67 | var _useState5 = (0, _react.useState)(format), 68 | _useState6 = _slicedToArray(_useState5, 2), 69 | formatToUse = _useState6[0], 70 | setFormatToUse = _useState6[1]; 71 | 72 | var _useState7 = (0, _react.useState)(props.noSsr || false), 73 | _useState8 = _slicedToArray(_useState7, 2), 74 | noSsr = _useState8[0], 75 | setNoSsr = _useState8[1]; 76 | 77 | var colonOn = true; 78 | 79 | function reverseString(str) { 80 | var splitString = str.split(''); 81 | var reverseArray = splitString.reverse(); 82 | var joinArray = reverseArray.join(''); 83 | 84 | return joinArray; 85 | } 86 | 87 | (0, _react.useEffect)(function () { 88 | _momentTimezone2.default.locale('locale'); 89 | }, [locale]); 90 | 91 | (0, _react.useEffect)(function () { 92 | if (noSsr && document) { 93 | setNoSsr(false); 94 | } 95 | if (typeof onReady === 'function') { 96 | onReady(); 97 | } 98 | }, []); 99 | 100 | (0, _react.useEffect)(function () { 101 | if (ticking || blinking) { 102 | var tick = setInterval(function () { 103 | var now = Date.now(); 104 | 105 | if (date) { 106 | var difference = Date.now() - startTime; 107 | 108 | now = new Date(date).getTime() + difference; 109 | } 110 | 111 | if (blinking) { 112 | if (colonOn) { 113 | var newFormat = format; 114 | 115 | if (blinking === 'all') { 116 | newFormat = newFormat.replaceAll(':', ' '); 117 | } else { 118 | newFormat = reverseString(format); 119 | newFormat = newFormat.replace(':', ' '); 120 | newFormat = reverseString(newFormat); 121 | } 122 | 123 | colonOn = false; 124 | setFormatToUse(newFormat); 125 | } else { 126 | setFormatToUse(format); 127 | colonOn = true; 128 | } 129 | } 130 | 131 | if (ticking) { 132 | setCurrentTime(now); 133 | } 134 | 135 | if (typeof onChange === 'function') { 136 | onChange(now); 137 | } 138 | }, interval); 139 | 140 | return function () { 141 | return clearInterval(tick); 142 | }; 143 | } 144 | 145 | return function () { 146 | return true; 147 | }; 148 | }, [].concat(_toConsumableArray(props))); 149 | 150 | if (noSsr) { 151 | return false; 152 | } 153 | 154 | return _react2.default.createElement( 155 | _reactMoment2.default, 156 | { 157 | className: className, 158 | date: ticking ? '' : date, 159 | element: element, 160 | filter: filter, 161 | format: formatToUse, 162 | locale: locale, 163 | style: style, 164 | tz: timezone }, 165 | currentTime 166 | ); 167 | } 168 | 169 | ReactLiveClock.propTypes = { 170 | className: _propTypes2.default.string, 171 | date: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), 172 | element: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.node, _propTypes2.default.string, _propTypes2.default.object, _propTypes2.default.func]), 173 | blinking: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.oneOf(['all'])]), 174 | locale: _propTypes2.default.string, 175 | format: _propTypes2.default.string, 176 | filter: _propTypes2.default.func, 177 | style: _propTypes2.default.object, 178 | interval: _propTypes2.default.number, 179 | ticking: _propTypes2.default.bool, 180 | timezone: _propTypes2.default.string, 181 | onChange: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.func]), 182 | onReady: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.func]), 183 | noSsr: _propTypes2.default.bool 184 | }; -------------------------------------------------------------------------------- /lib/Component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/Component.js"],"names":["BASE_UNIT","ReactLiveClock","props","date","children","timestamp","baseTime","Date","getTime","state","realTime","now","startTime","formattedString","ticking","interval","tickTimer","setInterval","updateClock","clearInterval","time","filter","format","timezone","tz","formattedTime","filteredTime","onChange","newTime","diff","clone","add","formatTime","moment","output","previousOutput","setState","childProps","Object","keys","includes","key","reduce","acc","React","Component","propTypes","PropTypes","string","oneOfType","number","bool","func","defaultProps"],"mappings":"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","file":"Component.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment-timezone';\n\nconst BASE_UNIT = 'milliseconds';\n\nexport default class ReactLiveClock extends React.Component {\n constructor(props) {\n super(props);\n\n const date = props.date || props.children || null;\n const timestamp = moment();\n const baseTime = date ? moment(new Date(date).getTime()) : timestamp;\n\n this.state = {\n realTime: !date,\n now: baseTime,\n baseTime,\n startTime: timestamp,\n formattedString: ''\n };\n }\n\n componentDidMount() {\n const {ticking, interval} = this.props;\n\n if (ticking && interval) {\n this.tickTimer = setInterval(() => {\n this.updateClock();\n }, interval);\n }\n }\n\n componentWillUnmount() {\n if (this.tickTimer) {\n clearInterval(this.tickTimer);\n }\n }\n\n formatTime(time) {\n const {filter, format, timezone} = this.props;\n\n if (timezone) {\n time.tz(timezone);\n }\n\n const formattedTime = time.format(format);\n const filteredTime = filter(formattedTime);\n\n return filteredTime;\n }\n\n updateClock() {\n const {realTime, formattedString} = this.state;\n const {onChange} = this.props;\n let now;\n\n if (realTime) {\n now = moment();\n } else {\n const {baseTime, startTime} = this.state;\n const newTime = moment();\n const diff = newTime.diff(startTime, BASE_UNIT);\n\n now = baseTime.clone().add(diff, BASE_UNIT);\n }\n\n const formattedTime = this.formatTime(now);\n\n if (formattedTime !== formattedString) {\n onChange({\n moment: now,\n output: formattedTime,\n previousOutput: formattedString\n });\n }\n\n this.setState({\n now,\n formattedString: formattedTime\n });\n }\n\n render() {\n const {formattedString} = this.state;\n\n const childProps = Object.keys(this.props)\n .filter(key => !['date', 'interval', 'ticking', 'filter', 'format', 'timezone'].includes(key))\n .reduce((acc, key) => {\n acc[key] = this.props[key];\n return acc;\n }, {});\n\n return (\n \n );\n }\n}\n\nReactLiveClock.propTypes = {\n children: PropTypes.string,\n date: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string\n ]),\n format: PropTypes.string,\n interval: PropTypes.number,\n ticking: PropTypes.bool,\n timezone: PropTypes.string,\n filter: PropTypes.func,\n onChange: PropTypes.func\n};\n\nReactLiveClock.defaultProps = {\n date: null,\n format: 'HH:mm',\n interval: 1000,\n ticking: false,\n timezone: null,\n filter: date => date,\n onChange: date => date\n};\n"]} -------------------------------------------------------------------------------- /lib/ReactLiveClock.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _propTypes = require('prop-types'); 14 | 15 | var _propTypes2 = _interopRequireDefault(_propTypes); 16 | 17 | var _reactMoment = require('react-moment'); 18 | 19 | var _reactMoment2 = _interopRequireDefault(_reactMoment); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 24 | 25 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 26 | 27 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 28 | 29 | var tickTimer = void 0; 30 | var getDate = function getDate(date) { 31 | return date ? date : new Date().getTime(); 32 | }; 33 | 34 | var ReactLiveClock = function (_React$Component) { 35 | _inherits(ReactLiveClock, _React$Component); 36 | 37 | function ReactLiveClock() { 38 | _classCallCheck(this, ReactLiveClock); 39 | 40 | return _possibleConstructorReturn(this, (ReactLiveClock.__proto__ || Object.getPrototypeOf(ReactLiveClock)).apply(this, arguments)); 41 | } 42 | 43 | _createClass(ReactLiveClock, [{ 44 | key: 'componentDidMount', 45 | value: function componentDidMount() { 46 | var _this2 = this; 47 | 48 | if (this.props.ticking) { 49 | tickTimer = setInterval(function () { 50 | _this2.forceUpdate(); 51 | }, this.props.interval); 52 | } 53 | } 54 | }, { 55 | key: 'componentWillUnmount', 56 | value: function componentWillUnmount() { 57 | if (tickTimer) { 58 | clearInterval(tickTimer); 59 | } 60 | } 61 | }, { 62 | key: 'render', 63 | value: function render() { 64 | var _props = this.props, 65 | ago = _props.ago, 66 | children = _props.children, 67 | className = _props.className, 68 | date = _props.date, 69 | format = _props.format, 70 | from = _props.from, 71 | fromNow = _props.fromNow, 72 | locale = _props.locale, 73 | parse = _props.parse, 74 | timezone = _props.timezone, 75 | to = _props.to, 76 | toNow = _props.toNow, 77 | unix = _props.unix, 78 | filter = _props.filter, 79 | onChange = _props.onChange; 80 | 81 | 82 | return _react2.default.createElement(_reactMoment2.default, { 83 | ago: ago, 84 | className: className, 85 | date: getDate(date || children), 86 | filter: filter, 87 | format: format, 88 | from: from, 89 | fromNow: fromNow, 90 | locale: locale, 91 | onChange: onChange, 92 | parse: parse, 93 | to: to, 94 | toNow: toNow, 95 | tz: timezone, 96 | unix: unix }); 97 | } 98 | }]); 99 | 100 | return ReactLiveClock; 101 | }(_react2.default.Component); 102 | 103 | exports.default = ReactLiveClock; 104 | 105 | 106 | ReactLiveClock.propTypes = { 107 | ago: _propTypes2.default.bool, 108 | children: _propTypes2.default.string, 109 | className: _propTypes2.default.string, 110 | date: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), 111 | format: _propTypes2.default.string, 112 | from: _propTypes2.default.string, 113 | fromNow: _propTypes2.default.bool, 114 | interval: _propTypes2.default.number, 115 | locale: _propTypes2.default.string, 116 | parse: _propTypes2.default.string, 117 | to: _propTypes2.default.string, 118 | toNow: _propTypes2.default.bool, 119 | unix: _propTypes2.default.bool, 120 | ticking: _propTypes2.default.bool, 121 | timezone: _propTypes2.default.string, 122 | filter: _propTypes2.default.func, 123 | onChange: _propTypes2.default.func 124 | }; 125 | 126 | ReactLiveClock.defaultProps = { 127 | ago: false, 128 | className: null, 129 | date: null, 130 | format: 'HH:mm', 131 | from: null, 132 | fromNow: false, 133 | interval: 1000, 134 | locale: null, 135 | parse: null, 136 | to: null, 137 | toNow: false, 138 | filter: function filter(d) { 139 | return d; 140 | }, 141 | onChange: function onChange() { 142 | return null; 143 | }, 144 | unix: false, 145 | ticking: false, 146 | timezone: null 147 | }; -------------------------------------------------------------------------------- /lib/ReactLiveClock.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/ReactLiveClock.js"],"names":["tickTimer","getDate","date","Date","getTime","ReactLiveClock","props","ticking","setInterval","forceUpdate","interval","clearInterval","ago","children","className","format","from","fromNow","locale","parse","timezone","to","toNow","unix","filter","onChange","React","Component","propTypes","PropTypes","bool","string","oneOfType","number","func","defaultProps","d"],"mappings":"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","file":"ReactLiveClock.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Moment from 'react-moment';\n\nlet tickTimer;\nconst getDate = date => date ? date : new Date().getTime();\n\nexport default class ReactLiveClock extends React.Component {\n componentDidMount() {\n if (this.props.ticking) {\n tickTimer = setInterval(() => {\n this.forceUpdate();\n }, this.props.interval);\n }\n }\n\n componentWillUnmount() {\n if (tickTimer) {\n clearInterval(tickTimer);\n }\n }\n\n render() {\n const {ago, children, className, date, format, from, fromNow,\n locale, parse, timezone, to, toNow, unix, filter, onChange} = this.props;\n\n return (\n \n );\n }\n}\n\nReactLiveClock.propTypes = {\n ago: PropTypes.bool,\n children: PropTypes.string,\n className: PropTypes.string,\n date: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string\n ]),\n format: PropTypes.string,\n from: PropTypes.string,\n fromNow: PropTypes.bool,\n interval: PropTypes.number,\n locale: PropTypes.string,\n parse: PropTypes.string,\n to: PropTypes.string,\n toNow: PropTypes.bool,\n unix: PropTypes.bool,\n ticking: PropTypes.bool,\n timezone: PropTypes.string,\n filter: PropTypes.func,\n onChange: PropTypes.func\n};\n\nReactLiveClock.defaultProps = {\n ago: false,\n className: null,\n date: null,\n format: 'HH:mm',\n from: null,\n fromNow: false,\n interval: 1000,\n locale: null,\n parse: null,\n to: null,\n toNow: false,\n filter: d => d,\n onChange: () => null,\n unix: false,\n ticking: false,\n timezone: null\n};\n"]} -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Babel6 does not hack the default behaviour of ES Modules anymore, so we should export 4 | 5 | var ReactLiveClock = require('./Component').default; 6 | 7 | module.exports = ReactLiveClock; -------------------------------------------------------------------------------- /lib/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/index.js"],"names":["ReactLiveClock","require","default","module","exports"],"mappings":"AAAA;;AAEA;;AACA,IAAMA,iBAAiBC,QAAQ,aAAR,EAAuBC,OAA9C;;AAEAC,OAAOC,OAAP,GAAiBJ,cAAjB","file":"index.js","sourcesContent":["'use strict';\n\n// Babel6 does not hack the default behaviour of ES Modules anymore, so we should export\nconst ReactLiveClock = require('./Component').default;\n\nmodule.exports = ReactLiveClock;\n"]} -------------------------------------------------------------------------------- /nightwatch.json: -------------------------------------------------------------------------------- 1 | { 2 | "src_folders" : ["test-e2e"], 3 | "output_folder" : "reports/test-e2e", 4 | 5 | "selenium" : { 6 | "start_process" : false 7 | }, 8 | 9 | "test_workers": { 10 | "enabled": true, 11 | "workers": 8 12 | }, 13 | 14 | "test_settings" : { 15 | "default" : { 16 | "launch_url" : "http://localhost:8080", 17 | "selenium_port" : 4444, 18 | "selenium_host" : "localhost", 19 | "silent": true, 20 | "screenshots" : { 21 | "enabled" : true, 22 | "on_failure" : true, 23 | "on_error" : false, 24 | "path" : "reports/test-e2e" 25 | }, 26 | "desiredCapabilities": { 27 | "browserName": "chrome", 28 | "javascriptEnabled": true, 29 | "acceptSslCerts": true 30 | } 31 | }, 32 | 33 | "chrome" : { 34 | "desiredCapabilities": { 35 | "browserName": "chrome", 36 | "javascriptEnabled": true, 37 | "acceptSslCerts": true 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /package-scripts.js: -------------------------------------------------------------------------------- 1 | const pathTo = require('path').join.bind(null, process.cwd()); 2 | 3 | exports.scripts = { 4 | dev: 'cross-env NODE_ENV=development webpack-dev-server', 5 | 6 | ghPages: [ 7 | 'npm start -- build.ghPages', 8 | 'gh-pages --dist example' 9 | ].join(' && '), 10 | 11 | build: { 12 | default: [ 13 | `rimraf ${pathTo('lib')} ${pathTo('example')} ${pathTo('build')}`, 14 | 'npm start -- --parallel build.lib,build.ghPages,build.dist,build.min' 15 | ].join(' && '), 16 | lib: 'cross-env NODE_ENV=production' + 17 | ` babel ${pathTo('src')} --out-dir ${pathTo('lib')}` + 18 | ` --ignore ${pathTo('src', 'example')}`, 19 | ghPages: 'cross-env NODE_ENV=production BUILD=ghPages webpack', 20 | dist: 'cross-env NODE_ENV=production BUILD=dist webpack', 21 | min: 'cross-env NODE_ENV=production BUILD=min webpack' 22 | }, 23 | 24 | lint: `eslint ${pathTo('.')} --fix`, 25 | 26 | test: { 27 | default: `cross-env NODE_ENV=test babel-node ${pathTo('test')}`, 28 | dev: 'npm start -- test | tap-nyan', 29 | cov: 'cross-env NODE_ENV=test' + 30 | ' babel-node node_modules/.bin/babel-istanbul cover' + 31 | ` --report text --report html --report lcov --dir reports/coverage ${pathTo('test')}`, 32 | e2e: 'cross-env NODE_ENV=development nightwatch-autorun' 33 | }, 34 | 35 | // CircleCI scripts 36 | ci: { 37 | lint: `eslint ${pathTo('.')} --fix`, 38 | test: `cross-env NODE_ENV=test babel-node ${pathTo('test')}` 39 | // cov: 'cross-env NODE_ENV=test' + 40 | // ' babel-node node_modules/.bin/babel-istanbul cover' + 41 | // ' --report text --report lcov --verbose --dir ${CIRCLE_ARTIFACTS}/coverage' + 42 | // ` ${pathTo('test')}`, 43 | // e2e: 'cross-env REPORT_DIR=${CIRCLE_TEST_REPORTS} LOG_DIR=${CIRCLE_ARTIFACTS}' + 44 | // ' cross-env NODE_ENV=development nightwatch-autorun', 45 | // codecov: 'cat ${CIRCLE_ARTIFACTS}/coverage/lcov.info | codecov' 46 | }, 47 | 48 | // GIT Hooks 49 | precommit: 'npm start -- lint', 50 | prepush: 'npm start -- test', 51 | 52 | // NPM Hooks 53 | postversion: 'git push --follow-tags', 54 | prepublish: 'npm start -- --parallel build.lib,build.dist,build.min' 55 | }; 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-live-clock", 3 | "version": "6.1.25", 4 | "description": "React Live Clock", 5 | "main": "lib/index.js", 6 | "types": "index.d.ts", 7 | "config": { 8 | "component": "ReactLiveClock" 9 | }, 10 | "scripts": { 11 | "start": "react-component-template", 12 | "test": "npm start test", 13 | "template": "cf-react-component-template", 14 | "precommit": "npm start precommit", 15 | "prepush": "npm start prepush", 16 | "postversion": "npm start postversion", 17 | "prepublish": "npm start prepublish", 18 | "eslint": "eslint ." 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/pvoznyuk/react-live-clock.git" 23 | }, 24 | "keywords": [ 25 | "react", 26 | "date", 27 | "time", 28 | "clock", 29 | "timezones" 30 | ], 31 | "author": "Pavlo Vozniuk ", 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/pvoznyuk/react-live-clock/issues" 35 | }, 36 | "homepage": "https://github.com/pvoznyuk/react-live-clock", 37 | "dependencies": { 38 | "moment": "^2.29.1", 39 | "moment-timezone": "^0.5.33" 40 | }, 41 | "peerDependencies": { 42 | "react": "^16.14.0 || ^17 || ^18", 43 | "react-moment": "1.1.3" 44 | }, 45 | "devDependencies": { 46 | "cf-react-component-template": "0.1.8", 47 | "eslint": "8.57.0", 48 | "eslint-plugin-react": "7.34.1", 49 | "prop-types": "15.8.1", 50 | "react": "^16.8 || ^17 || ^18", 51 | "react-component-template": "0.1.10", 52 | "react-dom": "16.14.0 || ^17 || ^18", 53 | "react-moment": "1.1.3", 54 | "react-router-dom": "6.22.3", 55 | "react-syntax-highlighter": "15.5.0", 56 | "remark": "15.0.1" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/Component.js: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import React, {useState, useEffect} from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import Moment from 'react-moment'; 6 | import momentTimezone from 'moment-timezone'; 7 | 8 | export default function ReactLiveClock(props) { 9 | const { 10 | blinking = false, 11 | className, 12 | date = null, 13 | element = 'time', 14 | filter, 15 | format = 'HH:mm', 16 | interval = 1000, 17 | locale, 18 | onChange = false, 19 | onReady = false, 20 | style, 21 | ticking = false, 22 | timezone = null 23 | } = props; 24 | 25 | 26 | const [startTime, setStartTime] = useState(Date.now()); // eslint-disable-line no-unused-vars 27 | const [currentTime, setCurrentTime] = useState(date ? new Date(date).getTime() : Date.now()); 28 | const [formatToUse, setFormatToUse] = useState(format); 29 | const [noSsr, setNoSsr] = useState(props.noSsr || false); 30 | let colonOn = true; 31 | 32 | 33 | function reverseString(str) { 34 | const splitString = str.split(''); 35 | const reverseArray = splitString.reverse(); 36 | const joinArray = reverseArray.join(''); 37 | 38 | return joinArray; 39 | } 40 | 41 | 42 | useEffect(() => { 43 | momentTimezone.locale('locale'); 44 | }, [locale]); 45 | 46 | useEffect(() => { 47 | if (noSsr && document) { 48 | setNoSsr(false); 49 | } 50 | if (typeof onReady === 'function') { 51 | onReady(); 52 | } 53 | }, []); 54 | 55 | 56 | useEffect(() => { 57 | if (ticking || blinking) { 58 | const tick = setInterval(() => { 59 | let now = Date.now(); 60 | 61 | if (date) { 62 | const difference = Date.now() - startTime; 63 | 64 | now = new Date(date).getTime() + difference; 65 | } 66 | 67 | if (blinking) { 68 | if (colonOn) { 69 | let newFormat = format; 70 | 71 | if (blinking === 'all') { 72 | newFormat = newFormat.replaceAll(':', ' '); 73 | } else { 74 | newFormat = reverseString(format); 75 | newFormat = newFormat.replace(':', ' '); 76 | newFormat = reverseString(newFormat); 77 | } 78 | 79 | 80 | colonOn = false; 81 | setFormatToUse(newFormat); 82 | } else { 83 | setFormatToUse(format); 84 | colonOn = true; 85 | } 86 | } 87 | 88 | if (ticking) { 89 | setCurrentTime(now); 90 | } 91 | 92 | if (typeof onChange === 'function') { 93 | onChange(now); 94 | } 95 | }, interval); 96 | 97 | return () => clearInterval(tick); 98 | } 99 | 100 | return () => true; 101 | }, [...props]); 102 | 103 | 104 | if (noSsr) { 105 | return false; 106 | } 107 | 108 | return ( 109 | 118 | {currentTime} 119 | 120 | ); 121 | } 122 | 123 | ReactLiveClock.propTypes = { 124 | className: PropTypes.string, 125 | date: PropTypes.oneOfType([ 126 | PropTypes.number, 127 | PropTypes.string 128 | ]), 129 | element: PropTypes.oneOfType([ 130 | PropTypes.element, 131 | PropTypes.node, 132 | PropTypes.string, 133 | PropTypes.object, 134 | PropTypes.func 135 | ]), 136 | blinking: PropTypes.oneOfType([ 137 | PropTypes.bool, 138 | PropTypes.oneOf(['all']) 139 | ]), 140 | locale: PropTypes.string, 141 | format: PropTypes.string, 142 | filter: PropTypes.func, 143 | style: PropTypes.object, 144 | interval: PropTypes.number, 145 | ticking: PropTypes.bool, 146 | timezone: PropTypes.string, 147 | onChange: PropTypes.oneOfType([ 148 | PropTypes.bool, 149 | PropTypes.func 150 | ]), 151 | onReady: PropTypes.oneOfType([ 152 | PropTypes.bool, 153 | PropTypes.func 154 | ]), 155 | noSsr: PropTypes.bool 156 | }; 157 | -------------------------------------------------------------------------------- /src/example/App/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | padding: 2em; 3 | } 4 | 5 | .ukFormat { 6 | color: blue; 7 | transform: rotate(-5deg); 8 | position: relative; 9 | display: inline-block; 10 | } 11 | 12 | .text-info { 13 | color: #0dcaf0; 14 | } 15 | -------------------------------------------------------------------------------- /src/example/App/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import SyntaxHighlighter from 'react-syntax-highlighter'; 4 | import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism'; 5 | import moment from 'moment-timezone'; 6 | import Clock from '../..'; 7 | import css from './App.css'; 8 | import { 9 | BrowserRouter as Router, 10 | Route, 11 | Routes, 12 | Link 13 | } from 'react-router-dom'; 14 | 15 | const Panel = ({title, code, children}) => ( 16 |
17 |
18 |

19 | { title } 20 |

21 |
22 |
23 |
Code:
24 | 25 | {code} 26 | 27 |
Output:
28 | {children} 29 |
30 |
); 31 | 32 | Panel.propTypes = { 33 | title: PropTypes.string, 34 | code: PropTypes.string, 35 | children: PropTypes.node 36 | }; 37 | 38 | const App = () => ( 39 |
40 | 43 | 46 | 49 | 50 |

React Live Clock

51 |

Show Date/time for any timezone

52 |

53 | 54 | https://github.com/pvoznyuk/react-live-clock 55 | 56 |

57 | 58 | 61 | 62 | 63 | 64 | 65 | Home 66 |
67 | Test 68 | 69 | 70 | 74 | 75 | 76 | } exact={true} path="/" /> 77 | 78 | 79 | 80 | 87 | `} 88 | title="Ticking clock in with custom format, custom class and styles"> 89 | 94 | 95 | 96 | 102 | `} 103 | title="Ticking clock in timezone US/Pacific"> 104 | 108 | 109 | 110 | 115 | `} 116 | title="Output specific date"> 117 | 120 | 121 | 122 | 128 | `} 129 | title="The same date in timezone Australia/Sydney"> 130 | 134 | 135 | 136 | 143 | `} 144 | title="Date in the past that ticking"> 145 | 150 | 151 | 152 | 153 | 160 | `} 161 | title="Date in the future that ticking"> 162 | 167 | 168 | 169 | 170 | 173 | date.replace('8', '7a')} format={'HH:mm:ss'} ticking={true} /> 174 | 175 | 176 | 179 | 182 | console.log(date) // eslint-disable-line no-console 183 | } 184 | ticking={true} /> 185 | 186 | 187 | 188 | 191 | 193 | console.log('READY') // eslint-disable-line no-console 194 | } /> 195 | 196 | 197 | 204 | 207 |
208 | 211 |
212 | 215 | 216 | 217 | 224 | 225 |
226 | 227 | 228 | 229 | 232 | 233 | 234 | 235 | 238 | 239 | 240 | 241 | 244 | 245 | 246 | 247 | 250 | 251 | 252 | 255 | 256 | 257 | 258 |
); 259 | 260 | export default App; 261 | -------------------------------------------------------------------------------- /src/example/Example.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {createRoot} from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const container = document.createElement('div'); 6 | 7 | document.body.appendChild(container); 8 | 9 | const appRoot = createRoot(container); 10 | 11 | appRoot.render(); 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Babel6 does not hack the default behaviour of ES Modules anymore, so we should export 4 | const ReactLiveClock = require('./Component').default; 5 | 6 | module.exports = ReactLiveClock; 7 | -------------------------------------------------------------------------------- /test-e2e/Smoketest.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const packageJson = require(path.join(process.cwd(), 'package.json')); 5 | 6 | 7 | module.exports = { 8 | 'Smoketest'(browser) { 9 | browser 10 | .url(`${browser.launchUrl}/`) 11 | .waitForElementVisible('body', 1000) 12 | .assert.containsText('body', packageJson.name) 13 | .end(); 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /test/ReactComponentTemplate-test.js: -------------------------------------------------------------------------------- 1 | import test from 'tape'; 2 | import ReactLiveClock from '../src/Component'; 3 | 4 | 5 | test('ReactLiveClock', t => { 6 | t.ok(ReactLiveClock instanceof Function, 'should be function'); 7 | t.end(); 8 | }); 9 | -------------------------------------------------------------------------------- /test/example/App-test.js: -------------------------------------------------------------------------------- 1 | import test from 'tape'; 2 | import App from '../../src/example/App'; 3 | 4 | 5 | test('App', t => { 6 | t.ok(App instanceof Function, 'should be function'); 7 | t.end(); 8 | }); 9 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | require('css-modules-require-hook')({ 2 | generateScopedName: '[name]__[local]' 3 | }); 4 | 5 | require('glob') 6 | .sync('**/*-test.js', { 7 | realpath: true, 8 | cwd: require('path').resolve(process.cwd(), 'test') 9 | }) 10 | .forEach(require); 11 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = require('react-component-template/webpack.config'); 4 | --------------------------------------------------------------------------------