@bem-react/classname
Advanced tools
Comparing version 1.4.0 to 1.4.1
@@ -5,2 +5,21 @@ 'use strict'; | ||
/** | ||
* BEM className configure function. | ||
* | ||
* @example | ||
* ``` ts | ||
* | ||
* import { withNaming } from '@bem-react/classname'; | ||
* import { origin } from '@bem/sdk.naming.presets'; | ||
* | ||
* const cn = withNaming(origin); | ||
* | ||
* cn('block', 'elem'); // 'block__elem' | ||
* ``` | ||
* | ||
* @param preset settings for the naming convention | ||
* @see https://github.com/bem/bem-sdk/tree/master/packages/naming.presets | ||
* | ||
* @@bem-react/classname | ||
*/ | ||
function withNaming(preset) { | ||
@@ -47,2 +66,27 @@ function stringify(o) { | ||
} | ||
/** | ||
* BEM Entity className initializer with React naming preset. | ||
* | ||
* @example | ||
* ``` ts | ||
* | ||
* import { cn } from '@bem-react/classname'; | ||
* | ||
* const cat = cn('Cat'); | ||
* | ||
* cat(); // Cat | ||
* cat({ size: 'm' }); // Cat_size_m | ||
* cat('Tail'); // Cat-Tail | ||
* cat('Tail', { length: 'small' }); // Cat-Tail_length_small | ||
* | ||
* const dogPaw = cn('Dog', 'Paw'); | ||
* | ||
* dogPaw(); // Dog-Paw | ||
* dogPaw({ color: 'black', exists: true }); // Dog-Paw_color_black Dog-Paw_exists | ||
* ``` | ||
* | ||
* @see https://en.bem.info/methodology/naming-convention/#react-style | ||
* | ||
* @@bem-react/classname | ||
*/ | ||
var cn = withNaming({ | ||
@@ -49,0 +93,0 @@ e: '-', |
@@ -6,2 +6,10 @@ # Change Log | ||
## [1.4.1](https://github.com/bem/bem-react/tree/master/packages/classname/compare/@bem-react/classname@1.4.0...@bem-react/classname@1.4.1) (2018-12-28) | ||
**Note:** Version bump only for package @bem-react/classname | ||
# 1.4.0 (2018-12-21) | ||
@@ -8,0 +16,0 @@ |
@@ -0,11 +1,92 @@ | ||
/** | ||
* List of classname. | ||
* | ||
* @@bem-react/classname | ||
*/ | ||
export declare type ClassNameList = Array<string | undefined>; | ||
/** | ||
* Allowed modifiers format. | ||
* | ||
* @see https://en.bem.info/methodology/key-concepts/#modifier | ||
* | ||
* @@bem-react/classname | ||
*/ | ||
export declare type NoStrictEntityMods = Record<string, string | boolean | number | undefined>; | ||
/** | ||
* BEM Entity className initializer. | ||
* | ||
* @@bem-react/classname | ||
*/ | ||
export declare type ClassNameInitilizer = (blockName: string, elemName?: string) => ClassNameFormatter; | ||
/** | ||
* BEM Entity className formatter. | ||
* | ||
* @@bem-react/classname | ||
*/ | ||
export declare type ClassNameFormatter = (elemNameOrBlockMods?: NoStrictEntityMods | string | null, elemModsOrBlockMix?: NoStrictEntityMods | ClassNameList | null, elemMix?: ClassNameList) => string; | ||
/** | ||
* Settings for the naming convention. | ||
* @@bem-react/classname | ||
*/ | ||
export interface IPreset { | ||
/** | ||
* Global namespace. | ||
* | ||
* @example `omg-Bem-Elem_mod_val` | ||
*/ | ||
n?: string; | ||
/** | ||
* Elem's delimeter. | ||
*/ | ||
e?: string; | ||
/** | ||
* Modifier's delimeter. | ||
*/ | ||
m?: string; | ||
} | ||
/** | ||
* BEM className configure function. | ||
* | ||
* @example | ||
* ``` ts | ||
* | ||
* import { withNaming } from '@bem-react/classname'; | ||
* import { origin } from '@bem/sdk.naming.presets'; | ||
* | ||
* const cn = withNaming(origin); | ||
* | ||
* cn('block', 'elem'); // 'block__elem' | ||
* ``` | ||
* | ||
* @param preset settings for the naming convention | ||
* @see https://github.com/bem/bem-sdk/tree/master/packages/naming.presets | ||
* | ||
* @@bem-react/classname | ||
*/ | ||
export declare function withNaming(preset: IPreset): ClassNameInitilizer; | ||
/** | ||
* BEM Entity className initializer with React naming preset. | ||
* | ||
* @example | ||
* ``` ts | ||
* | ||
* import { cn } from '@bem-react/classname'; | ||
* | ||
* const cat = cn('Cat'); | ||
* | ||
* cat(); // Cat | ||
* cat({ size: 'm' }); // Cat_size_m | ||
* cat('Tail'); // Cat-Tail | ||
* cat('Tail', { length: 'small' }); // Cat-Tail_length_small | ||
* | ||
* const dogPaw = cn('Dog', 'Paw'); | ||
* | ||
* dogPaw(); // Dog-Paw | ||
* dogPaw({ color: 'black', exists: true }); // Dog-Paw_color_black Dog-Paw_exists | ||
* ``` | ||
* | ||
* @see https://en.bem.info/methodology/naming-convention/#react-style | ||
* | ||
* @@bem-react/classname | ||
*/ | ||
export declare const cn: ClassNameInitilizer; |
{ | ||
"name": "@bem-react/classname", | ||
"version": "1.4.0", | ||
"version": "1.4.1", | ||
"description": "BEM React ClassName", | ||
@@ -46,3 +46,3 @@ "repository": "https://github.com/bem/bem-react/tree/master/packages/classname", | ||
}, | ||
"gitHead": "1d6da2315d8554b71f20664b438802fed704681b" | ||
"gitHead": "c836d59cf9e8d3f9deb6305b8322426d22c95eca" | ||
} |
17228
194