@mirumshopper/react-helpers

Helper functions for mirumshopper react- modules.

Installation

Using npm:

$ npm i --save @mirumshopper/react-helpers

Usage

// using ES6 modules
import * as helpers from '@mirumshopper/react-helpers';
// or, just importing specific named functions
import { boundIndex } from '@mirumshopper/react-helpers';

Functions

boundIndex

boundIndex(desiredIndex, length, useCircularBounds)

Enure that a desired index is within bounds.

Unless useCircularBounds is explicitly false, circular bounds will be used so a value of 5 in an array of length 5 will wrap to zero and a value of -1 in the same length 5 array will wrap to 4.

If circular bounds are not used, all negative values will equate to 0 and all too large values will equate to length - 1.

emitEvent

emitEvent(eventNames, props, ...others)

Handle emitting events.

eventNames can be either strings, comma space separated strings or arrays. If there is more than one event name passed, it will run each one separately. If there is a props.onEvent callback function, it will be triggered with the event name as the first argument and then any ...others arguments passed to this function.

If there is a props[eventName] callback function, it will be triggered with any ...others arguments passed to it.

getClassNamesForChild

getClassNamesForGroup(bemBlock, numChildren, currentChildIndex, mergeClasses)

Build a set of --modifier classes for a group type component.

--is-empty if the component has no children. --has-children if the component has children. --has-[n]-children gives the number of children. --lt-[n] and --gt-[n] for whether there are more or less than 3, 5, 6, 10, 12, 20, 24, 50, 100 children --current-[n] give the index of the current child. --current-first if the first child is current. --current-last if the last child is current.

getClassNamesForGroup

getClassNamesForGroup(bemBlock, numChildren, currentChildIndex, mergeClasses)

Build a set of --modifier classes for a group type component.

--is-empty if the component has no children. --has-children if the component has children. --has-[n]-children gives the number of children. --lt-[n] and --gt-[n] for whether there are more or less than 3, 5, 6, 10, 12, 20, 24, 50, 100 children --current-[n] give the index of the current child. --current-first if the first child is current. --current-last if the last child is current.

renameEvent

renameEvent(originalEventName, renames)

Rename event names.

By default (unless a different renames array is passed) keep all onDescendent... events as onDescendent... rename all onChild... events to onDescendent... rename all on... events to onChild...

JS Docs

Documents are available under jsdocs/index.html

License

(c) Copyright 2018 Mirum, all rights reserved.

This code is NOT licensed for use other than the commercial interests of Mirum.

Version History

• 0.0.2 - Added renameEvent
• 0.0.4 - Added jest testing
• 0.0.5 - Added isNonEmptyString and cleanClassNames
• 0.0.6 - Applied cleanClassNames to getClassNamesForChild and getClassNamesForGroup
• 0.0.7 - Added renderHeadersFromArray, renderHeadersFromProps
• 0.0.8 - Added createElementFromMixed, restructured renderHeadersFromArray to use it
• 0.0.9 - Added the boolean flag addSchemaName to renderHeadersFromArray, renderHeadersFromProps