Skip to content

Commit

Permalink
fix: Animated components proptypes in order to work on React Native 0.62
Browse files Browse the repository at this point in the history
  • Loading branch information
gabrieldonadel committed Nov 5, 2020
1 parent 8df1556 commit 7541eaa
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 226 deletions.
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "react-native-material-textfield",
"version": "0.16.1",
"name": "rn-material-ui-textfield",
"version": "1.0.0",
"license": "BSD-3-Clause",
"author": "Alexander Nazarov <[email protected]>",
"contributors": ["Gabriel Donadel Dall'Agnol <[email protected]>","Alexander Nazarov <[email protected]>"],

"description": "Material textfield",
"keywords": [
Expand All @@ -25,7 +25,7 @@

"repository": {
"type": "git",
"url": "git://github.com/n4kz/react-native-material-textfield.git"
"url": "git://github.com/gabrieldonadel/rn-material-ui-textfield.git"
},

"dependencies": {
Expand Down
205 changes: 99 additions & 106 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,166 +1,159 @@
[npm-badge]: https://img.shields.io/npm/v/react-native-material-textfield.svg?colorB=ff6d00
[npm-url]: https://npmjs.com/package/react-native-material-textfield
[license-badge]: https://img.shields.io/npm/l/react-native-material-textfield.svg?colorB=448aff
[license-url]: https://raw.githubusercontent.com/n4kz/react-native-material-textfield/master/license.txt
[travis-badge]: https://api.travis-ci.org/n4kz/react-native-material-textfield.svg?branch=master
[travis-url]: https://travis-ci.org/n4kz/react-native-material-textfield?branch=master
[codeclimate-badge]: https://img.shields.io/codeclimate/maintainability/n4kz/react-native-material-textfield.svg
[codeclimate-url]: https://codeclimate.com/github/n4kz/react-native-material-textfield
[npm-badge]: https://img.shields.io/npm/v/rn-material-ui-textfield.svg?colorB=ff6d00
[npm-url]: https://npmjs.com/package/rn-material-ui-textfield
[license-badge]: https://img.shields.io/npm/l/rn-material-ui-textfield.svg?colorB=448aff
[license-url]: https://raw.githubusercontent.com/n4kz/rn-material-ui-textfield/master/license.txt
[travis-badge]: https://api.travis-ci.org/n4kz/rn-material-ui-textfield.svg?branch=master
[travis-url]: https://travis-ci.org/n4kz/rn-material-ui-textfield?branch=master
[codeclimate-badge]: https://img.shields.io/codeclimate/maintainability/n4kz/rn-material-ui-textfield.svg
[codeclimate-url]: https://codeclimate.com/github/n4kz/rn-material-ui-textfield
[example-url]: https://cloud.githubusercontent.com/assets/2055622/24325711/eaa4ff08-11af-11e7-8550-2504c1580979.gif
[rn-textinput]: https://facebook.github.io/react-native/docs/textinput.html#props
[md-textfield]: https://material.io/guidelines/components/text-fields.html

# react-native-material-textfield
# rn-material-ui-textfield

[![npm][npm-badge]][npm-url]
[![license][license-badge]][license-url]
[![travis][travis-badge]][travis-url]
[![codeclimate][codeclimate-badge]][codeclimate-url]
[![npm][npm-badge]][npm-url] [![license][license-badge]][license-url] [![travis][travis-badge]][travis-url] [![codeclimate][codeclimate-badge]][codeclimate-url]

Material texfield with consistent behaviour on iOS and Android

![example][example-url]

## Features

* Material design [guidelines][md-textfield] compliance
* Consistent look and feel on iOS and Android
* Animated state transitions (normal, focused and errored)
* Customizable font size, colors and animation duration
* Disabled state (with dotted underline)
* Outlined and filled fields
* Masked input support
* Multiline text input
* Character counter
* Prefix and suffix
* Accessory views
* Helper text
* RTL support
* Pure javascript implementation
- Material design [guidelines][md-textfield] compliance
- Consistent look and feel on iOS and Android
- Animated state transitions (normal, focused and errored)
- Customizable font size, colors and animation duration
- Disabled state (with dotted underline)
- Outlined and filled fields
- Masked input support
- Multiline text input
- Character counter
- Prefix and suffix
- Accessory views
- Helper text
- RTL support
- Pure javascript implementation

## Installation

```bash
npm install --save react-native-material-textfield
npm install --save rn-material-ui-textfield
```

## Usage

```javascript
import React, { Component } from 'react';
import {
TextField,
FilledTextField,
OutlinedTextField,
} from 'react-native-material-textfield';
import React, { Component } from 'react'
import { TextField, FilledTextField, OutlinedTextField } from 'rn-material-ui-textfield'

class Example extends Component {
fieldRef = React.createRef();
fieldRef = React.createRef()

onSubmit = () => {
let { current: field } = this.fieldRef;
let { current: field } = this.fieldRef

console.log(field.value());
};
console.log(field.value())
}

formatText = (text) => {
return text.replace(/[^+\d]/g, '');
};
return text.replace(/[^+\d]/g, '')
}

render() {
return (
<OutlinedTextField
label='Phone number'
keyboardType='phone-pad'
label="Phone number"
keyboardType="phone-pad"
formatText={this.formatText}
onSubmitEditing={this.onSubmit}
ref={this.fieldRef}
/>
);
)
}
}
```

## Properties

name | description | type | default
:--------------------- |:------------------------------------------- | --------:|:------------------
textColor | Text input color | String | rgba(0, 0, 0, .87)
fontSize | Text input font size | Number | 16
labelFontSize | Text field label font size | Number | 12
lineWidth | Text field underline width | Number | 0.5
activeLineWidth | Text field active underline width | Number | 2
disabledLineWidth | Text field disabled underline width | Number | 1
tintColor | Text field accent color | String | rgb(0, 145, 234)
baseColor | Text field base color | String | rgba(0, 0, 0, .38)
label | Text field label text | String | -
title | Text field helper text | String | -
prefix | Text field prefix text | String | -
suffix | Text field suffix text | String | -
error | Text field error text | String | -
errorColor | Text field color for errored state | String | rgb(213, 0, 0)
lineType | Text field line type | String | solid
disabledLineType | Text field line type in disabled state | String | dotted
animationDuration | Text field animation duration in ms | Number | 225
characterRestriction | Text field soft limit for character counter | Number | -
disabled | Text field availability | Boolean | false
editable | Text field text can be edited | Boolean | true
multiline | Text filed multiline input | Boolean | false
contentInset | Layout configuration object | Object | [{...}](#content-inset)
labelOffset | Label position adjustment | Object | [{...}](#label-offset)
inputContainerStyle | Style for input container view | Object | -
containerStyle | Style for container view | Object | -
labelTextStyle | Style for label inner Text component | Object | -
titleTextStyle | Style for title inner Text component | Object | -
affixTextStyle | Style for affix inner Text component | Object | -
formatText | Input mask callback | Function | -
renderLeftAccessory | Render left input accessory view | Function | -
renderRightAccessory | Render right input accessory view | Function | -
onChangeText | Change text callback | Function | -
onFocus | Focus callback | Function | -
onBlur | Blur callback | Function | -
| name | description | type | default |
| :-- | :-- | --: | :-- |
| textColor | Text input color | String | rgba(0, 0, 0, .87) |
| fontSize | Text input font size | Number | 16 |
| labelFontSize | Text field label font size | Number | 12 |
| lineWidth | Text field underline width | Number | 0.5 |
| activeLineWidth | Text field active underline width | Number | 2 |
| disabledLineWidth | Text field disabled underline width | Number | 1 |
| tintColor | Text field accent color | String | rgb(0, 145, 234) |
| baseColor | Text field base color | String | rgba(0, 0, 0, .38) |
| label | Text field label text | String | - |
| title | Text field helper text | String | - |
| prefix | Text field prefix text | String | - |
| suffix | Text field suffix text | String | - |
| error | Text field error text | String | - |
| errorColor | Text field color for errored state | String | rgb(213, 0, 0) |
| lineType | Text field line type | String | solid |
| disabledLineType | Text field line type in disabled state | String | dotted |
| animationDuration | Text field animation duration in ms | Number | 225 |
| characterRestriction | Text field soft limit for character counter | Number | - |
| disabled | Text field availability | Boolean | false |
| editable | Text field text can be edited | Boolean | true |
| multiline | Text filed multiline input | Boolean | false |
| contentInset | Layout configuration object | Object | [{...}](#content-inset) |
| labelOffset | Label position adjustment | Object | [{...}](#label-offset) |
| inputContainerStyle | Style for input container view | Object | - |
| containerStyle | Style for container view | Object | - |
| labelTextStyle | Style for label inner Text component | Object | - |
| titleTextStyle | Style for title inner Text component | Object | - |
| affixTextStyle | Style for affix inner Text component | Object | - |
| formatText | Input mask callback | Function | - |
| renderLeftAccessory | Render left input accessory view | Function | - |
| renderRightAccessory | Render right input accessory view | Function | - |
| onChangeText | Change text callback | Function | - |
| onFocus | Focus callback | Function | - |
| onBlur | Blur callback | Function | - |

Other [TextInput][rn-textinput] properties will also work.

### Content Inset

name | description | Normal | Filled | Outlined
:----- |:--------------------------------- | ------:| ------:| --------:
top | Inset on the top side | 16 | 8 | 0
left | Inset on the left side | 0 | 12 | 12
right | Inset on the right side | 0 | 12 | 12
label | Space between label and TextInput | 4 | 4 | 4
input | Space between line and TextInput | 8 | 8 | 16
| name | description | Normal | Filled | Outlined |
| :---- | :-------------------------------- | -----: | -----: | -------: |
| top | Inset on the top side | 16 | 8 | 0 |
| left | Inset on the left side | 0 | 12 | 12 |
| right | Inset on the right side | 0 | 12 | 12 |
| label | Space between label and TextInput | 4 | 4 | 4 |
| input | Space between line and TextInput | 8 | 8 | 16 |

### Label Offset

name | description | Normal | Filled | Outlined
:---- |:------------------------------------ | ------:| ------:| --------:
x0 | Horizontal offset for inactive state | 0 | 0 | 0
y0 | Vertical offset for inactive state | 0 | -10 | 0
x1 | Horizontal offset for active state | 0 | 0 | 0
y1 | Vertical offset for active state | 0 | -2 | -10
| name | description | Normal | Filled | Outlined |
| :--- | :----------------------------------- | -----: | -----: | -------: |
| x0 | Horizontal offset for inactive state | 0 | 0 | 0 |
| y0 | Vertical offset for inactive state | 0 | -10 | 0 |
| x1 | Horizontal offset for active state | 0 | 0 | 0 |
| y1 | Vertical offset for active state | 0 | -2 | -10 |

## Methods

name | description | returns
:---------------------- |:----------------------------- | -------:
focus() | Acquire focus | -
blur() | Release focus | -
clear() | Clear text field | -
value() | Get current value | String
isFocused() | Get current focus state | Boolean
isErrored() | Get current error state | Boolean
isRestricted() | Get current restriction state | Boolean
isDefaultVisible() | Get default value visibility | Boolean
isPlaceholderVisible() | Get placeholder visibility | Boolean
setValue() | Set current value | -
| name | description | returns |
| :--------------------- | :---------------------------- | ------: |
| focus() | Acquire focus | - |
| blur() | Release focus | - |
| clear() | Clear text field | - |
| value() | Get current value | String |
| isFocused() | Get current focus state | Boolean |
| isErrored() | Get current error state | Boolean |
| isRestricted() | Get current restriction state | Boolean |
| isDefaultVisible() | Get default value visibility | Boolean |
| isPlaceholderVisible() | Get placeholder visibility | Boolean |
| setValue() | Set current value | - |

## Example

```bash
git clone https://github.com/n4kz/react-native-material-textfield
cd react-native-material-textfield/example
git clone https://github.com/gabrieldonadel/rn-material-ui-textfield
cd rn-material-ui-textfield/example
npm install
npm run ios # or npm run android
```
Expand Down
47 changes: 20 additions & 27 deletions src/components/affix/index.js
Original file line number Diff line number Diff line change
@@ -1,67 +1,60 @@
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { Animated } from 'react-native';
import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'
import { Animated, Text } from 'react-native'

import styles from './styles';
import styles from './styles'

export default class Affix extends PureComponent {
static defaultProps = {
numberOfLines: 1,
};
}

static propTypes = {
numberOfLines: PropTypes.number,
style: Animated.Text.propTypes.style,
style: Text.propTypes.style,

color: PropTypes.string.isRequired,
fontSize: PropTypes.number.isRequired,

type: PropTypes
.oneOf(['prefix', 'suffix'])
.isRequired,
type: PropTypes.oneOf(['prefix', 'suffix']).isRequired,

labelAnimation: PropTypes
.instanceOf(Animated.Value)
.isRequired,
labelAnimation: PropTypes.instanceOf(Animated.Value).isRequired,

children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
};
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
}

render() {
let { labelAnimation, style, children, type, fontSize, color } = this.props;
let { labelAnimation, style, children, type, fontSize, color } = this.props

let containerStyle = {
height: fontSize * 1.5,
opacity: labelAnimation,
};
}

let textStyle = {
includeFontPadding: false,
textAlignVertical: 'top',

fontSize,
color,
};
}

switch (type) {
case 'prefix':
containerStyle.paddingRight = 8;
textStyle.textAlign = 'left';
break;
containerStyle.paddingRight = 8
textStyle.textAlign = 'left'
break

case 'suffix':
containerStyle.paddingLeft = 8;
textStyle.textAlign = 'right';
break;
containerStyle.paddingLeft = 8
textStyle.textAlign = 'right'
break
}

return (
<Animated.View style={[styles.container, containerStyle]}>
<Animated.Text style={[style, textStyle]}>{children}</Animated.Text>
</Animated.View>
);
)
}
}
Loading

0 comments on commit 7541eaa

Please sign in to comment.