Last active
February 20, 2019 08:16
-
-
Save rohozhnikoff/86ab846e55c49354a522d7c5d35b3092 to your computer and use it in GitHub Desktop.
довешиваем аналог classNames к итоговым стилям React Native Stylesheet + пробрасываем глобальную тему
This file contains hidden or 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
import { Styler } from '../style/react-native-styler'; | |
/* | |
если заменить StyleSheet.create({}) на Styler.create({}) | |
то все будет работать аналогично, включая перфоманс оптимизации | |
к итоговому обьекту добавляется метод .$(), работающий аналогично вебовскому classNames | |
плюс, в Styler.create можно загнать функцию, аргументом в которые отправляется глобальная тема и утилиты | |
*/ | |
const styles = Styler.create(({$colors, $fontSize}, {textShadow}) => ({ | |
'link': { | |
fontSize: $fontSize.regular, | |
color: $colors.blue, | |
}, | |
'link-disabled': { | |
color: $colors.grayBg, | |
}, | |
'link-danger': { | |
color: $colors.red, | |
...textShadow({x: 0, y: 1}, 0, 'rgba(0,0,0,.17)'), | |
}, | |
'link_prefix': { | |
fontWeight: 'bold' | |
} | |
})) | |
function Link(props) { | |
return (<Text style={styles.$('link', { | |
'link-disabled': props.disabled, | |
'link-danger': props.isCancel || props.isRemove, | |
})}> | |
{props.prefix && (<Text style={styles.link_prefix}>{props.prefix}</Text>)} | |
{props.children} | |
</Text>) | |
} |
This file contains hidden or 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
import classNames from './classNames'; | |
import { | |
StyleSheet, | |
} from 'react-native'; | |
import {UTILS, THEME} from './theme'; | |
const Styler = { | |
create: function (rules) { | |
if ( typeof rules === 'function' ) { | |
rules = rules(THEME, UTILS) | |
} | |
const preparedRules = StyleSheet.create(rules); | |
Object.defineProperty(preparedRules, '$', { | |
enumerable: false, | |
configurable: false, | |
writable: false, | |
__proto__: null, | |
value: function $ () { | |
return classNames.apply(null, arguments).map((c) => preparedRules[c]); | |
} | |
}); | |
return preparedRules | |
} | |
} | |
export default Styler; |
This file contains hidden or 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
const $colors = { | |
text: '#585f73', | |
red: '#fe8380', | |
orange: '#fec580', | |
blue: '#63aeff', | |
white: '#fff', | |
grayBg: '#f7f8f9', | |
}; | |
const $fontSize = { | |
regular: 14, | |
small: 12, | |
big: 18, | |
} | |
export const THEME = {$colors, $fontSize} | |
const textShadow = (textShadowOffset, textShadowRadius, textShadowColor) => { | |
return { | |
textShadowOffset: { | |
width: textShadowOffset.x, | |
height: textShadowOffset.y, | |
}, | |
textShadowRadius, | |
textShadowColor | |
} | |
}; | |
export const UTILS = {textShadow} |
This file contains hidden or 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
/*! | |
Copyright (c) 2016 Jed Watson. | |
Licensed under the MIT License (MIT), see | |
http://jedwatson.github.io/classnames | |
*/ | |
/* global define */ | |
/** переделанно чутка, просто убрал .join(' ') из итогового результата */ | |
(function () { | |
'use strict'; | |
var hasOwn = {}.hasOwnProperty; | |
function classNames () { | |
var classes = []; | |
for (var i = 0; i < arguments.length; i++) { | |
var arg = arguments[i]; | |
if (!arg) continue; | |
var argType = typeof arg; | |
if (argType === 'string' || argType === 'number') { | |
classes.push(arg); | |
} else if (Array.isArray(arg)) { | |
classes.push(classNames.apply(null, arg)); | |
} else if (argType === 'object') { | |
for (var key in arg) { | |
if (hasOwn.call(arg, key) && arg[key]) { | |
classes.push(key); | |
} | |
} | |
} | |
} | |
return classes; | |
} | |
if (typeof module !== 'undefined' && module.exports) { | |
module.exports = classNames; | |
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) { | |
// register as 'classnames', consistent with npm package name | |
define('classnames', [], function () { | |
return classNames; | |
}); | |
} else { | |
window.classNames = classNames; | |
} | |
}()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment