Merge pull request #10 from stephenkopylov/master

added: addition of incorrect color for dots and colors (common/selected) for circle buttons title
jarden-digital · Jul 7, 2018 · bb3ba7e · bb3ba7e
2 parents 86738e3 + ea24514
commit bb3ba7e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/src/PinCode.tsx b/src/PinCode.tsx
@@ -38,6 +38,7 @@ export type IProps = {
   titleConfirmFailed: string
   subtitleError: string
   colorPassword?: string
+  colorPasswordError?: string
   numbersButtonOverlayColor?: string
   buttonDeleteComponent?: any
   titleComponent?: any
@@ -62,6 +63,8 @@ export type IProps = {
   styleColorTitleError?: string
   styleColorSubtitle?: string
   styleColorSubtitleError?: string
+  styleColorButtonTitle?: string
+  styleColorButtonTitleSelected?: string
 }
 
 export type IState = {
@@ -174,7 +177,7 @@ class PinCode extends React.PureComponent<IProps, IState> {
             }}>
             <Text style={[this.props.styleTextButton ? this.props.styleTextButton : styles.text, {
               opacity: opacity,
-              color: this.state.textButtonSelected === text ? colors.white : colors.grey
+              color: this.state.textButtonSelected === text ? (this.props.styleColorButtonTitleSelected ? this.props.styleColorButtonTitleSelected : colors.white) : (this.props.styleColorButtonTitle ? this.props.styleColorButtonTitle : colors.grey)
             }]}>{text}</Text>
           </TouchableHighlight>
         )}
@@ -252,7 +255,7 @@ class PinCode extends React.PureComponent<IProps, IState> {
                 opacity: [lengthSup ? 1 : 0.5],
                 height: [lengthSup ? 8 : 4],
                 width: [lengthSup ? 8 : 4],
-                color: [showError ? colors.alert : (this.props.colorPassword ? this.props.colorPassword : colors.turquoise)],
+                color: [showError ? (this.props.colorPasswordError ? this.props.colorPasswordError : colors.alert) : (this.props.colorPassword ? this.props.colorPassword : colors.turquoise)],
                 borderRadius: [lengthSup ? 4 : 2],
                 marginRight: [lengthSup ? 8 : 10],
                 marginLeft: [lengthSup ? 8 : 10],

diff --git a/src/PinCodeChoose.tsx b/src/PinCodeChoose.tsx
@@ -20,6 +20,7 @@ export type IProps = {
   titleConfirmFailed?: string
   subtitleError?: string
   colorPassword?: string
+  colorPasswordError?: string
   numbersButtonOverlayColor?: string
   buttonDeleteComponent: any
   titleComponent: any
@@ -46,6 +47,8 @@ export type IProps = {
   styleDeleteButtonIcon?: string
   styleDeleteButtonSize?: number
   styleDeleteButtonText?: StyleProp<TextStyle>
+  styleColorButtonTitle?: string
+  styleColorButtonTitleSelected?: string
 }
 
 export type IState = {
@@ -98,6 +101,7 @@ class PinCodeChoose extends React.PureComponent<IProps, IState> {
           titleConfirmFailed={this.props.titleConfirmFailed || 'Your entries did not match'}
           subtitleError={this.props.subtitleError || 'Please try again'}
           colorPassword={this.props.colorPassword || undefined}
+          colorPasswordError={this.props.colorPasswordError || undefined}
           numbersButtonOverlayColor={this.props.numbersButtonOverlayColor || undefined}
           buttonDeleteComponent={this.props.buttonDeleteComponent || null}
           titleComponent={this.props.titleComponent || null}
@@ -121,7 +125,8 @@ class PinCodeChoose extends React.PureComponent<IProps, IState> {
           styleColorSubtitleError={this.props.styleColorSubtitleError}
           styleDeleteButtonIcon={this.props.styleDeleteButtonIcon}
           styleDeleteButtonSize={this.props.styleDeleteButtonSize}
-          styleDeleteButtonText={this.props.styleDeleteButtonText}/>}
+          styleDeleteButtonText={this.props.styleDeleteButtonText}
+          styleColorButtonTitle={this.props.styleColorButtonTitle}/>}
         {this.state.status === PinStatus.confirm &&
         <PinCode
           endProcess={this.endProcessConfirm}
@@ -137,6 +142,7 @@ class PinCodeChoose extends React.PureComponent<IProps, IState> {
           titleConfirmFailed={this.props.titleConfirmFailed || 'Your entries did not match'}
           subtitleError={this.props.subtitleError || 'Please try again'}
           colorPassword={this.props.colorPassword || undefined}
+          colorPasswordError={this.props.colorPasswordError || undefined}
           numbersButtonOverlayColor={this.props.numbersButtonOverlayColor || undefined}
           buttonDeleteComponent={this.props.buttonDeleteComponent || null}
           titleComponent={this.props.titleComponent || null}
@@ -160,7 +166,9 @@ class PinCodeChoose extends React.PureComponent<IProps, IState> {
           styleDeleteButtonColorHideUnderlay={this.props.styleDeleteButtonColorHideUnderlay}
           styleDeleteButtonIcon={this.props.styleDeleteButtonIcon}
           styleDeleteButtonSize={this.props.styleDeleteButtonSize}
-          styleDeleteButtonText={this.props.styleDeleteButtonText}/>}
+          styleDeleteButtonText={this.props.styleDeleteButtonText}
+          styleColorButtonTitle={this.props.styleColorButtonTitle}
+          styleColorButtonTitleSelected={this.props.styleColorButtonTitleSelected}/>}
       </View>
     )
   }

diff --git a/src/PinCodeEnter.tsx b/src/PinCodeEnter.tsx
@@ -27,6 +27,7 @@ export type IProps = {
   titleConfirmFailed?: string
   subtitleError?: string
   colorPassword?: string
+  colorPasswordError?: string
   numbersButtonOverlayColor?: string
   buttonDeleteComponent: any
   titleComponent: any
@@ -55,6 +56,8 @@ export type IProps = {
   styleDeleteButtonIcon?: string
   styleDeleteButtonSize?: number
   styleDeleteButtonText?: StyleProp<TextStyle>
+  styleColorButtonTitle?: string
+  styleColorButtonTitleSelected?: string
 }
 
 export type IState = {
@@ -152,6 +155,7 @@ class PinCodeEnter extends React.PureComponent<IProps, IState> {
           titleConfirmFailed={this.props.titleConfirmFailed || 'Your entries did not match'}
           subtitleError={this.props.subtitleError || 'Please try again'}
           colorPassword={this.props.colorPassword || undefined}
+          colorPasswordError={this.props.colorPasswordError || undefined}
           numbersButtonOverlayColor={this.props.numbersButtonOverlayColor || undefined}
           buttonDeleteComponent={this.props.buttonDeleteComponent || null}
           titleComponent={this.props.titleComponent || null}
@@ -175,7 +179,9 @@ class PinCodeEnter extends React.PureComponent<IProps, IState> {
           styleColorTitleError={this.props.styleColorTitleError}
           styleColorSubtitle={this.props.styleColorSubtitle}
           styleColorSubtitleError={this.props.styleColorSubtitleError}
-          styleDeleteButtonText={this.props.styleDeleteButtonText}/>
+          styleDeleteButtonText={this.props.styleDeleteButtonText}
+          styleColorButtonTitle={this.props.styleColorButtonTitle}
+          styleColorButtonTitleSelected={this.props.styleColorButtonTitleSelected}/>
       </View>
     )
   }