kylefang/react-native-vector-icons
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-vector-icons.git synced 2026-01-12 17:42:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Format code using prettier

Browse Source
This commit is contained in:
Joel Arvidsson
2017-05-07 12:25:01 +02:00
parent 3a239363d7
commit 585e56d826
13 changed files with 182 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.eslintrc
View File

@@ -5,6 +5,14 @@
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"import/no-extraneous-dependencies": [0],
"import/no-unresolved": [2, { ignore: ['^react(-native)?$'] }],
"import/extensions": [2, { "js": "never", "json": "always" }]
"import/extensions": [2, { "js": "never", "json": "always" }],
"arrow-parens": ["error", "as-needed"],
"comma-dangle": ["error", {
"arrays": "always-multiline",
"objects": "always-multiline",
"imports": "always-multiline",
"exports": "always-multiline",
"functions": "ignore",
}]
}
}

2
RNIMigration.js
View File

@@ -33,7 +33,7 @@ export default class Icon extends React.Component {
iconRef = null;
handleComponentRef = (ref) => {
handleComponentRef = ref => {
this.iconRef = ref;
};

27
generate-icon.js
View File

@@ -2,7 +2,9 @@
'use strict';
var argv = require('yargs')
.usage('Usage: $0 [options] path/to/styles.css \nFor default template please provide --componentName and --fontFamily')
.usage(
'Usage: $0 [options] path/to/styles.css \nFor default template please provide --componentName and --fontFamily'
)
.demand(1)
.default('p', '.icon-')
.describe('p', 'CSS selector prefix')
@@ -13,34 +15,29 @@ var argv = require('yargs')
.describe('o', 'Save output to file, defaults to STDOUT')
.alias('o', 'output')
.describe('g', 'Save glyphmap JSON to file')
.alias('g', 'glyphmap')
.argv;
.alias('g', 'glyphmap').argv;
var _ = require('lodash');
var fs = require('fs');
var generateIconSetFromCss = require('./lib/generate-icon-set-from-css');
var template;
if(argv.template) {
if (argv.template) {
template = fs.readFileSync(argv.template, { encoding: 'utf8' });
}
var data = _.omit(argv, '_ $0 o output p prefix t template g glyphmap'.split(' '));
var data = _.omit(
argv,
'_ $0 o output p prefix t template g glyphmap'.split(' ')
);
var content = generateIconSetFromCss(argv._, argv.prefix, template, data);
if(argv.output) {
fs.writeFileSync(
argv.output,
content
);
if (argv.output) {
fs.writeFileSync(argv.output, content);
} else {
console.log(content);
}
if (argv.glyphmap) {
fs.writeFileSync(
argv.glyphmap,
generateIconSetFromCss(argv._, argv.prefix)
);
fs.writeFileSync(argv.glyphmap, generateIconSetFromCss(argv._, argv.prefix));
}

25
generate-material-icons.js
View File

@@ -2,7 +2,9 @@
'use strict';
var argv = require('yargs')
.usage('Usage: $0 [options] path/to/codepoints \nFor default template please provide --componentName and --fontFamily')
.usage(
'Usage: $0 [options] path/to/codepoints \nFor default template please provide --componentName and --fontFamily'
)
.demand(1)
.default('t', __dirname + '/templates/bundled-icon-set.tpl')
.describe('t', 'Template in lodash format')
@@ -10,8 +12,7 @@ var argv = require('yargs')
.describe('o', 'Save output to file, defaults to STDOUT')
.alias('o', 'output')
.describe('g', 'Save glyphmap JSON to file')
.alias('g', 'glyphmap')
.argv;
.alias('g', 'glyphmap').argv;
var _ = require('lodash');
var fs = require('fs');
@@ -21,7 +22,7 @@ var extractGlyphMapFromCodepoints = function(fileName) {
var glyphMap = {};
codepoints.forEach(function(point) {
var parts = point.split(' ');
if(parts.length === 2) {
if (parts.length === 2) {
glyphMap[parts[0].replace(/_/g, '-')] = parseInt(parts[1], 16);
}
});
@@ -30,7 +31,7 @@ var extractGlyphMapFromCodepoints = function(fileName) {
};
var template;
if(argv.template) {
if (argv.template) {
template = fs.readFileSync(argv.template, { encoding: 'utf8' });
}
@@ -38,25 +39,19 @@ var data = _.omit(argv, '_ $0 o output t template g glyphmap'.split(' '));
var glyphMap = extractGlyphMapFromCodepoints(argv._[0]);
var content = JSON.stringify(glyphMap, null, ' ');
if(template) {
if (template) {
var compiled = _.template(template);
data = data || {};
data.glyphMap = content;
content = compiled(data);
}
if(argv.output) {
fs.writeFileSync(
argv.output,
content
);
if (argv.output) {
fs.writeFileSync(argv.output, content);
} else {
console.log(content);
}
if (argv.glyphmap) {
fs.writeFileSync(
argv.glyphmap,
JSON.stringify(glyphMap, null, ' ')
);
fs.writeFileSync(argv.glyphmap, JSON.stringify(glyphMap, null, ' '));
}

8
index.js
View File

@@ -1,3 +1,7 @@
export { default as createIconSet } from './lib/create-icon-set';
export { default as createIconSetFromFontello } from './lib/create-icon-set-from-fontello';
export { default as createIconSetFromIcoMoon } from './lib/create-icon-set-from-icomoon';
export {
default as createIconSetFromFontello,
} from './lib/create-icon-set-from-fontello';
export {
default as createIconSetFromIcoMoon,
} from './lib/create-icon-set-from-icomoon';

14
lib/create-icon-set-from-fontello.js
View File

@@ -1,16 +1,16 @@
import createIconSet from './create-icon-set';
export default function createIconSetFromFontello(config, fontFamilyArg, fontFile) {
export default function createIconSetFromFontello(
config,
fontFamilyArg,
fontFile
) {
const glyphMap = {};
config.glyphs.forEach((glyph) => {
config.glyphs.forEach(glyph => {
glyphMap[glyph.css] = glyph.code;
});
const fontFamily = fontFamilyArg || config.name || 'fontello';
return createIconSet(
glyphMap,
fontFamily,
fontFile || `${fontFamily}.ttf`,
);
return createIconSet(glyphMap, fontFamily, fontFile || `${fontFamily}.ttf`);
}

17
lib/create-icon-set-from-icomoon.js
View File

@@ -1,16 +1,17 @@
import createIconSet from './create-icon-set';
export default function createIconSetFromIcoMoon(config, fontFamilyArg, fontFile) {
export default function createIconSetFromIcoMoon(
config,
fontFamilyArg,
fontFile
) {
const glyphMap = {};
config.icons.forEach((icon) => {
config.icons.forEach(icon => {
glyphMap[icon.properties.name] = icon.properties.code;
});
const fontFamily = fontFamilyArg || config.preferences.fontPref.metadata.fontFamily;
const fontFamily =
fontFamilyArg || config.preferences.fontPref.metadata.fontFamily;
return createIconSet(
glyphMap,
fontFamily,
fontFile || `${fontFamily}.ttf`,
);
return createIconSet(glyphMap, fontFamily, fontFile || `${fontFamily}.ttf`);
}

59
lib/create-icon-set.js
View File

@@ -1,9 +1,5 @@
import React, {
Component,
} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
NativeModules,
Platform,
@@ -16,7 +12,8 @@ import createIconButtonComponent from './icon-button';
import createTabBarItemIOSComponent from './tab-bar-item-ios';
import createToolbarAndroidComponent from './toolbar-android';
const NativeIconAPI = (NativeModules.RNVectorIconsManager || NativeModules.RNVectorIconsModule);
const NativeIconAPI =
NativeModules.RNVectorIconsManager || NativeModules.RNVectorIconsModule;
const DEFAULT_ICON_SIZE = 12;
const DEFAULT_ICON_COLOR = 'black';
@@ -55,7 +52,7 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
}
root = null;
handleRef = (ref) => {
handleRef = ref => {
this.root = ref;
};
@@ -81,18 +78,26 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
props.style = [styleDefaults, style, styleOverrides];
props.ref = this.handleRef;
return (<Text {...props}>{glyph}{this.props.children}</Text>);
return <Text {...props}>{glyph}{this.props.children}</Text>;
}
}
const imageSourceCache = {};
function getImageSource(name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR) {
function getImageSource(
name,
size = DEFAULT_ICON_SIZE,
color = DEFAULT_ICON_COLOR
) {
if (!NativeIconAPI) {
if (Platform.OS === 'android') {
throw new Error('RNVectorIconsModule not available, did you properly integrate the module?');
throw new Error(
'RNVectorIconsModule not available, did you properly integrate the module?'
);
}
throw new Error('RNVectorIconsManager not available, did you add the library to your project and link with libRNVectorIcons.a?');
throw new Error(
'RNVectorIconsManager not available, did you add the library to your project and link with libRNVectorIcons.a?'
);
}
let glyph = glyphMap[name] || '?';
@@ -113,23 +118,35 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
resolve({ uri: cached, scale });
}
} else {
NativeIconAPI.getImageForFont(fontReference, glyph, size, processedColor, (err, image) => {
const error = (typeof err === 'string' ? new Error(err) : err);
imageSourceCache[cacheKey] = image || error || false;
if (!error && image) {
resolve({ uri: image, scale });
} else {
reject(error);
NativeIconAPI.getImageForFont(
fontReference,
glyph,
size,
processedColor,
(err, image) => {
const error = typeof err === 'string' ? new Error(err) : err;
imageSourceCache[cacheKey] = image || error || false;
if (!error && image) {
resolve({ uri: image, scale });
} else {
reject(error);
}
}
});
);
}
});
}
Icon.Button = createIconButtonComponent(Icon);
Icon.TabBarItem = createTabBarItemIOSComponent(IconNamePropType, getImageSource);
Icon.TabBarItem = createTabBarItemIOSComponent(
IconNamePropType,
getImageSource
);
Icon.TabBarItemIOS = Icon.TabBarItem;
Icon.ToolbarAndroid = createToolbarAndroidComponent(IconNamePropType, getImageSource);
Icon.ToolbarAndroid = createToolbarAndroidComponent(
IconNamePropType,
getImageSource
);
Icon.getImageSource = getImageSource;
return Icon;

14
lib/generate-icon-set-from-css.js
View File

@@ -2,13 +2,14 @@ const _ = require('lodash');
const fs = require('fs');
function extractGlyphMapFromCss(files, selectorPattern) {
const styleRulePattern = '(\\.[A-Za-z0-9_.:, \\n\\t-]+)\\{[^}]*content: ?["\\\'](?:\\\\([A-Fa-f0-9]+)|([^"\\\']+))["\\\'][^}]*\\}';
const styleRulePattern =
'(\\.[A-Za-z0-9_.:, \\n\\t-]+)\\{[^}]*content: ?["\\\'](?:\\\\([A-Fa-f0-9]+)|([^"\\\']+))["\\\'][^}]*\\}';
const allStyleRules = new RegExp(styleRulePattern, 'g');
const singleStyleRules = new RegExp(styleRulePattern);
const allSelectors = new RegExp(selectorPattern, 'g');
const singleSelector = new RegExp(selectorPattern);
const extractGlyphFromRule = (rule) => {
const extractGlyphFromRule = rule => {
const ruleParts = rule.match(singleStyleRules);
if (ruleParts[2]) {
// Hex value in CSS
@@ -21,7 +22,7 @@ function extractGlyphMapFromCss(files, selectorPattern) {
return ruleParts[3].charCodeAt();
};
const extractSelectorsFromRule = (rule) => {
const extractSelectorsFromRule = rule => {
const ruleParts = rule.match(singleStyleRules);
const selectors = ruleParts[1].match(allSelectors) || [];
return selectors.map(selector => selector.match(singleSelector)[1]);
@@ -31,7 +32,7 @@ function extractGlyphMapFromCss(files, selectorPattern) {
.map(fileName => fs.readFileSync(fileName, { encoding: 'utf8' }))
.map(contents => contents.match(allStyleRules) || [])
.reduce((acc, rules) => acc.concat(rules), [])
.map((rule) => {
.map(rule => {
const glyph = extractGlyphFromRule(rule);
const selectors = extractSelectorsFromRule(rule);
return selectors.map(selector => [selector, glyph]);
@@ -44,7 +45,10 @@ function escapeRegExp(str) {
}
function generateIconSetFromCss(cssFiles, selectorPrefix, template, data = {}) {
const glyphMap = extractGlyphMapFromCss(cssFiles, `${escapeRegExp(selectorPrefix)}([A-Za-z0-9_-]+):before`);
const glyphMap = extractGlyphMapFromCss(
cssFiles,
`${escapeRegExp(selectorPrefix)}([A-Za-z0-9_-]+):before`
);
const content = JSON.stringify(glyphMap, null, ' ');
if (template) {
return _.template(template)(Object.assign({ glyphMap: content }, data));

47
lib/icon-button.js
View File

@@ -1,19 +1,9 @@
import isString from 'lodash/isString';
import omit from 'lodash/omit';
import pick from 'lodash/pick';
import React, {
Component,
} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
Text,
TouchableHighlight,
View,
} from './react-native';
import { StyleSheet, Text, TouchableHighlight, View } from './react-native';
const styles = StyleSheet.create({
container: {
@@ -58,32 +48,41 @@ export default function createIconButtonComponent(Icon) {
render() {
const { style, iconStyle, children, ...restProps } = this.props;
const iconProps = pick(restProps, Object.keys(Text.propTypes), 'style', 'name', 'size', 'color');
const touchableProps = pick(restProps, Object.keys(TouchableHighlight.propTypes));
const iconProps = pick(
restProps,
Object.keys(Text.propTypes),
'style',
'name',
'size',
'color'
);
const touchableProps = pick(
restProps,
Object.keys(TouchableHighlight.propTypes)
);
const props = omit(
restProps,
Object.keys(iconProps),
Object.keys(touchableProps),
'iconStyle',
'borderRadius',
'backgroundColor',
'backgroundColor'
);
iconProps.style = (iconStyle ? [styles.icon, iconStyle] : styles.icon);
iconProps.style = iconStyle ? [styles.icon, iconStyle] : styles.icon;
const colorStyle = pick(this.props, 'color');
const blockStyle = pick(this.props, 'backgroundColor', 'borderRadius');
return (
<TouchableHighlight style={[styles.touchable, blockStyle]} {...touchableProps}>
<View
style={[styles.container, blockStyle, style]}
{...props}
>
<TouchableHighlight
style={[styles.touchable, blockStyle]}
{...touchableProps}
>
<View style={[styles.container, blockStyle, style]} {...props}>
<Icon {...iconProps} />
{isString(children)
? (<Text style={[styles.text, colorStyle]}>{children}</Text>)
: children
}
? <Text style={[styles.text, colorStyle]}>{children}</Text>
: children}
</View>
</TouchableHighlight>
);

32
lib/tab-bar-item-ios.js
View File

@@ -1,17 +1,13 @@
import isEqual from 'lodash/isEqual';
import pick from 'lodash/pick';
import React, {
Component,
} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TabBarIOS } from './react-native';
import {
TabBarIOS,
} from './react-native';
export default function createTabBarItemIOSComponent(IconNamePropType, getImageSource) {
export default function createTabBarItemIOSComponent(
IconNamePropType,
getImageSource
) {
return class TabBarItemIOS extends Component {
static propTypes = {
iconName: IconNamePropType.isRequired,
@@ -27,14 +23,20 @@ export default function createTabBarItemIOSComponent(IconNamePropType, getImageS
updateIconSources(props) {
if (props.iconName) {
getImageSource(props.iconName, props.iconSize, props.iconColor)
.then(icon => this.setState({ icon }));
getImageSource(
props.iconName,
props.iconSize,
props.iconColor
).then(icon => this.setState({ icon }));
}
if (props.selectedIconName || props.selectedIconColor) {
const selectedIconName = props.selectedIconName || props.iconName;
const selectedIconColor = props.selectedIconColor || props.iconColor;
getImageSource(selectedIconName, props.iconSize, selectedIconColor)
.then(selectedIcon => this.setState({ selectedIcon }));
getImageSource(
selectedIconName,
props.iconSize,
selectedIconColor
).then(selectedIcon => this.setState({ selectedIcon }));
}
}
@@ -50,7 +52,7 @@ export default function createTabBarItemIOSComponent(IconNamePropType, getImageS
}
render() {
return (<TabBarIOS.Item {...this.props} {...this.state} />);
return <TabBarIOS.Item {...this.props} {...this.state} />;
}
};
}

68
lib/toolbar-android.js
View File

@@ -1,30 +1,28 @@
import isEqual from 'lodash/isEqual';
import pick from 'lodash/pick';
import React, {
Component,
} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ToolbarAndroid } from './react-native';
import {
ToolbarAndroid,
} from './react-native';
export default function createToolbarAndroidComponent(IconNamePropType, getImageSource) {
export default function createToolbarAndroidComponent(
IconNamePropType,
getImageSource
) {
return class IconToolbarAndroid extends Component {
static propTypes = {
logoIconName: IconNamePropType,
navIconName: IconNamePropType,
overflowIconName: IconNamePropType,
actions: PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string.isRequired,
iconName: IconNamePropType,
iconSize: PropTypes.number,
iconColor: PropTypes.string,
show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
showWithText: PropTypes.bool,
})),
actions: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string.isRequired,
iconName: IconNamePropType,
iconSize: PropTypes.number,
iconColor: PropTypes.string,
show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
showWithText: PropTypes.bool,
})
),
iconSize: PropTypes.number,
iconColor: PropTypes.string,
};
@@ -37,25 +35,33 @@ export default function createToolbarAndroidComponent(IconNamePropType, getImage
const size = props.iconSize;
const color = props.iconColor || props.titleColor;
if (props.logoName) {
getImageSource(props.logoName, size, color)
.then(logo => this.setState({ logo }));
getImageSource(props.logoName, size, color).then(logo =>
this.setState({ logo })
);
}
if (props.navIconName) {
getImageSource(props.navIconName, size, color)
.then(navIcon => this.setState({ navIcon }));
getImageSource(props.navIconName, size, color).then(navIcon =>
this.setState({ navIcon })
);
}
if (props.overflowIconName) {
getImageSource(props.overflowIconName, size, color)
.then(overflowIcon => this.setState({ overflowIcon }));
getImageSource(props.overflowIconName, size, color).then(overflowIcon =>
this.setState({ overflowIcon })
);
}
Promise.all((props.actions || []).map((action) => {
if (action.iconName) {
return getImageSource(action.iconName, action.iconSize || size, action.iconColor || color)
.then(icon => ({ ...action, icon }));
}
return Promise.resolve(action);
})).then(actions => this.setState({ actions }));
Promise.all(
(props.actions || []).map(action => {
if (action.iconName) {
return getImageSource(
action.iconName,
action.iconSize || size,
action.iconColor || color
).then(icon => ({ ...action, icon }));
}
return Promise.resolve(action);
})
).then(actions => this.setState({ actions }));
}
componentWillMount() {

6
package.json
View File

@@ -19,7 +19,8 @@
"build-octicons": "node generate-icon node_modules/octicons/build/font/octicons.css --prefix=.octicon- --componentName=Octicons --fontFamily=octicons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Octicons.json > Octicons.js && cp node_modules/octicons/build/font/octicons.ttf Fonts/Octicons.ttf",
"build-octicons": "fontcustom compile node_modules/octicons/build/svg -o tmp -n Octicons -t css -h && node generate-icon tmp/Octicons.css --prefix=.icon- --componentName=Octicons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Octicons.json --fontFamily=Octicons > Octicons.js && cp tmp/Octicons.ttf Fonts && rm -rf {tmp,.fontcustom-manifest.json}",
"build-zocial": "node generate-icon bower_components/css-social-buttons/css/zocial.css --prefix=.zocial. --componentName=Zocial --fontFamily=zocial --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/Zocial.json > Zocial.js && cp bower_components/css-social-buttons/css/zocial.ttf Fonts/Zocial.ttf",
"build-simplelineicons": "node generate-icon bower_components/simple-line-icons/css/simple-line-icons.css --prefix=.icon- --componentName=SimpleLineIcons --fontFamily=simple-line-icons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/SimpleLineIcons.json > SimpleLineIcons.js && cp bower_components/simple-line-icons/fonts/Simple-Line-Icons.ttf Fonts/SimpleLineIcons.ttf"
"build-simplelineicons": "node generate-icon bower_components/simple-line-icons/css/simple-line-icons.css --prefix=.icon- --componentName=SimpleLineIcons --fontFamily=simple-line-icons --template=templates/separated-icon-set.tpl --glyphmap=glyphmaps/SimpleLineIcons.json > SimpleLineIcons.js && cp bower_components/simple-line-icons/fonts/Simple-Line-Icons.ttf Fonts/SimpleLineIcons.ttf",
"format": "./node_modules/.bin/prettier --single-quote --trailing-comma es5 --write {lib/*,index,RNIMigration,generate-icon,generate-material-icons}.js"
},
"keywords": [
"react-native",
@@ -75,6 +76,7 @@
"ionicons": "^3.0.0",
"material-design-icons": "^3.0.1",
"mdi": "1.9.33",
"octicons": "^5.0.1"
"octicons": "^5.0.1",
"prettier": "^1.3.1"
}
}