Skip to content

Commit 4cbf9c5

Browse files
marcocesaratomarcocesarato
committed
Added somew new props and implmeneted children
New Version 1.2.4 Added buttonPressLeftImage, buttonPressRightImage Added append and prepend Implemented children
1 parent edf16c5 commit 4cbf9c5

File tree

7 files changed

+121
-56
lines changed

7 files changed

+121
-56
lines changed

‎Example/App.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,24 @@ export default class App extends Component {
177177
buttonTextColor={"#000"}
178178
buttonPressTextColor={"#FFF"}/>
179179
</View>
180+
<View style={styles.col}>
181+
<Text style={styles.text}>Children</Text>
182+
<InputSpinner
183+
value={this.state.value}
184+
style={styles.spinner}>
185+
<Text style={styles.simbol}>$</Text>
186+
</InputSpinner>
187+
</View>
188+
<View style={styles.col}>
189+
<Text style={styles.text}>Prepend and append</Text>
190+
<InputSpinner
191+
value={this.state.value}
192+
style={styles.spinner}
193+
append={(<Text style={styles.simbol}>Append</Text>)}
194+
prepend={(<Text style={styles.simbol}>Prepend</Text>)}>
195+
<Text style={styles.simbol}>$</Text>
196+
</InputSpinner>
197+
</View>
180198
</ScrollView>
181199
);
182200
}
@@ -205,6 +223,16 @@ const styles = StyleSheet.create({
205223
spinner: {
206224
flex: 1,
207225
width: "auto",
208-
minWidth: 150,
226+
minWidth: 300
227+
},
228+
simbol: {
229+
marginLeft: 10,
230+
marginRight: 10,
231+
height: "100%",
232+
justifyContent: 'center',
233+
alignItems: 'center',
234+
textAlign: 'center',
235+
textAlignVertical: 'center',
236+
lineHeight: 50
209237
}
210238
});

‎Example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"react": "16.8.3",
1313
"react-dom": "^16.8.6",
1414
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
15-
"react-native-input-spinner": "^1.2.3",
15+
"react-native-input-spinner": "^1.2.4",
1616
"react-native-web": "^0.11.5"
1717
},
1818
"devDependencies": {

‎PROPS.md‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,50 @@
22

33
## 💡 Props List
44

5-
| Property | Description | Type | Default | Note |
6-
| ---------------------- | ------------------------------------------------------------------- | ---------------- | ---------------- | --------------------------------- |
7-
| `activeOpacity` | Opacity on pressed button | Number | `0.85 |
8-
| `arrows` | Labels on button will be arrows (< and >) instead of plus and minus | Boolean | `false |
9-
| `background` | Background color of number button | String | `transparent` | |
10-
| `buttonFontFamily` | Custom fontFamily of buttons of the Spinner | String | `System Default` | |
11-
| `buttonFontSize` | Custom fontSize of buttons of the Spinner | Number | `14` | |
12-
| `buttonLeftImage` | Custom element on the button left of the spinner | Component | | |
13-
| `buttonLeftText` | Custom text on the button left of the spinner | String | | |
14-
| `buttonPressStyle` | Button Style on Pressed state (Plus and Minus buttons) | Object | | Could overwrite other props |
15-
| `buttonPressTextColor` | Custom color of the button of the Spinner on Pressed state | String | `#FFFFFF` | |
16-
| `buttonRightImage` | Custom element on the button right of the spinner | Component | | |
17-
| `buttonRightText` | Custom text on the button right of the spinner | String | | |
18-
| `buttonStyle` | Button Style (Plus and Minus buttons) | Object | | Could overwrite other props |
19-
| `buttonTextColor` | Custom color of the button of the Spinner | String | `#FFFFFF` | |
20-
| `colorLeft` | Custom color of the Spinner left button | String | `#3E525F` | |
21-
| `colorMax` | Custom color of the Spinner when reach max value | String | | |
22-
| `colorMin` | Custom color of the Spinner when reach min value | String | | |
23-
| `colorPress` | Custom color of the Spinner button on touch press | String | `#3E525F` | |
24-
| `colorRight` | Custom color of the Spinner right button | String | `#3E525F` | |
25-
| `color` | Custom color of the Spinner | String | `#3E525F` | |
26-
| `disabled` | Disable the Spinner or not | Boolean | `false` | |
27-
| `editable` | Set if input number field is editable or not | Boolean | `true` | |
28-
| `fontFamily` | Custom fontFamily of the text input of the Spinner | String | System Default | |
29-
| `fontSize` | Custom fontSize of the text input of the Spinner | Number | `14` | |
30-
| `height` | Custom height of the Spinner | Number | `50` | |
31-
| `inputStyle` | Input Style (Text number at middle) | Object | | Could overwrite other props |
32-
| `max` | Max number permitted | String<br>Number | `0` | |
33-
| `min` | Min value permitted | String<br>Number | `99` | |
34-
| `onChange` | Get the number of the Spinner | Function | | `(num) => { ... }` |
35-
| `onDecrease` | When decrease button is clicked get value decreased | Function | | `(decreased) => { ... }` |
36-
| `onIncrease` | When increase button is clicked get value increased | Function | | `(increased) => { ... }` |
37-
| `onMax` | When max is reached get max number permitted | Function | | `(max) => { ... }` |
38-
| `onMin` | When min is reached get min number permitted | Function | | `(min) => { ... }` |
39-
| `precision` | Max numbers permitted after comma | Integer | `2` | |
40-
| `rounded` | Use circular button | Boolean | `true` | |
41-
| `showBorder` | Show the border of the Spinner or not | Boolean | `false` | Use with `rounded={false}` |
42-
| `step` | Value to increment or decrement the current spinner value | String<br>Number | `1` | |
43-
| `style` | Container style | Object | | Could overwrite other props |
44-
| `textColor` | Custom number color | String | `#000000` | |
45-
| `type` | Type of spinner | String | `int` | Can be `int` or `real`/`float`... |
46-
| `value` | Controlled value of the Spinner | String<br>Number | `0` | |
47-
| `width` | Custom width of the Spinner | Number | `150` | |
5+
| Property | Description | Type | Default | Note |
6+
| ----------------------- | ------------------------------------------------------------------- | ---------------- | ---------------- | --------------------------------- |
7+
| `activeOpacity` | Opacity on pressed button | Number | `0.85` |
8+
| `append` | Custom element before right button | Component | |
9+
| `arrows` | Labels on button will be arrows (< and >) instead of plus and minus | Boolean | `false` |
10+
| `background` | Background color of number button | String | `transparent` | |
11+
| `buttonFontFamily` | Custom fontFamily of buttons of the Spinner | String | `System Default` | |
12+
| `buttonFontSize` | Custom fontSize of buttons of the Spinner | Number | `14` | |
13+
| `buttonLeftImage` | Custom element on the button left of the spinner | Component | | |
14+
| `buttonLeftText` | Custom text on the button left of the spinner | String | | |
15+
| `buttonPressLeftImage` | Custom element on the button left of the spinner on pressed state | Component | | |
16+
| `buttonPressRightImage` | Custom element on the button right of the spinner on pressed state | Component | | |
17+
| `buttonPressStyle` | Button Style on Pressed state (Plus and Minus buttons) | Object | | Could overwrite other props |
18+
| `buttonPressTextColor` | Custom color of the button of the Spinner on Pressed state | String | `#FFFFFF` | |
19+
| `buttonRightImage` | Custom element on the button right of the spinner | Component | | |
20+
| `buttonRightText` | Custom text on the button right of the spinner | String | | |
21+
| `buttonStyle` | Button Style (Plus and Minus buttons) | Object | | Could overwrite other props |
22+
| `buttonTextColor` | Custom color of the button of the Spinner | String | `#FFFFFF` | |
23+
| `colorLeft` | Custom color of the Spinner left button | String | `#3E525F` | |
24+
| `colorMax` | Custom color of the Spinner when reach max value | String | | |
25+
| `colorMin` | Custom color of the Spinner when reach min value | String | | |
26+
| `colorPress` | Custom color of the Spinner button on touch press | String | `#3E525F` | |
27+
| `colorRight` | Custom color of the Spinner right button | String | `#3E525F` | |
28+
| `color` | Custom color of the Spinner | String | `#3E525F` | |
29+
| `disabled` | Disable the Spinner or not | Boolean | `false` | |
30+
| `editable` | Set if input number field is editable or not | Boolean | `true` | |
31+
| `fontFamily` | Custom fontFamily of the text input of the Spinner | String | System Default | |
32+
| `fontSize` | Custom fontSize of the text input of the Spinner | Number | `14` | |
33+
| `height` | Custom height of the Spinner | Number | `50` | |
34+
| `inputStyle` | Input Style (Text number at middle) | Object | | Could overwrite other props |
35+
| `max` | Max number permitted | String<br>Number | `0` | |
36+
| `min` | Min value permitted | String<br>Number | `99` | |
37+
| `onChange` | Get the number of the Spinner | Function | | `(num) => { ... }` |
38+
| `onDecrease` | When decrease button is clicked get value decreased | Function | | `(decreased) => { ... }` |
39+
| `onIncrease` | When increase button is clicked get value increased | Function | | `(increased) => { ... }` |
40+
| `onMax` | When max is reached get max number permitted | Function | | `(max) => { ... }` |
41+
| `onMin` | When min is reached get min number permitted | Function | | `(min) => { ... }` |
42+
| `precision` | Max numbers permitted after comma | Integer | `2` | |
43+
| `prepend` | Custom element after left button | Component | |
44+
| `rounded` | Use circular button | Boolean | `true` | |
45+
| `showBorder` | Show the border of the Spinner or not | Boolean | `false` | Use with `rounded={false}` |
46+
| `step` | Value to increment or decrement the current spinner value | String<br>Number | `1` | |
47+
| `style` | Container style | Object | | Could overwrite other props |
48+
| `textColor` | Custom number color | String | `#000000` | |
49+
| `type` | Type of spinner | String | `int` | Can be `int` or `real`/`float`... |
50+
| `value` | Controlled value of the Spinner | String<br>Number | `0` | |
51+
| `width` | Custom width of the Spinner | Number | `150` | |

‎README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ Property | Description | Type | Default | Note
107107
`precision` | Max numbers permitted after comma | Integer | `2` |
108108
`disabled` | Disable the Spinner or not | Boolean | `false` | |
109109
`editable` | Set if input number field is editable or not | Boolean | `true` | |
110+
`prepend` | Custom element after left button | Component | |
111+
`append` | Custom element before right button | Component | |
110112

111113
### Props style
112114

@@ -149,8 +151,10 @@ Property | Description | Type | Default | Note
149151
`activeOpacity` | Opacity of underlay on pressed button | Number | `0.85` |
150152
`buttonLeftText` | Custom text on the button left of the spinner | String | |
151153
`buttonRightText` | Custom text on the button right of the spinner | String | |
152-
`buttonLeftImage` | Custom element on the button left of the spinner instead of labels | Component | | Could overwrite other props
153-
`buttonRightImage` | Custom element on the button right of the spinner instead of labels | Component | | Could overwrite other props
154+
`buttonLeftImage` | Custom element on the button left of the spinner | Component | | Could overwrite other props
155+
`buttonRightImage` | Custom element on the button right of the spinner | Component | | Could overwrite other props
156+
`buttonPressLeftImage` | Custom element on the button left of the spinner on pressed state | Component | | Could overwrite other props
157+
`buttonPressRightImage` | Custom element on the button right of the spinner on pressed state | Component | | Could overwrite other props
154158
`buttonFontSize` | Custom fontSize of buttons of the Spinner | Number | `14` |
155159
`buttonFontFamily` | Custom fontFamily of buttons of the Spinner | String | System Default |
156160
`buttonTextColor` | Custom color of the labels's button of the Spinner | String | `#FFFFFF` |

0 commit comments

Comments
 (0)