diff --git a/docs/assets/articles/customization.md b/docs/assets/articles/customization.md index e0a9419dc..b9d9dec7b 100644 --- a/docs/assets/articles/customization.md +++ b/docs/assets/articles/customization.md @@ -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.
+Array format: *['parentType1', 'parentType2']*.
+String format: *'parentType1 parentType2'*.
+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 + }, + } +} +``` diff --git a/src/components/rkComponent.js b/src/components/rkComponent.js index f9c366c83..1f5df5a97 100644 --- a/src/components/rkComponent.js +++ b/src/components/rkComponent.js @@ -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); }