├── .editorconfig
├── .gitignore
├── .npmignore
├── .prettierrc.json
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── example
    ├── index.html
    ├── index.tsx
    └── style.css
├── jest.config.js
├── jest.setup.js
├── lib
    └── index.js
├── package-lock.json
├── package.json
├── src
    ├── __tests__
    │   ├── __snapshots__
    │   │   └── circle-slider.test.tsx.snap
    │   └── circle-slider.test.tsx
    ├── circle-slider
    │   ├── helpers
    │   │   ├── circle-slider-helper
    │   │   │   └── index.ts
    │   │   ├── mouse-helper
    │   │   │   └── index.ts
    │   │   └── path-generator
    │   │   │   └── index.ts
    │   └── index.tsx
    └── index.ts
├── tsconfig.jest.json
├── tsconfig.json
├── tslint.json
└── webpack.config.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | [*]
 2 | charset=utf-8
 3 | end_of_line=crlf
 4 | insert_final_newline=true
 5 | indent_style=space
 6 | indent_size=4
 7 | 
 8 | [{.babelrc,.stylelintrc,.eslintrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
 9 | indent_style=space
10 | indent_size=2
11 | 
12 | [tslint.json]
13 | indent_style=space
14 | indent_size=2
15 | 
16 | [{.analysis_options,*.yml,*.yaml}]
17 | indent_style=space
18 | indent_size=2
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # General files
 2 | *~
 3 | .DS_Store
 4 | 
 5 | # Build files
 6 | /styleguide/
 7 | /dist/
 8 | /build/
 9 | .cache
10 | 
11 | # Development stuff
12 | node_modules
13 | *.sublime-workspace
14 | *.pyc
15 | .vagrant
16 | .idea
17 | .vscode
18 | npm-debug.*
19 | 
20 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
21 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
22 | 
23 | # User-specific stuff:
24 | .idea/**/workspace.xml
25 | .idea/**/tasks.xml
26 | 
27 | # Sensitive or high-churn files:
28 | .idea/**/dataSources/
29 | .idea/**/dataSources.ids
30 | .idea/**/dataSources.xml
31 | .idea/**/dataSources.local.xml
32 | .idea/**/sqlDataSources.xml
33 | .idea/**/dynamic.xml
34 | .idea/**/uiDesigner.xml
35 | 
36 | # Gradle:
37 | .idea/**/gradle.xml
38 | .idea/**/libraries
39 | 
40 | # Mongo Explorer plugin:
41 | .idea/**/mongoSettings.xml
42 | 
43 | ## File-based project format:
44 | *.iws
45 | 
46 | ## Plugin-specific files:
47 | 
48 | # IntelliJ
49 | /out/
50 | 
51 | # mpeltonen/sbt-idea plugin
52 | .idea_modules/
53 | 
54 | # JIRA plugin
55 | atlassian-ide-plugin.xml
56 | 
57 | # Crashlytics plugin (for Android Studio and IntelliJ)
58 | com_crashlytics_export_strings.xml
59 | crashlytics.properties
60 | crashlytics-build.properties
61 | fabric.properties
62 | 
63 | # Logs
64 | logs
65 | *.log
66 | npm-debug.log*
67 | 
68 | /coverage/
69 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .cache
4 | example


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |     "tabWidth": 4,
3 |     "trailingComma": "all",
4 |     "printWidth": 80
5 | }
6 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |     - stable
 4 | script:
 5 |     - npm run build
 6 | deploy:
 7 |     provider: pages
 8 |     local-dir: dist
 9 |     skip_cleanup: true
10 |     github_token: $GITHUB_TOKEN
11 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 | 
3 | All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
4 | 
5 | ## 1.6.2
6 | 
7 | -   Fixed issues to make the slider work in IE
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "Software"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in
12 | all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
15 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🕹️ react-circle-slider
  2 | 
  3 | Circle Slider Component for React.js
  4 | 
  5 | ![Imgur](https://i.imgur.com/4RdYfaL.gif)
  6 | 
  7 | ## ⚡ Functionality
  8 | 
  9 | -   Simple to use
 10 | -   No extra dependencies
 11 | -   Highly customizable
 12 | -   Defining min and max values
 13 | -   Defining step size
 14 | -   Defining gradient color
 15 | -   Touch support
 16 | -   Tooltip support
 17 | -   Style based: no images / SVGs
 18 | 
 19 | ## Examples
 20 | 
 21 | -   To check out live examples visit https://dmitrymorozoff.github.io/react-circle-slider/
 22 | 
 23 | ## 🚀 Getting started
 24 | 
 25 | Install `react-circle-slider` using npm.
 26 | 
 27 | ### `npm install --save react-circle-slider`
 28 | 
 29 | 
 30 | You can also test the components locally by cloning this repo and doing the following steps:
 31 | 
 32 | ## 🔲 NPM-scripts
 33 | 
 34 | Install dependencies from package.json:
 35 | 
 36 | ### `npm install`
 37 | 
 38 | Runs the app in the development mode.<br>
 39 | Open [http://localhost:1234](http://localhost:1234) to view it in the browser.
 40 | 
 41 | ### `npm run dev`
 42 | 
 43 | Run linter
 44 | 
 45 | ### `npm run lint`
 46 | 
 47 | Start tests followed by jest
 48 | 
 49 | ### `npm run test`
 50 | 
 51 | ## Usage
 52 | 
 53 | ```jsx
 54 | import React from "react";
 55 | import ReactDOM from "react-dom";
 56 | import { CircleSlider } from "react-circle-slider";
 57 | 
 58 | export class App extends React.Component {
 59 |     constructor(props) {
 60 |         super(props);
 61 |         this.state = { value: 0 };
 62 |     }
 63 | 
 64 |     handleChange = value => {
 65 |         console.log(`Changed value ${value}`);
 66 |         this.setState({ value });
 67 |     };
 68 | 
 69 |     handleChangeRange = event => {
 70 |         this.setState({
 71 |             value: event.target.valueAsNumber,
 72 |         });
 73 |     };
 74 | 
 75 |     render() {
 76 |         const { value } = this.state;
 77 |         return (
 78 |             <CircleSlider value={value} onChange={this.handleChange} />
 79 |         );
 80 |     }
 81 | }
 82 | 
 83 | ReactDOM.render(<App />, document.getElementById("root"));
 84 | ```
 85 | 
 86 | ## 📃 Props
 87 | 
 88 | | Props             | Type     | Default   | Description                                                    |
 89 | | ----------------- | :------- | --------- | -------------------------------------------------------------- |
 90 | | size              | Number   | 180       | size of the slider in px                                       |
 91 | | stepSize          | Number   | 1         | value to be added or subtracted on each step the slider makes. |
 92 | | knobRadius        | Number   | null      | knob radius in px                                              |
 93 | | circleWidth       | Number   | null      | width of circle in px                                          |
 94 | | progressWidth     | Number   | null      | progress curve width in px                                     |
 95 | | min               | Number   | 0         | the minimum value of the slider                                |
 96 | | max               | Number   | 100       | the maximum value of the slider                                |
 97 | | value             | Number   | 0         | value                                                          |
 98 | | circleColor       | String   | `#e9eaee` | color of slider                                                |
 99 | | progressColor     | String   | `#007aff` | color of progress curve                                        |
100 | | gradientColorFrom | String   | NOOP      | start gradient color of progress curve                         |
101 | | gradientColorTo   | String   | NOOP      | end gradient color progress curve                              |
102 | | knobColor         | String   | `#fff`    | color of knob                                                  |
103 | | disabled          | Boolean  | false     | disabled status                                                |
104 | | shadow            | Boolean  | true      | shadow on knob                                                 |
105 | | showTooltip       | Boolean  | false     | tooltip                                                        |
106 | | showPercentage    | Boolean  | false     | percentage on tooltip                                          |
107 | | tooltipSize       | Number   | 32        | size of tooltip                                                |
108 | | tooltipColor      | String   | `#333`    | color of tooltip                                               |
109 | | onChange          | Function | NOOP      | when slider is moved, `onChange` is triggered.                 |
110 | 
111 | ## 💡 Todo
112 | 
113 | - [ ] Keyboard support
114 | - [ ] Mouse scroll support
115 | - [ ] Accessibility 
116 | 
117 | ## 💻 Contributing
118 | 
119 | - For bugs and feature requests, please create an issue
120 | - Lint and test your code
121 | - Pull requests and ⭐ stars are always welcome
122 | 
123 | ## License
124 | 
125 | MIT


--------------------------------------------------------------------------------
/example/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.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" href="./style.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
10 |     <title>react-circle-slider</title>
11 |     <style>
12 |         * {
13 |             padding: 0;
14 |             margin: 0;
15 |         }
16 | 
17 |         body {
18 |             font-family: Lato, Arial;
19 |             display: flex;
20 |             justify-content: center;
21 |             width: 100vw;
22 |         }
23 | 
24 |         #root {
25 |             width: 100%;
26 |             height: 100%;
27 |         }
28 |     </style>
29 | </head>
30 | 
31 | <body>
32 |     <div id='root'>
33 |     </div>
34 |     <script src='index.tsx'></script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/example/index.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as ReactDOM from "react-dom";
  3 | import SyntaxHighlighter from "react-syntax-highlighter/prism";
  4 | import { ghcolors } from "react-syntax-highlighter/styles/prism";
  5 | import { CircleSlider } from "../src/circle-slider";
  6 | 
  7 | interface IState {
  8 |     value: number;
  9 | }
 10 | 
 11 | export class App extends React.Component<{}, IState> {
 12 |     constructor(props: any) {
 13 |         super(props);
 14 |         this.state = { value: 50 };
 15 |     }
 16 |     public handleChange = (value: any) => {
 17 |         this.setState({ value });
 18 |     };
 19 | 
 20 |     public handleChangeRange = (event: any) => {
 21 |         this.setState({
 22 |             value: event.target.valueAsNumber,
 23 |         });
 24 |     };
 25 | 
 26 |     public render() {
 27 |         const { value } = this.state;
 28 |         const codeString = `npm install --save react-circle-slider`;
 29 |         return (
 30 |             <div className="outer">
 31 |                 <div className="header">
 32 |                     <h1 className="header-title">react-circle-slider</h1>
 33 |                     <div className="header-subtitle">
 34 |                         Circle Slider Component for React.js
 35 |                     </div>
 36 |                 </div>
 37 |                 <div className="container">
 38 |                     <div className="code">
 39 |                         <SyntaxHighlighter
 40 |                             wrapLines={true}
 41 |                             language="jsx"
 42 |                             style={ghcolors}
 43 |                         >
 44 |                             {codeString}
 45 |                         </SyntaxHighlighter>
 46 |                     </div>
 47 |                     <h3>Default</h3>
 48 |                     <div className="wrapper">
 49 |                         <div className="slider">
 50 |                             <CircleSlider
 51 |                                 value={value}
 52 |                                 onChange={this.handleChange}
 53 |                             />
 54 |                             <div className="title">{value}</div>
 55 |                             <div className="range">
 56 |                                 <input
 57 |                                     min={0}
 58 |                                     max={100}
 59 |                                     id="control"
 60 |                                     type="range"
 61 |                                     value={value}
 62 |                                     onChange={this.handleChangeRange}
 63 |                                 />
 64 |                             </div>{" "}
 65 |                         </div>
 66 |                         <div className="code">
 67 |                             <SyntaxHighlighter
 68 |                                 wrapLines={true}
 69 |                                 language="jsx"
 70 |                                 style={ghcolors}
 71 |                             >
 72 |                                 {`<CircleSlider value={value}/>`}
 73 |                             </SyntaxHighlighter>
 74 |                         </div>
 75 |                     </div>
 76 |                     <h3>Custom progress color</h3>
 77 |                     <div className="wrapper">
 78 |                         <div className="slider">
 79 |                             <CircleSlider
 80 |                                 value={value}
 81 |                                 onChange={this.handleChange}
 82 |                                 progressColor="#6C7290"
 83 |                             />
 84 |                             <div className="title">{value}</div>
 85 |                             <div className="range">
 86 |                                 <input
 87 |                                     min={0}
 88 |                                     max={100}
 89 |                                     id="control"
 90 |                                     type="range"
 91 |                                     value={value}
 92 |                                     onChange={this.handleChangeRange}
 93 |                                 />
 94 |                             </div>
 95 |                         </div>
 96 |                         <div className="code">
 97 |                             <SyntaxHighlighter language="jsx" style={ghcolors}>
 98 |                                 {`<CircleSlider
 99 |     value={value}
100 |     progressColor="#6C7290"
101 | />`}
102 |                             </SyntaxHighlighter>
103 |                         </div>
104 |                     </div>
105 |                     <h3>Custom gradient color</h3>
106 |                     <div className="wrapper">
107 |                         <div className="slider">
108 |                             <CircleSlider
109 |                                 value={value}
110 |                                 size={150}
111 |                                 onChange={this.handleChange}
112 |                                 showTooltip={true}
113 |                                 gradientColorFrom="#FEA346"
114 |                                 gradientColorTo="#F8616D"
115 |                             />
116 |                             <div className="title">{value}</div>
117 |                             <div className="range">
118 |                                 <input
119 |                                     min={0}
120 |                                     max={100}
121 |                                     id="control"
122 |                                     type="range"
123 |                                     value={value}
124 |                                     onChange={this.handleChangeRange}
125 |                                 />
126 |                             </div>
127 |                         </div>
128 |                         <div className="code">
129 |                             <SyntaxHighlighter language="jsx" style={ghcolors}>
130 |                                 {`<CircleSlider
131 |     value={value}
132 |     size={150}
133 |     showTooltip={true}
134 |     gradientColorFrom="#FEA346"
135 |     gradientColorTo="#F8616D"
136 | />`}
137 |                             </SyntaxHighlighter>
138 |                         </div>
139 |                     </div>
140 |                     <h3>Colors</h3>
141 |                     <div className="wrapper">
142 |                         <div className="slider">
143 |                             <CircleSlider
144 |                                 value={value}
145 |                                 size={120}
146 |                                 knobRadius={15}
147 |                                 progressWidth={20}
148 |                                 circleWidth={3}
149 |                                 onChange={this.handleChange}
150 |                                 progressColor="#6656B6"
151 |                                 tooltipColor="#6ab6e1"
152 |                                 showTooltip={true}
153 |                                 tooltipSize={26}
154 |                             />
155 |                             <div className="title">{value}</div>
156 |                             <div className="range">
157 |                                 <input
158 |                                     min={0}
159 |                                     max={100}
160 |                                     id="control"
161 |                                     type="range"
162 |                                     value={value}
163 |                                     onChange={this.handleChangeRange}
164 |                                 />
165 |                             </div>
166 |                         </div>
167 |                         <div className="code">
168 |                             <SyntaxHighlighter language="jsx" style={ghcolors}>
169 |                                 {`<CircleSlider
170 |     value={value}
171 |     size={120}
172 |     knobRadius={15}
173 |     progressWidth={20}
174 |     circleWidth={3}
175 |     progressColor="#6656B6"
176 |     tooltipColor="#6ab6e1"
177 |     showTooltip={true}
178 |     tooltipSize={26}
179 | />`}
180 |                             </SyntaxHighlighter>
181 |                         </div>
182 |                     </div>
183 |                     <h3>Shadow</h3>
184 |                     <div className="wrapper">
185 |                         <div className="slider">
186 |                             <CircleSlider
187 |                                 value={value}
188 |                                 size={150}
189 |                                 shadow={false}
190 |                                 knobColor="#ff5722"
191 |                                 onChange={this.handleChange}
192 |                                 showTooltip={true}
193 |                                 showPercentage={true}
194 |                                 progressColor="#FDB11B"
195 |                             />
196 |                             <div className="title">{value}</div>
197 |                             <div className="range">
198 |                                 <input
199 |                                     min={0}
200 |                                     max={100}
201 |                                     id="control"
202 |                                     type="range"
203 |                                     value={value}
204 |                                     onChange={this.handleChangeRange}
205 |                                 />
206 |                             </div>
207 |                         </div>
208 |                         <div className="code">
209 |                             <SyntaxHighlighter language="jsx" style={ghcolors}>
210 |                                 {`<CircleSlider
211 |     value={value}
212 |     size={150}
213 |     shadow={false}
214 |     knobColor="#ff5722"
215 |     showTooltip={true}
216 |     showPercentage={true}
217 |     progressColor="#FDB11B"
218 | />`}
219 |                             </SyntaxHighlighter>
220 |                         </div>
221 |                     </div>
222 |                     <h3>Sizes</h3>
223 |                     <div className="wrapper">
224 |                         <div className="slider">
225 |                             <CircleSlider
226 |                                 value={value}
227 |                                 size={140}
228 |                                 knobRadius={20}
229 |                                 progressWidth={20}
230 |                                 circleWidth={10}
231 |                                 onChange={this.handleChange}
232 |                                 progressColor="#5DC9A3"
233 |                             />
234 |                             <div className="title">{value}</div>
235 |                             <div className="range">
236 |                                 <input
237 |                                     min={0}
238 |                                     max={100}
239 |                                     id="control"
240 |                                     type="range"
241 |                                     value={value}
242 |                                     onChange={this.handleChangeRange}
243 |                                 />
244 |                             </div>
245 |                         </div>
246 |                         <div className="code">
247 |                             <SyntaxHighlighter language="jsx" style={ghcolors}>
248 |                                 {`<CircleSlider
249 |     value={value}
250 |     size={140}
251 |     knobRadius={20}
252 |     progressWidth={20}
253 |     circleWidth={10}
254 |     progressColor="#5DC9A3"
255 | />`}
256 |                             </SyntaxHighlighter>
257 |                         </div>
258 |                     </div>
259 |                     <h3>Exact sizes</h3>
260 |                     <div className="wrapper">
261 |                         <div className="slider">
262 |                             <CircleSlider
263 |                                 value={value}
264 |                                 size={140}
265 |                                 knobRadius={15}
266 |                                 progressWidth={10}
267 |                                 circleWidth={25}
268 |                                 onChange={this.handleChange}
269 |                                 progressColor="#6AB6E1"
270 |                             />
271 |                             <div className="title">{value}</div>
272 |                             <div className="range">
273 |                                 <input
274 |                                     min={0}
275 |                                     max={100}
276 |                                     id="control"
277 |                                     type="range"
278 |                                     value={value}
279 |                                     onChange={this.handleChangeRange}
280 |                                 />
281 |                             </div>
282 |                         </div>
283 |                         <div className="code">
284 |                             <SyntaxHighlighter language="jsx" style={ghcolors}>
285 |                                 {`<CircleSlider
286 |     value={value}
287 |     size={140}
288 |     knobRadius={15}
289 |     progressWidth={10}
290 |     circleWidth={25}
291 |     progressColor="#6AB6E1"
292 | />`}
293 |                             </SyntaxHighlighter>
294 |                         </div>
295 |                     </div>
296 |                 </div>
297 |             </div>
298 |         );
299 |     }
300 | }
301 | 
302 | ReactDOM.render(<App />, document.getElementById("root"));
303 | 


--------------------------------------------------------------------------------
/example/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     display: flex;
 3 |     flex-wrap: wrap;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     margin: 0 auto;
 7 |     width: 900px;
 8 | }
 9 | 
10 | .header {
11 |     display: flex;
12 |     flex-direction: column;
13 |     width: 100%;
14 |     align-items: center;
15 |     justify-content: center;
16 |     height: 200px;
17 |     background-color: #017aff;
18 | }
19 | 
20 | .header-title {
21 |     color: #fff;
22 |     font-size: 2.125rem;
23 |     letter-spacing: 1rem;
24 |     text-transform: uppercase;
25 |     text-align: center;
26 |     margin-bottom: 1rem;
27 | }
28 | 
29 | .header-subtitle {
30 |     color: #fff;
31 |     font-size: 16px;
32 |     text-align: center;
33 |     opacity: 0.6;
34 | }
35 | 
36 | .wrapper {
37 |     width: 100%;
38 |     display: flex;
39 |     align-items: center;
40 |     margin: 2rem 0;
41 |     border: 1px solid #e9eaee;
42 |     padding: 2rem;
43 |     box-sizing: border-box;
44 |     box-shadow: 0 70px 63px -60px #eeeeee;
45 | }
46 | 
47 | .slider {
48 |     width: 40%;
49 |     display: flex;
50 |     flex-direction: column;
51 |     justify-content: center;
52 |     align-items: center;
53 | }
54 | 
55 | .title {
56 |     text-align: center;
57 |     font-family: sans-serif;
58 |     margin-top: 0.5rem;
59 |     font-size: 20px;
60 | }
61 | 
62 | .range {
63 |     display: flex;
64 |     justify-content: center;
65 |     margin-top: 1rem;
66 | }
67 | 
68 | .code {
69 |     width: 100%;
70 |     margin: 1rem 0 1.5rem 0;
71 |     font-size: 18px;
72 | }
73 | 
74 | .code>pre>code {
75 |     line-height: 1.5rem !important;
76 | }
77 | 
78 | h3 {
79 |     font-weight: normal;
80 |     font-size: 28px;
81 | }


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | const TEST_REGEX = "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$";
 2 | 
 3 | module.exports = {
 4 |     setupFiles: ["<rootDir>/jest.setup.js"],
 5 |     snapshotSerializers: ["<rootDir>/node_modules/enzyme-to-json/serializer"],
 6 |     globals: {
 7 |         "ts-jest": {
 8 |             // useBabelrc: true,
 9 |             tsConfigFile: "tsconfig.jest.json",
10 |         },
11 |     },
12 |     testRegex: TEST_REGEX,
13 |     transform: {
14 |         "^.+\\.tsx?$": "ts-jest",
15 |     },
16 |     testPathIgnorePatterns: ["<rootDir>/node_modules/"],
17 |     moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
18 | };
19 | 


--------------------------------------------------------------------------------
/jest.setup.js:
--------------------------------------------------------------------------------
1 | const Enzyme = require("enzyme");
2 | const Adapter = require("enzyme-adapter-react-16");
3 | 
4 | Enzyme.configure({ adapter: new Adapter() });
5 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | !function(e,t){for(var r in t)e[r]=t[r]}(exports,function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(1);t.CircleSlider=n.CircleSlider},function(e,t,r){"use strict";var n,o=this&&this.__extends||(n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)},function(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)});Object.defineProperty(t,"__esModule",{value:!0});var i=r(2),u=r(5),l=r(6),a=r(7),s=function(e){function t(t){var r=e.call(this,t)||this;r.updateAngle=function(e){r.circleSliderHelper.updateStepIndexFromAngle(e);var t=r.circleSliderHelper.getCurrentStep();r.setState({angle:e,currentStepValue:t}),r.props.onChange(t)},r.updateSlider=function(){var e=r.mouseHelper.getNewSliderAngle();Math.abs(e-r.state.angle)<Math.PI&&r.updateAngle(e)},r.updateSliderFromProps=function(e){var t=r.props.stepSize,n=Math.round(e/t)*t;r.circleSliderHelper.updateStepIndexFromValue(n),r.setState({angle:r.circleSliderHelper.getAngle(),currentStepValue:n})},r.getCenter=function(){return r.props.size/2},r.getAngle=function(){return r.state.angle+Math.PI/2},r.getPointPosition=function(){var e=r.getCenter(),t=r.getAngle();return{x:e+r.radius*Math.cos(t),y:e+r.radius*Math.sin(t)}},r.getStepsArray=function(e,t){for(var n=[],o=0;o<r.countSteps;o++)n.push(e+o*t);return n},r.getPath=function(){var e=r.getCenter(),t=r.getAngle()<1.5*Math.PI?0:1,n=r.getPointPosition(),o=n.x,i=n.y;return a.pathGenerator(e,r.radius,t,o,i)},r.handleMouseMove=function(e){e.preventDefault(),r.setState({isMouseMove:!0}),r.mouseHelper.setPosition(e),r.updateSlider()},r.handleMouseUp=function(e){e.preventDefault(),r.setState({isMouseMove:!1}),window.removeEventListener("mousemove",r.handleMouseMove),window.removeEventListener("mouseup",r.handleMouseUp)},r.handleMouseDown=function(e){r.props.disabled||(e.preventDefault(),window.addEventListener("mousemove",r.handleMouseMove),window.addEventListener("mouseup",r.handleMouseUp))},r.handleTouchMove=function(e){var t=e.targetTouches,n=t.length,o=t.item(n-1);r.mouseHelper.setPosition(o),r.updateSlider()},r.handleTouchUp=function(){window.removeEventListener("touchmove",r.handleTouchMove),window.removeEventListener("touchend",r.handleTouchUp)},r.handleTouchStart=function(){r.props.disabled||(window.addEventListener("touchmove",r.handleTouchMove),window.addEventListener("touchend",r.handleTouchUp))},r.state={angle:0,currentStepValue:0,isMouseMove:!1};var n=r.props,o=n.min,i=n.max,l=n.stepSize,s=n.value,c=n.circleWidth,p=n.progressWidth,f=n.knobRadius;return r.maxLineWidth=Math.max(c,p),r.radius=r.getCenter()-Math.max(r.maxLineWidth,2*f)/2,r.countSteps=1+(i-o)/l,r.stepsArray=r.getStepsArray(o,l),r.circleSliderHelper=new u.CircleSliderHelper(r.stepsArray,s),r}return o(t,e),t.prototype.componentDidMount=function(){this.mouseHelper=new l.MouseHelper(this.svg),this.setState({angle:this.circleSliderHelper.getAngle(),currentStepValue:this.circleSliderHelper.getCurrentStep()})},t.prototype.componentWillReceiveProps=function(e){this.props.value===e.value||this.state.isMouseMove||this.updateSliderFromProps(e.value)},t.prototype.render=function(){var e=this,t=this.props,r=t.size,n=t.progressColor,o=t.gradientColorFrom,u=t.gradientColorTo,l=t.knobColor,a=t.circleColor,s=t.disabled,c=t.shadow,p=t.circleWidth,f=t.progressWidth,d=t.knobRadius,h=t.showTooltip,y=t.showPercentage,v=t.tooltipSize,m=t.tooltipColor,g=this.state.currentStepValue,S=c?"5px":"0px",b=this.getPointPosition(),x=b.x,w=b.y,P=this.getCenter(),M=o&&u;return i.createElement("svg",{ref:function(t){return e.svg=t},width:r+"px",height:r+"px",viewBox:"0 0 "+r+" "+r,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,style:{padding:S,boxSizing:"border-box"}},i.createElement("g",null,i.createElement("circle",{style:{strokeWidth:p,stroke:a,fill:"none"},r:this.radius,cx:P,cy:P}),M&&i.createElement("defs",null,i.createElement("linearGradient",{id:"gradient",x1:"0",x2:"0",y1:"0",y2:"1"},i.createElement("stop",{offset:"0%",stopColor:o}),i.createElement("stop",{offset:"100%",stopColor:u}))),i.createElement("path",{style:{strokeLinecap:"round",strokeWidth:f,stroke:M?"url(#gradient)":n,fill:"none"},d:this.getPath()}),c&&i.createElement("filter",{id:"dropShadow",filterUnits:"userSpaceOnUse"},i.createElement("feGaussianBlur",{in:"SourceAlpha",stdDeviation:"3"}),i.createElement("feOffset",{dx:"2",dy:"2"}),i.createElement("feComponentTransfer",null,i.createElement("feFuncA",{type:"linear",slope:"0.3"})),i.createElement("feMerge",null,i.createElement("feMergeNode",null),i.createElement("feMergeNode",{in:"SourceGraphic"}))),i.createElement("circle",{style:{fill:l,cursor:s?"not-allowed":"pointer"},filter:c?"url(#dropShadow)":"none",r:d,cx:x,cy:w}),h&&i.createElement("text",{x:r/2,y:r/2+v/3,textAnchor:"middle",fontSize:v,fontFamily:"Arial",fill:m},y?g+"%":g)))},t.defaultProps={circleColor:"#e9eaee",size:180,value:0,progressColor:"#007aff",knobColor:"#fff",circleWidth:5,progressWidth:20,knobRadius:20,stepSize:1,min:0,max:100,disabled:!1,shadow:!0,showTooltip:!1,showPercentage:!1,tooltipSize:32,tooltipColor:"#333",onChange:function(){return{}}},t}(i.Component);t.CircleSlider=s},function(e,t,r){"use strict";e.exports=r(3)},function(e,t,r){"use strict";
 2 | /** @license React v16.7.0
 3 |  * react.production.min.js
 4 |  *
 5 |  * Copyright (c) Facebook, Inc. and its affiliates.
 6 |  *
 7 |  * This source code is licensed under the MIT license found in the
 8 |  * LICENSE file in the root directory of this source tree.
 9 |  */var n=r(4),o="function"==typeof Symbol&&Symbol.for,i=o?Symbol.for("react.element"):60103,u=o?Symbol.for("react.portal"):60106,l=o?Symbol.for("react.fragment"):60107,a=o?Symbol.for("react.strict_mode"):60108,s=o?Symbol.for("react.profiler"):60114,c=o?Symbol.for("react.provider"):60109,p=o?Symbol.for("react.context"):60110,f=o?Symbol.for("react.concurrent_mode"):60111,d=o?Symbol.for("react.forward_ref"):60112,h=o?Symbol.for("react.suspense"):60113,y=o?Symbol.for("react.memo"):60115,v=o?Symbol.for("react.lazy"):60116,m="function"==typeof Symbol&&Symbol.iterator;function g(e){for(var t=arguments.length-1,r="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=0;n<t;n++)r+="&args[]="+encodeURIComponent(arguments[n+1]);!function(e,t,r,n,o,i,u,l){if(!e){if(e=void 0,void 0===t)e=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var a=[r,n,o,i,u,l],s=0;(e=Error(t.replace(/%s/g,function(){return a[s++]}))).name="Invariant Violation"}throw e.framesToPop=1,e}}(!1,"Minified React error #"+e+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",r)}var S={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},b={};function x(e,t,r){this.props=e,this.context=t,this.refs=b,this.updater=r||S}function w(){}function P(e,t,r){this.props=e,this.context=t,this.refs=b,this.updater=r||S}x.prototype.isReactComponent={},x.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e&&g("85"),this.updater.enqueueSetState(this,e,t,"setState")},x.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},w.prototype=x.prototype;var M=P.prototype=new w;M.constructor=P,n(M,x.prototype),M.isPureReactComponent=!0;var _={current:null,currentDispatcher:null},C=Object.prototype.hasOwnProperty,O={key:!0,ref:!0,__self:!0,__source:!0};function j(e,t,r){var n=void 0,o={},u=null,l=null;if(null!=t)for(n in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(u=""+t.key),t)C.call(t,n)&&!O.hasOwnProperty(n)&&(o[n]=t[n]);var a=arguments.length-2;if(1===a)o.children=r;else if(1<a){for(var s=Array(a),c=0;c<a;c++)s[c]=arguments[c+2];o.children=s}if(e&&e.defaultProps)for(n in a=e.defaultProps)void 0===o[n]&&(o[n]=a[n]);return{$$typeof:i,type:e,key:u,ref:l,props:o,_owner:_.current}}function E(e){return"object"==typeof e&&null!==e&&e.$$typeof===i}var A=/\/+/g,k=[];function I(e,t,r,n){if(k.length){var o=k.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function $(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>k.length&&k.push(e)}function T(e,t,r){return null==e?0:function e(t,r,n,o){var l=typeof t;"undefined"!==l&&"boolean"!==l||(t=null);var a=!1;if(null===t)a=!0;else switch(l){case"string":case"number":a=!0;break;case"object":switch(t.$$typeof){case i:case u:a=!0}}if(a)return n(o,t,""===r?"."+F(t,0):r),1;if(a=0,r=""===r?".":r+":",Array.isArray(t))for(var s=0;s<t.length;s++){var c=r+F(l=t[s],s);a+=e(l,c,n,o)}else if(c=null===t||"object"!=typeof t?null:"function"==typeof(c=m&&t[m]||t["@@iterator"])?c:null,"function"==typeof c)for(t=c.call(t),s=0;!(l=t.next()).done;)a+=e(l=l.value,c=r+F(l,s++),n,o);else"object"===l&&g("31","[object Object]"==(n=""+t)?"object with keys {"+Object.keys(t).join(", ")+"}":n,"");return a}(e,"",t,r)}function F(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return t[e]})}(e.key):t.toString(36)}function R(e,t){e.func.call(e.context,t,e.count++)}function H(e,t,r){var n=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?L(e,n,r,function(e){return e}):null!=e&&(E(e)&&(e=function(e,t){return{$$typeof:i,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(A,"$&/")+"/")+r)),n.push(e))}function L(e,t,r,n,o){var i="";null!=r&&(i=(""+r).replace(A,"$&/")+"/"),T(e,H,t=I(t,i,n,o)),$(t)}var U={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return L(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;T(e,R,t=I(null,null,t,r)),$(t)},count:function(e){return T(e,function(){return null},null)},toArray:function(e){var t=[];return L(e,t,null,function(e){return e}),t},only:function(e){return E(e)||g("143"),e}},createRef:function(){return{current:null}},Component:x,PureComponent:P,createContext:function(e,t){return void 0===t&&(t=null),(e={$$typeof:p,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:c,_context:e},e.Consumer=e},forwardRef:function(e){return{$$typeof:d,render:e}},lazy:function(e){return{$$typeof:v,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:y,type:e,compare:void 0===t?null:t}},Fragment:l,StrictMode:a,Suspense:h,createElement:j,cloneElement:function(e,t,r){null==e&&g("267",e);var o=void 0,u=n({},e.props),l=e.key,a=e.ref,s=e._owner;if(null!=t){void 0!==t.ref&&(a=t.ref,s=_.current),void 0!==t.key&&(l=""+t.key);var c=void 0;for(o in e.type&&e.type.defaultProps&&(c=e.type.defaultProps),t)C.call(t,o)&&!O.hasOwnProperty(o)&&(u[o]=void 0===t[o]&&void 0!==c?c[o]:t[o])}if(1===(o=arguments.length-2))u.children=r;else if(1<o){c=Array(o);for(var p=0;p<o;p++)c[p]=arguments[p+2];u.children=c}return{$$typeof:i,type:e.type,key:l,ref:a,props:u,_owner:s}},createFactory:function(e){var t=j.bind(null,e);return t.type=e,t},isValidElement:E,version:"16.7.0",unstable_ConcurrentMode:f,unstable_Profiler:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:_,assign:n}},z={default:U},W=z&&U||z;e.exports=W.default||W},function(e,t,r){"use strict";
10 | /*
11 | object-assign
12 | (c) Sindre Sorhus
13 | @license MIT
14 | */var n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(e){n[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,u,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),a=1;a<arguments.length;a++){for(var s in r=Object(arguments[a]))o.call(r,s)&&(l[s]=r[s]);if(n){u=n(r);for(var c=0;c<u.length;c++)i.call(r,u[c])&&(l[u[c]]=r[u[c]])}}return l}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){var r=this;this.setCurrentStepIndexFromArray=function(e){for(var t=0;t<r.countSteps;t++)if(e<=r.stepsArray[t])return r.stepIndex=t,!0;return r.stepIndex=r.countSteps,!1},this.stepsArray=e,this.countSteps=this.stepsArray.length-1,this.stepIndex=0,this.setCurrentStepIndexFromArray(t)}return e.prototype.getAngle=function(){return Math.min(this.getAnglePoint()*this.stepIndex,2*Math.PI-Number.EPSILON)-1e-5},e.prototype.getCurrentStep=function(){return this.stepsArray[this.stepIndex]},e.prototype.updateStepIndexFromValue=function(e){this.setCurrentStepIndexFromArray(e)||(this.stepIndex=this.countSteps)},e.prototype.updateStepIndexFromAngle=function(e){var t=Math.round(e/this.getAnglePoint());t<this.countSteps?this.stepIndex=t:this.stepIndex=this.countSteps},e.prototype.getAnglePoint=function(){return 2*Math.PI/this.countSteps},e}();t.CircleSliderHelper=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e){this.container=e,this.setPosition({x:0,y:0})}return e.prototype.setPosition=function(e){if(this.container){var t=this.container.getBoundingClientRect(),r=t.width;this.center=r/2,this.relativeX=e.clientX-t.left,this.relativeY=e.clientY-t.top}},e.prototype.getNewSliderAngle=function(){return(Math.atan2(this.relativeY-this.center,this.relativeX-this.center)+3*Math.PI/2)%(2*Math.PI)},e}();t.MouseHelper=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.pathGenerator=function(e,t,r,n,o){var i=[];return i.push("M"+e),i.push(e+t),i.push("A"),i.push(t),i.push(t),i.push(0),i.push(r),i.push(1),i.push(n),i.push(o),i.join(" ")}}]));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "react-circle-slider",
 3 |     "version": "1.6.2",
 4 |     "description": "Circle Slider UI component for React",
 5 |     "main": "./lib/index.js",
 6 |     "repository": {
 7 |         "type": "git",
 8 |         "url": "https://github.com/dmitrymorozoff/react-circle-slider"
 9 |     },
10 |     "scripts": {
11 |         "dev": "parcel --no-cache example/index.html",
12 |         "build": "npm run test && npm run lint && npm run clean && webpack --mode production && parcel build --no-cache --public-url ./ example/index.html",
13 |         "prettier": "prettier --config .prettierrc.json --write src/**/*.ts",
14 |         "lint": "tslint -c tslint.json 'src/**/*.ts' 'tests/**/*.spec.ts'",
15 |         "test:watch": "jest --watch",
16 |         "test": "jest",
17 |         "clean": "rimraf lib && rimraf dist"
18 |     },
19 |     "keywords": [
20 |         "react-slider",
21 |         "round-slider",
22 |         "circle-slider",
23 |         "slider",
24 |         "circular-slider"
25 |     ],
26 |     "author": "Morozov Dmitry <dimemorozovy@yandex.ru>",
27 |     "license": "MIT",
28 |     "devDependencies": {
29 |         "@babel/core": "^7.2.2",
30 |         "@babel/preset-env": "^7.2.3",
31 |         "@types/enzyme": "^3.1.13",
32 |         "@types/enzyme-adapter-react-16": "^1.0.3",
33 |         "@types/enzyme-to-json": "^1.5.2",
34 |         "@types/jest": "^23.3.1",
35 |         "@types/react": "^16.4.11",
36 |         "@types/react-dom": "^16.0.7",
37 |         "@types/react-syntax-highlighter": "0.0.6",
38 |         "awesome-typescript-loader": "^5.2.1",
39 |         "babel-loader": "^8.0.5",
40 |         "enzyme": "^3.5.0",
41 |         "enzyme-adapter-react-16": "^1.2.0",
42 |         "enzyme-to-json": "^3.3.4",
43 |         "jest": "^23.5.0",
44 |         "parcel-bundler": "^1.9.7",
45 |         "prettier": "^1.14.2",
46 |         "react-addons-test-utils": "^15.5.1",
47 |         "react-syntax-highlighter": "^9.0.1",
48 |         "rimraf": "^2.6.2",
49 |         "sinon": "^6.1.5",
50 |         "source-map-loader": "^0.2.4",
51 |         "ts-jest": "^23.1.4",
52 |         "ts-loader": "^4.5.0",
53 |         "tslint": "^5.11.0",
54 |         "tslint-config-prettier": "^1.14.0",
55 |         "tslint-react": "^3.6.0",
56 |         "typescript": "^3.0.1",
57 |         "uglifyjs-webpack-plugin": "^1.3.0",
58 |         "webpack": "^4.28.4",
59 |         "webpack-cli": "^3.1.0"
60 |     },
61 |     "dependencies": {
62 |         "react": "^16.7.0",
63 |         "react-dom": "^16.0.0"
64 |     }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/circle-slider.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`circle slider should render a default circle slider 1`] = `
 4 | <svg
 5 |   height="180px"
 6 |   onMouseDown={[Function]}
 7 |   onTouchStart={[Function]}
 8 |   style={
 9 |     Object {
10 |       "boxSizing": "border-box",
11 |       "padding": "5px",
12 |     }
13 |   }
14 |   viewBox="0 0 180 180"
15 |   width="180px"
16 | >
17 |   <g>
18 |     <circle
19 |       cx={90}
20 |       cy={90}
21 |       r={70}
22 |       style={
23 |         Object {
24 |           "fill": "none",
25 |           "stroke": "#e9eaee",
26 |           "strokeWidth": 5,
27 |         }
28 |       }
29 |     />
30 |     <path
31 |       d="M90 160 A 70 70 0 0 1 90.0007 159.99999999649998"
32 |       style={
33 |         Object {
34 |           "fill": "none",
35 |           "stroke": "#007aff",
36 |           "strokeLinecap": "round",
37 |           "strokeWidth": 20,
38 |         }
39 |       }
40 |     />
41 |     <filter
42 |       filterUnits="userSpaceOnUse"
43 |       id="dropShadow"
44 |     >
45 |       <feGaussianBlur
46 |         in="SourceAlpha"
47 |         stdDeviation="3"
48 |       />
49 |       <feOffset
50 |         dx="2"
51 |         dy="2"
52 |       />
53 |       <feComponentTransfer>
54 |         <feFuncA
55 |           slope="0.3"
56 |           type="linear"
57 |         />
58 |       </feComponentTransfer>
59 |       <feMerge>
60 |         <feMergeNode />
61 |         <feMergeNode
62 |           in="SourceGraphic"
63 |         />
64 |       </feMerge>
65 |     </filter>
66 |     <circle
67 |       cx={90.0007}
68 |       cy={159.99999999649998}
69 |       filter="url(#dropShadow)"
70 |       r={20}
71 |       style={
72 |         Object {
73 |           "cursor": "pointer",
74 |           "fill": "#fff",
75 |         }
76 |       }
77 |     />
78 |   </g>
79 | </svg>
80 | `;
81 | 


--------------------------------------------------------------------------------
/src/__tests__/circle-slider.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { CircleSlider } from "../circle-slider";
 3 | import { shallow, mount } from "enzyme";
 4 | 
 5 | describe("circle slider", () => {
 6 |     const props = {
 7 |         circleColor: "#EDEDED",
 8 |         size: 100,
 9 |         value: 0,
10 |         progressColor: "#ADA1FB",
11 |         knobColor: "#ADA1FB",
12 |         circleWidthInit: 9,
13 |         progressWidthInit: 7,
14 |         knobRadiusInit: 6,
15 |         stepSize: 1,
16 |         min: 0,
17 |         max: 100,
18 |         onChange: jest.fn(),
19 |     };
20 | 
21 |     it("circle slider should render a svg", () => {
22 |         const circleSlider = shallow(<CircleSlider {...props} />);
23 | 
24 |         expect(circleSlider.find("svg")).toHaveLength(1);
25 |     });
26 | 
27 |     it("circle slider should render with props", () => {
28 |         const circleSlider = mount(<CircleSlider {...props} />);
29 | 
30 |         expect(circleSlider.props().circleColor).toEqual("#EDEDED");
31 |         expect(circleSlider.props().value).toEqual(0);
32 |         expect(circleSlider.props().progressColor).toEqual("#ADA1FB");
33 |         expect(circleSlider.props().knobColor).toEqual("#ADA1FB");
34 |         expect(circleSlider.props().circleWidthInit).toEqual(9);
35 |         expect(circleSlider.props().progressWidthInit).toEqual(7);
36 |         expect(circleSlider.props().knobRadiusInit).toEqual(6);
37 |         expect(circleSlider.props().stepSize).toEqual(1);
38 |         expect(circleSlider.props().min).toEqual(0);
39 |         expect(circleSlider.props().max).toEqual(100);
40 |     });
41 | 
42 |     it("circle slider should call onChange", () => {
43 |         const circleSlider = shallow(<CircleSlider {...this.props} />);
44 |         (circleSlider.instance() as any).updateAngle();
45 | 
46 |         expect(props.onChange).toHaveBeenCalled;
47 |     });
48 | 
49 |     it("circle slider should call onChange", () => {
50 |         const circleSlider = shallow(<CircleSlider {...this.props} />);
51 |         (circleSlider.instance() as any).updateAngle();
52 | 
53 |         expect(props.onChange).toHaveBeenCalled;
54 |     });
55 | 
56 |     it("circle slider should call mouseDown", () => {
57 |         const circleSlider = shallow(<CircleSlider {...this.props} />);
58 |         const accuracy = 0.00001;
59 |         circleSlider.simulate("mousedown", {
60 |             preventDefault: () => {},
61 |         });
62 | 
63 |         expect(circleSlider.state("angle")).toEqual(0 - accuracy);
64 |         expect(circleSlider.state("currentStepValue")).toEqual(0);
65 |     });
66 | 
67 |     it("circle slider current step value to be equals 5", () => {
68 |         const circleSlider = shallow(<CircleSlider {...this.props} />);
69 |         const instance = circleSlider.instance() as any;
70 |         instance.updateAngle(0.3125);
71 | 
72 |         expect(circleSlider.state("currentStepValue")).toEqual(5);
73 |     });
74 | 
75 |     it("should render a default circle slider", () => {
76 |         const circleSlider = shallow(<CircleSlider {...this.props} />);
77 |         expect(circleSlider).toMatchSnapshot();
78 |     });
79 | });
80 | 


--------------------------------------------------------------------------------
/src/circle-slider/helpers/circle-slider-helper/index.ts:
--------------------------------------------------------------------------------
 1 | interface INumber {
 2 |     EPSILON: any;
 3 | }
 4 | declare var Number: INumber;
 5 | 
 6 | export class CircleSliderHelper {
 7 |     private stepsArray: number[];
 8 |     private stepIndex: number;
 9 |     private countSteps: number;
10 | 
11 |     constructor(stepsArray: number[], initialValue: any) {
12 |         this.stepsArray = stepsArray;
13 |         this.countSteps = this.stepsArray.length - 1;
14 |         this.stepIndex = 0;
15 |         this.setCurrentStepIndexFromArray(initialValue);
16 |     }
17 | 
18 |     public getEpsilon() {
19 |         let epsilon = 1.0;
20 |         while (1.0 + 0.5 * epsilon !== 1.0) {
21 |             epsilon *= 0.5;
22 |         }
23 |         return epsilon;
24 |     }
25 | 
26 |     public getAngle(): number {
27 |         const accuracy = 0.00001;
28 |         const epsilon = Number.EPSILON || this.getEpsilon();
29 |         return (
30 |             Math.min(
31 |                 this.getAnglePoint() * this.stepIndex,
32 |                 2 * Math.PI - epsilon,
33 |             ) - accuracy
34 |         );
35 |     }
36 | 
37 |     public getCurrentStep(): number {
38 |         return this.stepsArray[this.stepIndex];
39 |     }
40 | 
41 |     public updateStepIndexFromValue(value: number) {
42 |         const isSetValue = this.setCurrentStepIndexFromArray(value);
43 |         if (isSetValue) {
44 |             return;
45 |         }
46 |         this.stepIndex = this.countSteps;
47 |     }
48 | 
49 |     public updateStepIndexFromAngle(angle: number) {
50 |         const stepIndex = Math.round(angle / this.getAnglePoint());
51 |         if (stepIndex < this.countSteps) {
52 |             this.stepIndex = stepIndex;
53 |             return;
54 |         }
55 |         this.stepIndex = this.countSteps;
56 |     }
57 | 
58 |     public setCurrentStepIndexFromArray = (value: number): boolean => {
59 |         for (let i = 0; i < this.countSteps; i++) {
60 |             if (value <= this.stepsArray[i]) {
61 |                 this.stepIndex = i;
62 |                 return true;
63 |             }
64 |         }
65 |         this.stepIndex = this.countSteps;
66 |         return false;
67 |     };
68 | 
69 |     public getAnglePoint(): number {
70 |         return (Math.PI * 2) / this.countSteps;
71 |     }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/circle-slider/helpers/mouse-helper/index.ts:
--------------------------------------------------------------------------------
 1 | export class MouseHelper {
 2 |     private container: any;
 3 |     private center!: number;
 4 |     private relativeX!: number;
 5 |     private relativeY!: number;
 6 | 
 7 |     constructor(container: any) {
 8 |         this.container = container;
 9 |         this.setPosition({ x: 0, y: 0 });
10 |     }
11 | 
12 |     public setPosition(event: any): void {
13 |         if (!this.container) {
14 |             return;
15 |         }
16 |         const rectSize = this.container.getBoundingClientRect();
17 |         const width = rectSize.width;
18 |         this.center = width / 2;
19 |         this.relativeX = event.clientX - rectSize.left;
20 |         this.relativeY = event.clientY - rectSize.top;
21 |     }
22 | 
23 |     public getNewSliderAngle(): number {
24 |         const angleBetweenTwoVectors = Math.atan2(
25 |             this.relativeY - this.center,
26 |             this.relativeX - this.center,
27 |         );
28 |         return (angleBetweenTwoVectors + (3 * Math.PI) / 2) % (2 * Math.PI);
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/circle-slider/helpers/path-generator/index.ts:
--------------------------------------------------------------------------------
 1 | export const pathGenerator = (
 2 |     center: number,
 3 |     radius: number,
 4 |     direction: number,
 5 |     x: number,
 6 |     y: number,
 7 | ): string => {
 8 |     const points = [];
 9 |     points.push("M" + center);
10 |     points.push(center + radius);
11 |     points.push("A");
12 |     points.push(radius);
13 |     points.push(radius);
14 |     points.push(0);
15 |     points.push(direction);
16 |     points.push(1);
17 |     points.push(x);
18 |     points.push(y);
19 |     return points.join(" ");
20 | };
21 | 


--------------------------------------------------------------------------------
/src/circle-slider/index.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { CircleSliderHelper } from "./helpers/circle-slider-helper";
  3 | import { MouseHelper } from "./helpers/mouse-helper";
  4 | import { pathGenerator } from "./helpers/path-generator";
  5 | 
  6 | interface IProps {
  7 |     size?: number;
  8 |     circleWidth?: number;
  9 |     progressWidth?: number;
 10 |     knobRadius?: number;
 11 |     value?: number;
 12 |     stepSize?: number;
 13 |     min?: number;
 14 |     max?: number;
 15 |     circleColor?: string;
 16 |     progressColor?: string;
 17 |     gradientColorFrom?: string;
 18 |     gradientColorTo?: string;
 19 |     knobColor?: string;
 20 |     onChange: ((value?: number) => void);
 21 |     disabled?: boolean;
 22 |     shadow?: boolean;
 23 |     showTooltip?: boolean;
 24 |     showPercentage?: boolean;
 25 |     tooltipSize?: number;
 26 |     tooltipColor?: string;
 27 | }
 28 | 
 29 | interface IPoint {
 30 |     x: number;
 31 |     y: number;
 32 | }
 33 | 
 34 | interface IState {
 35 |     angle: number;
 36 |     currentStepValue: number;
 37 |     isMouseMove: boolean;
 38 | }
 39 | 
 40 | export class CircleSlider extends React.Component<IProps, IState> {
 41 |     public static defaultProps: Partial<IProps> = {
 42 |         circleColor: "#e9eaee",
 43 |         size: 180,
 44 |         value: 0,
 45 |         progressColor: "#007aff",
 46 |         knobColor: "#fff",
 47 |         circleWidth: 5,
 48 |         progressWidth: 20,
 49 |         knobRadius: 20,
 50 |         stepSize: 1,
 51 |         min: 0,
 52 |         max: 100,
 53 |         disabled: false,
 54 |         shadow: true,
 55 |         showTooltip: false,
 56 |         showPercentage: false,
 57 |         tooltipSize: 32,
 58 |         tooltipColor: "#333",
 59 |         onChange: () => ({}),
 60 |     };
 61 |     private maxLineWidth: number;
 62 |     private radius: number;
 63 |     private countSteps: number;
 64 |     private stepsArray: number[];
 65 |     private circleSliderHelper: CircleSliderHelper;
 66 |     private mouseHelper!: MouseHelper;
 67 |     private svg: any;
 68 | 
 69 |     constructor(props: IProps) {
 70 |         super(props);
 71 |         this.state = {
 72 |             angle: 0,
 73 |             currentStepValue: 0,
 74 |             isMouseMove: false,
 75 |         };
 76 | 
 77 |         const {
 78 |             min,
 79 |             max,
 80 |             stepSize,
 81 |             value,
 82 |             circleWidth,
 83 |             progressWidth,
 84 |             knobRadius,
 85 |         } = this.props;
 86 | 
 87 |         this.maxLineWidth = Math.max(circleWidth!, progressWidth!);
 88 |         this.radius =
 89 |             this.getCenter() - Math.max(this.maxLineWidth, knobRadius! * 2) / 2;
 90 |         this.countSteps = 1 + (max! - min!) / stepSize!;
 91 |         this.stepsArray = this.getStepsArray(min!, stepSize!);
 92 | 
 93 |         this.circleSliderHelper = new CircleSliderHelper(
 94 |             this.stepsArray,
 95 |             value,
 96 |         );
 97 |     }
 98 | 
 99 |     public componentDidMount() {
100 |         this.mouseHelper = new MouseHelper(this.svg);
101 |         this.setState({
102 |             angle: this.circleSliderHelper.getAngle(),
103 |             currentStepValue: this.circleSliderHelper.getCurrentStep(),
104 |         });
105 |     }
106 | 
107 |     public componentWillReceiveProps(nextProps: any) {
108 |         if (this.props.value !== nextProps.value && !this.state.isMouseMove) {
109 |             this.updateSliderFromProps(nextProps.value);
110 |         }
111 |     }
112 | 
113 |     public updateAngle = (angle: number): void => {
114 |         this.circleSliderHelper.updateStepIndexFromAngle(angle);
115 |         const currentStep = this.circleSliderHelper.getCurrentStep();
116 |         this.setState({
117 |             angle,
118 |             currentStepValue: currentStep,
119 |         });
120 |         this.props.onChange(currentStep);
121 |     };
122 | 
123 |     public updateSlider = (): void => {
124 |         const angle = this.mouseHelper.getNewSliderAngle();
125 |         if (Math.abs(angle - this.state.angle) < Math.PI) {
126 |             this.updateAngle(angle);
127 |         }
128 |     };
129 | 
130 |     public updateSliderFromProps = (valueFromProps: number): void => {
131 |         const { stepSize } = this.props;
132 |         const newValue = Math.round(valueFromProps / stepSize!) * stepSize!;
133 |         this.circleSliderHelper.updateStepIndexFromValue(newValue);
134 |         this.setState({
135 |             angle: this.circleSliderHelper.getAngle(),
136 |             currentStepValue: newValue,
137 |         });
138 |     };
139 | 
140 |     public getCenter = (): number => {
141 |         return this.props.size! / 2;
142 |     };
143 | 
144 |     public getAngle = (): number => {
145 |         return this.state.angle + Math.PI / 2;
146 |     };
147 | 
148 |     public getPointPosition = (): IPoint => {
149 |         const center = this.getCenter();
150 |         const angle = this.getAngle();
151 |         return {
152 |             x: center + this.radius * Math.cos(angle),
153 |             y: center + this.radius * Math.sin(angle),
154 |         };
155 |     };
156 | 
157 |     public getStepsArray = (min: number, stepSize: number): number[] => {
158 |         const stepArray = [];
159 |         for (let i = 0; i < this.countSteps; i++) {
160 |             stepArray.push(min + i * stepSize);
161 |         }
162 |         return stepArray;
163 |     };
164 | 
165 |     public getPath = (): string => {
166 |         const center = this.getCenter();
167 |         const direction = this.getAngle() < 1.5 * Math.PI ? 0 : 1;
168 |         const { x, y } = this.getPointPosition();
169 |         const path = pathGenerator(center, this.radius, direction, x, y);
170 |         return path;
171 |     };
172 | 
173 |     public handleMouseMove = (event: Event): void => {
174 |         event.preventDefault();
175 |         this.setState({
176 |             isMouseMove: true,
177 |         });
178 |         this.mouseHelper.setPosition(event);
179 |         this.updateSlider();
180 |     };
181 | 
182 |     public handleMouseUp = (event: Event): void => {
183 |         event.preventDefault();
184 |         this.setState({
185 |             isMouseMove: false,
186 |         });
187 |         window.removeEventListener("mousemove", this.handleMouseMove);
188 |         window.removeEventListener("mouseup", this.handleMouseUp);
189 |     };
190 | 
191 |     public handleMouseDown = (event: React.MouseEvent<SVGSVGElement>): void => {
192 |         if (!this.props.disabled) {
193 |             event.preventDefault();
194 |             window.addEventListener("mousemove", this.handleMouseMove);
195 |             window.addEventListener("mouseup", this.handleMouseUp);
196 |         }
197 |     };
198 |     public handleTouchMove: any = (
199 |         event: React.TouchEvent<SVGSVGElement>,
200 |     ): void => {
201 |         const targetTouches = event.targetTouches;
202 |         const countTouches = targetTouches.length;
203 |         const currentTouch: React.Touch = targetTouches.item(countTouches - 1)!;
204 |         this.mouseHelper.setPosition(currentTouch);
205 |         this.updateSlider();
206 |     };
207 | 
208 |     public handleTouchUp = (): void => {
209 |         window.removeEventListener("touchmove", this.handleTouchMove);
210 |         window.removeEventListener("touchend", this.handleTouchUp);
211 |     };
212 | 
213 |     public handleTouchStart = (): void => {
214 |         if (!this.props.disabled) {
215 |             window.addEventListener("touchmove", this.handleTouchMove);
216 |             window.addEventListener("touchend", this.handleTouchUp);
217 |         }
218 |     };
219 | 
220 |     public render() {
221 |         const {
222 |             size,
223 |             progressColor,
224 |             gradientColorFrom,
225 |             gradientColorTo,
226 |             knobColor,
227 |             circleColor,
228 |             disabled,
229 |             shadow,
230 |             circleWidth,
231 |             progressWidth,
232 |             knobRadius,
233 |             showTooltip,
234 |             showPercentage,
235 |             tooltipSize,
236 |             tooltipColor,
237 |         } = this.props;
238 |         const { currentStepValue } = this.state;
239 |         const offset = shadow ? "5px" : "0px";
240 |         const { x, y } = this.getPointPosition();
241 |         const center = this.getCenter();
242 |         const isAllGradientColorsAvailable =
243 |             gradientColorFrom && gradientColorTo;
244 |         return (
245 |             <svg
246 |                 ref={svg => (this.svg = svg)}
247 |                 width={`${size}px`}
248 |                 height={`${size}px`}
249 |                 viewBox={`0 0 ${size} ${size}`}
250 |                 onMouseDown={this.handleMouseDown}
251 |                 onTouchStart={this.handleTouchStart}
252 |                 style={{
253 |                     padding: offset,
254 |                     boxSizing: "border-box",
255 |                 }}
256 |             >
257 |                 <g>
258 |                     <circle
259 |                         style={{
260 |                             strokeWidth: circleWidth!,
261 |                             stroke: circleColor,
262 |                             fill: "none",
263 |                         }}
264 |                         r={this.radius}
265 |                         cx={center}
266 |                         cy={center}
267 |                     />
268 |                     {isAllGradientColorsAvailable && (
269 |                         <defs>
270 |                             <linearGradient
271 |                                 id="gradient"
272 |                                 x1="0"
273 |                                 x2="0"
274 |                                 y1="0"
275 |                                 y2="1"
276 |                             >
277 |                                 <stop
278 |                                     offset="0%"
279 |                                     stopColor={gradientColorFrom}
280 |                                 />
281 |                                 <stop
282 |                                     offset="100%"
283 |                                     stopColor={gradientColorTo}
284 |                                 />
285 |                             </linearGradient>
286 |                         </defs>
287 |                     )}
288 |                     <path
289 |                         style={{
290 |                             strokeLinecap: "round",
291 |                             strokeWidth: progressWidth!,
292 |                             stroke: isAllGradientColorsAvailable
293 |                                 ? "url(#gradient)"
294 |                                 : progressColor,
295 |                             fill: "none",
296 |                         }}
297 |                         d={this.getPath()}
298 |                     />
299 |                     {shadow && (
300 |                         <filter id="dropShadow" filterUnits="userSpaceOnUse">
301 |                             <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
302 |                             <feOffset dx="2" dy="2" />
303 |                             <feComponentTransfer>
304 |                                 <feFuncA type="linear" slope="0.3" />
305 |                             </feComponentTransfer>
306 |                             <feMerge>
307 |                                 <feMergeNode />
308 |                                 <feMergeNode in="SourceGraphic" />
309 |                             </feMerge>
310 |                         </filter>
311 |                     )}
312 |                     <circle
313 |                         style={{
314 |                             fill: knobColor,
315 |                             cursor: disabled ? "not-allowed" : "pointer",
316 |                         }}
317 |                         filter={shadow ? "url(#dropShadow)" : "none"}
318 |                         r={knobRadius!}
319 |                         cx={x}
320 |                         cy={y}
321 |                     />
322 |                     {showTooltip && (
323 |                         <text
324 |                             x={size! / 2}
325 |                             y={size! / 2 + tooltipSize! / 3}
326 |                             textAnchor={"middle"}
327 |                             fontSize={tooltipSize!}
328 |                             fontFamily="Arial"
329 |                             fill={tooltipColor}
330 |                         >
331 |                             {showPercentage
332 |                                 ? `${currentStepValue}%`
333 |                                 : currentStepValue}
334 |                         </text>
335 |                     )}
336 |                 </g>
337 |             </svg>
338 |         );
339 |     }
340 | }
341 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { CircleSlider } from "./circle-slider";
2 | 
3 | export { CircleSlider };
4 | 


--------------------------------------------------------------------------------
/tsconfig.jest.json:
--------------------------------------------------------------------------------
1 | {
2 |     "extends": "./tsconfig",
3 |     "compilerOptions": {
4 |         "module": "commonjs",
5 |         "jsx": "react"
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "module": "commonjs",
 4 |         "target": "es5",
 5 |         "moduleResolution": "node",
 6 |         "downlevelIteration": true,
 7 |         "strict": true,
 8 |         "strictFunctionTypes": false,
 9 |         "types": ["node"],
10 |         "sourceMap": true,
11 |         "allowJs": true,
12 |         "allowUnreachableCode": true,
13 |         "experimentalDecorators": true,
14 |         "emitDecoratorMetadata": true,
15 |         "jsx": "react",
16 |         "noUnusedLocals": true,
17 |         "baseUrl": ".",
18 |         "skipLibCheck": true
19 |     },
20 |     "exclude": [
21 |         "example",
22 |         "node_modules",
23 |         "**/*.spec.ts",
24 |         "**/*.spec.tsx",
25 |         "**/*.test.ts",
26 |         "**/*.test.tsx"
27 |     ],
28 |     "compileOnSave": false
29 | }
30 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
 3 |     "linterOptions": {
 4 |         "exclude": [
 5 |             "node_modules/**",
 6 |             "**/*.spec.ts",
 7 |             "**/*.spec.tsx",
 8 |             "**/*.test.ts",
 9 |             "**/*.test.tsx"
10 |         ]
11 |     },
12 |     "rules": {
13 |         "triple-equals": true,
14 |         "no-var-requires": false,
15 |         "space-before-function-paren": [
16 |             true,
17 |             {
18 |                 "anonymous": "never",
19 |                 "named": "never",
20 |                 "asyncArrow": "always",
21 |                 "method": "never",
22 |                 "constructor": "never"
23 |             }
24 |         ],
25 |         "object-literal-sort-keys": false,
26 |         "no-debugger": false,
27 |         "member-ordering": [
28 |             true,
29 |             {
30 |                 "order": [
31 |                     "public-static-field",
32 |                     "protected-static-field",
33 |                     "private-static-field",
34 |                     "public-instance-field",
35 |                     "protected-instance-field",
36 |                     "private-instance-field",
37 |                     "public-constructor",
38 |                     "protected-constructor",
39 |                     "private-constructor",
40 |                     "public-static-method",
41 |                     "protected-static-method",
42 |                     "private-static-method",
43 |                     "public-instance-method",
44 |                     "protected-instance-method",
45 |                     "private-instance-method"
46 |                 ]
47 |             }
48 |         ],
49 |         "align": [true, "statements"],
50 |         "jsx-no-multiline-js": false,
51 |         "no-default-export": true
52 |     },
53 |     "jsRules": {
54 |         "triple-equals": true,
55 |         "no-var-requires": false,
56 |         "space-before-function-paren": [
57 |             true,
58 |             {
59 |                 "anonymous": "never",
60 |                 "named": "never",
61 |                 "asyncArrow": "always",
62 |                 "method": "never",
63 |                 "constructor": "never"
64 |             }
65 |         ],
66 |         "object-literal-sort-keys": false,
67 |         "no-debugger": false,
68 |         "no-console": [false],
69 |         "eofline": false,
70 |         "jsx-no-multiline-js": false,
71 |         "no-default-export": true
72 |     }
73 | }
74 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const webpack = require("webpack");
 3 | 
 4 | module.exports = {
 5 |     entry: path.resolve(__dirname, "src/index.ts"),
 6 |     output: {
 7 |         path: path.resolve(__dirname, "./lib"),
 8 |         filename: "index.js",
 9 |         library: "",
10 |         libraryTarget: "commonjs",
11 |     },
12 |     resolve: {
13 |         extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
14 |     },
15 |     module: {
16 |         rules: [
17 |             {
18 |                 test: /\.(ts|tsx)$/,
19 |                 loader: ["babel-loader", "ts-loader"],
20 |             },
21 |         ],
22 |     },
23 | };
24 | 


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