Skip to content

Commit

Permalink
docs(common): Add documentation for inherit types
Browse files Browse the repository at this point in the history
  • Loading branch information
KovalM committed Sep 6, 2017
1 parent 0de3725 commit 9637a2e
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 3 deletions.
57 changes: 57 additions & 0 deletions docs/assets/articles/customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,60 @@ Variable `theme` here is an example of the current theme. So, in case the theme
created above will also be changed and all components using this type will be updated as well.

Sometimes there is a necessity to use their values for regular components. In this case, you need to use `RkStyleSheet`.

### Inherit rkTypes

You're able to create your custom *rkType*s that based on others *rkType*s.
Fourth parameter of method *RkTheme.setType()* is array or string with parents *rkType*s.<br/>
Array format: *['parentType1', 'parentType2']*.<br/>
String format: *'parentType1 parentType2'*.<br/>
The properties of *parentType2* override the properties of *parentType1*. Third parameter of method *RkTheme.setType()* using after parents types.


Here is the example of creating *rkType* from parents types for rkText:

```
RkTheme.setType('RkText', 'inherited', {
fontSize: 40,
text: {
fontFamily: robotoLight,
lineHeight: {
ios: 41,
android: 43
},
}
}, "basic danger");
```

Where *basic* rkType:
```
basic: {
fontSize: theme.fonts.sizes.base,
color: theme.colors.text.base,
backgroundColor: 'transparent'
}
```

And *danger* rkType:
```
danger: {
color: theme.colors.danger
}
```

As result, we have *inherited* rkType:
```
inherited: {
fontSize: 40,
color: theme.colors.danger,
backgroundColor: 'transparent'
text: {
fontFamily: robotoLight,
lineHeight: {
ios: 45,
android: 43
},
}
}
```
4 changes: 1 addition & 3 deletions src/components/rkComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,10 @@ export class RkComponent extends React.Component {
* @returns {object} styles - Object with compiled styles for each internal component.
*/
defineStyles(additionalTypes) {
let rkTypes = this.props.rkType || '';
rkTypes = this._getTypesString(rkTypes);
let rkTypes = this._getTypesString(this.props.rkType || '');
additionalTypes = this._getTypesString(additionalTypes);
let types = this._getTypesString([this.defaultType, rkTypes, additionalTypes]);
types = types && types.length ? types.split(' ') : [];
console.log(types);
return this._getTypes(types);
}

Expand Down

0 comments on commit 9637a2e

Please sign in to comment.