├── .github
    ├── dependabot.yml
    └── workflows
    │   ├── npm-publish.yml
    │   └── pr.yml
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── Example
    ├── .expo-shared
    │   └── assets.json
    ├── .gitignore
    ├── .prettierrc
    ├── .watchmanconfig
    ├── App.js
    ├── Styles.js
    ├── app.json
    ├── assets
    │   ├── icon.png
    │   └── splash.png
    ├── babel.config.js
    └── package.json
├── LICENSE
├── PROPS.md
├── README.md
├── images
    ├── append.png
    ├── button_press.gif
    ├── customization.png
    ├── example.png
    ├── example_2.png
    ├── example_app.png
    ├── logo.png
    ├── logo_full.png
    ├── skins.png
    └── structure.png
├── package.json
├── renovate.json
└── src
    ├── InputSpinner.js
    ├── Skins.js
    ├── Style.js
    ├── Utils.js
    ├── index.d.ts
    ├── index.js
    └── skins
        ├── CleanSkin.js
        ├── ModernSkin.js
        ├── PaperSkin.js
        ├── RoundSkin.js
        └── SquareSkin.js


/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: npm
4 |   directory: "/"
5 |   schedule:
6 |     interval: daily
7 |     time: "04:00"
8 |   open-pull-requests-limit: 10
9 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 3 | 
 4 | name: Repository Publish
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: 12
18 | 
19 |   publish-npm:
20 |     needs: build
21 |     runs-on: ubuntu-latest
22 |     steps:
23 |       - uses: actions/checkout@v3
24 |       - uses: actions/setup-node@v3
25 |         with:
26 |           node-version: 12
27 |           registry-url: https://registry.npmjs.org/
28 |       - run: npm publish
29 |         env:
30 |           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
31 | 
32 | #  publish-gpr:
33 | #    needs: build
34 | #    runs-on: ubuntu-latest
35 | #    steps:
36 | #      - uses: actions/checkout@v2
37 | #      - uses: actions/setup-node@v1
38 | #        with:
39 | #          node-version: 12
40 | #          registry-url: https://npm.pkg.github.com/
41 | #      - run: npm publish
42 | #        env:
43 | #          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
44 | 


--------------------------------------------------------------------------------
/.github/workflows/pr.yml:
--------------------------------------------------------------------------------
 1 | name: Pull Request
 2 | on: pull_request
 3 | jobs:
 4 |   conventional:
 5 |     name: Conventional PR
 6 |     runs-on: ubuntu-latest
 7 |     steps:
 8 |       - uses: actions/checkout@v3
 9 |       - uses: actions/setup-node@v2-beta
10 |       - uses: beemojs/conventional-pr-action@v2
11 |         env:
12 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | yarn.lock
3 | package-lock.json
4 | node_modules
5 | .expo
6 | .bitmap


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | example/
2 | npm-debug.log
3 | node_modules
4 | .DS_Store
5 | .idea
6 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | /templates
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"printWidth": 80,
 3 | 	"tabWidth": 2,
 4 | 	"useTabs": true,
 5 | 	"semi": true,
 6 | 	"singleQuote": false,
 7 | 	"trailingComma": "all",
 8 | 	"bracketSpacing": false,
 9 | 	"jsxBracketSameLine": true,
10 | 	"arrowParens": "always",
11 | 	"requirePragma": false
12 | }
13 | 


--------------------------------------------------------------------------------
/Example/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
3 | 	"89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
4 | }
5 | 


--------------------------------------------------------------------------------
/Example/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p12
 6 | *.key
 7 | *.mobileprovision
 8 | *.orig.*
 9 | web-build/
10 | web-report/
11 | yarn.lock
12 | package-lock.json
13 | 


--------------------------------------------------------------------------------
/Example/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"printWidth": 80,
 3 | 	"tabWidth": 2,
 4 | 	"useTabs": true,
 5 | 	"semi": true,
 6 | 	"singleQuote": false,
 7 | 	"trailingComma": "all",
 8 | 	"bracketSpacing": false,
 9 | 	"jsxBracketSameLine": true,
10 | 	"arrowParens": "always",
11 | 	"requirePragma": false
12 | }
13 | 


--------------------------------------------------------------------------------
/Example/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/Example/App.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from "react";
  2 | import {Text, View, ScrollView, Image, SafeAreaView} from "react-native";
  3 | import InputSpinner from "react-native-input-spinner";
  4 | import Styles from "./Styles";
  5 | 
  6 | export default class App extends Component {
  7 | 	constructor(props) {
  8 | 		super(props);
  9 | 		let data = [];
 10 | 		for (var i = 0; i < 10; i++) {
 11 | 			data.push({
 12 | 				key: String(i),
 13 | 				value: Math.floor(Math.random() * 100) + 1,
 14 | 			});
 15 | 		}
 16 | 		this.state = {
 17 | 			value: 1,
 18 | 			valueReal: 1.5,
 19 | 			colorLeft: this.getRandomColor(),
 20 | 			colorRight: this.getRandomColor(),
 21 | 			data: data,
 22 | 		};
 23 | 	}
 24 | 
 25 | 	getRandomColor() {
 26 | 		var letters = "0123456789ABCDEF";
 27 | 		var color = "#";
 28 | 		for (var i = 0; i < 6; i++) {
 29 | 			color += letters[Math.floor(Math.random() * 16)];
 30 | 		}
 31 | 		return color;
 32 | 	}
 33 | 
 34 | 	render() {
 35 | 		return (
 36 | 			<SafeAreaView style={Styles.mainContainer}>
 37 | 				<ScrollView style={Styles.container}>
 38 | 					<Text style={Styles.title}>
 39 | 						Example{"\n"}react-native-input-spinner
 40 | 					</Text>
 41 | 					<View style={Styles.col}>
 42 | 						<Text style={Styles.text}>Prevent auto increment on scroll</Text>
 43 | 						<InputSpinner value={this.state.value} style={Styles.spinner} delayPressIn={100}/>
 44 | 					</View>
 45 | 					<View style={Styles.col}>
 46 | 						<Text style={Styles.text}>Standard</Text>
 47 | 						<InputSpinner value={this.state.value} style={Styles.spinner} />
 48 | 					</View>
 49 | 					<View style={Styles.col}>
 50 | 						<Text style={Styles.text}>Custom color</Text>
 51 | 						<InputSpinner
 52 | 							value={this.state.value}
 53 | 							style={Styles.spinner}
 54 | 							color={"#40c5f4"}
 55 | 						/>
 56 | 					</View>
 57 | 					<View style={Styles.col}>
 58 | 						<Text style={Styles.text}>Arrows</Text>
 59 | 						<InputSpinner
 60 | 							value={this.state.value}
 61 | 							style={Styles.spinner}
 62 | 							arrows
 63 | 						/>
 64 | 					</View>
 65 | 					<View style={Styles.col}>
 66 | 						<Text style={Styles.text}>Continuity mode</Text>
 67 | 						<InputSpinner
 68 | 							value={this.state.value}
 69 | 							style={Styles.spinner}
 70 | 							min={10}
 71 | 							max={30}
 72 | 							arrows
 73 | 							continuity
 74 | 						/>
 75 | 					</View>
 76 | 					<View style={Styles.col}>
 77 | 						<Text style={Styles.text}>Custom button text and fontSize</Text>
 78 | 						<InputSpinner
 79 | 							value={this.state.value}
 80 | 							style={Styles.spinner}
 81 | 							buttonFontSize={10}
 82 | 							buttonLeftText={"▲"}
 83 | 							buttonRightText={"▼"}
 84 | 						/>
 85 | 					</View>
 86 | 					<View style={Styles.col}>
 87 | 						<Text style={Styles.text}>Disabled</Text>
 88 | 						<InputSpinner
 89 | 							value={this.state.value}
 90 | 							style={Styles.spinner}
 91 | 							disabled
 92 | 						/>
 93 | 					</View>
 94 | 					<View style={Styles.col}>
 95 | 						<Text style={Styles.text}>Not editable</Text>
 96 | 						<InputSpinner
 97 | 							value={this.state.value}
 98 | 							style={Styles.spinner}
 99 | 							editable={false}
100 | 						/>
101 | 					</View>
102 | 					<View style={Styles.col}>
103 | 						<Text style={Styles.text}>onChange</Text>
104 | 						<InputSpinner
105 | 							value={this.state.value}
106 | 							style={Styles.spinner}
107 | 							max={10}
108 | 							onChange={(num) => {
109 | 								alert("onChange new value: " + num);
110 | 							}}
111 | 						/>
112 | 					</View>
113 | 					<View style={Styles.col}>
114 | 						<Text style={Styles.text}>onMin and onMax (min 0, max 3)</Text>
115 | 						<InputSpinner
116 | 							value={this.state.value}
117 | 							style={Styles.spinner}
118 | 							min={0}
119 | 							max={3}
120 | 							onMax={() => {
121 | 								alert("onMax reached!");
122 | 							}}
123 | 							onMin={() => {
124 | 								alert("onMin reached!");
125 | 							}}
126 | 						/>
127 | 					</View>
128 | 					<View style={Styles.col}>
129 | 						<Text style={Styles.text}>Min & Max colors (min 5, max 10)</Text>
130 | 						<InputSpinner
131 | 							value={this.state.value + 1}
132 | 							style={Styles.spinner}
133 | 							min={5}
134 | 							max={10}
135 | 							colorMax={"#f04048"}
136 | 							colorMin={"#82cc62"}
137 | 						/>
138 | 					</View>
139 | 					<View style={Styles.col}>
140 | 						<Text style={Styles.text}>Type real (step 0.5, precision 1)</Text>
141 | 						<InputSpinner
142 | 							value={this.state.valueReal}
143 | 							style={Styles.spinner}
144 | 							type={"real"}
145 | 							step={0.5}
146 | 							precision={1}
147 | 						/>
148 | 					</View>
149 | 					<View style={Styles.col}>
150 | 						<Text style={Styles.text}>Type real (step 0.05, precision 2)</Text>
151 | 						<InputSpinner
152 | 							value={this.state.valueReal}
153 | 							style={Styles.spinner}
154 | 							type={"real"}
155 | 							step={0.05}
156 | 							precision={2}
157 | 						/>
158 | 					</View>
159 | 					<Text style={Styles.title}>Skins</Text>
160 | 					<View style={Styles.col}>
161 | 						<Text style={Styles.text}>Skin Default</Text>
162 | 						<InputSpinner
163 | 							value={this.state.value}
164 | 							style={Styles.spinner}
165 | 							max={10}
166 | 							colorMax={"#f04048"}
167 | 							colorMin={"#82cc62"}
168 | 						/>
169 | 					</View>
170 | 					<View style={Styles.col}>
171 | 						<Text style={Styles.text}>Skin Round</Text>
172 | 						<InputSpinner
173 | 							value={this.state.value}
174 | 							style={Styles.spinner}
175 | 							skin="round"
176 | 							max={10}
177 | 							colorMax={"#f04048"}
178 | 							colorMin={"#82cc62"}
179 | 						/>
180 | 					</View>
181 | 					<View style={Styles.col}>
182 | 						<Text style={Styles.text}>Skin Square</Text>
183 | 						<InputSpinner
184 | 							value={this.state.value}
185 | 							style={Styles.spinner}
186 | 							skin="square"
187 | 							max={10}
188 | 							colorMax={"#f04048"}
189 | 							colorMin={"#82cc62"}
190 | 						/>
191 | 					</View>
192 | 					<View style={Styles.col}>
193 | 						<Text style={Styles.text}>Skin Paper</Text>
194 | 						<InputSpinner
195 | 							value={this.state.value}
196 | 							style={Styles.spinner}
197 | 							height={30}
198 | 							skin="paper"
199 | 							max={10}
200 | 							colorMax={"#f04048"}
201 | 							colorMin={"#82cc62"}
202 | 						/>
203 | 					</View>
204 | 					<View style={Styles.col}>
205 | 						<Text style={Styles.text}>Skin Clean</Text>
206 | 						<InputSpinner
207 | 							value={this.state.value}
208 | 							style={Styles.spinner}
209 | 							skin="clean"
210 | 							max={10}
211 | 							colorMax={"#f04048"}
212 | 							colorMin={"#82cc62"}
213 | 						/>
214 | 					</View>
215 | 					<View style={Styles.col}>
216 | 						<Text style={Styles.text}>Skin Modern</Text>
217 | 						<InputSpinner
218 | 							value={this.state.value}
219 | 							style={[
220 | 								Styles.spinner,
221 | 								{minWidth: 150} /*reset minWidth set on Style.spinner*/,
222 | 							]}
223 | 							skin="modern"
224 | 							max={10}
225 | 							colorMax={"#f04048"}
226 | 							colorMin={"#82cc62"}
227 | 						/>
228 | 					</View>
229 | 					<Text style={Styles.title}>Customization</Text>
230 | 					<View style={Styles.col}>
231 | 						<Text style={Styles.text}>
232 | 							color, background, rounded false, showBorder false and textColor
233 | 						</Text>
234 | 						<InputSpinner
235 | 							value={this.state.value}
236 | 							style={Styles.spinner}
237 | 							textColor={"#FFF"}
238 | 							color={"#25863f"}
239 | 							background={"#82cc62"}
240 | 							rounded={false}
241 | 							showBorder
242 | 						/>
243 | 					</View>
244 | 					<View style={Styles.col}>
245 | 						<Text style={Styles.text}>Button image</Text>
246 | 						<InputSpinner
247 | 							value={this.state.value}
248 | 							style={Styles.spinner}
249 | 							color={"#FFF"}
250 | 							colorPress={"#0F0"}
251 | 							height={50}
252 | 							buttonLeftImage={
253 | 								<Image
254 | 									style={{width: 50, height: 50}}
255 | 									source={{
256 | 										uri:
257 | 											"https://freeiconshop.com/wp-content/uploads/edd/like-flat.png",
258 | 									}}
259 | 								/>
260 | 							}
261 | 							buttonRightImage={
262 | 								<Image
263 | 									style={{width: 50, height: 50}}
264 | 									source={{
265 | 										uri:
266 | 											"https://freeiconshop.com/wp-content/uploads/edd/heart-compact-flat.png",
267 | 									}}
268 | 								/>
269 | 							}
270 | 						/>
271 | 					</View>
272 | 					<View style={Styles.col}>
273 | 						<Text style={Styles.text}>colorLeft and colorRight</Text>
274 | 						<InputSpinner
275 | 							value={this.state.value}
276 | 							style={Styles.spinner}
277 | 							colorPress={"#F00"}
278 | 							colorLeft={this.state.colorLeft}
279 | 							colorRight={this.state.colorRight}
280 | 							onChange={(num) => {
281 | 								// ...
282 | 								this.setState({
283 | 									colorLeft: this.getRandomColor(),
284 | 									colorRight: this.getRandomColor(),
285 | 								});
286 | 							}}
287 | 						/>
288 | 					</View>
289 | 					<View style={Styles.col}>
290 | 						<Text style={Styles.text}>Colors on press</Text>
291 | 						<InputSpinner
292 | 							value={this.state.value}
293 | 							style={Styles.spinner}
294 | 							color={"#C4C4C4"}
295 | 							colorPress={"#F00"}
296 | 							buttonTextColor={"#000"}
297 | 							buttonPressTextColor={"#FFF"}
298 | 						/>
299 | 					</View>
300 | 					<View style={Styles.col}>
301 | 						<Text style={Styles.text}>Children</Text>
302 | 						<InputSpinner value={this.state.value} style={Styles.spinner}>
303 | 							<Text style={Styles.simbol}>$</Text>
304 | 						</InputSpinner>
305 | 					</View>
306 | 					<View style={Styles.col}>
307 | 						<Text style={Styles.text}>Placeholder</Text>
308 | 						<InputSpinner style={Styles.spinner} placeholder={"Placeholder"} />
309 | 					</View>
310 | 					<View style={Styles.col}>
311 | 						<Text style={Styles.text}>Mixed</Text>
312 | 						<InputSpinner
313 | 							style={Styles.spinner}
314 | 							value={80}
315 | 							min={5}
316 | 							max={48}
317 | 							step={2}
318 | 							rounded={false}
319 | 							showBorder={true}
320 | 							editable={false}
321 | 							onChange={(value) => {
322 | 								this.setState({value: value});
323 | 							}}
324 | 						/>
325 | 					</View>
326 | 					<Text style={Styles.title}>Append/Prepend</Text>
327 | 					<View style={Styles.col}>
328 | 						<InputSpinner
329 | 							value={this.state.value}
330 | 							style={[Styles.spinner, {minWidth: 300}]}
331 | 							append={<Text style={Styles.simbol}>Append</Text>}
332 | 							prepend={<Text style={Styles.simbol}>Prepend</Text>}>
333 | 							<Text style={Styles.simbol}>$</Text>
334 | 						</InputSpinner>
335 | 					</View>
336 | 				</ScrollView>
337 | 			</SafeAreaView>
338 | 		);
339 | 	}
340 | }
341 | 


--------------------------------------------------------------------------------
/Example/Styles.js:
--------------------------------------------------------------------------------
 1 | import {StatusBar, StyleSheet} from "react-native";
 2 | 
 3 | export default StyleSheet.create({
 4 | 	mainContainer: {
 5 | 		flex: 1,
 6 | 		marginTop: StatusBar.currentHeight || 0,
 7 | 	},
 8 | 	item: {
 9 | 		padding: 20,
10 | 		marginVertical: 8,
11 | 		marginHorizontal: 16,
12 | 		flexDirection: "row",
13 | 		justifyContent: "center",
14 | 		alignItems: "center",
15 | 		textAlign: "center",
16 | 		textAlignVertical: "center",
17 | 	},
18 | 	container: {
19 | 		flex: 1,
20 | 		backgroundColor: "#fff",
21 | 		padding: 20,
22 | 		paddingTop: 40,
23 | 	},
24 | 	col: {
25 | 		flex: 1,
26 | 		marginBottom: 20,
27 | 		flexDirection: "row",
28 | 		alignItems: "center",
29 | 		textAlign: "left",
30 | 		textAlignVertical: "center",
31 | 	},
32 | 	text: {
33 | 		flex: 3,
34 | 		marginRight: 20,
35 | 	},
36 | 	title: {
37 | 		marginBottom: 40,
38 | 		fontSize: 30,
39 | 	},
40 | 	spinner: {
41 | 		flex: 1,
42 | 		marginRight: 10,
43 | 		minWidth: 150,
44 | 	},
45 | 	simbol: {
46 | 		marginLeft: 10,
47 | 		marginRight: 10,
48 | 		height: "100%",
49 | 		justifyContent: "center",
50 | 		alignItems: "center",
51 | 		textAlign: "center",
52 | 		textAlignVertical: "center",
53 | 		lineHeight: 50,
54 | 	},
55 | });
56 | 


--------------------------------------------------------------------------------
/Example/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"expo": {
 3 | 		"name": "Example react-native-input-spinner",
 4 | 		"slug": "Example",
 5 | 		"privacy": "public",
 6 | 		"platforms": ["ios", "android", "web"],
 7 | 		"version": "1.0.0",
 8 | 		"orientation": "portrait",
 9 | 		"icon": "./assets/icon.png",
10 | 		"splash": {
11 | 			"image": "./assets/splash.png",
12 | 			"resizeMode": "contain",
13 | 			"backgroundColor": "#ffffff"
14 | 		},
15 | 		"updates": {
16 | 			"fallbackToCacheTimeout": 0
17 | 		},
18 | 		"assetBundlePatterns": ["**/*"],
19 | 		"ios": {
20 | 			"supportsTablet": true
21 | 		},
22 | 		"description": "",
23 | 		"githubUrl": "https://github.com/marcocesarato/react-native-input-spinner/Example"
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/Example/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/Example/assets/icon.png


--------------------------------------------------------------------------------
/Example/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/Example/assets/splash.png


--------------------------------------------------------------------------------
/Example/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function (api) {
2 | 	api.cache(true);
3 | 	return {
4 | 		presets: ["babel-preset-expo"],
5 | 	};
6 | };
7 | 


--------------------------------------------------------------------------------
/Example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"main": "node_modules/expo/AppEntry.js",
 3 | 	"homepage": "https://marcocesarato.github.io/react-native-input-spinner/",
 4 | 	"scripts": {
 5 | 		"deploy": "gh-pages -d web-build",
 6 | 		"predeploy": "expo build:web",
 7 | 		"start": "expo start",
 8 | 		"android": "expo start --android",
 9 | 		"ios": "expo start --ios",
10 | 		"web": "expo start --web",
11 | 		"eject": "expo eject",
12 | 		"prettify": "npx prettier --write './src/**/*.{ts,json,md,yml,js}' && npx prettier --write './*.{ts,json,md,yml,js}'"
13 | 	},
14 | 	"dependencies": {
15 | 		"expo": "^48.0.0",
16 | 		"react": "18.2.0",
17 | 		"react-dom": "18.2.0",
18 | 		"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
19 | 		"react-native-input-spinner": "^1.8.0",
20 | 		"react-native-web": "~0.18.0"
21 | 	},
22 | 	"devDependencies": {
23 | 		"babel-preset-expo": "9.3.1",
24 | 		"gh-pages": "^5.0.0"
25 | 	},
26 | 	"private": true
27 | }
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU General Public License is a free, copyleft license for
 11 | software and other kinds of works.
 12 | 
 13 |   The licenses for most software and other practical works are designed
 14 | to take away your freedom to share and change the works.  By contrast,
 15 | the GNU General Public License is intended to guarantee your freedom to
 16 | share and change all versions of a program--to make sure it remains free
 17 | software for all its users.  We, the Free Software Foundation, use the
 18 | GNU General Public License for most of our software; it applies also to
 19 | any other work released this way by its authors.  You can apply it to
 20 | your programs, too.
 21 | 
 22 |   When we speak of free software, we are referring to freedom, not
 23 | price.  Our General Public Licenses are designed to make sure that you
 24 | have the freedom to distribute copies of free software (and charge for
 25 | them if you wish), that you receive source code or can get it if you
 26 | want it, that you can change the software or use pieces of it in new
 27 | free programs, and that you know you can do these things.
 28 | 
 29 |   To protect your rights, we need to prevent others from denying you
 30 | these rights or asking you to surrender the rights.  Therefore, you have
 31 | certain responsibilities if you distribute copies of the software, or if
 32 | you modify it: responsibilities to respect the freedom of others.
 33 | 
 34 |   For example, if you distribute copies of such a program, whether
 35 | gratis or for a fee, you must pass on to the recipients the same
 36 | freedoms that you received.  You must make sure that they, too, receive
 37 | or can get the source code.  And you must show them these terms so they
 38 | know their rights.
 39 | 
 40 |   Developers that use the GNU GPL protect your rights with two steps:
 41 | (1) assert copyright on the software, and (2) offer you this License
 42 | giving you legal permission to copy, distribute and/or modify it.
 43 | 
 44 |   For the developers' and authors' protection, the GPL clearly explains
 45 | that there is no warranty for this free software.  For both users' and
 46 | authors' sake, the GPL requires that modified versions be marked as
 47 | changed, so that their problems will not be attributed erroneously to
 48 | authors of previous versions.
 49 | 
 50 |   Some devices are designed to deny users access to install or run
 51 | modified versions of the software inside them, although the manufacturer
 52 | can do so.  This is fundamentally incompatible with the aim of
 53 | protecting users' freedom to change the software.  The systematic
 54 | pattern of such abuse occurs in the area of products for individuals to
 55 | use, which is precisely where it is most unacceptable.  Therefore, we
 56 | have designed this version of the GPL to prohibit the practice for those
 57 | products.  If such problems arise substantially in other domains, we
 58 | stand ready to extend this provision to those domains in future versions
 59 | of the GPL, as needed to protect the freedom of users.
 60 | 
 61 |   Finally, every program is threatened constantly by software patents.
 62 | States should not allow patents to restrict development and use of
 63 | software on general-purpose computers, but in those that do, we wish to
 64 | avoid the special danger that patents applied to a free program could
 65 | make it effectively proprietary.  To prevent this, the GPL assures that
 66 | patents cannot be used to render the program non-free.
 67 | 
 68 |   The precise terms and conditions for copying, distribution and
 69 | modification follow.
 70 | 
 71 |                        TERMS AND CONDITIONS
 72 | 
 73 |   0. Definitions.
 74 | 
 75 |   "This License" refers to version 3 of the GNU General Public License.
 76 | 
 77 |   "Copyright" also means copyright-like laws that apply to other kinds of
 78 | works, such as semiconductor masks.
 79 | 
 80 |   "The Program" refers to any copyrightable work licensed under this
 81 | License.  Each licensee is addressed as "you".  "Licensees" and
 82 | "recipients" may be individuals or organizations.
 83 | 
 84 |   To "modify" a work means to copy from or adapt all or part of the work
 85 | in a fashion requiring copyright permission, other than the making of an
 86 | exact copy.  The resulting work is called a "modified version" of the
 87 | earlier work or a work "based on" the earlier work.
 88 | 
 89 |   A "covered work" means either the unmodified Program or a work based
 90 | on the Program.
 91 | 
 92 |   To "propagate" a work means to do anything with it that, without
 93 | permission, would make you directly or secondarily liable for
 94 | infringement under applicable copyright law, except executing it on a
 95 | computer or modifying a private copy.  Propagation includes copying,
 96 | distribution (with or without modification), making available to the
 97 | public, and in some countries other activities as well.
 98 | 
 99 |   To "convey" a work means any kind of propagation that enables other
100 | parties to make or receive copies.  Mere interaction with a user through
101 | a computer network, with no transfer of a copy, is not conveying.
102 | 
103 |   An interactive user interface displays "Appropriate Legal Notices"
104 | to the extent that it includes a convenient and prominently visible
105 | feature that (1) displays an appropriate copyright notice, and (2)
106 | tells the user that there is no warranty for the work (except to the
107 | extent that warranties are provided), that licensees may convey the
108 | work under this License, and how to view a copy of this License.  If
109 | the interface presents a list of user commands or options, such as a
110 | menu, a prominent item in the list meets this criterion.
111 | 
112 |   1. Source Code.
113 | 
114 |   The "source code" for a work means the preferred form of the work
115 | for making modifications to it.  "Object code" means any non-source
116 | form of a work.
117 | 
118 |   A "Standard Interface" means an interface that either is an official
119 | standard defined by a recognized standards body, or, in the case of
120 | interfaces specified for a particular programming language, one that
121 | is widely used among developers working in that language.
122 | 
123 |   The "System Libraries" of an executable work include anything, other
124 | than the work as a whole, that (a) is included in the normal form of
125 | packaging a Major Component, but which is not part of that Major
126 | Component, and (b) serves only to enable use of the work with that
127 | Major Component, or to implement a Standard Interface for which an
128 | implementation is available to the public in source code form.  A
129 | "Major Component", in this context, means a major essential component
130 | (kernel, window system, and so on) of the specific operating system
131 | (if any) on which the executable work runs, or a compiler used to
132 | produce the work, or an object code interpreter used to run it.
133 | 
134 |   The "Corresponding Source" for a work in object code form means all
135 | the source code needed to generate, install, and (for an executable
136 | work) run the object code and to modify the work, including scripts to
137 | control those activities.  However, it does not include the work's
138 | System Libraries, or general-purpose tools or generally available free
139 | programs which are used unmodified in performing those activities but
140 | which are not part of the work.  For example, Corresponding Source
141 | includes interface definition files associated with source files for
142 | the work, and the source code for shared libraries and dynamically
143 | linked subprograms that the work is specifically designed to require,
144 | such as by intimate data communication or control flow between those
145 | subprograms and other parts of the work.
146 | 
147 |   The Corresponding Source need not include anything that users
148 | can regenerate automatically from other parts of the Corresponding
149 | Source.
150 | 
151 |   The Corresponding Source for a work in source code form is that
152 | same work.
153 | 
154 |   2. Basic Permissions.
155 | 
156 |   All rights granted under this License are granted for the term of
157 | copyright on the Program, and are irrevocable provided the stated
158 | conditions are met.  This License explicitly affirms your unlimited
159 | permission to run the unmodified Program.  The output from running a
160 | covered work is covered by this License only if the output, given its
161 | content, constitutes a covered work.  This License acknowledges your
162 | rights of fair use or other equivalent, as provided by copyright law.
163 | 
164 |   You may make, run and propagate covered works that you do not
165 | convey, without conditions so long as your license otherwise remains
166 | in force.  You may convey covered works to others for the sole purpose
167 | of having them make modifications exclusively for you, or provide you
168 | with facilities for running those works, provided that you comply with
169 | the terms of this License in conveying all material for which you do
170 | not control copyright.  Those thus making or running the covered works
171 | for you must do so exclusively on your behalf, under your direction
172 | and control, on terms that prohibit them from making any copies of
173 | your copyrighted material outside their relationship with you.
174 | 
175 |   Conveying under any other circumstances is permitted solely under
176 | the conditions stated below.  Sublicensing is not allowed; section 10
177 | makes it unnecessary.
178 | 
179 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
180 | 
181 |   No covered work shall be deemed part of an effective technological
182 | measure under any applicable law fulfilling obligations under article
183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
184 | similar laws prohibiting or restricting circumvention of such
185 | measures.
186 | 
187 |   When you convey a covered work, you waive any legal power to forbid
188 | circumvention of technological measures to the extent such circumvention
189 | is effected by exercising rights under this License with respect to
190 | the covered work, and you disclaim any intention to limit operation or
191 | modification of the work as a means of enforcing, against the work's
192 | users, your or third parties' legal rights to forbid circumvention of
193 | technological measures.
194 | 
195 |   4. Conveying Verbatim Copies.
196 | 
197 |   You may convey verbatim copies of the Program's source code as you
198 | receive it, in any medium, provided that you conspicuously and
199 | appropriately publish on each copy an appropriate copyright notice;
200 | keep intact all notices stating that this License and any
201 | non-permissive terms added in accord with section 7 apply to the code;
202 | keep intact all notices of the absence of any warranty; and give all
203 | recipients a copy of this License along with the Program.
204 | 
205 |   You may charge any price or no price for each copy that you convey,
206 | and you may offer support or warranty protection for a fee.
207 | 
208 |   5. Conveying Modified Source Versions.
209 | 
210 |   You may convey a work based on the Program, or the modifications to
211 | produce it from the Program, in the form of source code under the
212 | terms of section 4, provided that you also meet all of these conditions:
213 | 
214 |     a) The work must carry prominent notices stating that you modified
215 |     it, and giving a relevant date.
216 | 
217 |     b) The work must carry prominent notices stating that it is
218 |     released under this License and any conditions added under section
219 |     7.  This requirement modifies the requirement in section 4 to
220 |     "keep intact all notices".
221 | 
222 |     c) You must license the entire work, as a whole, under this
223 |     License to anyone who comes into possession of a copy.  This
224 |     License will therefore apply, along with any applicable section 7
225 |     additional terms, to the whole of the work, and all its parts,
226 |     regardless of how they are packaged.  This License gives no
227 |     permission to license the work in any other way, but it does not
228 |     invalidate such permission if you have separately received it.
229 | 
230 |     d) If the work has interactive user interfaces, each must display
231 |     Appropriate Legal Notices; however, if the Program has interactive
232 |     interfaces that do not display Appropriate Legal Notices, your
233 |     work need not make them do so.
234 | 
235 |   A compilation of a covered work with other separate and independent
236 | works, which are not by their nature extensions of the covered work,
237 | and which are not combined with it such as to form a larger program,
238 | in or on a volume of a storage or distribution medium, is called an
239 | "aggregate" if the compilation and its resulting copyright are not
240 | used to limit the access or legal rights of the compilation's users
241 | beyond what the individual works permit.  Inclusion of a covered work
242 | in an aggregate does not cause this License to apply to the other
243 | parts of the aggregate.
244 | 
245 |   6. Conveying Non-Source Forms.
246 | 
247 |   You may convey a covered work in object code form under the terms
248 | of sections 4 and 5, provided that you also convey the
249 | machine-readable Corresponding Source under the terms of this License,
250 | in one of these ways:
251 | 
252 |     a) Convey the object code in, or embodied in, a physical product
253 |     (including a physical distribution medium), accompanied by the
254 |     Corresponding Source fixed on a durable physical medium
255 |     customarily used for software interchange.
256 | 
257 |     b) Convey the object code in, or embodied in, a physical product
258 |     (including a physical distribution medium), accompanied by a
259 |     written offer, valid for at least three years and valid for as
260 |     long as you offer spare parts or customer support for that product
261 |     model, to give anyone who possesses the object code either (1) a
262 |     copy of the Corresponding Source for all the software in the
263 |     product that is covered by this License, on a durable physical
264 |     medium customarily used for software interchange, for a price no
265 |     more than your reasonable cost of physically performing this
266 |     conveying of source, or (2) access to copy the
267 |     Corresponding Source from a network server at no charge.
268 | 
269 |     c) Convey individual copies of the object code with a copy of the
270 |     written offer to provide the Corresponding Source.  This
271 |     alternative is allowed only occasionally and noncommercially, and
272 |     only if you received the object code with such an offer, in accord
273 |     with subsection 6b.
274 | 
275 |     d) Convey the object code by offering access from a designated
276 |     place (gratis or for a charge), and offer equivalent access to the
277 |     Corresponding Source in the same way through the same place at no
278 |     further charge.  You need not require recipients to copy the
279 |     Corresponding Source along with the object code.  If the place to
280 |     copy the object code is a network server, the Corresponding Source
281 |     may be on a different server (operated by you or a third party)
282 |     that supports equivalent copying facilities, provided you maintain
283 |     clear directions next to the object code saying where to find the
284 |     Corresponding Source.  Regardless of what server hosts the
285 |     Corresponding Source, you remain obligated to ensure that it is
286 |     available for as long as needed to satisfy these requirements.
287 | 
288 |     e) Convey the object code using peer-to-peer transmission, provided
289 |     you inform other peers where the object code and Corresponding
290 |     Source of the work are being offered to the general public at no
291 |     charge under subsection 6d.
292 | 
293 |   A separable portion of the object code, whose source code is excluded
294 | from the Corresponding Source as a System Library, need not be
295 | included in conveying the object code work.
296 | 
297 |   A "User Product" is either (1) a "consumer product", which means any
298 | tangible personal property which is normally used for personal, family,
299 | or household purposes, or (2) anything designed or sold for incorporation
300 | into a dwelling.  In determining whether a product is a consumer product,
301 | doubtful cases shall be resolved in favor of coverage.  For a particular
302 | product received by a particular user, "normally used" refers to a
303 | typical or common use of that class of product, regardless of the status
304 | of the particular user or of the way in which the particular user
305 | actually uses, or expects or is expected to use, the product.  A product
306 | is a consumer product regardless of whether the product has substantial
307 | commercial, industrial or non-consumer uses, unless such uses represent
308 | the only significant mode of use of the product.
309 | 
310 |   "Installation Information" for a User Product means any methods,
311 | procedures, authorization keys, or other information required to install
312 | and execute modified versions of a covered work in that User Product from
313 | a modified version of its Corresponding Source.  The information must
314 | suffice to ensure that the continued functioning of the modified object
315 | code is in no case prevented or interfered with solely because
316 | modification has been made.
317 | 
318 |   If you convey an object code work under this section in, or with, or
319 | specifically for use in, a User Product, and the conveying occurs as
320 | part of a transaction in which the right of possession and use of the
321 | User Product is transferred to the recipient in perpetuity or for a
322 | fixed term (regardless of how the transaction is characterized), the
323 | Corresponding Source conveyed under this section must be accompanied
324 | by the Installation Information.  But this requirement does not apply
325 | if neither you nor any third party retains the ability to install
326 | modified object code on the User Product (for example, the work has
327 | been installed in ROM).
328 | 
329 |   The requirement to provide Installation Information does not include a
330 | requirement to continue to provide support service, warranty, or updates
331 | for a work that has been modified or installed by the recipient, or for
332 | the User Product in which it has been modified or installed.  Access to a
333 | network may be denied when the modification itself materially and
334 | adversely affects the operation of the network or violates the rules and
335 | protocols for communication across the network.
336 | 
337 |   Corresponding Source conveyed, and Installation Information provided,
338 | in accord with this section must be in a format that is publicly
339 | documented (and with an implementation available to the public in
340 | source code form), and must require no special password or key for
341 | unpacking, reading or copying.
342 | 
343 |   7. Additional Terms.
344 | 
345 |   "Additional permissions" are terms that supplement the terms of this
346 | License by making exceptions from one or more of its conditions.
347 | Additional permissions that are applicable to the entire Program shall
348 | be treated as though they were included in this License, to the extent
349 | that they are valid under applicable law.  If additional permissions
350 | apply only to part of the Program, that part may be used separately
351 | under those permissions, but the entire Program remains governed by
352 | this License without regard to the additional permissions.
353 | 
354 |   When you convey a copy of a covered work, you may at your option
355 | remove any additional permissions from that copy, or from any part of
356 | it.  (Additional permissions may be written to require their own
357 | removal in certain cases when you modify the work.)  You may place
358 | additional permissions on material, added by you to a covered work,
359 | for which you have or can give appropriate copyright permission.
360 | 
361 |   Notwithstanding any other provision of this License, for material you
362 | add to a covered work, you may (if authorized by the copyright holders of
363 | that material) supplement the terms of this License with terms:
364 | 
365 |     a) Disclaiming warranty or limiting liability differently from the
366 |     terms of sections 15 and 16 of this License; or
367 | 
368 |     b) Requiring preservation of specified reasonable legal notices or
369 |     author attributions in that material or in the Appropriate Legal
370 |     Notices displayed by works containing it; or
371 | 
372 |     c) Prohibiting misrepresentation of the origin of that material, or
373 |     requiring that modified versions of such material be marked in
374 |     reasonable ways as different from the original version; or
375 | 
376 |     d) Limiting the use for publicity purposes of names of licensors or
377 |     authors of the material; or
378 | 
379 |     e) Declining to grant rights under trademark law for use of some
380 |     trade names, trademarks, or service marks; or
381 | 
382 |     f) Requiring indemnification of licensors and authors of that
383 |     material by anyone who conveys the material (or modified versions of
384 |     it) with contractual assumptions of liability to the recipient, for
385 |     any liability that these contractual assumptions directly impose on
386 |     those licensors and authors.
387 | 
388 |   All other non-permissive additional terms are considered "further
389 | restrictions" within the meaning of section 10.  If the Program as you
390 | received it, or any part of it, contains a notice stating that it is
391 | governed by this License along with a term that is a further
392 | restriction, you may remove that term.  If a license document contains
393 | a further restriction but permits relicensing or conveying under this
394 | License, you may add to a covered work material governed by the terms
395 | of that license document, provided that the further restriction does
396 | not survive such relicensing or conveying.
397 | 
398 |   If you add terms to a covered work in accord with this section, you
399 | must place, in the relevant source files, a statement of the
400 | additional terms that apply to those files, or a notice indicating
401 | where to find the applicable terms.
402 | 
403 |   Additional terms, permissive or non-permissive, may be stated in the
404 | form of a separately written license, or stated as exceptions;
405 | the above requirements apply either way.
406 | 
407 |   8. Termination.
408 | 
409 |   You may not propagate or modify a covered work except as expressly
410 | provided under this License.  Any attempt otherwise to propagate or
411 | modify it is void, and will automatically terminate your rights under
412 | this License (including any patent licenses granted under the third
413 | paragraph of section 11).
414 | 
415 |   However, if you cease all violation of this License, then your
416 | license from a particular copyright holder is reinstated (a)
417 | provisionally, unless and until the copyright holder explicitly and
418 | finally terminates your license, and (b) permanently, if the copyright
419 | holder fails to notify you of the violation by some reasonable means
420 | prior to 60 days after the cessation.
421 | 
422 |   Moreover, your license from a particular copyright holder is
423 | reinstated permanently if the copyright holder notifies you of the
424 | violation by some reasonable means, this is the first time you have
425 | received notice of violation of this License (for any work) from that
426 | copyright holder, and you cure the violation prior to 30 days after
427 | your receipt of the notice.
428 | 
429 |   Termination of your rights under this section does not terminate the
430 | licenses of parties who have received copies or rights from you under
431 | this License.  If your rights have been terminated and not permanently
432 | reinstated, you do not qualify to receive new licenses for the same
433 | material under section 10.
434 | 
435 |   9. Acceptance Not Required for Having Copies.
436 | 
437 |   You are not required to accept this License in order to receive or
438 | run a copy of the Program.  Ancillary propagation of a covered work
439 | occurring solely as a consequence of using peer-to-peer transmission
440 | to receive a copy likewise does not require acceptance.  However,
441 | nothing other than this License grants you permission to propagate or
442 | modify any covered work.  These actions infringe copyright if you do
443 | not accept this License.  Therefore, by modifying or propagating a
444 | covered work, you indicate your acceptance of this License to do so.
445 | 
446 |   10. Automatic Licensing of Downstream Recipients.
447 | 
448 |   Each time you convey a covered work, the recipient automatically
449 | receives a license from the original licensors, to run, modify and
450 | propagate that work, subject to this License.  You are not responsible
451 | for enforcing compliance by third parties with this License.
452 | 
453 |   An "entity transaction" is a transaction transferring control of an
454 | organization, or substantially all assets of one, or subdividing an
455 | organization, or merging organizations.  If propagation of a covered
456 | work results from an entity transaction, each party to that
457 | transaction who receives a copy of the work also receives whatever
458 | licenses to the work the party's predecessor in interest had or could
459 | give under the previous paragraph, plus a right to possession of the
460 | Corresponding Source of the work from the predecessor in interest, if
461 | the predecessor has it or can get it with reasonable efforts.
462 | 
463 |   You may not impose any further restrictions on the exercise of the
464 | rights granted or affirmed under this License.  For example, you may
465 | not impose a license fee, royalty, or other charge for exercise of
466 | rights granted under this License, and you may not initiate litigation
467 | (including a cross-claim or counterclaim in a lawsuit) alleging that
468 | any patent claim is infringed by making, using, selling, offering for
469 | sale, or importing the Program or any portion of it.
470 | 
471 |   11. Patents.
472 | 
473 |   A "contributor" is a copyright holder who authorizes use under this
474 | License of the Program or a work on which the Program is based.  The
475 | work thus licensed is called the contributor's "contributor version".
476 | 
477 |   A contributor's "essential patent claims" are all patent claims
478 | owned or controlled by the contributor, whether already acquired or
479 | hereafter acquired, that would be infringed by some manner, permitted
480 | by this License, of making, using, or selling its contributor version,
481 | but do not include claims that would be infringed only as a
482 | consequence of further modification of the contributor version.  For
483 | purposes of this definition, "control" includes the right to grant
484 | patent sublicenses in a manner consistent with the requirements of
485 | this License.
486 | 
487 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
488 | patent license under the contributor's essential patent claims, to
489 | make, use, sell, offer for sale, import and otherwise run, modify and
490 | propagate the contents of its contributor version.
491 | 
492 |   In the following three paragraphs, a "patent license" is any express
493 | agreement or commitment, however denominated, not to enforce a patent
494 | (such as an express permission to practice a patent or covenant not to
495 | sue for patent infringement).  To "grant" such a patent license to a
496 | party means to make such an agreement or commitment not to enforce a
497 | patent against the party.
498 | 
499 |   If you convey a covered work, knowingly relying on a patent license,
500 | and the Corresponding Source of the work is not available for anyone
501 | to copy, free of charge and under the terms of this License, through a
502 | publicly available network server or other readily accessible means,
503 | then you must either (1) cause the Corresponding Source to be so
504 | available, or (2) arrange to deprive yourself of the benefit of the
505 | patent license for this particular work, or (3) arrange, in a manner
506 | consistent with the requirements of this License, to extend the patent
507 | license to downstream recipients.  "Knowingly relying" means you have
508 | actual knowledge that, but for the patent license, your conveying the
509 | covered work in a country, or your recipient's use of the covered work
510 | in a country, would infringe one or more identifiable patents in that
511 | country that you have reason to believe are valid.
512 | 
513 |   If, pursuant to or in connection with a single transaction or
514 | arrangement, you convey, or propagate by procuring conveyance of, a
515 | covered work, and grant a patent license to some of the parties
516 | receiving the covered work authorizing them to use, propagate, modify
517 | or convey a specific copy of the covered work, then the patent license
518 | you grant is automatically extended to all recipients of the covered
519 | work and works based on it.
520 | 
521 |   A patent license is "discriminatory" if it does not include within
522 | the scope of its coverage, prohibits the exercise of, or is
523 | conditioned on the non-exercise of one or more of the rights that are
524 | specifically granted under this License.  You may not convey a covered
525 | work if you are a party to an arrangement with a third party that is
526 | in the business of distributing software, under which you make payment
527 | to the third party based on the extent of your activity of conveying
528 | the work, and under which the third party grants, to any of the
529 | parties who would receive the covered work from you, a discriminatory
530 | patent license (a) in connection with copies of the covered work
531 | conveyed by you (or copies made from those copies), or (b) primarily
532 | for and in connection with specific products or compilations that
533 | contain the covered work, unless you entered into that arrangement,
534 | or that patent license was granted, prior to 28 March 2007.
535 | 
536 |   Nothing in this License shall be construed as excluding or limiting
537 | any implied license or other defenses to infringement that may
538 | otherwise be available to you under applicable patent law.
539 | 
540 |   12. No Surrender of Others' Freedom.
541 | 
542 |   If conditions are imposed on you (whether by court order, agreement or
543 | otherwise) that contradict the conditions of this License, they do not
544 | excuse you from the conditions of this License.  If you cannot convey a
545 | covered work so as to satisfy simultaneously your obligations under this
546 | License and any other pertinent obligations, then as a consequence you may
547 | not convey it at all.  For example, if you agree to terms that obligate you
548 | to collect a royalty for further conveying from those to whom you convey
549 | the Program, the only way you could satisfy both those terms and this
550 | License would be to refrain entirely from conveying the Program.
551 | 
552 |   13. Use with the GNU Affero General Public License.
553 | 
554 |   Notwithstanding any other provision of this License, you have
555 | permission to link or combine any covered work with a work licensed
556 | under version 3 of the GNU Affero General Public License into a single
557 | combined work, and to convey the resulting work.  The terms of this
558 | License will continue to apply to the part which is the covered work,
559 | but the special requirements of the GNU Affero General Public License,
560 | section 13, concerning interaction through a network will apply to the
561 | combination as such.
562 | 
563 |   14. Revised Versions of this License.
564 | 
565 |   The Free Software Foundation may publish revised and/or new versions of
566 | the GNU General Public License from time to time.  Such new versions will
567 | be similar in spirit to the present version, but may differ in detail to
568 | address new problems or concerns.
569 | 
570 |   Each version is given a distinguishing version number.  If the
571 | Program specifies that a certain numbered version of the GNU General
572 | Public License "or any later version" applies to it, you have the
573 | option of following the terms and conditions either of that numbered
574 | version or of any later version published by the Free Software
575 | Foundation.  If the Program does not specify a version number of the
576 | GNU General Public License, you may choose any version ever published
577 | by the Free Software Foundation.
578 | 
579 |   If the Program specifies that a proxy can decide which future
580 | versions of the GNU General Public License can be used, that proxy's
581 | public statement of acceptance of a version permanently authorizes you
582 | to choose that version for the Program.
583 | 
584 |   Later license versions may give you additional or different
585 | permissions.  However, no additional obligations are imposed on any
586 | author or copyright holder as a result of your choosing to follow a
587 | later version.
588 | 
589 |   15. Disclaimer of Warranty.
590 | 
591 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
592 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
596 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
597 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
599 | 
600 |   16. Limitation of Liability.
601 | 
602 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
610 | SUCH DAMAGES.
611 | 
612 |   17. Interpretation of Sections 15 and 16.
613 | 
614 |   If the disclaimer of warranty and limitation of liability provided
615 | above cannot be given local legal effect according to their terms,
616 | reviewing courts shall apply local law that most closely approximates
617 | an absolute waiver of all civil liability in connection with the
618 | Program, unless a warranty or assumption of liability accompanies a
619 | copy of the Program in return for a fee.
620 | 
621 |                      END OF TERMS AND CONDITIONS
622 | 
623 |             How to Apply These Terms to Your New Programs
624 | 
625 |   If you develop a new program, and you want it to be of the greatest
626 | possible use to the public, the best way to achieve this is to make it
627 | free software which everyone can redistribute and change under these terms.
628 | 
629 |   To do so, attach the following notices to the program.  It is safest
630 | to attach them to the start of each source file to most effectively
631 | state the exclusion of warranty; and each file should have at least
632 | the "copyright" line and a pointer to where the full notice is found.
633 | 
634 |     <one line to give the program's name and a brief idea of what it does.>
635 |     Copyright (C) <year>  <name of author>
636 | 
637 |     This program is free software: you can redistribute it and/or modify
638 |     it under the terms of the GNU General Public License as published by
639 |     the Free Software Foundation, either version 3 of the License, or
640 |     (at your option) any later version.
641 | 
642 |     This program is distributed in the hope that it will be useful,
643 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
644 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
645 |     GNU General Public License for more details.
646 | 
647 |     You should have received a copy of the GNU General Public License
648 |     along with this program.  If not, see <https://www.gnu.org/licenses/>.
649 | 
650 | Also add information on how to contact you by electronic and paper mail.
651 | 
652 |   If the program does terminal interaction, make it output a short
653 | notice like this when it starts in an interactive mode:
654 | 
655 |     <program>  Copyright (C) <year>  <name of author>
656 |     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657 |     This is free software, and you are welcome to redistribute it
658 |     under certain conditions; type `show c' for details.
659 | 
660 | The hypothetical commands `show w' and `show c' should show the appropriate
661 | parts of the General Public License.  Of course, your program's commands
662 | might be different; for a GUI interface, you would use an "about box".
663 | 
664 |   You should also get your employer (if you work as a programmer) or school,
665 | if any, to sign a "copyright disclaimer" for the program, if necessary.
666 | For more information on this, and how to apply and follow the GNU GPL, see
667 | <https://www.gnu.org/licenses/>.
668 | 
669 |   The GNU General Public License does not permit incorporating your program
670 | into proprietary programs.  If your program is a subroutine library, you
671 | may consider it more useful to permit linking proprietary applications with
672 | the library.  If this is what you want to do, use the GNU Lesser General
673 | Public License instead of this License.  But first, please read
674 | <https://www.gnu.org/licenses/why-not-lgpl.html>.
675 | 


--------------------------------------------------------------------------------
/PROPS.md:
--------------------------------------------------------------------------------
 1 | <img src="images/logo.png" width="100%"/>
 2 | 
 3 | ## 💡 Props List
 4 | 
 5 | | Property                | Description                                                                                                                    | Type             | Default          | Note                                             |
 6 | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ---------------- | ------------------------------------------------ |
 7 | | `accelerationDelay`     | Delay time before start the `onLongPress` event and increase or decrease and continually                                       | Number           | `750 `           |                                                  |
 8 | | `activeOpacity`         | Opacity on pressed button                                                                                                      | Number           | `0.85`           |                                                  |
 9 | | `append`                | Custom element before right button                                                                                             | Component        |                  |                                                  |
10 | | `arrows`                | Labels on button will be arrows (< and >) instead of plus and minus                                                            | Boolean          | `false`          |                                                  |
11 | | `autoFocus`             | If `true`, focuses the input on `componentDidMount`.                                                                           |                  | `false`          |                                                  |
12 | | `background`            | Background color of number button                                                                                              | String           | `transparent`    |                                                  |
13 | | `buttonFontFamily`      | Custom fontFamily of buttons of the Spinner                                                                                    | String           | `System Default` |                                                  |
14 | | `buttonFontSize`        | Custom fontSize of buttons of the Spinner                                                                                      | Number           | `14`             |                                                  |
15 | | `buttonLeftDisabled`    | Disable left button                                                                                                            | Boolean          | `false`          |                                                  |
16 | | `buttonLeftImage`       | Custom element on the button left of the spinner                                                                               | Component        |                  |                                                  |
17 | | `buttonLeftText`        | Custom text on the button left of the spinner                                                                                  | String           |                  |                                                  |
18 | | `buttonPressLeftImage`  | Custom element on the button left of the spinner on pressed state                                                              | Component        |                  |                                                  |
19 | | `buttonPressRightImage` | Custom element on the button right of the spinner on pressed state                                                             | Component        |                  |                                                  |
20 | | `buttonPressStyle`      | Button Style on Pressed state (Plus and Minus buttons)                                                                         | Object           |                  | Could overwrite other props                      |
21 | | `buttonPressTextColor`  | Custom color of the button of the Spinner on Pressed state                                                                     | String           | Auto             |                                                  |
22 | | `buttonRightDisabled`   | Disable right button                                                                                                           | Boolean          | `false`          |                                                  |
23 | | `buttonRightImage`      | Custom element on the button right of the spinner                                                                              | Component        |                  |                                                  |
24 | | `buttonRightText`       | Custom text on the button right of the spinner                                                                                 | String           |                  |                                                  |
25 | | `buttonStyle`           | Button Style (Plus and Minus buttons)                                                                                          | Object           |                  | Could overwrite other props                      |
26 | | `buttonTextColor`       | Custom color of the button of the Spinner                                                                                      | String           | Auto             |                                                  |
27 | | `buttonPressTextStyle`  | Button Style on Pressed state (Plus and Minus buttons)                                                                         | Object           |                  | Could overwrite other props                      |
28 | | `buttonTextStyle`       | Button text Style state (Plus and Minus buttons)                                                                               | Object           |                  | Could overwrite other props                      |
29 | | `colorAsBackground`     | Use color as background                                                                                                        | Bool             | `false`          |                                                  |
30 | | `colorLeft`             | Custom color of the Spinner left button                                                                                        | String           | `#3E525F`        |                                                  |
31 | | `colorMax`              | Custom color of the Spinner when reach max value                                                                               | String           |                  |                                                  |
32 | | `colorMin`              | Custom color of the Spinner when reach min value                                                                               | String           |                  |                                                  |
33 | | `colorPress`            | Custom color of the Spinner button on touch press                                                                              | String           | `#3E525F`        |                                                  |
34 | | `colorRight`            | Custom color of the Spinner right button                                                                                       | String           | `#3E525F`        |                                                  |
35 | | `color`                 | Custom color of the Spinner                                                                                                    | String           | `#3E525F`        |                                                  |
36 | | `continuity`            | On min value is reached next decrease value will be the max value, if max is reached next increase value will be the min value | Boolean          | `false`          |                                                  |
37 | | `disabled`              | Disable the Spinner or not                                                                                                     | Boolean          | `false`          |                                                  |
38 | | `editable`              | Set if input number field is editable or not                                                                                   | Boolean          | `true`           |                                                  |
39 | | `emptied`               | Set if input can be empty                                                                                                      | Boolean          | `false`          |                                                  |
40 | | `fontFamily`            | Custom fontFamily of the text input of the Spinner                                                                             | String           | System Default   |                                                  |
41 | | `fontSize`              | Custom fontSize of the text input of the Spinner                                                                               | Number           | `14`             |                                                  |
42 | | `formatter`             | Custom formatting of the Spinner text                                                                                          | Function         | `null`           | `(value) => { ...; return formattedValue }`.  `editable` must be `false` |
43 | | `height`                | Custom height of the Spinner                                                                                                   | Number           | `50`             |                                                  |
44 | | `initialValue`          | Initial value of the Spinner                                                                                                   | String<br>Number | `0`              |                                                  |
45 | | `inputStyle`            | Input Style (Text number at middle)                                                                                            | Object           |                  | Could overwrite other props                      |
46 | | `inputProps`            | Customized TextInput Component props                                                                                           | Object           | `null`           |                                                  |
47 | | `leftButtonProps`       | Customized left button (Touchable Component) props                                                                             | Object           | `null`           |                                                  |
48 | | `longStep`              | Value to increment or decrement the current spinner value `onLongPress`                                                        | String<br>Number | `step`           |                                                  |
49 | | `maxLength`             | Limits the maximum number of characters that can be entered.                                                                   | Number           |                  |                                                  |
50 | | `max`                   | Max number permitted                                                                                                           | String<br>Number | `null`           |                                                  |
51 | | `min`                   | Min value permitted                                                                                                            | String<br>Number | `0`              |                                                  |
52 | | `onBlur`                | Callback that is called when the text input is blurred.                                                                        | (e) => { ... }   |                  |                                                  |
53 | | `onChange`              | Get the number of the Spinner                                                                                                  | Function         |                  | `(num) => { ... }`                               |
54 | | `onDecrease`            | When decrease button is clicked get value decreased                                                                            | Function         |                  | `(decreased) => { ... }`                         |
55 | | `onFocus`               | Callback that is called when the text input is focused.                                                                        | (e) => { ... }   |                  |                                                  |
56 | | `onIncrease`            | When increase button is clicked get value increased                                                                            | Function         |                  | `(increased) => { ... }`                         |
57 | | `onKeyPress`            | Callback that is called when a key is pressed.                                                                                 | (e) => { ... }   |                  |                                                  |
58 | | `onLongPress`           | Callback that is called when holding the right or the left button                                                              | Function         |                  |                                                  |
59 | | `onMax`                 | When max is reached get max number permitted                                                                                   | Function         |                  | `(max) => { ... }`                               |
60 | | `onMin`                 | When min is reached get min number permitted                                                                                   | Function         |                  | `(min) => { ... }`                               |
61 | | `onSubmitEditing`       | Callback that is called when the text input's submit button is pressed                                                         | (e) => { ... }   |                  |                                                  |
62 | | `placeholder`           | The string that will be rendered when text input value is equal to zero                                                        | String           | `null`           |                                                  |
63 | | `placeholderTextColor`  | The text color of the placeholder string.                                                                                      | String           | `null`           |                                                  |
64 | | `precision`             | Max numbers permitted after comma                                                                                              | Integer          | `2`              |                                                  |
65 | | `prepend`               | Custom element after left button                                                                                               | Component        |                  |                                                  |
66 | | `returnKeyLabel`        | Sets the return key to the label. Use it instead of `returnKeyType`.                                                           | String           |                  |                                                  |
67 | | `returnKeyType`         | Determines how the return key should look. On Android you can also use `returnKeyLabel`                                        | String           |                  |                                                  |
68 | | `rightButtonProps`      | Customized right button (Touchable Component) props                                                                            | Object           | `null`           |                                                  |
69 | | `rounded`               | Use circular button                                                                                                            | Boolean          | `true`           |                                                  |
70 | | `selectTextOnFocus`     | If `true`, all text will automatically be selected on focus.                                                                   | Bool             | `false`          |                                                  |
71 | | `selectionColor`        | The highlight and cursor color of the text input.                                                                              | String           | `null`           |                                                  |
72 | | `shadow`                | Show container shadow                                                                                                          | Boolean          | `false`          | Use with `background` like `background={"#FFF"}` |
73 | | `showBorder`            | Show the border of the Spinner or not                                                                                          | Boolean          | `false`          | Use with `rounded={false}`                       |
74 | | `skin`                  | Skin layout                                                                                                                    | String           |                  | `clean`, `modern`, `paper`, `round`, `square`    |
75 | | `step`                  | Value to increment or decrement the current spinner value                                                                      | String<br>Number | `1`              |                                                  |
76 | | `style`                 | Container style                                                                                                                | Object           |                  | Could overwrite other props                      |
77 | | `speed`                 | Speed acceleration ratio of increase or decrease `onLongPress`                                                                 | Number           | `7`              | (value from `1` to `10`)                         |
78 | | `buttonTextProps`       | Customized text button props                                                                                                   | Object           | `null`           |                                                  |
79 | | `textColor`             | Custom number color                                                                                                            | String           | Auto             |                                                  |
80 | | `type`                  | Type of spinner                                                                                                                | String           | `int`            | Can be `int` or `real`/`float`...                |
81 | | `typingTime`            | Time before debounce and trigger `onChange` event                                                                              | Number           | `750`            |                                                  |
82 | | `value`                 | Controlled value of the Spinner                                                                                                | String<br>Number | `0`              |                                                  |
83 | | `width`                 | Custom width of the Spinner                                                                                                    | Number           | `150`            |                                                  |
84 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 
  3 | <img src="images/logo_full.png" width="100%"/>
  4 | 
  5 | ### If this project has helped you out, please support us with a star 🌟
  6 | 
  7 | <br>
  8 | 
  9 | [![NPM version](http://img.shields.io/npm/v/react-native-input-spinner.svg?style=for-the-badge)](http://npmjs.org/package/react-native-input-spinner)
 10 | [![Package Quality](https://npm.packagequality.com/shield/react-native-input-spinner.svg?style=for-the-badge)](https://packagequality.com/#?package=react-native-input-spinner)
 11 | [![js-prittier-style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://prettier.io/)
 12 | [![Compatibility](https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20expo-blue.svg?style=for-the-badge)](http://npmjs.org/package/react-native-input-spinner)
 13 | 
 14 | </div>
 15 | 
 16 | ## 📘 Description
 17 | 
 18 | **Author:** Marco Cesarato
 19 | 
 20 | **Github:** https://github.com/marcocesarato/react-native-input-spinner
 21 | 
 22 | An extendible input number spinner component for react-native highly customizable.
 23 | This component enhance a text input for entering numeric values, with increase and decrease buttons.
 24 | 
 25 | Try it on the published demo web app: [https://marcocesarato.github.io/react-native-input-spinner/](https://marcocesarato.github.io/react-native-input-spinner/)
 26 | 
 27 | _Compatible with: Android, iOS, Windows, Web and Expo._
 28 | 
 29 | ## 📖 Install
 30 | 
 31 | Install the library from npm or yarn just running one of the following command lines:
 32 | 
 33 | | npm                                             | yarn                                  |
 34 | | ----------------------------------------------- | ------------------------------------- |
 35 | | `npm install react-native-input-spinner --save` | `yarn add react-native-input-spinner` |
 36 | 
 37 | [![NPM](https://nodei.co/npm/react-native-input-spinner.png?mini=true)](https://nodei.co/npm/react-native-input-spinner/)
 38 | 
 39 | ## 💻 Usage
 40 | 
 41 | ```javascript
 42 | import InputSpinner from "react-native-input-spinner";
 43 | 
 44 | // Example
 45 | <InputSpinner
 46 | 	max={10}
 47 | 	min={2}
 48 | 	step={2}
 49 | 	colorMax={"#f04048"}
 50 | 	colorMin={"#40c5f4"}
 51 | 	value={this.state.number}
 52 | 	onChange={(num) => {
 53 | 		console.log(num);
 54 | 	}}
 55 | />;
 56 | ```
 57 | 
 58 | For more examples check the `Example` directory the `App.js` file
 59 | 
 60 | ## 🎨 Screenshots
 61 | 
 62 | | Default props + Min & Max colors | Not rounded, showBorder, Min & Max colors |
 63 | | -------------------------------- | ----------------------------------------- |
 64 | | <img src="images/example.png" /> | <img src="images/example_2.png" />        |
 65 | 
 66 | ### High customization
 67 | 
 68 | | Skins                                     | Customization                          |
 69 | | ----------------------------------------- | -------------------------------------- |
 70 | | <img src="images/skins.png" width="500"/> | <img src="images/customization.png" /> |
 71 | 
 72 | ## ⚡️ Example
 73 | 
 74 | ### Web
 75 | 
 76 | [https://marcocesarato.github.io/react-native-input-spinner/](https://marcocesarato.github.io/react-native-input-spinner/)
 77 | 
 78 | ### Expo
 79 | 
 80 | Clone or download repo and after:
 81 | 
 82 | ```shell
 83 | cd Example
 84 | yarn install # or npm install
 85 | expo start
 86 | ```
 87 | 
 88 | Open Expo Client on your device. Use it to scan the QR code printed by `expo start`. You may have to wait a minute while your project bundles and loads for the first time.
 89 | 
 90 | [Example App Screenshot](images/example_app.png)
 91 | 
 92 | ## 💡 Props
 93 | 
 94 | Check the "[Props List](PROPS.md)" file to have the complete list of component props ordered by name.
 95 | 
 96 | ### Structure
 97 | 
 98 | <img src="images/structure.png" />
 99 | 
100 | ### Handlers
101 | 
102 | | Handler           | Description                                                                   | Func                   |
103 | | ----------------- | ----------------------------------------------------------------------------- | ---------------------- |
104 | | `onBlur`          | Callback that is called when the text input is blurred.                       | (e) => { ... }         |
105 | | `onChange`        | Callback that is called when the number of the Spinner change.                | (num) => { ... }       |
106 | | `onDecrease`      | Callback that is called when decrease button is clicked get value decreased.  | (decreased) => { ... } |
107 | | `onFocus`         | Callback that is called when the text input is focused.                       | (e) => { ... }         |
108 | | `onIncrease`      | Callback that is called when increase button is clicked get value increased . | (increased) => { ... } |
109 | | `onKeyPress`      | Callback that is called when a key is pressed.                                | (e) => { ... }         |
110 | | `onLongPress`     | Callback that is called when holding the right or the left button             | Function               |
111 | | `onMax`           | Callback that is called when max is reached get max number permitted.         | (max) => { ... }       |
112 | | `onMin`           | Callback that is called when min is reached get min number permitted.         | (min) => { ... }       |
113 | | `onSubmitEditing` | Callback that is called when the text input's submit button is pressed        | (e) => { ... }         |
114 | 
115 | ### Props
116 | 
117 | | Property               | Description                                                                                                                    | Type             | Default | Note                              |
118 | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ------- | --------------------------------- |
119 | | `accelerationDelay`    | Delay time before start the `onLongPress` event and increase or decrease and continually                                       | Number           | `1000`  |                                   |
120 | | `append`               | Custom element before right button                                                                                             | Component        |         |                                   |
121 | | `autoFocus`            | If `true`, focuses the input on `componentDidMount`.                                                                           |                  | `false` |                                   |
122 | | `continuity`           | On min value is reached next decrease value will be the max value, if max is reached next increase value will be the min value | Boolean          | `false` |                                   |
123 | | `disabled`             | Disable the Spinner or not                                                                                                     | Boolean          | `false` |                                   |
124 | | `editable`             | Set if input number field is editable or not                                                                                   | Boolean          | `true`  |                                   |
125 | | `emptied`              | Set if input can be empty                                                                                                      | Boolean          | `false` |                                   |
126 | | `initialValue`         | Initial value of the Spinner                                                                                                   | String<br>Number | `0`     |                                   |
127 | | `inputProps`           | Customized TextInput Component props                                                                                           | Object           | `null`  | Could overwrite other props       |
128 | | `leftButtonProps`      | Customized left button (Touchable Component) props                                                                             | Object           | `null`  | Could overwrite other props       |
129 | | `maxLength`            | Limits the maximum number of characters that can be entered.                                                                   | Number           |         |                                   |
130 | | `max`                  | Max number permitted                                                                                                           | String<br>Number | `null`  |                                   |
131 | | `min`                  | Min value permitted                                                                                                            | String<br>Number | `0`     |                                   |
132 | | `placeholder`          | The string that will be rendered when text input value is equal to zero                                                        | String           | `null`  |                                   |
133 | | `placeholderTextColor` | The text color of the placeholder string.                                                                                      | String           | `null`  |                                   |
134 | | `precision`            | Max numbers permitted after comma                                                                                              | Integer          | `2`     |                                   |
135 | | `prepend`              | Custom element after left button                                                                                               | Component        |         |                                   |
136 | | `returnKeyLabel`       | Sets the return key to the label. Use it instead of `returnKeyType`.                                                           | String           |         |                                   |
137 | | `returnKeyType`        | Determines how the return key should look. On Android you can also use `returnKeyLabel`                                        | String           |         |                                   |
138 | | `rightButtonProps`     | Customized right button (Touchable Component) props                                                                            | Object           | `null`  | Could overwrite other props       |
139 | | `selectTextOnFocus`    | If `true`, all text will automatically be selected on focus.                                                                   | Bool             | `false` |                                   |
140 | | `selectionColor`       | The highlight and cursor color of the text input.                                                                              | String           | `null`  |                                   |
141 | | `step`                 | Value to increment or decrement the current spinner value                                                                      | String<br>Number | `1`     |                                   |
142 | | `longStep`             | Value to increment or decrement the current spinner value `onLongPress`                                                        | String<br>Number | `step`  |                                   |
143 | | `speed`                | Speed acceleration ratio of increase or decrease `onLongPress`                                                                 | Number           | `7`     | (value from `1` to `10`)          |
144 | | `buttonTextProps`      | Customized text button props                                                                                                   | Object           | `null`  |                                   |
145 | | `typingTime`           | Time before debounce and trigger `onChange` event                                                                              | Number           | `750`   |                                   |
146 | | `type`                 | Type of spinner                                                                                                                | String           | `int`   | Can be `int` or `real`/`float`... |
147 | | `value`                | Controlled value of the Spinner                                                                                                | String<br>Number | `0`     |                                   |
148 | | `formatter`            | An optional function that is called to format the value for display                                                            | Function         | `null`  | Should return a `string`.  `editable` must be `false`.          |
149 | 
150 | #### Screenshots
151 | 
152 | <img src="images/append.png"/>
153 | 
154 | ##### Description
155 | 
156 | - Top spinner with a child
157 | - Bottom spinner with `prepend` and `append`
158 | 
159 | ### Props Styles
160 | 
161 | | Property           | Description                   | Type   | Default | Note                                          |
162 | | ------------------ | ----------------------------- | ------ | ------- | --------------------------------------------- |
163 | | `buttonPressStyle` | Button style on Pressed state | Object |         | Could overwrite other props                   |
164 | | `buttonStyle`      | Button style                  | Object |         | Could overwrite other props                   |
165 | | `inputStyle`       | Text Input style              | Object |         | Could overwrite other props                   |
166 | | `skin`             | Skin layout                   | String |         | `clean`, `modern`, `paper`, `round`, `square` |
167 | | `style`            | Container style               | Object |         | Could overwrite other props                   |
168 | 
169 | ### Props Colors
170 | 
171 | | Property               | Description                                                | Type   | Default       | Note |
172 | | ---------------------- | ---------------------------------------------------------- | ------ | ------------- | ---- |
173 | | `background`           | Custom input text background color                         | String | `transparent` |
174 | | `buttonPressTextColor` | Custom color of the button of the Spinner on Pressed state | String | Auto          |
175 | | `buttonTextColor`      | Custom color of the label's button of the Spinner          | String | Auto          |
176 | | `colorAsBackground`    | Use color as background                                    | Bool   | `false`       |
177 | | `colorLeft`            | Custom color of the Spinner left button                    | String | `#3E525F`     |
178 | | `colorMax`             | Custom color of the Spinner when reach max value           | String |               |
179 | | `colorMin`             | Custom color of the Spinner when reach min value           | String |               |
180 | | `colorPress`           | Custom color of the Spinner button on touch press          | String | `#3E525F`     |
181 | | `colorRight`           | Custom color of the Spinner right button                   | String | `#3E525F`     |
182 | | `color`                | Custom color of the Spinner                                | String | `#3E525F`     |
183 | | `textColor`            | Custom input text number color                             | String | Auto          |
184 | 
185 | #### Screenshots
186 | 
187 | <img src="images/button_press.gif" />
188 | 
189 | ##### Description
190 | 
191 | - Spinner with `color`, `buttonTextColor`, `colorPress` and `buttonPressTextColor` custom colors
192 | 
193 | ### Props Container Style
194 | 
195 | | Property     | Description                           | Type    | Default | Note                                             |
196 | | ------------ | ------------------------------------- | ------- | ------- | ------------------------------------------------ |
197 | | `height`     | Custom height of the Spinner          | Number  | `50`    |
198 | | `shadow`     | Show container shadow                 | Boolean | `false` | Use with `background` like `background={"#FFF"}` |
199 | | `showBorder` | Show the border of the Spinner or not | Boolean | `false` | Use with `rounded={false}`                       |
200 | | `style`      | Container style                       | Object  |         | Could overwrite other props                      |
201 | | `width`      | Custom width of the Spinner           | Number  | `150`   |
202 | 
203 | ### Props Buttons Style
204 | 
205 | | Property                | Description                                                        | Type      | Default        | Note                        |
206 | | ----------------------- | ------------------------------------------------------------------ | --------- | -------------- | --------------------------- |
207 | | `activeOpacity`         | Opacity of underlay on pressed button                              | Number    | `0.85`         |
208 | | `arrows`                | Labels on button will be (< and >) instead of (+ and -)            | Boolean   | `false`        |
209 | | `buttonFontFamily`      | Custom fontFamily of buttons of the Spinner                        | String    | System Default |
210 | | `buttonFontSize`        | Custom fontSize of buttons of the Spinner                          | Number    | `14`           |
211 | | `buttonLeftDisabled`    | Disable left button                                                | Boolean   | `false`        |                             |
212 | | `buttonLeftImage`       | Custom element on the button left of the spinner                   | Component |                | Could overwrite other props |
213 | | `buttonLeftText`        | Custom text on the button left of the spinner                      | String    |                |
214 | | `buttonPressLeftImage`  | Custom element on the button left of the spinner on pressed state  | Component |                | Could overwrite other props |
215 | | `buttonPressRightImage` | Custom element on the button right of the spinner on pressed state | Component |                | Could overwrite other props |
216 | | `buttonPressStyle`      | Button Style on Pressed state (Plus and Minus buttons)             | Object    |                |
217 | | `buttonPressTextColor`  | Custom color of the button of the Spinner on Pressed state         | String    | `#FFFFFF`      |
218 | | `buttonRightDisabled`   | Disable right button                                               | Boolean   | `false`        |                             |
219 | | `buttonRightImage`      | Custom element on the button right of the spinner                  | Component |                | Could overwrite other props |
220 | | `buttonRightText`       | Custom text on the button right of the spinner                     | String    |                |
221 | | `buttonStyle`           | Button Style (Plus and Minus buttons)                              | Object    |                |
222 | | `buttonTextColor`       | Custom color of the labels's button of the Spinner                 | String    | `#FFFFFF`      |
223 | | `buttonPressTextStyle`  | Button Style on Pressed state (Plus and Minus buttons)             | Object    |                | Could overwrite other props |
224 | | `buttonTextStyle`       | Button text Style state (Plus and Minus buttons)                   | Object    |                | Could overwrite other props |
225 | | `rounded`               | Use circular button                                                | Boolean   | `true`         |
226 | 
227 | ### Props Text Input Style
228 | 
229 | | Property     | Description                                        | Type   | Default        | Note                      |
230 | | ------------ | -------------------------------------------------- | ------ | -------------- | ------------------------- |
231 | | `background` | Custom input text background color                 | String | `transparent`  |
232 | | `fontFamily` | Custom fontFamily of the text input of the Spinner | String | System Default |
233 | | `fontSize`   | Custom fontSize of the text input of the Spinner   | Number | `14`           |
234 | | `inputStyle` | Text Input style                                   | Object |                | Can overwrite other props |
235 | | `textColor`  | Custom input text number color                     | String | `#000000`      |
236 | 
237 | ## 🤔 How to contribute
238 | 
239 | Have an idea? Found a bug? Please raise to [ISSUES](https://github.com/marcocesarato/react-native-input-spinner/issues).
240 | Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.
241 | 
242 | <p align="center">
243 |     <br>
244 |     <a href="https://nodei.co/npm/react-native-input-spinner/" rel="nofollow">
245 |         <img align="center" src="https://nodei.co/npm/react-native-input-spinner.png?downloads=true&downloadRank=true" width="384">
246 |     </a>
247 | </p>
248 | 


--------------------------------------------------------------------------------
/images/append.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/append.png


--------------------------------------------------------------------------------
/images/button_press.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/button_press.gif


--------------------------------------------------------------------------------
/images/customization.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/customization.png


--------------------------------------------------------------------------------
/images/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/example.png


--------------------------------------------------------------------------------
/images/example_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/example_2.png


--------------------------------------------------------------------------------
/images/example_app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/example_app.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/logo.png


--------------------------------------------------------------------------------
/images/logo_full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/logo_full.png


--------------------------------------------------------------------------------
/images/skins.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/skins.png


--------------------------------------------------------------------------------
/images/structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcocesarato/react-native-input-spinner/a151c2dd6ad5b129a706b4ab70d52a7a11c25f7c/images/structure.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "react-native-input-spinner",
 3 | 	"version": "1.8.0",
 4 | 	"description": "React native input with increase and decrease buttons",
 5 | 	"main": "./src/index.js",
 6 | 	"types": "./src/index.d.ts",
 7 | 	"scripts": {
 8 | 		"prettify": "npx prettier --write './src/**/*.{ts,json,md,yml,js}' && npx prettier --write './*.{ts,json,md,yml,js}'",
 9 | 		"test": "echo \"Error: no test specified\" && exit 1"
10 | 	},
11 | 	"repository": {
12 | 		"type": "git",
13 | 		"url": "git+https://github.com/marcocesarato/react-native-input-spinner.git"
14 | 	},
15 | 	"keywords": [
16 | 		"react-native-component",
17 | 		"react-component",
18 | 		"react-native",
19 | 		"android",
20 | 		"ios",
21 | 		"windows",
22 | 		"reactnative",
23 | 		"spinner",
24 | 		"number",
25 | 		"input",
26 | 		"float",
27 | 		"real",
28 | 		"integer",
29 | 		"decimal"
30 | 	],
31 | 	"publishConfig": {
32 | 		"registry": "https://registry.npmjs.org/"
33 | 	},
34 | 	"readmeFilename": "README.md",
35 | 	"author": "Marco Cesarato <cesarato.developer@gmail.com>",
36 | 	"bugs": {
37 | 		"url": "https://github.com/marcocesarato/react-native-input-spinner/issues"
38 | 	},
39 | 	"homepage": "https://github.com/marcocesarato/react-native-input-spinner#readme",
40 | 	"license": "GPL-3.0-or-later",
41 | 	"peerDependencies": {
42 | 		"@types/react": "*",
43 | 		"@types/react-native": "*",
44 | 		"react": "*",
45 | 		"react-native": "*"
46 | 	},
47 | 	"dependencies": {
48 | 		"prop-types": "^15.7.2"
49 | 	},
50 | 	"devDependencies": {
51 | 		"prettier": "^2.3.1",
52 | 		"pretty-quick": "^3.1.1"
53 | 	},
54 | 	"bit": {
55 | 		"env": {},
56 | 		"packageManager": "npm"
57 | 	}
58 | }
59 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 |   "extends": [
4 |     "config:base"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/InputSpinner.js:
--------------------------------------------------------------------------------
   1 | import React, {Component} from "react";
   2 | import {
   3 | 	Platform,
   4 | 	Text,
   5 | 	TextInput,
   6 | 	TouchableHighlight,
   7 | 	View,
   8 | } from "react-native";
   9 | import PropTypes from "prop-types";
  10 | import {defaultColor, defaultTransparent, defaultFont, Style} from "./Style";
  11 | import {
  12 | 	colorsToHex,
  13 | 	debounce,
  14 | 	getColorContrast,
  15 | 	isCallable,
  16 | 	isEmpty,
  17 | 	isNumeric,
  18 | 	isTransparentColor,
  19 | 	mergeViewStyle,
  20 | 	parseColor,
  21 | } from "./Utils";
  22 | 
  23 | /**
  24 |  * Default constants
  25 |  */
  26 | export const defaultSpeed = 7;
  27 | export const defaultAccelerationDelay = 1000;
  28 | export const defaultDelayPressIn = 0;
  29 | export const defaultDelayPressOut = 0;
  30 | export const defaultTypingTime = 500;
  31 | 
  32 | /**
  33 |  * Input Spinner
  34 |  * @author Marco Cesarato <cesarato.developer@gmail.com>
  35 |  */
  36 | class InputSpinner extends Component {
  37 | 	/**
  38 | 	 * Constructor
  39 | 	 * @param props
  40 | 	 */
  41 | 	constructor(props) {
  42 | 		super(props);
  43 | 
  44 | 		// Timers
  45 | 		this.increaseTimer = null;
  46 | 		this.decreaseTimer = null;
  47 | 		this.holdTime = null;
  48 | 
  49 | 		let spinnerStep = this._parseNum(this.props.step);
  50 | 		if (!this.isTypeDecimal() && spinnerStep < 1) {
  51 | 			spinnerStep = 1;
  52 | 		}
  53 | 		let spinnerLongStep = this._parseNum(this.props.longStep);
  54 | 		if (!this.isTypeDecimal() && spinnerLongStep < 1) {
  55 | 			spinnerLongStep = 0;
  56 | 		}
  57 | 
  58 | 		const min = this.props.min != null ? this._parseNum(this.props.min) : null;
  59 | 		const max = this.props.max != null ? this._parseNum(this.props.max) : null;
  60 | 
  61 | 		let initialValue =
  62 | 			this.props.initialValue != null && !isNaN(12)
  63 | 				? this.props.initialValue
  64 | 				: this.props.value;
  65 | 		initialValue = this._parseNum(initialValue);
  66 | 		initialValue = this._withinRange(initialValue, min, max);
  67 | 
  68 | 		// Set debounce
  69 | 		this._debounceSetMax = debounce(
  70 | 			this._setStateMax.bind(this),
  71 | 			this.props.typingTime,
  72 | 		);
  73 | 		this._debounceSetMin = debounce(
  74 | 			this._setStateMin.bind(this),
  75 | 			this.props.typingTime,
  76 | 		);
  77 | 		this._updateValue = debounce((value) => {
  78 | 			this.setState({value: value});
  79 | 		}, 250);
  80 | 
  81 | 		this.state = {
  82 | 			min: min,
  83 | 			max: max,
  84 | 			value: initialValue,
  85 | 			step: spinnerStep,
  86 | 			longStep: spinnerLongStep,
  87 | 			focused: false,
  88 | 			buttonPress: null,
  89 | 		};
  90 | 	}
  91 | 
  92 | 	/**
  93 | 	 * Component did update
  94 | 	 * @param prevProps
  95 | 	 * @returns {*}
  96 | 	 */
  97 | 	componentDidUpdate(prevProps) {
  98 | 		// Parse Value
  99 | 		if (this.props.value !== prevProps.value) {
 100 | 			let newValue = this._parseNum(this.props.value);
 101 | 			newValue = this._withinRange(newValue);
 102 | 			this._updateValue(newValue);
 103 | 		}
 104 | 		// Parse Min
 105 | 		if (this.props.min !== prevProps.min) {
 106 | 			this.setState({
 107 | 				min: this.props.min != null ? this._parseNum(this.props.min) : null,
 108 | 			});
 109 | 		}
 110 | 		// Parse Max
 111 | 		if (this.props.max !== prevProps.max) {
 112 | 			this.setState({
 113 | 				max: this.props.max != null ? this._parseNum(this.props.max) : null,
 114 | 			});
 115 | 		}
 116 | 		// Parse Step
 117 | 		if (this.props.step !== prevProps.step) {
 118 | 			let spinnerStep = this._parseNum(this.props.step);
 119 | 			if (!this.isTypeDecimal() && spinnerStep < 1) {
 120 | 				spinnerStep = 1;
 121 | 			}
 122 | 			this.setState({step: spinnerStep});
 123 | 		}
 124 | 		// Parse longStep
 125 | 		if (this.props.longStep !== prevProps.longStep) {
 126 | 			let spinnerLongStep = this._parseNum(this.props.longStep);
 127 | 			if (!this.isTypeDecimal() && spinnerLongStep < 1) {
 128 | 				spinnerLongStep = 0;
 129 | 			}
 130 | 			this.setState({longStep: spinnerLongStep});
 131 | 		}
 132 | 	}
 133 | 
 134 | 	/**
 135 | 	 * Set state to min
 136 | 	 * @param callback
 137 | 	 * @private
 138 | 	 */
 139 | 	_setStateMin(callback = null) {
 140 | 		return this.setState({value: ""}, callback);
 141 | 	}
 142 | 
 143 | 	/**
 144 | 	 * Set state to max
 145 | 	 * @param callback
 146 | 	 * @private
 147 | 	 */
 148 | 	_setStateMax(callback = null) {
 149 | 		return this.setState({value: this.state.max}, callback);
 150 | 	}
 151 | 
 152 | 	/**
 153 | 	 * Clear min timer
 154 | 	 * @private
 155 | 	 */
 156 | 	_clearMinTimer() {
 157 | 		clearTimeout(this.maxTimer);
 158 | 		this.maxTimer = null;
 159 | 	}
 160 | 
 161 | 	/**
 162 | 	 * Clear max timer
 163 | 	 * @private
 164 | 	 */
 165 | 	_clearMaxTimer() {
 166 | 		clearTimeout(this.minTimer);
 167 | 		this.minTimer = null;
 168 | 	}
 169 | 
 170 | 	/**
 171 | 	 * Clear increase timer
 172 | 	 * @private
 173 | 	 */
 174 | 	_clearIncreaseTimer() {
 175 | 		clearTimeout(this.increaseTimer);
 176 | 		this.increaseTimer = null;
 177 | 	}
 178 | 
 179 | 	/**
 180 | 	 * Clear decrease timer
 181 | 	 * @private
 182 | 	 */
 183 | 	_clearDecreaseTimer() {
 184 | 		clearTimeout(this.decreaseTimer);
 185 | 		this.decreaseTimer = null;
 186 | 	}
 187 | 
 188 | 	/**
 189 | 	 * Clear on change timers
 190 | 	 * @private
 191 | 	 */
 192 | 	_clearOnChangeTimers() {
 193 | 		this._clearMaxTimer();
 194 | 		this._clearMinTimer();
 195 | 	}
 196 | 
 197 | 	/**
 198 | 	 * Clear all timers
 199 | 	 * @private
 200 | 	 */
 201 | 	_clearTimers() {
 202 | 		this._clearOnChangeTimers();
 203 | 		this._clearIncreaseTimer();
 204 | 		this._clearDecreaseTimer();
 205 | 	}
 206 | 
 207 | 	/**
 208 | 	 * On increase event
 209 | 	 * @param number
 210 | 	 */
 211 | 	onIncrease(number) {
 212 | 		if (isCallable(this.props.onIncrease)) {
 213 | 			return this.props.onIncrease(number);
 214 | 		}
 215 | 		return true;
 216 | 	}
 217 | 
 218 | 	/**
 219 | 	 * On decrease event
 220 | 	 * @param number
 221 | 	 */
 222 | 	onDecrease(number) {
 223 | 		if (isCallable(this.props.onDecrease)) {
 224 | 			return this.props.onDecrease(number);
 225 | 		}
 226 | 		return true;
 227 | 	}
 228 | 
 229 | 	/**
 230 | 	 * On max reached event
 231 | 	 * @param number
 232 | 	 */
 233 | 	onMax(number) {
 234 | 		if (isCallable(this.props.onMax)) {
 235 | 			this.props.onMax(number);
 236 | 		}
 237 | 		this._resetHoldTime();
 238 | 	}
 239 | 
 240 | 	/**
 241 | 	 * On min reached event
 242 | 	 * @param number
 243 | 	 */
 244 | 	onMin(number) {
 245 | 		if (isCallable(this.props.onMin)) {
 246 | 			this.props.onMin(number);
 247 | 		}
 248 | 		this._resetHoldTime();
 249 | 	}
 250 | 
 251 | 	/**
 252 | 	 * On long press event.
 253 | 	 * @param number
 254 | 	 */
 255 | 	onLongPress(number) {
 256 | 		if (isCallable(this.props.onLongPress)) {
 257 | 			this.props.onLongPress(number);
 258 | 		}
 259 | 	}
 260 | 
 261 | 	/**
 262 | 	 * On value change
 263 | 	 * @param value
 264 | 	 * @param isPressEvent
 265 | 	 */
 266 | 	async onChange(value, isPressEvent = false) {
 267 | 		const isEmptyValue = isEmpty(value);
 268 | 		this._clearOnChangeTimers();
 269 | 
 270 | 		let num = value;
 271 | 		let parsedNum = value;
 272 | 		if (isEmptyValue) {
 273 | 			num = this.state.min;
 274 | 		}
 275 | 
 276 | 		if (this.props.disabled) return;
 277 | 
 278 | 		const separator = !isEmpty(this.props.decimalSeparator)
 279 | 			? this.props.decimalSeparator
 280 | 			: ".";
 281 | 		if (
 282 | 			String(num).endsWith(separator) &&
 283 | 			!this.getValue().endsWith(separator + "0")
 284 | 		) {
 285 | 			this.decimalInput = true;
 286 | 		}
 287 | 		num = parsedNum = this._parseNum(String(num).replace(/^0+/, "")) || 0;
 288 | 		if (!this.isMinReached(num)) {
 289 | 			if (this.isMaxReached(num)) {
 290 | 				if (this.isMaxReached(num)) {
 291 | 					parsedNum = this.state.max;
 292 | 					if (!isEmptyValue) {
 293 | 						this.maxTimer = this._debounceSetMax();
 294 | 					}
 295 | 					this.onMax(parsedNum);
 296 | 				}
 297 | 			}
 298 | 		} else {
 299 | 			if (!isEmptyValue) {
 300 | 				this.minTimer = this._debounceSetMin();
 301 | 			}
 302 | 
 303 | 			if (isEmptyValue && this.isEmptied()) {
 304 | 				num = parsedNum = null;
 305 | 			} else {
 306 | 				parsedNum = this.state.min;
 307 | 			}
 308 | 
 309 | 			this.onMin(parsedNum);
 310 | 		}
 311 | 
 312 | 		if (isEmptyValue && this.isEmptied()) {
 313 | 			num = parsedNum = null;
 314 | 		} else {
 315 | 			num = this._withinRange(num);
 316 | 		}
 317 | 
 318 | 		if (this.state.value !== num && isCallable(this.props.onChange)) {
 319 | 			const res = await this.props.onChange(parsedNum);
 320 | 			if (!isEmptyValue) {
 321 | 				if (res === false) {
 322 | 					return;
 323 | 				} else if (isNumeric(res)) {
 324 | 					num = this._parseNum(res);
 325 | 				}
 326 | 			}
 327 | 		}
 328 | 
 329 | 		this.setState({value: num});
 330 | 	}
 331 | 
 332 | 	/**
 333 | 	 * On buttons press out
 334 | 	 * @param e
 335 | 	 */
 336 | 	onPressOut(e) {
 337 | 		this._resetHoldTime();
 338 | 	}
 339 | 
 340 | 	/**
 341 | 	 * On Button Press
 342 | 	 * @param buttonDirection
 343 | 	 */
 344 | 	onShowUnderlay(buttonDirection) {
 345 | 		this.setState({buttonPress: buttonDirection});
 346 | 	}
 347 | 
 348 | 	/**
 349 | 	 * On Button Unpress
 350 | 	 */
 351 | 	onHideUnderlay() {
 352 | 		this.setState({buttonPress: null});
 353 | 	}
 354 | 
 355 | 	/**
 356 | 	 * On Submit keyboard
 357 | 	 * @returns {*}
 358 | 	 * @param e
 359 | 	 */
 360 | 	onSubmit(e) {
 361 | 		if (isCallable(this.props.onSubmit)) {
 362 | 			this.props.onSubmit(this._parseNum(e.nativeEvent.text));
 363 | 		}
 364 | 	}
 365 | 
 366 | 	/**
 367 | 	 * On Focus
 368 | 	 * @returns {*}
 369 | 	 * @param e
 370 | 	 */
 371 | 	onFocus(e) {
 372 | 		if (this.props.onFocus) {
 373 | 			this.props.onFocus(e);
 374 | 		}
 375 | 		this.setState({focused: true});
 376 | 	}
 377 | 
 378 | 	/**
 379 | 	 * On Blur
 380 | 	 * @returns {*}
 381 | 	 * @param e
 382 | 	 */
 383 | 	onBlur(e) {
 384 | 		if (this.props.onBlur) {
 385 | 			this.props.onBlur(e);
 386 | 		}
 387 | 		this.setState({focused: false});
 388 | 	}
 389 | 
 390 | 	/**
 391 | 	 * On Key Press
 392 | 	 * @returns {*}
 393 | 	 * @param e
 394 | 	 */
 395 | 	onKeyPress(e) {
 396 | 		if (this.props.onKeyPress) {
 397 | 			this.props.onKeyPress(e);
 398 | 		}
 399 | 	}
 400 | 
 401 | 	/**
 402 | 	 * Round number to props precision
 403 | 	 * @private
 404 | 	 * @param num
 405 | 	 * @returns float|int
 406 | 	 */
 407 | 	_roundNum(num) {
 408 | 		if (this.isTypeDecimal()) {
 409 | 			let val = num * Math.pow(10, this.props.precision);
 410 | 			let fraction = Math.round((val - parseInt(val)) * 10) / 10;
 411 | 			if (fraction === -0.5) {
 412 | 				fraction = -0.6;
 413 | 			}
 414 | 			val =
 415 | 				Math.round(parseInt(val) + fraction) /
 416 | 				Math.pow(10, this.props.precision);
 417 | 			return val;
 418 | 		}
 419 | 		return num;
 420 | 	}
 421 | 
 422 | 	/**
 423 | 	 * Limit value to be within max and min range
 424 | 	 * @private
 425 | 	 * @param value
 426 | 	 * @param min
 427 | 	 * @param max
 428 | 	 * @returns float|int
 429 | 	 */
 430 | 	_withinRange(value, min = null, max = null) {
 431 | 		if (min == null && this.state && this.state.min != null) {
 432 | 			min = this.state.min;
 433 | 		}
 434 | 		if (max == null && this.state && this.state.max != null) {
 435 | 			max = this.state.max;
 436 | 		}
 437 | 		if (min != null && value < min) {
 438 | 			value = min;
 439 | 		}
 440 | 		if (max != null && value > max) {
 441 | 			value = max;
 442 | 		}
 443 | 		return value;
 444 | 	}
 445 | 
 446 | 	/**
 447 | 	 * Parse number type
 448 | 	 * @private
 449 | 	 * @param num
 450 | 	 * @returns float|int
 451 | 	 */
 452 | 	_parseNum(num) {
 453 | 		num = String(num).replace(
 454 | 			!isEmpty(this.props.decimalSeparator) ? this.props.decimalSeparator : ".",
 455 | 			".",
 456 | 		);
 457 | 		if (this.isTypeDecimal()) {
 458 | 			num = parseFloat(num);
 459 | 		} else {
 460 | 			num = parseInt(num);
 461 | 		}
 462 | 		if (isNaN(num)) {
 463 | 			num = 0;
 464 | 		}
 465 | 		this._roundNum(num);
 466 | 		return num;
 467 | 	}
 468 | 
 469 | 	/**
 470 | 	 * Convert value to string
 471 | 	 * @returns {string}
 472 | 	 */
 473 | 	getValue() {
 474 | 		let value = this.state.value;
 475 | 		if (isEmpty(value)) {
 476 | 			return "";
 477 | 		}
 478 | 		if (this.isTypeDecimal() && this.decimalInput) {
 479 | 			this.decimalInput = false;
 480 | 			value = this._parseNum(value).toFixed(1).replace(/0+$/, "");
 481 | 		} else if (this.isTypeDecimal()) {
 482 | 			value = String(
 483 | 				this._parseNum(this._parseNum(value).toFixed(this.props.precision)),
 484 | 			);
 485 | 		} else {
 486 | 			value = String(this._parseNum(value));
 487 | 		}
 488 | 		let hasPlaceholder = value === "0" && !isEmpty(this.props.placeholder);
 489 | 		
 490 | 		let accountingForDecimals = hasPlaceholder
 491 | 		? ""
 492 | 		: value.replace(
 493 | 				".",
 494 | 				!isEmpty(this.props.decimalSeparator)
 495 | 					? this.props.decimalSeparator
 496 | 					: ".",
 497 | 		  );
 498 | 
 499 | 		// Only apply the formatter if the field is not user-editable
 500 | 		if (this.props.formatter !== null && typeof(this.props.formatter) === 'function' && !this.props.editable) {
 501 | 			return this.props.formatter(value)
 502 | 		}
 503 | 		else {
 504 | 			return accountingForDecimals
 505 | 		}
 506 | 	}
 507 | 
 508 | 	/**
 509 | 	 * Get Placeholder
 510 | 	 * @returns {*}
 511 | 	 */
 512 | 	getPlaceholder() {
 513 | 		if (!isEmpty(this.props.placeholder)) {
 514 | 			return this.props.placeholder;
 515 | 		} else if (isEmpty(this.state.value) && this.isEmptied()) {
 516 | 			return "";
 517 | 		} else {
 518 | 			return String(this.state.min);
 519 | 		}
 520 | 	}
 521 | 
 522 | 	/**
 523 | 	 * Get Placeholder
 524 | 	 * @returns {*}
 525 | 	 */
 526 | 	getPlaceholderColor() {
 527 | 		if (this.props.placeholderTextColor) {
 528 | 			return this.props.placeholderTextColor;
 529 | 		}
 530 | 		let textColor = this._getInputTextColor();
 531 | 		let parse = parseColor(textColor);
 532 | 		parse[3] = Math.round(0.6 * 255);
 533 | 
 534 | 		return colorsToHex(parse);
 535 | 	}
 536 | 
 537 | 	/**
 538 | 	 * Get Type
 539 | 	 * @returns {String}
 540 | 	 */
 541 | 	getType() {
 542 | 		let type = this.props.type;
 543 | 		if (this.props.type != null) {
 544 | 			type = this.props.type;
 545 | 		}
 546 | 		return String(type).toLowerCase();
 547 | 	}
 548 | 
 549 | 	/**
 550 | 	 * Detect if type is decimal
 551 | 	 * @returns {boolean}
 552 | 	 */
 553 | 	isTypeDecimal() {
 554 | 		let type = this.getType();
 555 | 		return (
 556 | 			type === "float" ||
 557 | 			type === "double" ||
 558 | 			type === "decimal" ||
 559 | 			type === "real"
 560 | 		);
 561 | 	}
 562 | 
 563 | 	/**
 564 | 	 * Update holding time
 565 | 	 * @private
 566 | 	 */
 567 | 	_startHoldTime() {
 568 | 		this.holdTime = new Date().getTime();
 569 | 	}
 570 | 
 571 | 	/**
 572 | 	 * Get the holding time
 573 | 	 * @private
 574 | 	 */
 575 | 	_getHoldTime() {
 576 | 		if (isEmpty(this.holdTime)) {
 577 | 			return 0;
 578 | 		}
 579 | 		let now = new Date().getTime();
 580 | 		return now - this.holdTime;
 581 | 	}
 582 | 
 583 | 	/**
 584 | 	 * Reset holding time
 585 | 	 * @private
 586 | 	 */
 587 | 	_resetHoldTime() {
 588 | 		this.holdTime = null;
 589 | 		this._clearTimers();
 590 | 	}
 591 | 
 592 | 	/**
 593 | 	 * Find the interval between changing values after a button has been held for a certain amount of time
 594 | 	 * @returns {number}
 595 | 	 * @author Tom Hardern <https://gist.github.com/taeh98/f709451457400818094d802cd33694d5>
 596 | 	 * @private
 597 | 	 */
 598 | 	_getHoldChangeInterval() {
 599 | 		const minInterval = 10;
 600 | 		var time = (10 - Math.log(this.props.speed * this._getHoldTime())) * 100;
 601 | 		return time < minInterval ? minInterval : time;
 602 | 	}
 603 | 
 604 | 	/**
 605 | 	 * On hold increase
 606 | 	 * @param event
 607 | 	 * @returns {Promise<void>}
 608 | 	 */
 609 | 	async increaseHold(event) {
 610 | 		this.increase(event, true);
 611 | 	}
 612 | 
 613 | 	/**
 614 | 	 * Increase
 615 | 	 * @param event
 616 | 	 * @param isLongPress
 617 | 	 * @returns {Promise<void>}
 618 | 	 */
 619 | 	async increase(event, isLongPress = false) {
 620 | 		if (this._isDisabledButtonRight()) return;
 621 | 		let currentValue = this._parseNum(this.state.value);
 622 | 		let num =
 623 | 			currentValue +
 624 | 			this._parseNum(
 625 | 				isLongPress && this.state.longStep > 0
 626 | 					? this.state.longStep
 627 | 					: this.state.step,
 628 | 			);
 629 | 		if (isLongPress && this.state.longStep > 0) {
 630 | 			num = Math.round(num / this.state.longStep) * this.state.longStep;
 631 | 		}
 632 | 		if (this.isTypeDecimal()) {
 633 | 			num = Number(num.toFixed(this.props.precision));
 634 | 		}
 635 | 
 636 | 		if (
 637 | 			this.isMaxReached(currentValue) &&
 638 | 			!this.isEmptied() &&
 639 | 			this.isContinuos()
 640 | 		) {
 641 | 			// Continuity mode
 642 | 			num = this.state.min;
 643 | 		} else if (this.isMaxReached(currentValue)) {
 644 | 			return;
 645 | 		}
 646 | 
 647 | 		const res = await this.onIncrease(num);
 648 | 		if (res === false) {
 649 | 			return;
 650 | 		} else if (isNumeric(res)) {
 651 | 			num = this._parseNum(res);
 652 | 		}
 653 | 
 654 | 		let wait = this._getHoldChangeInterval();
 655 | 		if (!isLongPress && this.increaseTimer === null) {
 656 | 			this._startHoldTime();
 657 | 			wait = this.props.accelerationDelay;
 658 | 		} else if (isLongPress) {
 659 | 			this.onLongPress(num);
 660 | 		}
 661 | 
 662 | 		if (isLongPress) {
 663 | 			this.increaseTimer = setTimeout(
 664 | 				this.increase.bind(this, event, true),
 665 | 				wait,
 666 | 			);
 667 | 		}
 668 | 
 669 | 		this.onChange(num, true);
 670 | 	}
 671 | 
 672 | 	/**
 673 | 	 * On hold decrease
 674 | 	 * @param event
 675 | 	 * @returns {Promise<void>}
 676 | 	 */
 677 | 	async decreaseHold(event) {
 678 | 		this.decrease(event, true);
 679 | 	}
 680 | 
 681 | 	/**
 682 | 	 * Decrease
 683 | 	 * @param event
 684 | 	 * @param isLongPress
 685 | 	 * @returns {Promise<void>}
 686 | 	 */
 687 | 	async decrease(event, isLongPress = false) {
 688 | 		if (this._isDisabledButtonLeft()) return;
 689 | 		let currentValue = this._parseNum(this.state.value);
 690 | 		let num =
 691 | 			currentValue -
 692 | 			this._parseNum(
 693 | 				isLongPress && this.state.longStep > 0
 694 | 					? this.state.longStep
 695 | 					: this.state.step,
 696 | 			);
 697 | 		if (isLongPress && this.state.longStep > 0) {
 698 | 			num = Math.round(num / this.state.longStep) * this.state.longStep;
 699 | 		}
 700 | 		if (this.isTypeDecimal()) {
 701 | 			num = Number(num.toFixed(this.props.precision));
 702 | 		}
 703 | 
 704 | 		if (
 705 | 			this.isMinReached(currentValue) &&
 706 | 			!this.isEmptied() &&
 707 | 			this.isContinuos()
 708 | 		) {
 709 | 			// Continuity mode
 710 | 			num = this.state.max;
 711 | 		} else if (this.isMinReached(currentValue)) {
 712 | 			return;
 713 | 		}
 714 | 
 715 | 		const res = await this.onDecrease(num);
 716 | 		if (res === false) {
 717 | 			return;
 718 | 		} else if (isNumeric(res)) {
 719 | 			num = this._parseNum(res);
 720 | 		}
 721 | 
 722 | 		let wait = this._getHoldChangeInterval();
 723 | 		if (!isLongPress && this.decreaseTimer === null) {
 724 | 			this._startHoldTime();
 725 | 			wait = this.props.accelerationDelay;
 726 | 		} else if (isLongPress) {
 727 | 			this.onLongPress(num);
 728 | 		}
 729 | 
 730 | 		if (isLongPress) {
 731 | 			this.decreaseTimer = setTimeout(
 732 | 				this.decrease.bind(this, event, true),
 733 | 				wait,
 734 | 			);
 735 | 		}
 736 | 
 737 | 		this.onChange(num, true);
 738 | 	}
 739 | 
 740 | 	/**
 741 | 	 * Max is reached
 742 | 	 * @param num
 743 | 	 * @returns {boolean}
 744 | 	 */
 745 | 	isMaxReached(num = null) {
 746 | 		if (this.state.max != null) {
 747 | 			if (num == null) {
 748 | 				num = this.state.value;
 749 | 			}
 750 | 			return num >= this.state.max;
 751 | 		}
 752 | 		return false;
 753 | 	}
 754 | 
 755 | 	/**
 756 | 	 * Min is reached
 757 | 	 * @param num
 758 | 	 * @returns {boolean}
 759 | 	 */
 760 | 	isMinReached(num = null) {
 761 | 		if (this.state.min != null) {
 762 | 			if (num == null) {
 763 | 				num = this.state.value;
 764 | 			}
 765 | 			return num <= this.state.min;
 766 | 		}
 767 | 		return false;
 768 | 	}
 769 | 
 770 | 	/**
 771 | 	 * Blur
 772 | 	 */
 773 | 	blur() {
 774 | 		this.textInput.blur();
 775 | 	}
 776 | 
 777 | 	/**
 778 | 	 * Focus
 779 | 	 */
 780 | 	focus() {
 781 | 		this.textInput.focus();
 782 | 	}
 783 | 
 784 | 	/**
 785 | 	 * Clear
 786 | 	 */
 787 | 	clear() {
 788 | 		this.textInput.clear();
 789 | 	}
 790 | 
 791 | 	/**
 792 | 	 * Is text input editable
 793 | 	 * @returns {boolean|Boolean}
 794 | 	 */
 795 | 	isEditable() {
 796 | 		return (
 797 | 			(this.props.disabled !== true || this.props.disabled != null) &&
 798 | 			this.props.editable !== false
 799 | 		);
 800 | 	}
 801 | 
 802 | 	/**
 803 | 	 * If continuity mode enabled
 804 | 	 * @returns {boolean|Boolean}
 805 | 	 */
 806 | 	isContinuos() {
 807 | 		return this.props.continuity !== false;
 808 | 	}
 809 | 
 810 | 	/**
 811 | 	 * If input can be empty
 812 | 	 * @returns {boolean|Boolean}
 813 | 	 */
 814 | 	isEmptied() {
 815 | 		return this.props.emptied !== false;
 816 | 	}
 817 | 
 818 | 	/**
 819 | 	 * Is text input focused
 820 | 	 * @returns {boolean|Boolean}
 821 | 	 */
 822 | 	isFocused() {
 823 | 		return this.state.focus !== false;
 824 | 	}
 825 | 
 826 | 	/**
 827 | 	 * Is left button disabled
 828 | 	 * @returns {Boolean}
 829 | 	 * @private
 830 | 	 */
 831 | 	_isDisabledButtonLeft() {
 832 | 		return (
 833 | 			this.props.disabled !== false || this.props.buttonLeftDisabled !== false
 834 | 		);
 835 | 	}
 836 | 
 837 | 	/**
 838 | 	 * Is right button disabled
 839 | 	 * @returns {Boolean}
 840 | 	 * @private
 841 | 	 */
 842 | 	_isDisabledButtonRight() {
 843 | 		return (
 844 | 			this.props.disabled !== false || this.props.buttonRightDisabled !== false
 845 | 		);
 846 | 	}
 847 | 
 848 | 	/**
 849 | 	 * Is right button pressed
 850 | 	 * @returns {boolean}
 851 | 	 * @private
 852 | 	 */
 853 | 	_isRightButtonPressed() {
 854 | 		return this.state.buttonPress === "right";
 855 | 	}
 856 | 
 857 | 	/**
 858 | 	 * Is left button pressed
 859 | 	 * @returns {boolean}
 860 | 	 * @private
 861 | 	 */
 862 | 	_isLeftButtonPressed() {
 863 | 		return this.state.buttonPress === "left";
 864 | 	}
 865 | 
 866 | 	/**
 867 | 	 * Get keyboard type
 868 | 	 * @returns {string}
 869 | 	 * @private
 870 | 	 */
 871 | 	_getKeyboardType() {
 872 | 		// Keyboard type
 873 | 		let keyboardType = "number-pad";
 874 | 		if (this.isTypeDecimal()) {
 875 | 			keyboardType = "decimal-pad";
 876 | 		}
 877 | 		return keyboardType;
 878 | 	}
 879 | 
 880 | 	/**
 881 | 	 * Get auto capitalize
 882 | 	 * @returns {string}
 883 | 	 * @private
 884 | 	 */
 885 | 	_getAutoCapitalize() {
 886 | 		let autoCapitalize = this.props.autoCapitalize
 887 | 			? this.props.autoCapitalize
 888 | 			: "none";
 889 | 		if (this.isTypeDecimal()) {
 890 | 			autoCapitalize = "words";
 891 | 		}
 892 | 		return autoCapitalize;
 893 | 	}
 894 | 
 895 | 	/**
 896 | 	 * Get main color
 897 | 	 * @returns {String|*}
 898 | 	 * @private
 899 | 	 */
 900 | 	_getMainColor() {
 901 | 		let color = this.props.color;
 902 | 		if (this.props.colorAsBackground) {
 903 | 			color = defaultTransparent;
 904 | 		} else if (isTransparentColor(color)) {
 905 | 			color = defaultTransparent;
 906 | 		}
 907 | 
 908 | 		return color;
 909 | 	}
 910 | 
 911 | 	/**
 912 | 	 * Get button color
 913 | 	 * @returns {String|*}
 914 | 	 * @private
 915 | 	 */
 916 | 	_getColor() {
 917 | 		const color = this._getMainColor();
 918 | 
 919 | 		return this.isMaxReached()
 920 | 			? this._getColorMax()
 921 | 			: this.isMinReached()
 922 | 			? this._getColorMin()
 923 | 			: color;
 924 | 	}
 925 | 
 926 | 	/**
 927 | 	 * Get min color
 928 | 	 * @returns {String}
 929 | 	 * @private
 930 | 	 */
 931 | 	_getColorMin() {
 932 | 		if (!this.props.colorMin) {
 933 | 			return this.props.color;
 934 | 		}
 935 | 		return this.props.colorMin;
 936 | 	}
 937 | 
 938 | 	/**
 939 | 	 * Get max color
 940 | 	 * @returns {String}
 941 | 	 * @private
 942 | 	 */
 943 | 	_getColorMax() {
 944 | 		if (!this.props.colorMax) {
 945 | 			return this.props.color;
 946 | 		}
 947 | 		return this.props.colorMax;
 948 | 	}
 949 | 
 950 | 	/**
 951 | 	 * Get color on button press
 952 | 	 * @returns {String|*}
 953 | 	 * @private
 954 | 	 */
 955 | 	_getColorPress() {
 956 | 		const color = this.props.colorAsBackground
 957 | 			? defaultTransparent
 958 | 			: this.props.color;
 959 | 		return this.props.colorPress !== defaultColor
 960 | 			? this.props.colorPress
 961 | 			: color;
 962 | 	}
 963 | 
 964 | 	/**
 965 | 	 * Get color text on button press
 966 | 	 * @returns {string}
 967 | 	 * @private
 968 | 	 */
 969 | 	_getColorPressText() {
 970 | 		const color = this.props.colorAsBackground
 971 | 			? this._getColorBackground()
 972 | 			: this._getColorPress();
 973 | 		const pressColor = this.props.buttonPressTextColor
 974 | 			? this.props.buttonPressTextColor
 975 | 			: this._getColorText();
 976 | 		let textColor =
 977 | 			this.props.buttonPressTextColor !== this.props.buttonTextColor
 978 | 				? pressColor
 979 | 				: "auto";
 980 | 		if (String(textColor).toLowerCase().trim() === "auto") {
 981 | 			textColor = getColorContrast(color);
 982 | 		}
 983 | 
 984 | 		return textColor;
 985 | 	}
 986 | 
 987 | 	/**
 988 | 	 * Get color text on button
 989 | 	 * @returns {string}
 990 | 	 * @private
 991 | 	 */
 992 | 	_getColorText() {
 993 | 		const color = this.props.colorAsBackground
 994 | 			? this._getColorBackground()
 995 | 			: this._getColor();
 996 | 		let textColor =
 997 | 			this._getColor() !== this._getMainColor()
 998 | 				? "auto"
 999 | 				: this.props.buttonTextColor
1000 | 				? this.props.buttonTextColor
1001 | 				: "auto";
1002 | 		if (String(textColor).toLowerCase().trim() === "auto") {
1003 | 			textColor = getColorContrast(color);
1004 | 		}
1005 | 
1006 | 		return textColor;
1007 | 	}
1008 | 
1009 | 	/**
1010 | 	 * Get left button color
1011 | 	 * @returns {string}
1012 | 	 * @private
1013 | 	 */
1014 | 	_getColorLeftButton() {
1015 | 		const color = this._getColor();
1016 | 		return this.props.colorLeft !== defaultColor ? this.props.colorLeft : color;
1017 | 	}
1018 | 
1019 | 	/**
1020 | 	 * Get right button color
1021 | 	 * @returns {string}
1022 | 	 * @private
1023 | 	 */
1024 | 	_getColorRightButton() {
1025 | 		const color = this._getColor();
1026 | 		return this.props.colorRight !== defaultColor
1027 | 			? this.props.colorRight
1028 | 			: color;
1029 | 	}
1030 | 
1031 | 	/**
1032 | 	 * Get background color
1033 | 	 * @returns {string|*}
1034 | 	 * @private
1035 | 	 */
1036 | 	_getColorBackground() {
1037 | 		let color = this.props.color;
1038 | 		let background = this.props.background;
1039 | 		if (isTransparentColor(color)) {
1040 | 			color = defaultTransparent;
1041 | 		}
1042 | 		if (isTransparentColor(background)) {
1043 | 			background = defaultTransparent;
1044 | 		}
1045 | 		return this.props.colorAsBackground
1046 | 			? this.isMaxReached()
1047 | 				? this._getColorMax()
1048 | 				: this.isMinReached()
1049 | 				? this._getColorMin()
1050 | 				: color
1051 | 			: background;
1052 | 	}
1053 | 
1054 | 	/**
1055 | 	 * Get container style
1056 | 	 * @returns {*[]}
1057 | 	 * @private
1058 | 	 */
1059 | 	_getContainerStyle() {
1060 | 		const backgroundColor = this._getColorBackground();
1061 | 		return [
1062 | 			Style.container,
1063 | 			{
1064 | 				minHeight: this.props.height,
1065 | 				width: this.props.width,
1066 | 				backgroundColor: backgroundColor,
1067 | 			},
1068 | 			this.props.showBorder
1069 | 				? {borderWidth: 0.5, borderColor: this._getColor()}
1070 | 				: {},
1071 | 			this.props.shadow ? Style.containerShadow : {},
1072 | 			this.props.rounded ? {borderRadius: this.props.height / 2} : {},
1073 | 			this.props.style,
1074 | 		];
1075 | 	}
1076 | 
1077 | 	/**
1078 | 	 * Get input text color
1079 | 	 * @returns {string|*}
1080 | 	 * @private
1081 | 	 */
1082 | 	_getInputTextColor() {
1083 | 		const backgroundColor = this._getColorBackground();
1084 | 		return this.props.textColor
1085 | 			? this.props.textColor
1086 | 			: getColorContrast(backgroundColor);
1087 | 	}
1088 | 
1089 | 	/**
1090 | 	 * Get input text style
1091 | 	 * @returns {*[]}
1092 | 	 * @private
1093 | 	 */
1094 | 	_getInputTextStyle() {
1095 | 		const backgroundColor = this._getColorBackground();
1096 | 		return [
1097 | 			Style.numberText,
1098 | 			{
1099 | 				color: this._getInputTextColor(),
1100 | 				fontSize: this.props.fontSize,
1101 | 				fontFamily: this.props.fontFamily,
1102 | 				backgroundColor: backgroundColor,
1103 | 				height: this.props.height,
1104 | 			},
1105 | 			this.props.showBorder
1106 | 				? {borderWidth: 0.5, borderColor: this._getColor()}
1107 | 				: {},
1108 | 			this.props.inputStyle,
1109 | 		];
1110 | 	}
1111 | 
1112 | 	/**
1113 | 	 * Get button style
1114 | 	 * @returns {*}
1115 | 	 * @private
1116 | 	 */
1117 | 	_getStyleButton() {
1118 | 		const size = this.props.height;
1119 | 		return {
1120 | 			height: size,
1121 | 			width: size,
1122 | 		};
1123 | 	}
1124 | 
1125 | 	/**
1126 | 	 * Get button pressed style
1127 | 	 * @returns {Object}
1128 | 	 * @private
1129 | 	 */
1130 | 	_getStyleButtonPress() {
1131 | 		return isEmpty(this.props.buttonPressStyle)
1132 | 			? this.props.buttonStyle
1133 | 			: this.props.buttonPressStyle;
1134 | 	}
1135 | 
1136 | 	/**
1137 | 	 * Get button text style
1138 | 	 * @returns {*[]}
1139 | 	 * @private
1140 | 	 */
1141 | 	_getStyleButtonText() {
1142 | 		return [
1143 | 			Style.buttonText,
1144 | 			{
1145 | 				fontSize: this.props.buttonFontSize,
1146 | 				fontFamily: this.props.buttonFontFamily,
1147 | 				lineHeight: this.props.height,
1148 | 			},
1149 | 			this.props.buttonTextStyle ? this.props.buttonTextStyle : {},
1150 | 		];
1151 | 	}
1152 | 
1153 | 	/**
1154 | 	 * Get left button text style
1155 | 	 * @returns {*[]}
1156 | 	 * @private
1157 | 	 */
1158 | 	_getStyleLeftButtonText() {
1159 | 		return [
1160 | 			Style.buttonText,
1161 | 			this._getStyleButtonText(),
1162 | 			{
1163 | 				color: this._isLeftButtonPressed()
1164 | 					? this._getColorPressText()
1165 | 					: this._getColorText(),
1166 | 			},
1167 | 			this._isLeftButtonPressed() ? this.props.buttonPressTextStyle : {},
1168 | 		];
1169 | 	}
1170 | 
1171 | 	/**
1172 | 	 * Get right button text style
1173 | 	 * @returns {*[]}
1174 | 	 * @private
1175 | 	 */
1176 | 	_getStyleRightButtonText() {
1177 | 		return [
1178 | 			Style.buttonText,
1179 | 			this._getStyleButtonText(),
1180 | 			{
1181 | 				color: this._isRightButtonPressed()
1182 | 					? this._getColorPressText()
1183 | 					: this._getColorText(),
1184 | 			},
1185 | 			this._isRightButtonPressed() ? this.props.buttonPressTextStyle : {},
1186 | 		];
1187 | 	}
1188 | 
1189 | 	/**
1190 | 	 * Render left button element
1191 | 	 * @returns {*}
1192 | 	 * @private
1193 | 	 */
1194 | 	_renderLeftButtonElement() {
1195 | 		if (this.props.buttonLeftImage) {
1196 | 			return this.props.buttonLeftImage;
1197 | 		} else if (this._isLeftButtonPressed() && this.props.buttonPressLeftImage) {
1198 | 			return this.props.buttonPressLeftImage;
1199 | 		} else {
1200 | 			const text =
1201 | 				this.props.arrows !== false
1202 | 					? "❮"
1203 | 					: this.props.buttonLeftText
1204 | 					? this.props.buttonLeftText
1205 | 					: "-";
1206 | 			return <Text {...this.props.buttonTextProps} style={this._getStyleLeftButtonText()}>{text}</Text>;
1207 | 		}
1208 | 	}
1209 | 
1210 | 	/**
1211 | 	 * Render right button element
1212 | 	 * @returns {*}
1213 | 	 * @private
1214 | 	 */
1215 | 	_renderRightButtonElement() {
1216 | 		if (this.props.buttonRightImage) {
1217 | 			return this.props.buttonRightImage;
1218 | 		} else if (
1219 | 			this._isRightButtonPressed() &&
1220 | 			this.props.buttonPressRightImage
1221 | 		) {
1222 | 			return this.props.buttonPressRightImage;
1223 | 		} else {
1224 | 			const text =
1225 | 				this.props.arrows !== false
1226 | 					? "❯"
1227 | 					: this.props.buttonRightText
1228 | 					? this.props.buttonRightText
1229 | 					: "+";
1230 | 			return <Text {...this.props.buttonTextProps} style={this._getStyleRightButtonText()}>{text}</Text>;
1231 | 		}
1232 | 	}
1233 | 
1234 | 	/**
1235 | 	 * Render left button
1236 | 	 * @returns {*}
1237 | 	 * @private
1238 | 	 */
1239 | 	_renderLeftButton() {
1240 | 		const colorLeft = this._getColorLeftButton();
1241 | 
1242 | 		const buttonStyle = mergeViewStyle(
1243 | 			this._isLeftButtonPressed()
1244 | 				? this._getStyleButtonPress()
1245 | 				: this.props.buttonStyle,
1246 | 			[
1247 | 				this._getStyleButton(),
1248 | 				{
1249 | 					borderColor: this.props.showBorder ? colorLeft : "transparent",
1250 | 					backgroundColor: colorLeft,
1251 | 				},
1252 | 				this.props.rounded ? Style.buttonRounded : Style.buttonLeft,
1253 | 			],
1254 | 		);
1255 | 
1256 | 		return (
1257 | 			<TouchableHighlight
1258 | 				activeOpacity={this.props.activeOpacity}
1259 | 				underlayColor={this._getColorPress()}
1260 | 				onHideUnderlay={this.onHideUnderlay.bind(this)}
1261 | 				onShowUnderlay={this.onShowUnderlay.bind(this, "left")}
1262 | 				disabled={this._isDisabledButtonLeft()}
1263 | 				style={buttonStyle}
1264 | 				onPressIn={this.decrease.bind(this)}
1265 | 				delayPressIn={this.props.delayPressIn}
1266 | 				onPressOut={this.onPressOut.bind(this)}
1267 | 				delayPressOut={this.props.delayPressOut}
1268 | 				onLongPress={this.decreaseHold.bind(this)}
1269 | 				delayLongPress={this.props.accelerationDelay}
1270 | 				{...this.props.leftButtonProps}>
1271 | 				{this._renderLeftButtonElement()}
1272 | 			</TouchableHighlight>
1273 | 		);
1274 | 	}
1275 | 
1276 | 	/**
1277 | 	 * Render right button
1278 | 	 * @returns {*}
1279 | 	 * @private
1280 | 	 */
1281 | 	_renderRightButton() {
1282 | 		const colorRight = this._getColorRightButton();
1283 | 
1284 | 		const buttonStyle = mergeViewStyle(
1285 | 			this._isRightButtonPressed()
1286 | 				? this._getStyleButtonPress()
1287 | 				: this.props.buttonStyle,
1288 | 			[
1289 | 				this._getStyleButton(),
1290 | 				{
1291 | 					borderColor: this.props.showBorder ? colorRight : "transparent",
1292 | 					backgroundColor: colorRight,
1293 | 				},
1294 | 				this.props.rounded ? Style.buttonRounded : Style.buttonRight,
1295 | 			],
1296 | 		);
1297 | 
1298 | 		return (
1299 | 			<TouchableHighlight
1300 | 				activeOpacity={this.props.activeOpacity}
1301 | 				underlayColor={this._getColorPress()}
1302 | 				onHideUnderlay={this.onHideUnderlay.bind(this)}
1303 | 				onShowUnderlay={this.onShowUnderlay.bind(this, "right")}
1304 | 				disabled={this._isDisabledButtonRight()}
1305 | 				style={buttonStyle}
1306 | 				onPressIn={this.increase.bind(this)}
1307 | 				delayPressIn={this.props.delayPressIn}
1308 | 				onPressOut={this.onPressOut.bind(this)}
1309 | 				delayPressOut={this.props.delayPressOut}
1310 | 				onLongPress={this.increaseHold.bind(this)}
1311 | 				delayLongPress={this.props.accelerationDelay}
1312 | 				{...this.props.rightButtonProps}>
1313 | 				{this._renderRightButtonElement()}
1314 | 			</TouchableHighlight>
1315 | 		);
1316 | 	}
1317 | 
1318 | 	/**
1319 | 	 * Render
1320 | 	 * @returns {*}
1321 | 	 */
1322 | 	render() {
1323 | 		return (
1324 | 			<View style={this._getContainerStyle()} {...this.props.containerProps}>
1325 | 				{this._renderLeftButton()}
1326 | 
1327 | 				{this.props.prepend}
1328 | 
1329 | 				<TextInput
1330 | 					ref={(input) => (this.textInput = input)}
1331 | 					style={this._getInputTextStyle()}
1332 | 					value={this.getValue()}
1333 | 					placeholder={this.getPlaceholder()}
1334 | 					placeholderTextColor={this.getPlaceholderColor()}
1335 | 					selectionColor={this.props.selectionColor}
1336 | 					selectTextOnFocus={this.props.selectTextOnFocus}
1337 | 					returnKeyType={this.props.returnKeyType}
1338 | 					returnKeyLabel={this.props.returnKeyLabel}
1339 | 					autoFocus={this.props.autoFocus}
1340 | 					autoCapitalize={this._getAutoCapitalize()} // Bug fix for Samsung Keyboard
1341 | 					editable={this.isEditable()}
1342 | 					maxLength={this.props.maxLength}
1343 | 					onKeyPress={this.onKeyPress.bind(this)}
1344 | 					onFocus={this.onFocus.bind(this)}
1345 | 					onBlur={this.onBlur.bind(this)}
1346 | 					keyboardType={this._getKeyboardType()}
1347 | 					onChangeText={this.onChange.bind(this)}
1348 | 					onSubmitEditing={this.onSubmit.bind(this)}
1349 | 					{...this.props.inputProps}
1350 | 				/>
1351 | 
1352 | 				{this.props.children}
1353 | 				{this.props.append}
1354 | 
1355 | 				{this._renderRightButton()}
1356 | 			</View>
1357 | 		);
1358 | 	}
1359 | }
1360 | 
1361 | InputSpinner.propTypes = {
1362 | 	type: PropTypes.string,
1363 | 	skin: PropTypes.string,
1364 | 	min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1365 | 	max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1366 | 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1367 | 	initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1368 | 	step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1369 | 	longStep: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1370 | 	precision: PropTypes.number,
1371 | 	shadow: PropTypes.bool,
1372 | 	rounded: PropTypes.bool,
1373 | 	activeOpacity: PropTypes.number,
1374 | 	color: PropTypes.string,
1375 | 	colorPress: PropTypes.string,
1376 | 	colorRight: PropTypes.string,
1377 | 	colorLeft: PropTypes.string,
1378 | 	colorMax: PropTypes.string,
1379 | 	colorMin: PropTypes.string,
1380 | 	colorAsBackground: PropTypes.bool,
1381 | 	background: PropTypes.string,
1382 | 	textColor: PropTypes.string,
1383 | 	arrows: PropTypes.bool,
1384 | 	showBorder: PropTypes.bool,
1385 | 	fontSize: PropTypes.number,
1386 | 	fontFamily: PropTypes.string,
1387 | 	buttonFontSize: PropTypes.number,
1388 | 	buttonFontFamily: PropTypes.string,
1389 | 	buttonTextColor: PropTypes.string,
1390 | 	maxLength: PropTypes.number,
1391 | 	disabled: PropTypes.bool,
1392 | 	editable: PropTypes.bool,
1393 | 	autoFocus: PropTypes.bool,
1394 | 	selectTextOnFocus: PropTypes.bool,
1395 | 	placeholder: PropTypes.string,
1396 | 	placeholderTextColor: PropTypes.string,
1397 | 	selectionColor: PropTypes.string,
1398 | 	returnKeyLabel: PropTypes.string,
1399 | 	returnKeyType: PropTypes.string,
1400 | 	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1401 | 	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
1402 | 	onChange: PropTypes.func,
1403 | 	onFocus: PropTypes.func,
1404 | 	onBlur: PropTypes.func,
1405 | 	onKeyPress: PropTypes.func,
1406 | 	onMin: PropTypes.func,
1407 | 	onMax: PropTypes.func,
1408 | 	onIncrease: PropTypes.func,
1409 | 	onDecrease: PropTypes.func,
1410 | 	onSubmit: PropTypes.func,
1411 | 	onLongPress: PropTypes.func,
1412 | 	accelerationDelay: PropTypes.number,
1413 | 	speed: PropTypes.number,
1414 | 	emptied: PropTypes.bool,
1415 | 	continuity: PropTypes.bool,
1416 | 	typingTime: PropTypes.number,
1417 | 	buttonLeftDisabled: PropTypes.bool,
1418 | 	buttonRightDisabled: PropTypes.bool,
1419 | 	buttonLeftText: PropTypes.string,
1420 | 	buttonRightText: PropTypes.string,
1421 | 	buttonLeftImage: PropTypes.element,
1422 | 	buttonRightImage: PropTypes.element,
1423 | 	buttonPressLeftImage: PropTypes.element,
1424 | 	buttonPressRightImage: PropTypes.element,
1425 | 	buttonStyle: PropTypes.oneOfType([
1426 | 		PropTypes.object,
1427 | 		PropTypes.array,
1428 | 		PropTypes.number,
1429 | 		PropTypes.string,
1430 | 	]),
1431 | 	buttonTextStyle: PropTypes.oneOfType([
1432 | 		PropTypes.object,
1433 | 		PropTypes.array,
1434 | 		PropTypes.number,
1435 | 		PropTypes.string,
1436 | 	]),
1437 | 	buttonPressStyle: PropTypes.oneOfType([
1438 | 		PropTypes.object,
1439 | 		PropTypes.array,
1440 | 		PropTypes.number,
1441 | 		PropTypes.string,
1442 | 	]),
1443 | 	buttonPressTextStyle: PropTypes.oneOfType([
1444 | 		PropTypes.object,
1445 | 		PropTypes.array,
1446 | 		PropTypes.number,
1447 | 		PropTypes.string,
1448 | 	]),
1449 | 	inputStyle: PropTypes.oneOfType([
1450 | 		PropTypes.object,
1451 | 		PropTypes.array,
1452 | 		PropTypes.number,
1453 | 		PropTypes.string,
1454 | 	]),
1455 | 	style: PropTypes.oneOfType([
1456 | 		PropTypes.object,
1457 | 		PropTypes.array,
1458 | 		PropTypes.number,
1459 | 		PropTypes.string,
1460 | 	]),
1461 | 	append: PropTypes.element,
1462 | 	prepend: PropTypes.element,
1463 | 	decimalSeparator: PropTypes.string,
1464 | 	containerProps: PropTypes.object,
1465 | 	inputProps: PropTypes.object,
1466 | 	leftButtonProps: PropTypes.object,
1467 | 	rightButtonProps: PropTypes.object,
1468 | 	buttonTextProps: PropTypes.object,
1469 | 	formatter: PropTypes.func,
1470 | };
1471 | 
1472 | InputSpinner.defaultProps = {
1473 | 	type: "int",
1474 | 	skin: null,
1475 | 	min: 0,
1476 | 	max: null,
1477 | 	value: 0,
1478 | 	initialValue: null,
1479 | 	step: 1,
1480 | 	longStep: 0,
1481 | 	precision: 2,
1482 | 	rounded: true,
1483 | 	shadow: false,
1484 | 	activeOpacity: 0.85,
1485 | 	color: defaultColor,
1486 | 	colorPress: defaultColor,
1487 | 	colorRight: defaultColor,
1488 | 	colorLeft: defaultColor,
1489 | 	colorAsBackground: false,
1490 | 	background: "transparent",
1491 | 	textColor: null,
1492 | 	arrows: false,
1493 | 	showBorder: false,
1494 | 	fontSize: 14,
1495 | 	fontFamily: defaultFont,
1496 | 	buttonFontSize: 25,
1497 | 	buttonFontFamily: defaultFont,
1498 | 	buttonTextColor: null,
1499 | 	buttonPressTextColor: null,
1500 | 	maxLength: null,
1501 | 	disabled: false,
1502 | 	editable: true,
1503 | 	autoFocus: false,
1504 | 	selectTextOnFocus: null,
1505 | 	selectionColor: null,
1506 | 	returnKeyLabel: null,
1507 | 	returnKeyType: null,
1508 | 	width: "auto",
1509 | 	height: 50,
1510 | 	accelerationDelay: defaultAccelerationDelay,
1511 | 	delayPressIn: defaultDelayPressIn,
1512 | 	delayPressOut: defaultDelayPressOut,
1513 | 	speed: defaultSpeed,
1514 | 	emptied: false,
1515 | 	continuity: false,
1516 | 	typingTime: defaultTypingTime,
1517 | 	buttonLeftDisabled: false,
1518 | 	buttonRightDisabled: false,
1519 | 	buttonLeftText: null,
1520 | 	buttonRightText: null,
1521 | 	buttonStyle: null,
1522 | 	buttonTextStyle: null,
1523 | 	buttonPressStyle: null,
1524 | 	buttonPressTextStyle: null,
1525 | 	inputStyle: null,
1526 | 	style: null,
1527 | 	decimalSeparator: ".",
1528 | 	containerProps: null,
1529 | 	inputProps: null,
1530 | 	leftButtonProps: null,
1531 | 	rightButtonProps: null,
1532 | 	buttonTextProps: null,
1533 | 	formatter: null,
1534 | };
1535 | 
1536 | export default InputSpinner;
1537 | 


--------------------------------------------------------------------------------
/src/Skins.js:
--------------------------------------------------------------------------------
 1 | import * as CleanSkin from "./skins/CleanSkin";
 2 | import * as ModernSkin from "./skins/ModernSkin";
 3 | import * as PaperSkin from "./skins/PaperSkin";
 4 | import * as RoundSkin from "./skins/RoundSkin";
 5 | import * as SquareSkin from "./skins/SquareSkin";
 6 | 
 7 | /**
 8 |  * Get skin props
 9 |  * @returns {*}
10 |  */
11 | export const getSkin = (skin, props) => {
12 | 	skin = String(props.skin).trim().toLowerCase();
13 | 	switch (skin) {
14 | 		case "clean":
15 | 			return CleanSkin.getProps(props);
16 | 		case "modern":
17 | 			return ModernSkin.getProps(props);
18 | 		case "paper":
19 | 			return PaperSkin.getProps(props);
20 | 		case "round":
21 | 			return RoundSkin.getProps(props);
22 | 		case "square":
23 | 			return SquareSkin.getProps(props);
24 | 		default:
25 | 			return {};
26 | 	}
27 | };
28 | 


--------------------------------------------------------------------------------
/src/Style.js:
--------------------------------------------------------------------------------
 1 | import {Platform, StyleSheet} from "react-native";
 2 | 
 3 | /**
 4 |  * Palette constants
 5 |  */
 6 | export const defaultColor = "#3E525F";
 7 | export const defaultTransparent = "#FFFFFF00";
 8 | export const defaultFont = Platform.select({
 9 | 	ios: "System",
10 | 	android: "System",
11 | 	web: "sans-serif",
12 | });
13 | 
14 | /**
15 |  * Default style
16 |  */
17 | export const Style = StyleSheet.create({
18 | 	container: {
19 | 		borderRadius: 4,
20 | 		flexDirection: "row",
21 | 		overflow: "visible",
22 | 		width: 150,
23 | 		alignItems: "center",
24 | 		justifyContent: "center",
25 | 	},
26 | 	containerShadow: {
27 | 		shadowColor: "#000",
28 | 		shadowOffset: {
29 | 			width: 0,
30 | 			height: 6,
31 | 		},
32 | 		shadowOpacity: 0.39,
33 | 		shadowRadius: 8.3,
34 | 
35 | 		elevation: 10,
36 | 	},
37 | 	buttonLeft: {
38 | 		alignItems: "center",
39 | 		justifyContent: "center",
40 | 		borderRadius: 2,
41 | 		borderBottomRightRadius: 0,
42 | 		borderTopRightRadius: 0,
43 | 	},
44 | 	buttonRight: {
45 | 		alignItems: "center",
46 | 		justifyContent: "center",
47 | 		borderRadius: 2,
48 | 		borderBottomLeftRadius: 0,
49 | 		borderTopLeftRadius: 0,
50 | 	},
51 | 	buttonRounded: {
52 | 		alignItems: "center",
53 | 		justifyContent: "center",
54 | 		borderRadius: 999,
55 | 		...Platform.select({
56 | 			web: {
57 | 				outlineWidth: 0,
58 | 			},
59 | 		}),
60 | 	},
61 | 	buttonText: {
62 | 		color: "white",
63 | 		textAlign: "center",
64 | 		justifyContent: "center",
65 | 		alignItems: "center",
66 | 		textAlignVertical: "center",
67 | 	},
68 | 	numberText: {
69 | 		flexGrow: 1,
70 | 		textAlign: "center",
71 | 		justifyContent: "center",
72 | 		alignItems: "center",
73 | 		textAlignVertical: "center",
74 | 		borderWidth: 0,
75 | 		...Platform.select({
76 | 			web: {
77 | 				width: "100%",
78 | 				outlineWidth: 0,
79 | 			},
80 | 		}),
81 | 	},
82 | });
83 | 


--------------------------------------------------------------------------------
/src/Utils.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Is empty
  3 |  * @param x
  4 |  * @returns {boolean}
  5 |  */
  6 | export const isEmpty = (x) => {
  7 | 	if (typeof x === typeof "") {
  8 | 		x = x.replace(/\s/g, "");
  9 | 		return x === "";
 10 | 	}
 11 | 
 12 | 	if (x===0) return false;
 13 | 	if (!x) return true;
 14 | 	if (x === {}) return true;
 15 | 	if (x === []) return true;
 16 | 	if (x == null) return true;
 17 | 	if (typeof x === "undefined") return true;
 18 | 	if (x === "") return true;
 19 | 	if (x === function () {}) return true;
 20 | 
 21 | 	if (typeof x === typeof {}) {
 22 | 		if (Object.entries(x).length === 0 && x.constructor === Object) {
 23 | 			return true;
 24 | 		}
 25 | 		for (let key in x) {
 26 | 			if (x.hasOwnProperty(key) && !isEmpty(x[key])) {
 27 | 				return false;
 28 | 			}
 29 | 		}
 30 | 		return true;
 31 | 	}
 32 | 	return false;
 33 | };
 34 | 
 35 | /**
 36 |  * Parse color.
 37 |  * @param color
 38 |  * @returns {number[]}
 39 |  */
 40 | export const parseColor = (color) => {
 41 | 	let colors;
 42 | 	const colorString = color.replace(/\s/g, "");
 43 | 	if (
 44 | 		(colors = /#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/.exec(
 45 | 			colorString,
 46 | 		))
 47 | 	) {
 48 | 		// #000000FF
 49 | 		colors = [
 50 | 			parseInt(colors[1], 16),
 51 | 			parseInt(colors[2], 16),
 52 | 			parseInt(colors[3], 16),
 53 | 			parseInt(colors[4], 16),
 54 | 		];
 55 | 	} else if (
 56 | 		(colors = /#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/.exec(
 57 | 			colorString,
 58 | 		))
 59 | 	) {
 60 | 		// #000000
 61 | 		colors = [
 62 | 			parseInt(colors[1], 16),
 63 | 			parseInt(colors[2], 16),
 64 | 			parseInt(colors[3], 16),
 65 | 		];
 66 | 	} else if (
 67 | 		(colors = /#([\da-fA-F])([\da-fA-F])([\da-fA-F])/.exec(colorString))
 68 | 	) {
 69 | 		// #000
 70 | 		colors = [
 71 | 			parseInt(colors[1], 16) * 17,
 72 | 			parseInt(colors[2], 16) * 17,
 73 | 			parseInt(colors[3], 16) * 17,
 74 | 		];
 75 | 	} else if (
 76 | 		(colors = /rgba\(([\d]+),([\d]+),([\d]+),([\d]+|[\d]*.[\d]+)\)/.exec(
 77 | 			colorString,
 78 | 		))
 79 | 	) {
 80 | 		// rgba(255,255,255,255)
 81 | 		colors = [+colors[1], +colors[2], +colors[3], +colors[4]];
 82 | 	} else if ((colors = /rgb\(([\d]+),([\d]+),([\d]+)\)/.exec(colorString))) {
 83 | 		// rgb(255,255,255)
 84 | 		colors = [+colors[1], +colors[2], +colors[3]];
 85 | 	} else {
 86 | 		colors = [0, 0, 0, 0];
 87 | 	}
 88 | 
 89 | 	// Add alpha if missing
 90 | 	if (isNaN(colors[3])) {
 91 | 		colors[3] = 255;
 92 | 	}
 93 | 
 94 | 	return colors;
 95 | };
 96 | 
 97 | /**
 98 |  * Parsed colors to hex code
 99 |  * @param colors
100 |  * @returns {string}
101 |  */
102 | export const colorsToHex = (colors) => {
103 | 	const hexColors = colors.map((color) => {
104 | 		color = color.toString(16);
105 | 		while (color.length < 2) {
106 | 			color += "0";
107 | 		}
108 | 		return color;
109 | 	});
110 | 
111 | 	return "#" + hexColors.join("");
112 | };
113 | 
114 | /**
115 |  * Is transparent color
116 |  * @private
117 |  * @param color
118 |  * @returns {boolean}
119 |  */
120 | export const isTransparentColor = (color) => {
121 | 	color = String(color).toLowerCase().trim();
122 | 	const parse = parseColor(color);
123 | 	return String(color).toLowerCase().trim() === "transparent" || parse[4] === 0;
124 | };
125 | 
126 | /**
127 |  * Is variable callable
128 |  * @private
129 |  * @param callback
130 |  * @returns {boolean}
131 |  */
132 | export const isCallable = (callback) => {
133 | 	return (
134 | 		callback != null &&
135 | 		(callback instanceof Function || typeof callback === "function")
136 | 	);
137 | };
138 | 
139 | /**
140 |  * Debounce
141 |  * @param callback
142 |  * @param wait
143 |  * @returns {function(...[*]=): void}
144 |  */
145 | export const debounce = (callback, wait) => {
146 | 	let timeout;
147 | 	return function (...args) {
148 | 		const context = this;
149 | 		clearTimeout(timeout);
150 | 		timeout = setTimeout(() => callback.apply(context, args), wait);
151 | 		return timeout;
152 | 	};
153 | };
154 | 
155 | /**
156 |  * Detect if is a numeric value
157 |  * @param num
158 |  * @returns {boolean}
159 |  */
160 | export const isNumeric = (num) => {
161 | 	return (
162 | 		num != null &&
163 | 		num !== false &&
164 | 		num !== "" &&
165 | 		!isNaN(parseFloat(num)) &&
166 | 		!isNaN(num - 0)
167 | 	);
168 | };
169 | 
170 | /**
171 |  * Merge styles
172 |  * @param style
173 |  * @param defaultStyle
174 |  * @returns {*[]}
175 |  */
176 | export const mergeViewStyle = (style, defaultStyle) => {
177 | 	if (style == null) {
178 | 		style = defaultStyle;
179 | 	} else if (Array.isArray(style) && Array.isArray(defaultStyle)) {
180 | 		defaultStyle.concat(style);
181 | 		style = defaultStyle;
182 | 	} else if (Array.isArray(defaultStyle)) {
183 | 		defaultStyle.push(style);
184 | 		style = defaultStyle;
185 | 	} else if (Array.isArray(style)) {
186 | 		style.unshift(defaultStyle);
187 | 	} else {
188 | 		style = [defaultStyle, style];
189 | 	}
190 | 	return style;
191 | };
192 | 
193 | /**
194 |  * Get color contrast
195 |  * @param hexcolor
196 |  * @returns {string}
197 |  */
198 | export const getColorContrast = (hexcolor) => {
199 | 	if (hexcolor.slice(0, 1) === "#") {
200 | 		hexcolor = hexcolor.slice(1);
201 | 	}
202 | 	if (hexcolor.length === 3) {
203 | 		hexcolor = hexcolor
204 | 			.split("")
205 | 			.map(function (hex) {
206 | 				return hex + hex;
207 | 			})
208 | 			.join("");
209 | 	}
210 | 	var r = parseInt(hexcolor.substr(0, 2), 16);
211 | 	var g = parseInt(hexcolor.substr(2, 2), 16);
212 | 	var b = parseInt(hexcolor.substr(4, 2), 16);
213 | 	var yiq = (r * 299 + g * 587 + b * 114) / 1000;
214 | 	return yiq >= 170 ? "#000000" : "#FFFFFF";
215 | };
216 | 


--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
 1 | import React, {Component} from "react";
 2 | import {
 3 | 	NativeSyntheticEvent,
 4 | 	StyleProp,
 5 | 	TextInputFocusEventData,
 6 | 	TextInputKeyPressEventData,
 7 | 	TextProps,
 8 | 	ViewStyle,
 9 | } from "react-native";
10 | 
11 | export interface ReactNativeInputSpinnerProps {
12 | 	type?: string;
13 | 	skin?: "clean" | "modern" | "paper" | "round" | "square";
14 | 	min?: string | number;
15 | 	max?: string | number;
16 | 	value?: string | number;
17 | 	initialValue?: string | number;
18 | 	step?: string | number;
19 | 	longStep?: string | number;
20 | 	precision?: number;
21 | 	shadow?: boolean;
22 | 	rounded?: boolean;
23 | 	activeOpacity?: number;
24 | 	color?: string;
25 | 	colorPress?: string;
26 | 	colorRight?: string;
27 | 	colorLeft?: string;
28 | 	colorMax?: string;
29 | 	colorMin?: string;
30 | 	colorAsBackground?: boolean;
31 | 	background?: string;
32 | 	textColor?: string;
33 | 	arrows?: boolean;
34 | 	showBorder?: boolean;
35 | 	fontSize?: number;
36 | 	fontFamily?: string;
37 | 	buttonFontSize?: number;
38 | 	buttonFontFamily?: string;
39 | 	buttonTextColor?: string;
40 | 	maxLength?: number;
41 | 	disabled?: boolean;
42 | 	editable?: boolean;
43 | 	autoFocus?: boolean;
44 | 	selectTextOnFocus?: boolean;
45 | 	placeholder?: string;
46 | 	placeholderTextColor?: string;
47 | 	selectionColor?: string;
48 | 	returnKeyLabel?: string;
49 | 	returnKeyType?: string;
50 | 	width?: string | number;
51 | 	height?: string | number;
52 | 	onChange?: (value: number | null) => void | false | number;
53 | 	onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
54 | 	onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
55 | 	onKeyPress?: (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
56 | 	onMin?: (value: number) => void;
57 | 	onMax?: (value: number) => void;
58 | 	onIncrease?: (value: number) => void;
59 | 	onDecrease?: (value: number) => void;
60 | 	onSubmit?: (value: number) => void;
61 | 	onLongPress?: (value: number) => void;
62 | 	accelerationDelay?: number;
63 | 	delayPressIn?: number;
64 | 	delayPressOut?: number;
65 | 	speed?: number;
66 | 	emptied?: boolean;
67 | 	continuity?: boolean;
68 | 	typingTime?: number;
69 | 	buttonLeftDisabled?: boolean;
70 | 	buttonRightDisabled?: boolean;
71 | 	buttonLeftText?: string;
72 | 	buttonRightText?: string;
73 | 	buttonLeftImage?: React.ReactElement;
74 | 	buttonRightImage?: React.ReactElement;
75 | 	buttonPressLeftImage?: React.ReactElement;
76 | 	buttonPressRightImage?: React.ReactElement;
77 | 	buttonStyle?: StyleProp<ViewStyle>;
78 | 	buttonTextStyle?: StyleProp<ViewStyle>;
79 | 	buttonPressStyle?: StyleProp<ViewStyle>;
80 | 	buttonPressTextStyle?: StyleProp<ViewStyle>;
81 | 	inputStyle?: StyleProp<ViewStyle>;
82 | 	style?: StyleProp<ViewStyle>;
83 | 	append?: React.ReactElement;
84 | 	prepend?: React.ReactElement;
85 | 	decimalSeparator?: string;
86 | 	containerProps?: object;
87 | 	inputProps?: object;
88 | 	leftButtonProps?: object;
89 | 	rightButtonProps?: object;
90 | 	buttonTextProps?: TextProps;
91 | 	formatter?: (value: number) => string;
92 | }
93 | export default class InputSpinner extends Component<ReactNativeInputSpinnerProps> {}
94 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import InputSpinner from "./InputSpinner";
 3 | import {getSkin} from "./Skins";
 4 | 
 5 | // Export
 6 | export default React.forwardRef((props, ref) => {
 7 | 	const skinProps = getSkin(props.skin, props);
 8 | 	const finalProps = {...props, ...skinProps};
 9 | 	return <InputSpinner {...finalProps} ref={ref} />;
10 | });
11 | 


--------------------------------------------------------------------------------
/src/skins/CleanSkin.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export const getProps = (props) => {
 4 | 	const backgroundFallback = props.background ? props.background : "#FFF";
 5 | 	return {
 6 | 		shadow: props.shadow ? props.shadow : true,
 7 | 		color: backgroundFallback,
 8 | 		colorAsBackground: true,
 9 | 	};
10 | };
11 | 


--------------------------------------------------------------------------------
/src/skins/ModernSkin.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {mergeViewStyle} from "../Utils";
 3 | 
 4 | export const getProps = (props) => {
 5 | 	const colorFallback = props.color ? props.color : "#898aff";
 6 | 	return {
 7 | 		style: mergeViewStyle(props.style, {
 8 | 			minWidth: 150,
 9 | 			maxWidth: 150,
10 | 		}),
11 | 		shadow: props.shadow ? props.shadow : true,
12 | 		width: props.width ? props.width : 150,
13 | 		colorAsBackground: true,
14 | 		color: colorFallback,
15 | 		textColor: "#000",
16 | 		inputStyle: mergeViewStyle(props.inputStyle, {
17 | 			borderRadius: 30,
18 | 			backgroundColor: "#FFF",
19 | 			minWidth: 50,
20 | 			maxWidth: 50,
21 | 			height: 50,
22 | 		}),
23 | 	};
24 | };
25 | 


--------------------------------------------------------------------------------
/src/skins/PaperSkin.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {mergeViewStyle} from "../Utils";
 3 | 
 4 | export const getProps = (props) => {
 5 | 	const colorFallback = props.color ? props.color : "#eeeafd";
 6 | 	const colorPressFallback = props.colorPress ? props.colorPress : "#a28df6";
 7 | 	return {
 8 | 		style: mergeViewStyle(props.style, {padding: 10, borderRadius: 3}),
 9 | 		height: props.height ? props.height : 30,
10 | 		shadow: props.shadow ? props.shadow : true,
11 | 		background: props.background ? props.background : "#FFF",
12 | 		color: colorFallback,
13 | 		colorPress: props.colorPress ? props.colorPress : colorPressFallback,
14 | 		buttonTextColor: colorPressFallback,
15 | 		buttonPressTextColor: "auto",
16 | 	};
17 | };
18 | 


--------------------------------------------------------------------------------
/src/skins/RoundSkin.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {mergeViewStyle} from "../Utils";
 3 | 
 4 | export const getProps = (props) => {
 5 | 	return {
 6 | 		shadow: props.shadow ? props.shadow : true,
 7 | 		colorAsBackground: true,
 8 | 		textColor: "#000",
 9 | 		inputStyle: mergeViewStyle(props.inputStyle, {
10 | 			backgroundColor: "#FFF",
11 | 		}),
12 | 	};
13 | };
14 | 


--------------------------------------------------------------------------------
/src/skins/SquareSkin.js:
--------------------------------------------------------------------------------
1 | export const getProps = (props) => {
2 | 	return {
3 | 		shadow: props.shadow ? props.shadow : true,
4 | 		rounded: props.rounded ? props.rounded : false,
5 | 		background: props.background ? props.background : "#FFF",
6 | 	};
7 | };
8 | 


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