Reduce size of classname specification in nodes (#714)

src/components/messenger/list/user-search-results.tsx

@@ -5,9 +5,9 @@ import { highlightFilter } from '../lib/utils';
 
 import { Avatar } from '@zero-tech/zui/components';
 
-import { bem } from '../../../lib/bem';
+import { bemClassName } from '../../../lib/bem';
 
-const c = bem('user-search-results');
+const cn = bemClassName('user-search-results');
 
 export interface Properties {
   filter: string;
@@ -24,12 +24,12 @@ export class UserSearchResults extends React.Component<Properties> {
     const { filter, results } = this.props;
 
     return (
-      <div className={c('')}>
-        <div className={c('title')}>Start a new conversation:</div>
+      <div {...cn()}>
+        <div {...cn('title')}>Start a new conversation:</div>
         {results.map((userResult) => (
-          <div key={userResult.value} className={c('item')} onClick={() => this.handleUserClick(userResult.value)}>
+          <div {...cn('item')} onClick={() => this.handleUserClick(userResult.value)} key={userResult.value}>
             <Avatar size='regular' type='circle' imageURL={userResult.image} />
-            <div className={c('label')}>{highlightFilter(userResult.label, filter)}</div>
+            <div {...cn('label')}>{highlightFilter(userResult.label, filter)}</div>
           </div>
         ))}
       </div>

src/lib/bem.ts

@@ -1,13 +1,21 @@
 export function bem(block: string) {
-  return (element, modifier = '') => {
-    let result = block;
-    if (element) {
-      result += `__${element}`;
-    }
-    if (modifier) {
-      result += ` ${result}--${modifier}`;
-    }
+  return (element, modifier = '') => fullBem(block, element, modifier);
+}
 
-    return result;
+export function bemClassName(block: string) {
+  return (element = '', modifier = '') => {
+    return { className: fullBem(block, element, modifier) };
   };
 }
+
+function fullBem(block: string, element = '', modifier = '') {
+  let result = block;
+  if (element) {
+    result += `__${element}`;
+  }
+  if (modifier) {
+    result += ` ${result}--${modifier}`;
+  }
+
+  return result;
+}