diff --git a/packages/core/core.tsx b/packages/core/core.tsx index 0ec6a0c4..af221c2b 100644 --- a/packages/core/core.tsx +++ b/packages/core/core.tsx @@ -1,5 +1,5 @@ import React, { ComponentType, StatelessComponent } from 'react'; -import { cn, NoStrictEntityMods } from '@bem-react/classname'; +import { cn } from '@bem-react/classname'; import { classnames } from '@bem-react/classnames'; export interface IClassNameProps { @@ -10,15 +10,15 @@ export type Enhance = (WrappedComponent: ComponentTyp type Dictionary = { [key: string]: T }; -export function withBemMod(blockName: string, mod: NoStrictEntityMods, enhance?: Enhance) { +export function withBemMod(blockName: string, mod: T, enhance?: Enhance) { return function WithBemMod(WrappedComponent: ComponentType) { // Use cache to prevent create new component when props are changed. let ModifiedComponent: ComponentType; return function BemMod(props: T & K) { const entity = cn(blockName); - const isMatched = (key: string) => (props as Dictionary)[key] === mod[key]; - const isStarMatched = (key: string) => mod[key] === '*' && Boolean((props as Dictionary)[key]); + const isMatched = (key: string) => (props as Dictionary)[key] === (mod as Dictionary)[key]; + const isStarMatched = (key: string) => (mod as Dictionary)[key] === '*' && Boolean((props as Dictionary)[key]); if (__DEV__) { setDisplayName(BemMod, { @@ -30,7 +30,7 @@ export function withBemMod(blockName: string, if (Object.keys(mod).every(key => isMatched(key) || isStarMatched(key))) { const modifierClassName = entity(Object.keys(mod).reduce((acc: Dictionary, key) => { - if (mod[key] !== '*') acc[key] = mod[key]; + if ((mod as Dictionary)[key] !== '*') acc[key] = (mod as Dictionary)[key]; return acc; }, {})); diff --git a/packages/core/test/withBemMod.test.tsx b/packages/core/test/withBemMod.test.tsx index fc84b168..e3c5258a 100644 --- a/packages/core/test/withBemMod.test.tsx +++ b/packages/core/test/withBemMod.test.tsx @@ -12,11 +12,7 @@ use(spies); const getClassNameFromSelector = (Component: React.ReactElement, selector: string = 'div') => mount(Component).find(selector).prop('className'); -interface IPresenterProps extends IClassNameProps { - theme?: 'normal'; - view?: 'default'; - url?: string; -} +interface IPresenterProps extends IClassNameProps {} const presenter = cn('Presenter'); @@ -25,14 +21,14 @@ const Presenter: React.FC = ({ className }) => describe('withBemMod', () => { it('should not affect CSS class with empty object', () => { - const WBCM = withBemMod(presenter(), {})(Presenter); + const WBCM = withBemMod(presenter(), {})(Presenter); expect(getClassNameFromSelector()) .eq('Presenter Additional'); }); it('should add modifier class for matched prop', () => { - const Enhanced1 = withBemMod(presenter(), { theme: 'normal' })(Presenter); - const Enhanced2 = withBemMod(presenter(), { view: 'default' })(Enhanced1); + const Enhanced1 = withBemMod<{theme?: 'normal'}>(presenter(), { theme: 'normal' })(Presenter); + const Enhanced2 = withBemMod<{view?: 'default'}>(presenter(), { view: 'default' })(Enhanced1); const Component = ; expect(getClassNameFromSelector(Component)) @@ -40,7 +36,7 @@ describe('withBemMod', () => { }); it('should not add modifier class for star matched prop', () => { - const Enhanced1 = withBemMod(presenter(), { url: '*' })(Presenter); + const Enhanced1 = withBemMod<{url?: string}>(presenter(), { url: '*' })(Presenter); const Component = ; expect(getClassNameFromSelector(Component)) @@ -48,7 +44,7 @@ describe('withBemMod', () => { }); it('should match on star matched prop', () => { - const Enhanced1 = withBemMod(presenter(), { url: '*' }, Base => props => ( + const Enhanced1 = withBemMod<{url?: string}>(presenter(), { url: '*' }, Base => props => ( ))(Presenter); const Component = ; @@ -58,14 +54,14 @@ describe('withBemMod', () => { }); it('should not add modifier class for unmatched prop', () => { - const WBCM = withBemMod(presenter(), { theme: 'normal' })(Presenter); + const WBCM = withBemMod<{theme?: 'normal'}>(presenter(), { theme: 'normal' })(Presenter); expect(getClassNameFromSelector()) .eq('Presenter Additional'); }); it('should not initialized after change props', () => { const init = spy(); - const Enhanced = withBemMod(presenter(), { theme: 'normal' }, WrapepdComponent => ( + const Enhanced = withBemMod<{theme?: 'normal'}>(presenter(), { theme: 'normal' }, WrapepdComponent => ( class WithEnhanced extends React.PureComponent { constructor(props: IPresenterProps) { super(props);