├── src
    ├── setupTests.js
    ├── index.js
    ├── index.css
    ├── Hand.js
    ├── __tests__
    │   ├── Form.test.js
    │   ├── App.test.js
    │   ├── component
    │   │   ├── Hand.test.js
    │   │   ├── __snapshots__
    │   │   │   ├── Hand.test.js.snap
    │   │   │   └── AnalogClock.test.js.snap
    │   │   ├── Util.test.js
    │   │   ├── AnalogClock.test.js
    │   │   ├── AnalogClock.unit.test.js
    │   │   └── ClockComponents.test.js
    │   ├── App.unit.test.js
    │   ├── __snapshots__
    │   │   ├── App.test.js.snap
    │   │   └── Form.test.js.snap
    │   └── Form.unit.test.js
    ├── Util.js
    ├── App.js
    ├── AnalogClock.js
    ├── ClockComponents.js
    └── Form.js
├── public
    ├── manifest.json
    └── index.html
├── .gitignore
├── LICENSE
├── .circleci
    └── config.yml
├── package.json
└── README.md


/src/setupTests.js:
--------------------------------------------------------------------------------
1 | import { configure } from "enzyme";
2 | import Adapter from "enzyme-adapter-react-16";
3 | 
4 | configure({ adapter: new Adapter() });
5 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "short_name": "AnalogClock",
3 |   "name": "Analog Clock using React",
4 |   "start_url": ".",
5 |   "display": "standalone"
6 | }
7 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
3 |   -webkit-font-smoothing: antialiased;
4 |   -moz-osx-font-smoothing: grayscale;
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/Hand.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { ClockHand, ClockHandContainer } from './ClockComponents';
 3 | import Util from './Util';
 4 | 
 5 | class Hand extends Component {
 6 | 
 7 |     constructor(props) {
 8 |         super(props);
 9 |         this.state = {};
10 |     }
11 | 
12 |     render() {
13 |         return (
14 |             <ClockHandContainer handAngle={Util.getHandAngle(this.props)} >
15 |                 <ClockHand type={this.props.type}
16 |                     handColors={this.props.handColors} />
17 |             </ClockHandContainer>
18 |         )
19 |     }
20 | 
21 | }
22 | 
23 | export default Hand;
24 | 


--------------------------------------------------------------------------------
/src/__tests__/Form.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Form from '../Form'
 3 | import { shallow } from "enzyme";
 4 | 
 5 | describe('Form component', () => {
 6 | 
 7 |     it('matches snapshot', () => {
 8 |         let options = {
 9 |             useCustomTime: false,
10 |             width: "300px",
11 |             border: true,
12 |             borderColor: "#2e2e2e",
13 |             baseColor: "#17a2b8",
14 |             centerColor: "#459cff",
15 |             centerBorderColor: "#fff",
16 |             handColors: {
17 |                 second: "#d81c7a",
18 |                 minute: "#fff",
19 |                 hour: "#fff"
20 |             },
21 |         }
22 |         const wrapper = shallow(<Form defaultOptions={options} />);
23 |         expect(wrapper).toMatchSnapshot()
24 |     });
25 | 
26 | })


--------------------------------------------------------------------------------
/src/Util.js:
--------------------------------------------------------------------------------
 1 | class Util {
 2 |     static getHandAngle(props) {
 3 |         let handType = props.type;
 4 |         let handAngle = 0;
 5 |         switch (handType) {
 6 |             case 'second': handAngle = (270 + (props.seconds * 6));
 7 |                 break;
 8 |             case 'minute': handAngle = (270 + (props.minutes * 6));
 9 |                 break;
10 |             case 'hour': handAngle = (270 + (props.hours * 30) + ((props.minutes / 60) * 30));
11 |                 break;
12 |             default: handAngle = 0;
13 |         }
14 |         return handAngle;
15 |     }
16 | 
17 |     static getHourIn12HrFormat(hour) {
18 |         if (hour) {
19 |             if (hour > 12) {
20 |                 hour -= 12;
21 |             }
22 |         } else {
23 |             hour = 0;
24 |         }
25 |         return hour;
26 |     }
27 | }
28 | 
29 | export default Util;


--------------------------------------------------------------------------------
/src/__tests__/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import App from '../App'
 3 | import { shallow } from "enzyme";
 4 | 
 5 | describe('App component', () => {
 6 | 
 7 |     it('matches snapshot', () => {
 8 |         const wrapper = shallow(<App />);
 9 |         expect(wrapper).toMatchSnapshot()
10 |     });
11 | 
12 |     it('matches snapshot when options are changed', () => {
13 |         const wrapper = shallow(<App />);
14 |         let options = {
15 |             useCustomTime: true,
16 |             seconds: 10,
17 |             minutes: 10,
18 |             hours: 10,
19 |             baseColor: "red",
20 |             border: false,
21 |             borderColor: "#fff",
22 |             centerBorderColor: "black",
23 |             centerColor: "blue"
24 |         }
25 |         wrapper.setState({ 'options': { ...wrapper.state().options, ...options } });
26 |         expect(wrapper).toMatchSnapshot()
27 |     });
28 | })


--------------------------------------------------------------------------------
/src/__tests__/component/Hand.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "jest-styled-components";
 3 | import { shallow } from "enzyme";
 4 | import "../../setupTests";
 5 | 
 6 | import Hand from "../../Hand";
 7 | 
 8 | describe("Hand component", () => {
 9 |   it("matches second Hand snapshot", () => {
10 |     const wrapper = shallow(
11 |       <Hand type="second" seconds="10" handColors={{ second: "#d81c7a" }} />
12 |     );
13 |     expect(wrapper).toMatchSnapshot();
14 |   });
15 | 
16 |   it("matches minute Hand snapshot", () => {
17 |     const wrapper = shallow(
18 |       <Hand type="minute" minutes="10" handColors={{ minute: "#fff" }} />
19 |     );
20 |     expect(wrapper).toMatchSnapshot();
21 |   });
22 | 
23 |   it("matches hour Hand snapshot", () => {
24 |     const wrapper = shallow(<Hand type="hour" hours="10" minutes="10" handColors={{ hour: "#fff" }} />);
25 |     expect(wrapper).toMatchSnapshot();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/src/__tests__/component/__snapshots__/Hand.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Hand component matches hour Hand snapshot 1`] = `
 4 | <styled.div
 5 |   handAngle={575}
 6 | >
 7 |   <styled.div
 8 |     handColors={
 9 |       Object {
10 |         "hour": "#fff",
11 |       }
12 |     }
13 |     type="hour"
14 |   />
15 | </styled.div>
16 | `;
17 | 
18 | exports[`Hand component matches minute Hand snapshot 1`] = `
19 | <styled.div
20 |   handAngle={330}
21 | >
22 |   <styled.div
23 |     handColors={
24 |       Object {
25 |         "minute": "#fff",
26 |       }
27 |     }
28 |     type="minute"
29 |   />
30 | </styled.div>
31 | `;
32 | 
33 | exports[`Hand component matches second Hand snapshot 1`] = `
34 | <styled.div
35 |   handAngle={330}
36 | >
37 |   <styled.div
38 |     handColors={
39 |       Object {
40 |         "second": "#d81c7a",
41 |       }
42 |     }
43 |     type="second"
44 |   />
45 | </styled.div>
46 | `;
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Vishnu Ramana
 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 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2.1
 2 | orbs:
 3 |   coveralls: coveralls/coveralls@1.0.6
 4 | jobs:
 5 |   build:
 6 |     docker:
 7 |       - image: cimg/node:17.0.1
 8 |     working_directory: ~/analogclock
 9 |     steps:
10 |       - checkout
11 |       - run: npm install
12 |       - restore_cache:
13 |           key: dependency-cache-{{ checksum "package.json" }}
14 |       - run:
15 |           name: install-npm-wee
16 |           command: npm install
17 |       - save_cache:
18 |           key: dependency-cache-{{ checksum "package.json" }}
19 |           paths:
20 |             - ./node_modules
21 |       - run:
22 |           name: test
23 |           command: npm run test
24 |       - run:
25 |           name: code-coverage
26 |           command: npm run coverage
27 |       - coveralls/upload
28 |       - store_artifacts:
29 |           path: test-results
30 |           prefix: tests
31 |       - store_artifacts:
32 |           path: coverage
33 |           prefix: coverage
34 |       - store_test_results:
35 |           path: test-results
36 | notify:
37 |   webhooks:
38 |     - url: https://coveralls.io/webhook?repo_token=${process.env.COVERALLS_REPO_TOKEN}
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "analog-clock-react",
 3 |   "version": "1.2.2",
 4 |   "devDependencies": {
 5 |     "enzyme": "^3.11.0",
 6 |     "enzyme-adapter-react-16": "^1.15.6",
 7 |     "enzyme-to-json": "^3.6.2",
 8 |     "gh-pages": "^2.0.1",
 9 |     "jest-styled-components": "^6.3.4",
10 |     "react-scripts": ">=2.1.3"
11 |   },
12 |   "dependencies": {
13 |     "react": ">=16.7.0",
14 |     "react-dom": ">=16.7.0",
15 |     "styled-components": ">=4.1.3"
16 |   },
17 |   "scripts": {
18 |     "predeploy": "yarn build",
19 |     "deploy": "gh-pages -d build",
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test",
23 |     "coverage": "react-scripts test --coverage",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": "react-app"
28 |   },
29 |   "jest": {
30 |     "snapshotSerializers": [
31 |       "enzyme-to-json/serializer"
32 |     ],
33 |     "coverageThreshold": {
34 |       "global": {
35 |         "branches": 90,
36 |         "functions": 90,
37 |         "lines": 90,
38 |         "statements": -10
39 |       }
40 |     },
41 |     "collectCoverageFrom": [
42 |       "src/**/*.{js}",
43 |       "!src/index.js"
44 |     ]
45 |   },
46 |   "browserslist": [
47 |     ">0.2%",
48 |     "not dead",
49 |     "not ie <= 11",
50 |     "not op_mini all"
51 |   ],
52 |   "homepage": "https://vishnuramana.github.io/analogclock"
53 | }
54 | 


--------------------------------------------------------------------------------
/src/__tests__/component/Util.test.js:
--------------------------------------------------------------------------------
 1 | import Util from "../../Util";
 2 | 
 3 | describe("Util tests", () => {
 4 |   it("returns hand angle as 450 when 30 seconds is passed", () => {
 5 |     expect(Util.getHandAngle({ type: "second", seconds: "30" })).toBe(450);
 6 |   });
 7 | 
 8 |   it("returns hand angle as 450 when 30 minutes is passed", () => {
 9 |     expect(Util.getHandAngle({ type: "minute", minutes: "30" })).toBe(450);
10 |   });
11 | 
12 |   it("returns hand angle as 450 when 6 hours is passed", () => {
13 |     expect(Util.getHandAngle({ type: "hour", hours: "6", minutes: "0" })).toBe(450);
14 |   });
15 | 
16 |   it("returns hand angle as 450 when 6 hours is passed", () => {
17 |     expect(Util.getHandAngle({ type: "hour", hours: "6", minutes: "31" })).toBe(465.5);
18 |   });
19 | 
20 |   it("returns hand angle as 0 when type is not passed", () => {
21 |     expect(
22 |       Util.getHandAngle({ hours: "6", minutes: "30", seconds: "30" })
23 |     ).toBe(0);
24 |   });
25 | 
26 |   it("returns 0 when passed hour is invalid", () => {
27 |     expect(
28 |       Util.getHourIn12HrFormat(undefined)
29 |     ).toBe(0);
30 |   });
31 | 
32 |   it("returns passed hour when time is less than 12 hours", () => {
33 |     expect(
34 |       Util.getHourIn12HrFormat(10)
35 |     ).toBe(10);
36 |   });
37 | 
38 |   it("returns passed hour-12 when time is greater than 12 hours", () => {
39 |     expect(
40 |       Util.getHourIn12HrFormat(13)
41 |     ).toBe(1);
42 |   });
43 | });
44 | 


--------------------------------------------------------------------------------
/src/__tests__/component/AnalogClock.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "jest-styled-components";
 3 | import { shallow } from "enzyme";
 4 | import "../../setupTests";
 5 | 
 6 | import AnalogClock from "../../AnalogClock.js";
 7 | 
 8 | describe("AnalogClock component", () => {
 9 |   const RealDate = Date;
10 | 
11 |   afterEach(() => {
12 |     global.Date = RealDate;
13 |   });
14 | 
15 |   it("matches snapshot", () => {
16 |     const constantDate = new Date("2021-10-10T10:10:10");
17 | 
18 |     Date = class extends Date {
19 |       constructor() {
20 |         return constantDate;
21 |       }
22 |     };
23 | 
24 |     let options = {
25 |       width: "300px",
26 |       border: true,
27 |       borderColor: "#2e2e2e",
28 |       baseColor: "#17a2b8",
29 |       centerColor: "#459cff",
30 |       centerBorderColor: "#fff",
31 |       handColors: {
32 |         second: "#d81c7a",
33 |         minute: "#fff",
34 |         hour: "#fff",
35 |       },
36 |     };
37 |     const wrapper = shallow(<AnalogClock {...options} />);
38 |     expect(wrapper).toMatchSnapshot();
39 |   });
40 | 
41 |   it("matches snapshot when custom time is passed", () => {
42 |     let options = {
43 |       useCustomTime: true,
44 |       seconds: 22,
45 |       minutes: 22,
46 |       hours: 22,
47 |       width: "300px",
48 |       border: true,
49 |       borderColor: "#2e2e2e",
50 |       baseColor: "#17a2b8",
51 |       centerColor: "#459cff",
52 |       centerBorderColor: "#fff",
53 |       handColors: {
54 |         second: "#d81c7a",
55 |         minute: "#fff",
56 |         hour: "#fff",
57 |       },
58 |     };
59 |     const wrapper = shallow(<AnalogClock {...options} />);
60 |     expect(wrapper).toMatchSnapshot();
61 |   });
62 | });
63 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |   <title>Analog Clock built using React - Demo</title>
 8 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
 9 |     crossorigin="anonymous">
10 | </head>
11 | 
12 | <body>
13 |   <div class="container">
14 |     <div class="row">
15 |       <div class="col">
16 |         <noscript>
17 |           You need to enable JavaScript to run this app.
18 |         </noscript>
19 |         <div class="jumbotron text-light text-md-center" style="background-image:linear-gradient(to right,#17a2b8,#ff6b6b)">
20 |           <h1 class="display-4">Analog Clock built using React!</h1>
21 |           <p class="lead">This is an analog clock completely built using React. It is customizable by passing an
22 |             options JSON Object
23 |             to the component.</p>
24 |           <hr class="my-4">
25 |           <p>You can try the different customization options by using the form below. Once you are done, you can copy
26 |             the JSON object generated for your clock !</p>
27 |           <a href="https://github.com/vishnuramana/analogclock" class="btn btn-outline-light" role="button"
28 |             aria-pressed="true">View on Github</a>
29 |         </div>
30 |       </div>
31 |     </div>
32 |     <div id="root" class="pb-5"></div>
33 |   </div>
34 |   <footer class="footer">
35 |     <div class="container text-md-center">
36 |       <span class="text-muted">Made with 💙</span>
37 |     </div>
38 |   </footer>
39 | </body>
40 | 
41 | </html>


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import Form from './Form';
 3 | import AnalogClock from './AnalogClock.js'
 4 | 
 5 | 
 6 | class App extends Component {
 7 | 
 8 |   interval = null;
 9 |   constructor(props) {
10 |     super(props);
11 |     this.state = {
12 |       options: {
13 |         useCustomTime: false,
14 |         width: "300px",
15 |         border: true,
16 |         borderColor: "#2e2e2e",
17 |         baseColor: "#17a2b8",
18 |         centerColor: "#459cff",
19 |         centerBorderColor: "#ffffff",
20 |         handColors: {
21 |           second: "#d81c7a",
22 |           minute: "#ffffff",
23 |           hour: "#ffffff"
24 |         },
25 |       }
26 |     };
27 |   }
28 | 
29 | 
30 |   updateClock() {
31 |     let ausTime = new Date().toLocaleString("en-US", { timeZone: "Australia/Brisbane" });
32 |     let date = new Date(ausTime);
33 | 
34 |     this.setState({
35 |       'options': {
36 |         ...this.state.options,
37 |         seconds: date.getSeconds(),
38 |         minutes: date.getMinutes(),
39 |         hours: date.getHours()
40 |       }
41 |     })
42 |   }
43 | 
44 |   customizeClock(options) {
45 |     let _options = options;
46 |     if (_options.useCustomTime) {
47 |       this.interval = setInterval(() => this.updateClock(), 1000);
48 |     } else {
49 |       clearInterval(this.interval);
50 |       delete _options.seconds;
51 |       delete _options.minutes;
52 |       delete _options.hours;
53 |     }
54 |     this.setState({ options: { ..._options } });
55 |   }
56 | 
57 |   render() {
58 |     return (
59 |       <div>
60 |         <div className="row">
61 |           <Form defaultOptions={this.state.options} customizeClock={(options) => this.customizeClock(options)} />
62 |         </div>
63 |         <div className="row mt-3">
64 |           <div className="col-6 border-right">
65 |             <h4><i>Options</i></h4>
66 |             <textarea className="form-control" id="selected-options" rows="12" readOnly value={JSON.stringify(this.state.options, null, 2)}></textarea>
67 |           </div>
68 |           <div className="col-6">
69 |             <h4><i>Preview</i></h4>
70 |             <AnalogClock {...this.state.options} />
71 |             {this.state.options.useCustomTime ? <p style={{ paddingTop: '5px', paddingLeft: '20px' }}><i>Timezone: Australia/Brisbane</i></p> : null}
72 |           </div>
73 |         </div>
74 |       </div>
75 |     );
76 |   }
77 | 
78 |   componentWillUnmount() {
79 |     clearInterval(this.interval);
80 |   }
81 | }
82 | 
83 | export default App;


--------------------------------------------------------------------------------
/src/__tests__/App.unit.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "jest-styled-components";
 3 | import { mount } from "enzyme";
 4 | import "../setupTests";
 5 | 
 6 | import App from '../App.js';
 7 | 
 8 | describe("App component", () => {
 9 |   const renderSpy = jest.spyOn(App.prototype, "render");
10 |   const customizeClockSpy = jest.spyOn(App.prototype, "customizeClock");
11 |   const updateClockSpy = jest.spyOn(App.prototype, "updateClock");
12 | 
13 |   beforeEach(() => {
14 |     jest.useFakeTimers();
15 |     jest.spyOn(global, "setInterval");
16 |     jest.spyOn(global, "clearInterval");
17 |   })
18 | 
19 |   afterEach(() => {
20 |     renderSpy.mockClear();
21 |     customizeClockSpy.mockClear();
22 |     updateClockSpy.mockClear();
23 |     jest.useRealTimers();
24 |   });
25 | 
26 |   it("mounts the component", () => {
27 |     const wrapper = mount(<App />);
28 |     expect(renderSpy).toHaveBeenCalledTimes(1);
29 |   });
30 | 
31 |   it("updates the clock when customize button is clicked", () => {
32 |     let options = {
33 |       width: "500px",
34 |       border: false,
35 |       useCustomTime: true,
36 |       seconds: 10,
37 |       minutes: 10,
38 |       hours: 10
39 |     };
40 |     const wrapper = mount(<App />);
41 |     const formWrapper = wrapper.find('Form');
42 |     formWrapper.setState({ 'options': { ...wrapper.state().options, ...options } });
43 |     formWrapper.find('#build').simulate('click');
44 |     expect(customizeClockSpy).toHaveBeenCalledTimes(1);
45 |     const updatedOptions = wrapper.find('#selected-options').text();
46 |     jest.advanceTimersByTime(1000);
47 |     wrapper.unmount();
48 |     expect(updatedOptions.indexOf('"useCustomTime": true')).toBeTruthy();
49 |     expect(updateClockSpy).toHaveBeenCalledTimes(1);
50 |   });
51 | 
52 |   it("uses internal timer when useCustomTime is turned back to false", () => {
53 |     let options = {
54 |       useCustomTime: true,
55 |       seconds: 10,
56 |       minutes: 10,
57 |       hours: 10
58 |     };
59 |     const wrapper = mount(<App />);
60 |     const formWrapper = wrapper.find('Form');
61 |     formWrapper.setState({ 'options': { ...wrapper.state().options, ...options } });
62 |     formWrapper.find('#build').simulate('click');
63 |     expect(customizeClockSpy).toHaveBeenCalledTimes(1);
64 |     jest.advanceTimersByTime(1000);
65 |     expect(updateClockSpy).toHaveBeenCalledTimes(1);
66 |     formWrapper.setState({ 'options': { ...wrapper.state().options, ...options, useCustomTime: false } });
67 |     formWrapper.find('#build').simulate('click');
68 |     jest.advanceTimersByTime(500);
69 |     expect(updateClockSpy).toHaveBeenCalledTimes(1);
70 |   });
71 | 
72 | });
73 | 


--------------------------------------------------------------------------------
/src/__tests__/component/__snapshots__/AnalogClock.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`AnalogClock component matches snapshot 1`] = `
  4 | <styled.div
  5 |   width="300px"
  6 | >
  7 |   <styled.div
  8 |     border={true}
  9 |     borderColor="#2e2e2e"
 10 |   >
 11 |     <styled.div
 12 |       baseColor="#17a2b8"
 13 |     >
 14 |       <styled.div
 15 |         centerBorderColor="#fff"
 16 |         centerColor="#459cff"
 17 |       />
 18 |       <Hand
 19 |         handColors={
 20 |           Object {
 21 |             "hour": "#fff",
 22 |             "minute": "#fff",
 23 |             "second": "#d81c7a",
 24 |           }
 25 |         }
 26 |         seconds={10}
 27 |         type="second"
 28 |       />
 29 |       <Hand
 30 |         handColors={
 31 |           Object {
 32 |             "hour": "#fff",
 33 |             "minute": "#fff",
 34 |             "second": "#d81c7a",
 35 |           }
 36 |         }
 37 |         minutes={10}
 38 |         type="minute"
 39 |       />
 40 |       <Hand
 41 |         handColors={
 42 |           Object {
 43 |             "hour": "#fff",
 44 |             "minute": "#fff",
 45 |             "second": "#d81c7a",
 46 |           }
 47 |         }
 48 |         hours={10}
 49 |         minutes={10}
 50 |         type="hour"
 51 |       />
 52 |     </styled.div>
 53 |   </styled.div>
 54 | </styled.div>
 55 | `;
 56 | 
 57 | exports[`AnalogClock component matches snapshot when custom time is passed 1`] = `
 58 | <styled.div
 59 |   width="300px"
 60 | >
 61 |   <styled.div
 62 |     border={true}
 63 |     borderColor="#2e2e2e"
 64 |   >
 65 |     <styled.div
 66 |       baseColor="#17a2b8"
 67 |     >
 68 |       <styled.div
 69 |         centerBorderColor="#fff"
 70 |         centerColor="#459cff"
 71 |       />
 72 |       <Hand
 73 |         handColors={
 74 |           Object {
 75 |             "hour": "#fff",
 76 |             "minute": "#fff",
 77 |             "second": "#d81c7a",
 78 |           }
 79 |         }
 80 |         seconds={22}
 81 |         type="second"
 82 |       />
 83 |       <Hand
 84 |         handColors={
 85 |           Object {
 86 |             "hour": "#fff",
 87 |             "minute": "#fff",
 88 |             "second": "#d81c7a",
 89 |           }
 90 |         }
 91 |         minutes={22}
 92 |         type="minute"
 93 |       />
 94 |       <Hand
 95 |         handColors={
 96 |           Object {
 97 |             "hour": "#fff",
 98 |             "minute": "#fff",
 99 |             "second": "#d81c7a",
100 |           }
101 |         }
102 |         hours={22}
103 |         minutes={22}
104 |         type="hour"
105 |       />
106 |     </styled.div>
107 |   </styled.div>
108 | </styled.div>
109 | `;
110 | 


--------------------------------------------------------------------------------
/src/AnalogClock.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import Util from './Util';
 3 | import { ClockContainer, ClockBaseBorder, ClockBase, ClockCenter } from './ClockComponents';
 4 | import Hand from './Hand.js';
 5 | 
 6 | class AnalogClock extends Component {
 7 | 
 8 |     constructor(props) {
 9 |         super(props);
10 |         this.state = this.initClock();
11 |     }
12 | 
13 |     initClock() {
14 |         const date = new Date();
15 |         return {
16 |             seconds: date.getSeconds(),
17 |             minutes: date.getMinutes(),
18 |             hours: Util.getHourIn12HrFormat(date.getHours())
19 |         }
20 |     }
21 | 
22 |     setupTime() {
23 |         const date = new Date();
24 |         this.setState({
25 |             seconds: date.getSeconds(),
26 |             minutes: date.getMinutes(),
27 |             hours: Util.getHourIn12HrFormat(date.getHours())
28 |         })
29 |     }
30 | 
31 |     setupInterval() {
32 |         this.interval = setInterval(() => this.setupTime(), 1000);
33 |     }
34 | 
35 |     componentDidMount() {
36 |         this.setupInterval();
37 |     }
38 | 
39 |     componentDidUpdate(prevProps) {
40 |         if (prevProps.useCustomTime !== this.props.useCustomTime) {
41 |             if (this.props.useCustomTime) {
42 |                 clearInterval(this.interval);
43 |                 this.setState({
44 |                     seconds: undefined,
45 |                     minutes: undefined,
46 |                     hours: undefined
47 |                 });
48 |             } else {
49 |                 this.setupInterval();
50 |             }
51 |         }
52 |     }
53 | 
54 |     render() {
55 |         const { width, border, borderColor, baseColor, centerColor, centerBorderColor, handColors } = this.props;
56 |         const { seconds, minutes, hours } = this.props.useCustomTime ? this.props : this.state;
57 |         return (
58 |             <ClockContainer width={width}>
59 |                 <ClockBaseBorder border={border} borderColor={borderColor}>
60 |                     <ClockBase baseColor={baseColor}>
61 |                         <ClockCenter centerColor={centerColor} centerBorderColor={centerBorderColor} />
62 |                         <Hand type="second" seconds={seconds} handColors={handColors} />
63 |                         <Hand type="minute" minutes={minutes} handColors={handColors} />
64 |                         <Hand type="hour" hours={hours} minutes={minutes} handColors={handColors} />
65 |                     </ClockBase>
66 |                 </ClockBaseBorder>
67 |             </ClockContainer>
68 | 
69 |         )
70 |     }
71 | 
72 |     componentWillUnmount() {
73 |         clearInterval(this.interval);
74 |     }
75 | }
76 | 
77 | export default AnalogClock;


--------------------------------------------------------------------------------
/src/ClockComponents.js:
--------------------------------------------------------------------------------
 1 | import styled, { css } from 'styled-components';
 2 | 
 3 | const ClockContainer = styled.div`
 4 |             height: ${props => props.width || "400px"};
 5 |             width: ${props => props.width || "400px"};
 6 |         `;
 7 | 
 8 | const ClockBaseBorder = styled.div`
 9 |             position: relative;
10 |             box-sizing: border-box;
11 |             height: 100%;
12 |             width: 100%;
13 |             background-color: ${props => props.borderColor ? props.borderColor : "transparent"};
14 |             padding: ${props => props.border ? "5%" : "0"};
15 |             border-radius: 100%;
16 |         `;
17 | const ClockBase = styled.div`
18 |             position: relative;
19 |             height: 100%;
20 |             width: 100%;
21 |             background-color: ${props => props.baseColor ? props.baseColor : "black"};
22 |             border-radius: 100%;
23 |         `;
24 | const ClockCenter = styled.div`
25 |             position: absolute;
26 |             left: 50%;
27 |             top: 50%;
28 |             width: 12px;
29 |             height: 12px;
30 |             border: 2px solid ${props => props.centerBorderColor ? props.centerBorderColor : "#fff"};;
31 |             background-color: ${props => props.centerColor ? props.centerColor : "#459cff"};
32 |             border-radius: 100%;
33 |             margin-left: -6px;
34 |             margin-top: -6px;
35 |             z-index: 100;
36 |         `;
37 | 
38 | const ClockHand = styled.div`
39 |         box-sizing: border-box;
40 |         height: 1.5%;
41 |         min-height: 2px;
42 |         max-height: 6px;
43 | 
44 |             ${props => props.type === 'second' && css`
45 |                     width: 60%;
46 |                     margin-left: 40%;
47 |                     background-color: ${props => props.handColors && props.handColors.second ? props.handColors.second : "#d81c7a"};
48 |             `}
49 |             ${props => props.type === 'minute' && css`
50 |                     width: 45%;
51 |                     margin-left: 45%;
52 |                     background-color: ${props => props.handColors && props.handColors.minute ? props.handColors.minute : "#fff"};
53 |             `}
54 |             ${props => props.type === 'hour' && css`
55 |                     width: 35%;
56 |                     margin-left: 45%;
57 |                     background-color: ${props => props.handColors && props.handColors.hour ? props.handColors.hour : "#fff"};
58 |             `}
59 |         `;
60 | 
61 | const ClockHandContainer = styled.div`
62 |         position: absolute;
63 |         width: 100%
64 |         height: 100%;
65 |         display: flex;
66 |         align-items: center;
67 |         transform: rotate(${props => props.handAngle}deg);
68 |         transition: ${props => props.handAngle > 270 && 'transform 250ms ease-in-out'};
69 |     `;
70 | 
71 | export { ClockContainer, ClockBaseBorder, ClockBase, ClockCenter, ClockHand, ClockHandContainer };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Analog Clock using React
  2 | 
  3 | [![CircleCI](https://circleci.com/gh/vishnuramana/analogclock/tree/dev.svg?style=shield)](https://circleci.com/gh/vishnuramana/analogclock/tree/dev) [![Coverage Status](https://coveralls.io/repos/github/vishnuramana/analogclock/badge.svg?branch=dev&kill_cache=1)](https://coveralls.io/github/vishnuramana/analogclock?branch=dev) [![npm](https://img.shields.io/npm/dw/analog-clock-react)](https://www.npmjs.com/package/analog-clock-react) ![npm](https://img.shields.io/npm/v/analog-clock-react) [![NPM](https://img.shields.io/npm/l/analog-clock-react)](https://github.com/vishnuramana/analogclock/blob/dev/LICENSE)
  4 | 
  5 | This is a customizable analog clock completely built using React. It is customizable by passing an options JSON Object to the component which allows you to modify the clock colors. It also allows you to use multiple timezones.
  6 | 
  7 | ![Clock Preview](https://i.imgur.com/uDyNlVl.png)
  8 | 
  9 | ## Demo
 10 | You can customize/view a live demo of the clock [here](http://vishnuramana.github.io/analogclock).
 11 | 
 12 | ## Installation
 13 | Install the package using
 14 | 
 15 |     npm install --save analog-clock-react
 16 |     
 17 | ## Usage
 18 | Import the  `AnalogClock` component into your React Component like this
 19 | 
 20 |     import AnalogClock from 'analog-clock-react';
 21 |     
 22 | Then use the `AnalogClock` Component like this
 23 | 
 24 |     let options = {
 25 |         width: "300px",
 26 |         border: true,
 27 |         borderColor: "#2e2e2e",
 28 |         baseColor: "#17a2b8",
 29 |         centerColor: "#459cff",
 30 |         centerBorderColor: "#ffffff",
 31 |         handColors: {
 32 |           second: "#d81c7a",
 33 |           minute: "#ffffff",
 34 |           hour: "#ffffff"
 35 |         }
 36 |     };
 37 |     .....
 38 |     <AnalogClock {...options} />
 39 | 
 40 | You can customize the clock using the different properties in the `options` JSON Object. 
 41 | 
 42 | Please visit the [demo](http://vishnuramana.github.io/analogclock) page to get a live preview of the clock.
 43 | 
 44 | ## Features
 45 | 
 46 | - ### Custom Time / Timezone Support
 47 |     *AnalogClock* now supports using your own custom time/timezone. To enable custom time usage, set `useCustomTime` to `true` and set your own `hours`, `minutes` and `seconds`  in the `options` JSON Object like below:
 48 |     
 49 |         let options = {
 50 |             useCustomTime: true,    // set this to true
 51 |             width: "300px",
 52 |             border: true,
 53 |             borderColor: "#2e2e2e",
 54 |             baseColor: "#17a2b8",
 55 |             centerColor: "#459cff",
 56 |             centerBorderColor: "#ffffff",
 57 |             handColors: {
 58 |               second: "#d81c7a",
 59 |               minute: "#ffffff",
 60 |               hour: "#ffffff"
 61 |             },
 62 |             "seconds": 1,   // set your
 63 |             "minutes": 10,  // own
 64 |             "hours": 22     // time here.
 65 |         };
 66 | 
 67 |     Once you do that, `AnalogClock` will expect you to give it the `hours`, `minutes` and `seconds` value.
 68 |     
 69 |     *Note: You will have to use a setInterval in the component where you use `<AnalogClock>` to update the `options` object with the time that you pass. An example is given below:*
 70 |     
 71 |       updateClock = () => {
 72 |         let ausTime = new Date().toLocaleString("en-US", { timeZone: "Australia/Brisbane" });
 73 |         let date = new Date(ausTime);
 74 |     
 75 |         this.setState({
 76 |           'options': {
 77 |             ...this.state.options,
 78 |             seconds: date.getSeconds(),
 79 |             minutes: date.getMinutes(),
 80 |             hours: date.getHours()
 81 |           }
 82 |         })
 83 |       }
 84 |       ....
 85 |       this.interval = setInterval(this.updateClock, 1000);
 86 | 
 87 | ## Change Log
 88 |   - **v1.3.0**
 89 |     - Added finer movement of hour hand
 90 | 
 91 |   - **v1.2.2**
 92 |     - Fixed clock hand centering issues
 93 |     - Removed unwanted code
 94 | 
 95 | ## Contribution
 96 | 
 97 | If you wish to contribute to this project, please use the `dev` branch to add your changes and test. Make sure all the tests are passed and optimal code coverage is present. Once you are done with your changes, please raise a PR.
 98 | 
 99 | ## Issues/Feature Requests
100 | 
101 | For any issues/feature-requests, you can create an issue in Github or email me at [me@vishnu.codes](mailto:me@vishnu.codes)
102 | 
103 | ## License
104 | 
105 | MIT License
106 | 


--------------------------------------------------------------------------------
/src/__tests__/component/AnalogClock.unit.test.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import "jest-styled-components";
  3 | import { mount } from "enzyme";
  4 | import "../../setupTests";
  5 | 
  6 | import AnalogClock from "../../AnalogClock.js";
  7 | 
  8 | describe("AnalogClock component", () => {
  9 |   const initClockSpy = jest.spyOn(AnalogClock.prototype, "initClock");
 10 |   const setupIntervalSpy = jest.spyOn(AnalogClock.prototype, "setupInterval");
 11 |   const setupTimeSpy = jest.spyOn(AnalogClock.prototype, "setupTime");
 12 |   const componentWillUnmountSpy = jest.spyOn(
 13 |     AnalogClock.prototype,
 14 |     "componentWillUnmount"
 15 |   );
 16 | 
 17 |   beforeEach(() => {
 18 |     jest.useFakeTimers();
 19 |   })
 20 | 
 21 | 
 22 |   afterEach(() => {
 23 |     initClockSpy.mockClear();
 24 |     setupIntervalSpy.mockClear();
 25 |     componentWillUnmountSpy.mockClear();
 26 |     setupTimeSpy.mockClear();
 27 |     jest.useRealTimers();
 28 |   });
 29 | 
 30 |   it("mounts the component", () => {
 31 |     let options = {
 32 |       width: "300px",
 33 |       border: true,
 34 |       borderColor: "#2e2e2e",
 35 |       baseColor: "#17a2b8",
 36 |       centerColor: "#459cff",
 37 |       centerBorderColor: "#fff",
 38 |       handColors: {
 39 |         second: "#d81c7a",
 40 |         minute: "#fff",
 41 |         hour: "#fff",
 42 |       },
 43 |     };
 44 |     const wrapper = mount(<AnalogClock {...options} />);
 45 |     expect(initClockSpy).toHaveBeenCalledTimes(1);
 46 |     expect(setupIntervalSpy).toHaveBeenCalledTimes(1);
 47 |     expect(setInterval).toHaveBeenCalledTimes(1);
 48 |     expect(setInterval).toHaveBeenLastCalledWith(expect.any(Function), 1000);
 49 |     jest.advanceTimersByTime(1001);
 50 |     expect(setupTimeSpy).toHaveBeenCalledTimes(1)
 51 |   });
 52 | 
 53 |   it("uses 12 hr time format", () => {
 54 |     const constantDate = new Date("2021-10-10T14:14:14");
 55 | 
 56 |     Date = class extends Date {
 57 |       constructor() {
 58 |         return constantDate;
 59 |       }
 60 |     };
 61 | 
 62 |     let options = {
 63 |       width: "300px",
 64 |       border: true,
 65 |       borderColor: "#2e2e2e",
 66 |       baseColor: "#17a2b8",
 67 |       centerColor: "#459cff",
 68 |       centerBorderColor: "#fff",
 69 |       handColors: {
 70 |         second: "#d81c7a",
 71 |         minute: "#fff",
 72 |         hour: "#fff",
 73 |       },
 74 |     };
 75 |     const wrapper = mount(<AnalogClock {...options} />);
 76 |     expect(setInterval).toHaveBeenCalledTimes(1);
 77 |     expect(setInterval).toHaveBeenLastCalledWith(expect.any(Function), 1000);
 78 |     expect(wrapper.state("hours")).toEqual(2);
 79 |     jest.advanceTimersByTime(1500);
 80 |     expect(wrapper.state("hours")).toEqual(2);
 81 |   });
 82 | 
 83 |   it("unmounts the component", () => {
 84 |     let options = {
 85 |       width: "300px",
 86 |       border: true,
 87 |       borderColor: "#2e2e2e",
 88 |       baseColor: "#17a2b8",
 89 |       centerColor: "#459cff",
 90 |       centerBorderColor: "#fff",
 91 |       handColors: {
 92 |         second: "#d81c7a",
 93 |         minute: "#fff",
 94 |         hour: "#fff",
 95 |       },
 96 |     };
 97 |     const wrapper = mount(<AnalogClock {...options} />);
 98 |     wrapper.unmount();
 99 |     expect(componentWillUnmountSpy).toHaveBeenCalledTimes(1);
100 |     expect(clearInterval).toHaveBeenCalledTimes(1);
101 |   });
102 | 
103 |   it("sets custom time when useCustomTime is set to true", () => {
104 |     let options = {
105 |       width: "300px",
106 |       border: true,
107 |       borderColor: "#2e2e2e",
108 |       baseColor: "#17a2b8",
109 |       centerColor: "#459cff",
110 |       centerBorderColor: "#fff",
111 |       handColors: {
112 |         second: "#d81c7a",
113 |         minute: "#fff",
114 |         hour: "#fff",
115 |       },
116 |     };
117 | 
118 |     const wrapper = mount(<AnalogClock {...options} />);
119 |     wrapper.setProps({
120 |       ...options,
121 |       useCustomTime: true,
122 |       seconds: 22,
123 |       minutes: 22,
124 |       hours: 22,
125 |     });
126 |     expect(setupIntervalSpy).toHaveBeenCalledTimes(1);
127 |     expect(clearInterval).toHaveBeenCalledTimes(1);
128 |   });
129 | 
130 |   it("sets current time when useCustomTime is set to false", () => {
131 |     let options = {
132 |       useCustomTime: true,
133 |       seconds: 22,
134 |       minutes: 22,
135 |       hours: 22,
136 |       width: "300px",
137 |       border: true,
138 |       borderColor: "#2e2e2e",
139 |       baseColor: "#17a2b8",
140 |       centerColor: "#459cff",
141 |       centerBorderColor: "#fff",
142 |       handColors: {
143 |         second: "#d81c7a",
144 |         minute: "#fff",
145 |         hour: "#fff",
146 |       },
147 |     };
148 | 
149 |     const wrapper = mount(<AnalogClock {...options} />);
150 |     wrapper.setProps({
151 |       ...options,
152 |       useCustomTime: false,
153 |     });
154 |     expect(setupIntervalSpy).toHaveBeenCalledTimes(2);
155 |   });
156 | });
157 | 


--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/App.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`App component matches snapshot 1`] = `
  4 | <div>
  5 |   <div
  6 |     className="row"
  7 |   >
  8 |     <Form
  9 |       customizeClock={[Function]}
 10 |       defaultOptions={
 11 |         Object {
 12 |           "baseColor": "#17a2b8",
 13 |           "border": true,
 14 |           "borderColor": "#2e2e2e",
 15 |           "centerBorderColor": "#ffffff",
 16 |           "centerColor": "#459cff",
 17 |           "handColors": Object {
 18 |             "hour": "#ffffff",
 19 |             "minute": "#ffffff",
 20 |             "second": "#d81c7a",
 21 |           },
 22 |           "useCustomTime": false,
 23 |           "width": "300px",
 24 |         }
 25 |       }
 26 |     />
 27 |   </div>
 28 |   <div
 29 |     className="row mt-3"
 30 |   >
 31 |     <div
 32 |       className="col-6 border-right"
 33 |     >
 34 |       <h4>
 35 |         <i>
 36 |           Options
 37 |         </i>
 38 |       </h4>
 39 |       <textarea
 40 |         className="form-control"
 41 |         id="selected-options"
 42 |         readOnly={true}
 43 |         rows="12"
 44 |         value="{
 45 |   \\"useCustomTime\\": false,
 46 |   \\"width\\": \\"300px\\",
 47 |   \\"border\\": true,
 48 |   \\"borderColor\\": \\"#2e2e2e\\",
 49 |   \\"baseColor\\": \\"#17a2b8\\",
 50 |   \\"centerColor\\": \\"#459cff\\",
 51 |   \\"centerBorderColor\\": \\"#ffffff\\",
 52 |   \\"handColors\\": {
 53 |     \\"second\\": \\"#d81c7a\\",
 54 |     \\"minute\\": \\"#ffffff\\",
 55 |     \\"hour\\": \\"#ffffff\\"
 56 |   }
 57 | }"
 58 |       />
 59 |     </div>
 60 |     <div
 61 |       className="col-6"
 62 |     >
 63 |       <h4>
 64 |         <i>
 65 |           Preview
 66 |         </i>
 67 |       </h4>
 68 |       <AnalogClock
 69 |         baseColor="#17a2b8"
 70 |         border={true}
 71 |         borderColor="#2e2e2e"
 72 |         centerBorderColor="#ffffff"
 73 |         centerColor="#459cff"
 74 |         handColors={
 75 |           Object {
 76 |             "hour": "#ffffff",
 77 |             "minute": "#ffffff",
 78 |             "second": "#d81c7a",
 79 |           }
 80 |         }
 81 |         useCustomTime={false}
 82 |         width="300px"
 83 |       />
 84 |     </div>
 85 |   </div>
 86 | </div>
 87 | `;
 88 | 
 89 | exports[`App component matches snapshot when options are changed 1`] = `
 90 | <div>
 91 |   <div
 92 |     className="row"
 93 |   >
 94 |     <Form
 95 |       customizeClock={[Function]}
 96 |       defaultOptions={
 97 |         Object {
 98 |           "baseColor": "red",
 99 |           "border": false,
100 |           "borderColor": "#fff",
101 |           "centerBorderColor": "black",
102 |           "centerColor": "blue",
103 |           "handColors": Object {
104 |             "hour": "#ffffff",
105 |             "minute": "#ffffff",
106 |             "second": "#d81c7a",
107 |           },
108 |           "hours": 10,
109 |           "minutes": 10,
110 |           "seconds": 10,
111 |           "useCustomTime": true,
112 |           "width": "300px",
113 |         }
114 |       }
115 |     />
116 |   </div>
117 |   <div
118 |     className="row mt-3"
119 |   >
120 |     <div
121 |       className="col-6 border-right"
122 |     >
123 |       <h4>
124 |         <i>
125 |           Options
126 |         </i>
127 |       </h4>
128 |       <textarea
129 |         className="form-control"
130 |         id="selected-options"
131 |         readOnly={true}
132 |         rows="12"
133 |         value="{
134 |   \\"useCustomTime\\": true,
135 |   \\"width\\": \\"300px\\",
136 |   \\"border\\": false,
137 |   \\"borderColor\\": \\"#fff\\",
138 |   \\"baseColor\\": \\"red\\",
139 |   \\"centerColor\\": \\"blue\\",
140 |   \\"centerBorderColor\\": \\"black\\",
141 |   \\"handColors\\": {
142 |     \\"second\\": \\"#d81c7a\\",
143 |     \\"minute\\": \\"#ffffff\\",
144 |     \\"hour\\": \\"#ffffff\\"
145 |   },
146 |   \\"seconds\\": 10,
147 |   \\"minutes\\": 10,
148 |   \\"hours\\": 10
149 | }"
150 |       />
151 |     </div>
152 |     <div
153 |       className="col-6"
154 |     >
155 |       <h4>
156 |         <i>
157 |           Preview
158 |         </i>
159 |       </h4>
160 |       <AnalogClock
161 |         baseColor="red"
162 |         border={false}
163 |         borderColor="#fff"
164 |         centerBorderColor="black"
165 |         centerColor="blue"
166 |         handColors={
167 |           Object {
168 |             "hour": "#ffffff",
169 |             "minute": "#ffffff",
170 |             "second": "#d81c7a",
171 |           }
172 |         }
173 |         hours={10}
174 |         minutes={10}
175 |         seconds={10}
176 |         useCustomTime={true}
177 |         width="300px"
178 |       />
179 |       <p
180 |         style={
181 |           Object {
182 |             "paddingLeft": "20px",
183 |             "paddingTop": "5px",
184 |           }
185 |         }
186 |       >
187 |         <i>
188 |           Timezone: Australia/Brisbane
189 |         </i>
190 |       </p>
191 |     </div>
192 |   </div>
193 | </div>
194 | `;
195 | 


--------------------------------------------------------------------------------
/src/__tests__/component/ClockComponents.test.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import "jest-styled-components";
  3 | import { mount } from "enzyme";
  4 | import "../../setupTests";
  5 | 
  6 | import {
  7 |   ClockContainer,
  8 |   ClockBaseBorder,
  9 |   ClockBase,
 10 |   ClockCenter,
 11 |   ClockHand,
 12 |   ClockHandContainer,
 13 | } from "../../ClockComponents";
 14 | 
 15 | describe("ClockComponents tests", () => {
 16 |   it("sets width and height of ClockContainer when width prop is passed", () => {
 17 |     const wrapper = mount(<ClockContainer width="200px" />);
 18 |     expect(wrapper).toHaveStyleRule("width", "200px");
 19 |     expect(wrapper).toHaveStyleRule("height", "200px");
 20 |   });
 21 | 
 22 |   it("sets default width of ClockContainer when width prop is not passed", () => {
 23 |     const wrapper = mount(<ClockContainer />);
 24 |     expect(wrapper).toHaveStyleRule("width", "400px");
 25 |     expect(wrapper).toHaveStyleRule("height", "400px");
 26 |   });
 27 | 
 28 |   it("sets border and border color of ClockBaseBorder when props passed", () => {
 29 |     const wrapper = mount(<ClockBaseBorder border={true} borderColor="#fff" />);
 30 |     expect(wrapper).toHaveStyleRule("background-color", "#fff");
 31 |     expect(wrapper).toHaveStyleRule("padding", "5%");
 32 |   });
 33 | 
 34 |   it("sets default border and border color of ClockBaseBorder when props is not passed", () => {
 35 |     const wrapper = mount(<ClockBaseBorder />);
 36 |     expect(wrapper).toHaveStyleRule("background-color", "transparent");
 37 |     expect(wrapper).toHaveStyleRule("padding", "0");
 38 |   });
 39 | 
 40 |   it("sets base color of ClockBase when props passed", () => {
 41 |     const wrapper = mount(<ClockBase baseColor="#fff" />);
 42 |     expect(wrapper).toHaveStyleRule("background-color", "#fff");
 43 |   });
 44 | 
 45 |   it("sets default base color of ClockBase when props is not passed", () => {
 46 |     const wrapper = mount(<ClockBase />);
 47 |     expect(wrapper).toHaveStyleRule("background-color", "black");
 48 |   });
 49 | 
 50 |   it("sets border and background color of ClockCenter when props passed", () => {
 51 |     const wrapper = mount(
 52 |       <ClockCenter centerBorderColor="red" centerColor="black" />
 53 |     );
 54 |     expect(wrapper).toHaveStyleRule("border", "2px solid red");
 55 |     expect(wrapper).toHaveStyleRule("background-color", "black");
 56 |   });
 57 | 
 58 |   it("sets default border and background color of ClockCenter when props is not passed", () => {
 59 |     const wrapper = mount(<ClockCenter />);
 60 |     expect(wrapper).toHaveStyleRule("border", "2px solid #fff");
 61 |     expect(wrapper).toHaveStyleRule("background-color", "#459cff");
 62 |   });
 63 | 
 64 |   it("sets styling of ClockHand when props passed - second", () => {
 65 |     const wrapper = mount(
 66 |       <ClockHand type="second" handColors={{ second: "#fff" }} />
 67 |     );
 68 |     expect(wrapper).toHaveStyleRule("width", "60%");
 69 |     expect(wrapper).toHaveStyleRule("margin-left", "40%");
 70 |     expect(wrapper).toHaveStyleRule("background-color", "#fff");
 71 |   });
 72 | 
 73 |   it("sets default styling of ClockHand when props is not passed - second", () => {
 74 |     const wrapper = mount(<ClockHand type="second" />);
 75 |     expect(wrapper).toHaveStyleRule("width", "60%");
 76 |     expect(wrapper).toHaveStyleRule("margin-left", "40%");
 77 |     expect(wrapper).toHaveStyleRule("background-color", "#d81c7a");
 78 |   });
 79 | 
 80 |   it("sets styling of ClockHand when props passed - minute", () => {
 81 |     const wrapper = mount(
 82 |       <ClockHand type="minute" handColors={{ minute: "red" }} />
 83 |     );
 84 |     expect(wrapper).toHaveStyleRule("width", "45%");
 85 |     expect(wrapper).toHaveStyleRule("margin-left", "45%");
 86 |     expect(wrapper).toHaveStyleRule("background-color", "red");
 87 |   });
 88 | 
 89 |   it("sets default styling of ClockHand when props is not passed - minute", () => {
 90 |     const wrapper = mount(<ClockHand type="minute" />);
 91 |     expect(wrapper).toHaveStyleRule("width", "45%");
 92 |     expect(wrapper).toHaveStyleRule("margin-left", "45%");
 93 |     expect(wrapper).toHaveStyleRule("background-color", "#fff");
 94 |   });
 95 | 
 96 |   it("sets styling of ClockHand when props passed - hour", () => {
 97 |     const wrapper = mount(
 98 |       <ClockHand type="hour" handColors={{ hour: "red" }} />
 99 |     );
100 |     expect(wrapper).toHaveStyleRule("width", "35%");
101 |     expect(wrapper).toHaveStyleRule("margin-left", "45%");
102 |     expect(wrapper).toHaveStyleRule("background-color", "red");
103 |   });
104 | 
105 |   it("sets default styling of ClockHand when props is not passed - hour", () => {
106 |     const wrapper = mount(<ClockHand type="hour" />);
107 |     expect(wrapper).toHaveStyleRule("width", "35%");
108 |     expect(wrapper).toHaveStyleRule("margin-left", "45%");
109 |     expect(wrapper).toHaveStyleRule("background-color", "#fff");
110 |   });
111 | 
112 |   it("sets transform and transition of ClockHandContainer when props passed", () => {
113 |     const wrapper = mount(<ClockHandContainer handAngle="300" />);
114 |     expect(wrapper).toHaveStyleRule("transform", "rotate(300deg)");
115 |     expect(wrapper).toHaveStyleRule(
116 |       "transition",
117 |       "transform 250ms ease-in-out"
118 |     );
119 |   });
120 | 
121 |   it("sets default transform of ClockHandContainer when props is not passed", () => {
122 |     const wrapper = mount(<ClockHandContainer />);
123 |     expect(wrapper).toHaveStyleRule("transform", "rotate(deg)");
124 |     expect(wrapper).toHaveStyleRule("transition", undefined);
125 |   });
126 | });
127 | 


--------------------------------------------------------------------------------
/src/__tests__/Form.unit.test.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { mount } from "enzyme";
  3 | import "../setupTests";
  4 | 
  5 | import Form from '../Form.js';
  6 | 
  7 | describe('Form component', () => {
  8 |     const renderSpy = jest.spyOn(Form.prototype, "render");
  9 |     const mockCustomizeClock = jest.fn();
 10 | 
 11 |     let defaultOptions = {
 12 |         useCustomTime: false,
 13 |         width: "300px",
 14 |         border: true,
 15 |         borderColor: "#2e2e2e",
 16 |         baseColor: "#17a2b8",
 17 |         centerColor: "#459cff",
 18 |         centerBorderColor: "#fff",
 19 |         handColors: {
 20 |             second: "#d81c7a",
 21 |             minute: "#fff",
 22 |             hour: "#fff"
 23 |         },
 24 |     }
 25 | 
 26 |     afterEach(() => {
 27 |         renderSpy.mockClear();
 28 |         mockCustomizeClock.mockClear();
 29 |     })
 30 | 
 31 |     it('mounts the component', () => {
 32 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 33 |         expect(renderSpy).toBeCalledTimes(1);
 34 |     });
 35 | 
 36 |     it('sets clock size when changed', () => {
 37 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 38 |         wrapper.find('input#clock-size').simulate('change', { target: { name: 'width', value: 100 } });
 39 |         expect(wrapper.state('options').width).toEqual('100px');
 40 |     });
 41 | 
 42 |     it('sets custom time to true when changed', () => {
 43 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 44 |         wrapper.find('input#custom-time-yes').simulate('change');
 45 |         expect(wrapper.state('options').useCustomTime).toEqual(true);
 46 |     });
 47 | 
 48 |     it('sets custom time to false when changed', () => {
 49 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 50 |         wrapper.find('input#custom-time-yes').simulate('change');
 51 |         expect(wrapper.state('options').useCustomTime).toEqual(true);
 52 |         wrapper.find('input#custom-time-no').simulate('change');
 53 |         expect(wrapper.state('options').useCustomTime).toEqual(false);
 54 |     });
 55 | 
 56 |     it('sets border to false when changed', () => {
 57 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 58 |         wrapper.find('input#border-req-no').simulate('change');
 59 |         expect(wrapper.state('options').border).toEqual(false);
 60 |     });
 61 | 
 62 |     it('sets border to true when changed', () => {
 63 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 64 |         wrapper.find('input#border-req-no').simulate('change');
 65 |         expect(wrapper.state('options').border).toEqual(false);
 66 |         wrapper.find('input#border-req-yes').simulate('change');
 67 |         expect(wrapper.state('options').border).toEqual(true);
 68 |     });
 69 | 
 70 |     it('sets clock border color when changed', () => {
 71 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 72 |         wrapper.setProps({
 73 |             customizeClock: mockCustomizeClock
 74 |         });
 75 |         wrapper.find('input[name="borderColor"]').simulate('change', { target: { name: 'borderColor', value: '#fff' } });
 76 |         expect(wrapper.state('options').borderColor).toEqual('#fff');
 77 |         expect(mockCustomizeClock).toBeCalledTimes(1);
 78 |     });
 79 | 
 80 |     it('sets clock base color when changed', () => {
 81 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 82 |         wrapper.setProps({
 83 |             customizeClock: mockCustomizeClock
 84 |         });
 85 |         wrapper.find('input[name="baseColor"]').simulate('change', { target: { name: 'baseColor', value: '#fff' } });
 86 |         expect(wrapper.state('options').baseColor).toEqual('#fff');
 87 |         expect(mockCustomizeClock).toBeCalledTimes(1);
 88 |     });
 89 | 
 90 |     it('sets clock center color when changed', () => {
 91 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
 92 |         wrapper.setProps({
 93 |             customizeClock: mockCustomizeClock
 94 |         });
 95 |         wrapper.find('input[name="centerColor"]').simulate('change', { target: { name: 'centerColor', value: '#fff' } });
 96 |         expect(wrapper.state('options').centerColor).toEqual('#fff');
 97 |         expect(mockCustomizeClock).toBeCalledTimes(1);
 98 |     });
 99 | 
100 |     it('sets clock center border color when changed', () => {
101 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
102 |         wrapper.setProps({
103 |             customizeClock: mockCustomizeClock
104 |         });
105 |         wrapper.find('input[name="centerBorderColor"]').simulate('change', { target: { name: 'centerBorderColor', value: '#fff' } });
106 |         expect(wrapper.state('options').centerBorderColor).toEqual('#fff');
107 |         expect(mockCustomizeClock).toBeCalledTimes(1);
108 |     });
109 | 
110 |     it('sets clock second hand color when changed', () => {
111 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
112 |         wrapper.setProps({
113 |             customizeClock: mockCustomizeClock
114 |         });
115 |         wrapper.find('input[name="second"]').simulate('change', { target: { name: 'second', value: '#fff' } });
116 |         expect(wrapper.state('options').handColors.second).toEqual('#fff');
117 |         expect(mockCustomizeClock).toBeCalledTimes(1);
118 |     });
119 | 
120 |     it('sets clock minute hand color when changed', () => {
121 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
122 |         wrapper.setProps({
123 |             customizeClock: mockCustomizeClock
124 |         });
125 |         wrapper.find('input[name="minute"]').simulate('change', { target: { name: 'minute', value: '#fff' } });
126 |         expect(wrapper.state('options').handColors.minute).toEqual('#fff');
127 |         expect(mockCustomizeClock).toBeCalledTimes(1);
128 |     });
129 | 
130 |     it('sets clock hour hand border color when changed', () => {
131 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
132 |         wrapper.setProps({
133 |             customizeClock: mockCustomizeClock
134 |         });
135 |         wrapper.find('input[name="hour"]').simulate('change', { target: { name: 'hour', value: '#fff' } });
136 |         expect(wrapper.state('options').handColors.hour).toEqual('#fff');
137 |         expect(mockCustomizeClock).toBeCalledTimes(1);
138 |     });
139 | 
140 |     it('sets random clock colors Surprise Me button is clicked', () => {
141 |         const wrapper = mount(<Form defaultOptions={defaultOptions} />);
142 |         wrapper.setProps({
143 |             customizeClock: mockCustomizeClock
144 |         });
145 |         wrapper.find('button#surprise').simulate('click')
146 | 
147 |         expect(wrapper.state('options').borderColor).not.toEqual('#2e2e2e');
148 |         expect(wrapper.state('options').baseColor).not.toEqual('#17a2b8');
149 |         expect(wrapper.state('options').centerColor).not.toEqual('#459cff');
150 |         expect(wrapper.state('options').centerBorderColor).not.toEqual('#fff');
151 |         expect(wrapper.state('options').handColors.second).not.toEqual('#d81c7a');
152 |         expect(wrapper.state('options').handColors.minute).not.toEqual('#fff');
153 |         expect(wrapper.state('options').handColors.hour).not.toEqual('#fff');
154 |         expect(mockCustomizeClock).toBeCalledTimes(1);
155 |     });
156 | });


--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/Form.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Form component matches snapshot 1`] = `
  4 | <form
  5 |   className="col-12 form"
  6 | >
  7 |   <div
  8 |     className="row col-12"
  9 |   >
 10 |     <h4>
 11 |       <i>
 12 |         Clock Options
 13 |       </i>
 14 |     </h4>
 15 |   </div>
 16 |   <div
 17 |     className="row"
 18 |   >
 19 |     <div
 20 |       className="col-4"
 21 |     >
 22 |       <div
 23 |         className="form-group"
 24 |       >
 25 |         <label
 26 |           htmlFor="clock-size"
 27 |         >
 28 |           Clock size (px): 
 29 |           300px
 30 |         </label>
 31 |         <input
 32 |           className="form-control-range"
 33 |           id="clock-size"
 34 |           max="500"
 35 |           min="50"
 36 |           onChange={[Function]}
 37 |           type="range"
 38 |         />
 39 |       </div>
 40 |       <div
 41 |         className="form-group"
 42 |       >
 43 |         <label
 44 |           htmlFor="border-req-radios"
 45 |         >
 46 |           Use Custom Time?
 47 |         </label>
 48 |         <div
 49 |           className="form-check"
 50 |           name="custom-time-radios"
 51 |         >
 52 |           <input
 53 |             checked={false}
 54 |             className="form-check-input"
 55 |             id="custom-time-yes"
 56 |             name="custom-time-yes"
 57 |             onChange={[Function]}
 58 |             type="radio"
 59 |             value="yes"
 60 |           />
 61 |           <label
 62 |             className="form-check-label"
 63 |             htmlFor="custom-time-yes"
 64 |           >
 65 |             Yes
 66 |           </label>
 67 |         </div>
 68 |         <div
 69 |           className="form-check"
 70 |         >
 71 |           <input
 72 |             checked={true}
 73 |             className="form-check-input"
 74 |             id="custom-time-no"
 75 |             name="custom-time-no"
 76 |             onChange={[Function]}
 77 |             type="radio"
 78 |             value="no"
 79 |           />
 80 |           <label
 81 |             className="form-check-label"
 82 |             htmlFor="custom-time-no"
 83 |           >
 84 |             No
 85 |           </label>
 86 |         </div>
 87 |       </div>
 88 |       <div
 89 |         className="form-group"
 90 |       >
 91 |         <label
 92 |           htmlFor="border-req-radios"
 93 |         >
 94 |           Border Required?
 95 |         </label>
 96 |         <div
 97 |           className="form-check"
 98 |           name="border-req-radios"
 99 |         >
100 |           <input
101 |             checked={true}
102 |             className="form-check-input"
103 |             id="border-req-yes"
104 |             name="border-req-yes"
105 |             onChange={[Function]}
106 |             type="radio"
107 |             value="yes"
108 |           />
109 |           <label
110 |             className="form-check-label"
111 |             htmlFor="border-req-yes"
112 |           >
113 |             Yes
114 |           </label>
115 |         </div>
116 |         <div
117 |           className="form-check"
118 |         >
119 |           <input
120 |             checked={false}
121 |             className="form-check-input"
122 |             id="border-req-no"
123 |             name="bored-req-no"
124 |             onChange={[Function]}
125 |             type="radio"
126 |             value="no"
127 |           />
128 |           <label
129 |             className="form-check-label"
130 |             htmlFor="bored-req-no"
131 |           >
132 |             No
133 |           </label>
134 |         </div>
135 |       </div>
136 |     </div>
137 |     <div
138 |       className="col-4"
139 |     >
140 |       <div
141 |         className="form-group"
142 |       >
143 |         <label
144 |           htmlFor="clock-border-color"
145 |         >
146 |           Clock border color
147 |         </label>
148 |         <input
149 |           className="form-control"
150 |           id="clock-border-color"
151 |           maxLength="6"
152 |           name="borderColor"
153 |           onChange={[Function]}
154 |           placeholder="2e2e2e"
155 |           type="color"
156 |           value="#2e2e2e"
157 |         />
158 |       </div>
159 |       <div
160 |         className="form-group"
161 |       >
162 |         <label
163 |           htmlFor="clock-base-color"
164 |         >
165 |           Clock base color
166 |         </label>
167 |         <input
168 |           className="form-control"
169 |           id="clock-base-color"
170 |           maxLength="6"
171 |           name="baseColor"
172 |           onChange={[Function]}
173 |           placeholder="17a2b8"
174 |           type="color"
175 |           value="#17a2b8"
176 |         />
177 |       </div>
178 |       <div
179 |         className="form-group"
180 |       >
181 |         <label
182 |           htmlFor="clock-center-color"
183 |         >
184 |           Clock center color
185 |         </label>
186 |         <input
187 |           className="form-control"
188 |           id="clock-center-color"
189 |           maxLength="6"
190 |           name="centerColor"
191 |           onChange={[Function]}
192 |           placeholder="459cff"
193 |           type="color"
194 |           value="#459cff"
195 |         />
196 |       </div>
197 |       <div
198 |         className="form-group"
199 |       >
200 |         <label
201 |           htmlFor="clock-center-border-color"
202 |         >
203 |           Clock center border color
204 |         </label>
205 |         <input
206 |           className="form-control"
207 |           id="clock-center-border-color"
208 |           maxLength="6"
209 |           name="centerBorderColor"
210 |           onChange={[Function]}
211 |           placeholder="fff"
212 |           type="color"
213 |           value="#fff"
214 |         />
215 |       </div>
216 |     </div>
217 |     <div
218 |       className="col-4"
219 |     >
220 |       <div
221 |         className="form-group"
222 |       >
223 |         <label
224 |           htmlFor="second-hand-color"
225 |         >
226 |           Second Hand color
227 |         </label>
228 |         <input
229 |           className="form-control"
230 |           id="second-hand-color"
231 |           maxLength="6"
232 |           name="second"
233 |           onChange={[Function]}
234 |           placeholder="d81c7a"
235 |           type="color"
236 |           value="#d81c7a"
237 |         />
238 |       </div>
239 |       <div
240 |         className="form-group"
241 |       >
242 |         <label
243 |           htmlFor="minute-hand-color"
244 |         >
245 |           Minute Hand color
246 |         </label>
247 |         <input
248 |           className="form-control"
249 |           id="minute-hand-color"
250 |           maxLength="6"
251 |           name="minute"
252 |           onChange={[Function]}
253 |           placeholder="fff"
254 |           type="color"
255 |           value="#fff"
256 |         />
257 |       </div>
258 |       <div
259 |         className="form-group"
260 |       >
261 |         <label
262 |           htmlFor="hour-hand-color"
263 |         >
264 |           Hour Hand color
265 |         </label>
266 |         <input
267 |           className="form-control"
268 |           id="hour-hand-color"
269 |           maxLength="6"
270 |           name="hour"
271 |           onChange={[Function]}
272 |           placeholder="fff"
273 |           type="color"
274 |           value="#fff"
275 |         />
276 |       </div>
277 |     </div>
278 |   </div>
279 |   <div
280 |     className="row col-12 d-flex justify-content-center"
281 |   >
282 |     <button
283 |       className="btn btn-primary"
284 |       id="build"
285 |       onClick={[Function]}
286 |       type="submit"
287 |     >
288 |       Build Clock!
289 |     </button>
290 |      
291 |     <button
292 |       className="btn btn-warning"
293 |       id="surprise"
294 |       onClick={[Function]}
295 |       type="submit"
296 |     >
297 |       Surprise Me!
298 |     </button>
299 |   </div>
300 | </form>
301 | `;
302 | 


--------------------------------------------------------------------------------
/src/Form.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | 
  3 | class Form extends Component {
  4 | 
  5 |     constructor(props) {
  6 |         super(props);
  7 |         this.state = {
  8 |             options: this.props.defaultOptions
  9 |         };
 10 |     }
 11 | 
 12 |     setClockSize = (event) => {
 13 |         event.preventDefault();
 14 |         let width = event.target.value + 'px';
 15 |         this.setState({ options: { ...this.state.options, width } })
 16 |     }
 17 | 
 18 |     setCustomTime = (event) => {
 19 |         let useCustomTime = event.target.value === 'yes';
 20 |         this.setState({ options: { ...this.state.options, useCustomTime } })
 21 |     }
 22 | 
 23 | 
 24 |     setBorderReq = (event) => {
 25 |         let border = event.target.value === 'yes';
 26 |         this.setState({ options: { ...this.state.options, border } })
 27 |     }
 28 | 
 29 |     setColor = (event) => {
 30 |         event.preventDefault();
 31 |         this.setState({ options: { ...this.state.options, [event.target.name]: event.target.value } })
 32 |         this.props.customizeClock(this.state.options);
 33 |     }
 34 | 
 35 |     setHandColor = (event) => {
 36 |         event.preventDefault();
 37 |         let handColors = { ...this.state.options.handColors };
 38 |         handColors[event.target.name] = event.target.value;
 39 |         this.setState({ options: { ...this.state.options, handColors } });
 40 |         this.props.customizeClock(this.state.options);
 41 |     }
 42 | 
 43 |     buildClock = (event) => {
 44 |         event.preventDefault();
 45 |         event.stopPropagation();
 46 |         this.props.customizeClock(this.state.options);
 47 |     }
 48 | 
 49 |     randomClock = (event) => {
 50 |         event.preventDefault();
 51 |         event.stopPropagation();
 52 |         let baseColor = this.getRandomColor();
 53 |         let borderColor = this.getRandomColor();
 54 |         let centerColor = this.getRandomColor();
 55 |         let centerBorderColor = this.getRandomColor();
 56 |         let handColors = {
 57 |             second: this.getRandomColor(),
 58 |             minute: this.getRandomColor(),
 59 |             hour: this.getRandomColor()
 60 |         }
 61 |         this.setState({ options: { ...this.state.options, borderColor, baseColor, centerColor, centerBorderColor, handColors } }, () => this.buildClock(event));
 62 |     }
 63 | 
 64 |     getRandomColor() {
 65 |         var letters = '0123456789ABCDEF';
 66 |         var colorCode = '#';
 67 |         for (var i = 0; i < 6; i++) {
 68 |             colorCode += letters[Math.floor(Math.random() * 16)];
 69 |         }
 70 |         return colorCode;
 71 |     }
 72 | 
 73 |     render() {
 74 |         return (
 75 |             <form className="col-12 form">
 76 |                 <div className="row col-12">
 77 |                     <h4><i>Clock Options</i></h4>
 78 |                 </div>
 79 |                 <div className="row">
 80 |                     <div className="col-4">
 81 |                         <div className="form-group">
 82 |                             <label htmlFor="clock-size">Clock size (px): {this.state.options.width}</label>
 83 |                             <input type="range" min="50" max="500" className="form-control-range" id="clock-size" onChange={this.setClockSize} />
 84 |                         </div>
 85 |                         <div className="form-group">
 86 |                             <label htmlFor="border-req-radios">Use Custom Time?</label>
 87 |                             <div className="form-check" name="custom-time-radios">
 88 |                                 <input className="form-check-input" type="radio" name="custom-time-yes" id="custom-time-yes" value="yes" checked={this.state.options.useCustomTime === true} onChange={this.setCustomTime} />
 89 |                                 <label className="form-check-label" htmlFor="custom-time-yes">Yes</label>
 90 |                             </div>
 91 |                             <div className="form-check">
 92 |                                 <input className="form-check-input" type="radio" name="custom-time-no" id="custom-time-no" value="no" checked={this.state.options.useCustomTime === false} onChange={this.setCustomTime} />
 93 |                                 <label className="form-check-label" htmlFor="custom-time-no">No</label>
 94 |                             </div>
 95 |                         </div>
 96 |                         <div className="form-group">
 97 |                             <label htmlFor="border-req-radios">Border Required?</label>
 98 |                             <div className="form-check" name="border-req-radios">
 99 |                                 <input className="form-check-input" type="radio" name="border-req-yes" id="border-req-yes" value="yes" checked={this.state.options.border === true} onChange={this.setBorderReq} />
100 |                                 <label className="form-check-label" htmlFor="border-req-yes">Yes</label>
101 |                             </div>
102 |                             <div className="form-check">
103 |                                 <input className="form-check-input" type="radio" name="bored-req-no" id="border-req-no" value="no" checked={this.state.options.border === false} onChange={this.setBorderReq} />
104 |                                 <label className="form-check-label" htmlFor="bored-req-no">No</label>
105 |                             </div>
106 |                         </div>
107 |                     </div>
108 |                     <div className="col-4">
109 |                         <div className="form-group">
110 |                             <label htmlFor="clock-border-color">Clock border color</label>
111 |                             <input type="color" name="borderColor" className="form-control" id="clock-border-color" maxLength="6" placeholder="2e2e2e" onChange={this.setColor} value={this.state.options.borderColor} />
112 |                         </div>
113 |                         <div className="form-group">
114 |                             <label htmlFor="clock-base-color">Clock base color</label>
115 |                             <input type="color" name="baseColor" className="form-control" id="clock-base-color" maxLength="6" placeholder="17a2b8" onChange={this.setColor} value={this.state.options.baseColor} />
116 |                         </div>
117 |                         <div className="form-group">
118 |                             <label htmlFor="clock-center-color">Clock center color</label>
119 |                             <input type="color" name="centerColor" className="form-control" id="clock-center-color" maxLength="6" placeholder="459cff" onChange={this.setColor} value={this.state.options.centerColor} />
120 |                         </div>
121 |                         <div className="form-group">
122 |                             <label htmlFor="clock-center-border-color">Clock center border color</label>
123 |                             <input type="color" name="centerBorderColor" className="form-control" id="clock-center-border-color" maxLength="6" placeholder="fff" onChange={this.setColor} value={this.state.options.centerBorderColor}></input>
124 |                         </div>
125 |                     </div>
126 |                     <div className="col-4">
127 |                         <div className="form-group">
128 |                             <label htmlFor="second-hand-color">Second Hand color</label>
129 |                             <input type="color" name="second" className="form-control" id="second-hand-color" maxLength="6" placeholder="d81c7a" onChange={this.setHandColor} value={this.state.options.handColors.second} />
130 |                         </div>
131 |                         <div className="form-group">
132 |                             <label htmlFor="minute-hand-color">Minute Hand color</label>
133 |                             <input type="color" name="minute" className="form-control" id="minute-hand-color" maxLength="6" placeholder="fff" onChange={this.setHandColor} value={this.state.options.handColors.minute} />
134 |                         </div>
135 |                         <div className="form-group">
136 |                             <label htmlFor="hour-hand-color">Hour Hand color</label>
137 |                             <input type="color" name="hour" className="form-control" id="hour-hand-color" maxLength="6" placeholder="fff" onChange={this.setHandColor} value={this.state.options.handColors.hour} />
138 |                         </div>
139 |                     </div>
140 |                 </div>
141 |                 <div className="row col-12 d-flex justify-content-center">
142 |                     <button type="submit" id="build" className="btn btn-primary" onClick={this.buildClock}>Build Clock!</button>
143 |                     &nbsp;
144 |                     <button type="submit" id="surprise" className="btn btn-warning" onClick={this.randomClock}>Surprise Me!</button>
145 |                 </div>
146 |             </form>
147 |         )
148 |     }
149 | 
150 | }
151 | 
152 | export default Form;


--------------------------------------------------------------------------------