Created
August 29, 2016 02:31
-
-
Save rohozhnikoff/1f291fcc32ff21d4f494e7251e0f16f3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Sample React Native App | |
* https://github.com/facebook/react-native | |
* @flow | |
*/ | |
import React, {Component} from 'react'; | |
import { | |
AppRegistry, | |
StyleSheet, | |
Text, | |
View | |
} from 'react-native'; | |
import Styler from './react-native-styler'; | |
Styler.UTIL = { | |
deg: (num) => num + 'deg' | |
} | |
Styler.THEME = { | |
baseFont: 15 | |
} | |
const $ = Styler.create(({baseFont}, {deg}) => { | |
return { | |
wrapper: { | |
margin: 50, | |
transform: [{rotate: deg(10)}] | |
}, | |
'static-text': { | |
fontSize: baseFont * 1.2, | |
}, | |
'static': { | |
backgroundColor: 'gray', | |
}, | |
'dynamic': { | |
borderWidth: 2, | |
margin: 5, | |
transform: [{rotate: deg(-10)}] | |
}, | |
'dynamic-true': { | |
borderColor: 'green' | |
}, | |
'dynamic-false': { | |
borderColor: 'red' | |
}, | |
'direct': { | |
borderWidth: 2, | |
borderColor: 'black' | |
}, | |
'direct-text': { | |
fontSize: baseFont * 2.5, | |
}, | |
'fuck': { | |
backgroundColor: 'pink' | |
} | |
} | |
}); | |
class styler_dev extends Component { | |
render() { | |
console.log(123, $, $.wrapper); | |
return ( | |
<View style={$.wrapper}> | |
<View style={$('static')}> | |
<Text style={$('static-text')}>static</Text> | |
<View style={$('dynamic', { | |
'dynamic-true': true, | |
'dynamic-false': false, | |
}, 'fuck')}> | |
<Text>dynamic</Text> | |
<View style={$.direct}> | |
<Text style={$('direct-text')}>direct</Text> | |
</View> | |
</View> | |
</View> | |
</View> | |
); | |
} | |
} | |
AppRegistry.registerComponent('styler_dev', () => styler_dev); | |
// ---------------------------------------------------------------------- | |
// ---------------------------------------------------------------------- | |
// ---------------------------------------------------------------------- | |
import {Platform, StyleSheet} from 'react-native'; | |
import _, {toArray, isFunction, isString, isObject, filter} from 'lodash'; | |
// helpers | |
const _isDevMode = true; // todo: change to proccess.env or else | |
function filterThruthySelectors(selectorHash){ | |
return _(selectorHash) | |
.reduce((memo, value, key) => value ? memo.concat(key) : memo, []) | |
} | |
const RESTRICTED_RULES = [ | |
'constructor', '__proto__', 'hasOwnProperty', | |
'isPrototypeOf', 'propertyIsEnumerable', 'toString', | |
'toLocaleString', 'valueOf', 'get', 'set', | |
]; | |
const filterRestricted = (rule) => RESTRICTED_RULES.indexOf(rule) === -1; | |
const filterRestrictedDev = (rule) => { | |
const isNonRestricted = RESTRICTED_RULES.indexOf(rule) === -1; | |
!isNonRestricted && console.warn(`[STYLER]: Styles-rule "${rule}" is restricted`); | |
return isNonRestricted | |
} | |
function _getDataFromRulesHandles(rulesHandle) { | |
return isFunction(rulesHandle) ? rulesHandle(Stylers.THEME, Stylers.UTIL) : rulesHandle | |
} | |
function _wrapPlatforms(rules) { | |
rules['ios'] && rules['ios'] = Platform.select({'ios': rules['ios']}); | |
rules['android'] && rules['android'] = Platform.select({'android': rules['android']}); | |
return rules; | |
} | |
function prepareRules(rulesHandles) { | |
return StyleSheet.create.apply(StyleSheet, | |
_(rulesHandles) | |
.map(_getDataFromRulesHandles) | |
.map(_wrapPlatforms) | |
.filter(_isDevMode ? filterRestricted : filterRestrictedDev) | |
.value() | |
); | |
} | |
// STYLERS | |
function Stylers() { | |
return Stylers.create.apply(this, arguments) | |
} | |
Stylers.UTIL = {}; | |
Stylers.THEME = {}; | |
Stylers.create = function () { | |
const rules = prepareRules(toArray(arguments)); | |
const getRules = (selector) => { | |
if (isObject(selector)) { | |
return filterThruthySelectors(selector) | |
.map(_isDevMode ? getRuleDev : getRule) | |
} | |
return rules[selector]; | |
}; | |
const getRule = (key) => rules[key]; | |
const getRuleDev = (key) => { | |
if (!rules[key]) { | |
console.warn(`[STYLER]: Selector "${key}" is not find in`, rules); | |
return | |
} | |
return rules[key] | |
}; | |
// getter (perfomance tight place) | |
function styler() { | |
return StyleSheet.flatten(toArray(arguments).map(getRules)); | |
} | |
// assign all rules to getter properties, for direct 'index' access | |
Object.assign(styler, rules); | |
return styler; | |
}; | |
export default Stylers; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment