chore(*): use bem-react-classname for attach (#931)

alfa-laboratory · Dec 30, 2019 · b44d867 · b44d867
1 parent 4887780
commit b44d867
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/src/attach/__snapshots__/attach.test.jsx.snap b/src/attach/__snapshots__/attach.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`attach should render without problems 1`] = `
   tabIndex={0}
 >
   <span
-    className="attach attach_size_m attach_theme_alfa-on-white"
+    className="attach attach_size_m"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >

diff --git a/src/attach/attach.jsx b/src/attach/attach.jsx
@@ -4,12 +4,12 @@
 
 import React from 'react';
 import Type from 'prop-types';
+import { createCn } from 'bem-react-classname';
 
 import Button from '../button/button';
 import IconAttachment from '../icon/action/attachment';
 import ProgressBar from '../progress-bar';
 
-import cn from '../cn';
 import performance from '../performance';
 
 const MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];
@@ -67,9 +67,9 @@ function isEqualArray(array1, array2) {
 /**
  * Компонент прикрепления файлов.
  */
-@cn('attach')
 @performance()
 class Attach extends React.Component {
+    cn = createCn('attach');
     static propTypes = {
         /** Содержимое поля ввода, указанное по умолчанию. Принимает массив объектов типа File или null. */
         value: Type.array, // eslint-disable-line react/forbid-prop-types
@@ -193,10 +193,10 @@ class Attach extends React.Component {
         }
     }
 
-    render(cn) {
+    render() {
         return (
             <span
-                className={ cn({
+                className={ this.cn({
                     size: this.props.size,
                     disabled: this.props.disabled,
                     hovered: this.state.hovered,
@@ -209,16 +209,16 @@ class Attach extends React.Component {
                 } }
                 data-test-id={ this.props['data-test-id'] }
             >
-                { this.renderButton(cn) }
-                { this.renderStatusText(cn) }
+                { this.renderButton() }
+                { this.renderStatusText() }
             </span>
         );
     }
 
-    renderButton(cn) {
+    renderButton() {
         const buttonProps = {
             ...this.props.buttonProps,
-            className: cn('button'),
+            className: this.cn('button'),
             disabled: this.props.disabled,
             size: this.props.size,
             icon: this.props.icon ? this.props.icon : <IconAttachment size={ this.props.size } />,
@@ -231,14 +231,14 @@ class Attach extends React.Component {
                 tag='span'
                 leftAddons={
                     <label
-                        className={ cn('label') }
+                        className={ this.cn('label') }
                         htmlFor={ this.props.id }
                     >
                         <input
                             ref={ (input) => {
                                 this.input = input;
                             } }
-                            className={ cn('control') }
+                            className={ this.cn('control') }
                             accept={ this.props.accept }
                             disabled={ this.props.disabled }
                             id={ this.props.id }
@@ -261,7 +261,7 @@ class Attach extends React.Component {
         );
     }
 
-    renderStatusText(cn) {
+    renderStatusText() {
         const files = this.props.value === undefined ? this.state.value : (this.props.value || []);
 
         if (files && files.length > 0) {
@@ -276,27 +276,27 @@ class Attach extends React.Component {
                 );
 
             return (
-                <span className={ cn('file') }>
-                    <span className={ cn('text') }>
+                <span className={ this.cn('file') }>
+                    <span className={ this.cn('text') }>
                         { content }
                     </span>
                     <button
                         type='button'
-                        className={ cn('clear') }
+                        className={ this.cn('clear') }
                         onClick={ this.handleClearClick }
                     />
                     { typeof this.props.progressBarPercent !== 'undefined' && (
                         <ProgressBar
                             percent={ this.props.progressBarPercent }
-                            className={ cn('progress-bar') }
+                            className={ this.cn('progress-bar') }
                         />
                     ) }
                 </span>
             );
         }
 
         return (
-            <span className={ cn('no-file') }>
+            <span className={ this.cn('no-file') }>
                 { this.props.noFileText }
             </span>
         );

diff --git a/src/attach/index.js b/src/attach/index.js
@@ -9,4 +9,8 @@ import './attach.css';
 import './attach_theme_alfa-on-color.css';
 import './attach_theme_alfa-on-white.css';
 
-export { default } from './attach';
+import { withTheme } from '../cn';
+
+import Component from './attach';
+
+export default withTheme(Component);