diff --git a/README.md b/README.md index b89a59f..7b30624 100644 --- a/README.md +++ b/README.md @@ -31,10 +31,33 @@ react-native link react-native-orientation | lockPortrait | `RNUtils.lockPortrait()` | Locks the device's viewport to the Portrait mode. Disables landscape. | | unlockOrientations | `RNUtils.unlockOrientations()` | Unlocks any previous locking behavior applied by `lockPortrait` or `lockLandscape`. | +### Text Helpers + +| Function | Usage | Utility | +|-----------|-------|---------| +| getFontSize | `textHelpers.getFontSize(size)` | Returns a font size based on size argument | +| getLineHeight | `textHelpers.getLineHeight(size)` | Returns a line height based on size argument | +| getFontStyles | `textHelpers.getFontStyles(size)` | Returns an object with a font size and line height based on size argument | + +**Example Usage** + +``` +import TextHelpers from 'rn-utils' + +const fontSizes = {small: 8, medium: 12}; +const lineHeights = {small: 12, medium: 16}; + +const textHelpers = new TextHelpers(fontSizes, lineHeights); + +const fontStyles = { + ...textHelpers.getFontStyles('small'); +} +``` + ## Roadmap The aim for this package is to introduce an ever growing list of React Native utilities that can be used when developing real-world scalable applications. With that in mind, below is the list of items I'd like to tackle next. These could be full rewrites of utilities or extracting it from current React Native projects. -- [ ] Font Sizes / Line Heights +- [x] Font Sizes / Line Heights - [ ] Legacy Operating Systems - [ ] Themes (?) - [ ] Animations (?) diff --git a/src/index.js b/src/index.js index 33fc597..97d0f49 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ import { lockPortrait, unlockOrientations, } from './lib/orientation'; +import TextHelpers from './text'; export { // Orientation @@ -20,4 +21,7 @@ export { // Dimensions getDeviceHeight, getDeviceWidth, + + // Text + TextHelpers }; diff --git a/src/lib/text.js b/src/lib/text.js new file mode 100644 index 0000000..96430c0 --- /dev/null +++ b/src/lib/text.js @@ -0,0 +1,83 @@ + +/** + * @name TextHelpers + * @summary - Singleton class for handling any text related helpers + * @return {undefined} + */ +export default class TextHelpers { + /** + * @name constructor + * @summary - Method called on initialization of TextHelpers instance + * @param {object} fontSizes - object containing defined font sizes + * @param {object} lineHeights - object containing defined line heights + * @return {undefined} + */ + constructor(fontSizes, lineHeights) { + this._fontSizes = fontSizes; + this._lineHeights = lineHeights; + } + + /** + * @name handleError + * @summary - Generic method for throwing errors + * @param {string} message - the error message to be thrown + * @return {undefined} + */ + handleError(message) { + throw new Error(message); + } + + /** + * @name getLineHeight + * @summary - Method for returning a line height dependent on passed size argument + * @param {string} size - desired size of the font and line height + * @return {object} + */ + getLineHeight(size) { + if (typeof size !== 'string') { + this.handleError('Passed size argument must be a string'); + } + + const lineHeight = this._lineHeights[size]; + + if (!lineHeight) { + this.handleError(`Size ${size} is not a supported line height`); + } + + return lineHeight; + } + + /** + * @name getFontSize + * @summary - Method for returning a font size dependent on passed size argument + * @param {string} size - desired size of the font and line height + * @return {object} + */ + getFontSize(size) { + if (typeof size !== 'string') { + this.handleError('Passed size argument must be a string'); + } + + const fontSize = this._fontSizes[size]; + + if (!fontSize) { + this.handleError(`Size ${size} is not a supported font size`); + } + + return fontSize; + } + + /** + * @name getFontStyles + * @summary - Method for returning object containing a font size and + * line height dependent on passed size argument + * @param {string} size - desired size of the font and line height + * @return {object} + */ + getFontStyles(size) { + return { + fontSize: this.getFontSize(size), + lineHeight: this.getLineHeight(size) + } + } +}