Web: Components: backdrop: added the ability to pass an array to className

web/ASC.Web.Components/src/components/backdrop/README.md

@@ -14,10 +14,10 @@ import { Backdrop } from "asc-web-components";
 
 ### Properties
 
-| Props       |      Type      | Required | Values | Default | Description       |
-| ----------- | :------------: | :------: | :----: | :-----: | ----------------- |
-| `className` |    `string`    |    -     |   -    |    -    | Accepts class     |
-| `id`        |    `string`    |    -     |   -    |    -    | Accepts id        |
-| `style`     | `obj`, `array` |    -     |   -    |    -    | Accepts css style |
-| `visible`   |     `bool`     |    -     |   -    | `false` | Display or not    |
-| `zIndex`    |    `number`    |    -     |   -    |  `100`  | CSS z-index       |
+| Props       |      Type       | Required | Values | Default | Description       |
+| ----------- | :-------------: | :------: | :----: | :-----: | ----------------- |
+| `className` | `string, array` |    -     |   -    |    -    | Accepts class     |
+| `id`        |    `string`     |    -     |   -    |    -    | Accepts id        |
+| `style`     | `obj`, `array`  |    -     |   -    |    -    | Accepts css style |
+| `visible`   |     `bool`      |    -     |   -    | `false` | Display or not    |
+| `zIndex`    |    `number`     |    -     |   -    |  `100`  | CSS z-index       |

web/ASC.Web.Components/src/components/backdrop/backdrop.test.js

@@ -25,12 +25,19 @@ describe("<Backdrop />", () => {
     expect(wrapper.prop("id")).toEqual("testId");
   });
 
-  it("accepts className", () => {
+  it("accepts className string", () => {
     const wrapper = mount(<Backdrop {...baseProps} className="test" />);
 
     expect(wrapper.prop("className")).toEqual("test");
   });
 
+  it("accepts className array", () => {
+    const testArr = ["test", "backdrop-active"];
+    const wrapper = mount(<Backdrop {...baseProps} className={["test"]} />);
+
+    expect(wrapper.prop("className")).toEqual(expect.arrayContaining(testArr));
+  });
+
   it("accepts style", () => {
     const wrapper = mount(
       <Backdrop {...baseProps} style={{ color: "red" }} visible={true} />

web/ASC.Web.Components/src/components/backdrop/index.js

@@ -66,19 +66,36 @@ class Backdrop extends React.Component {
     }
   };
 
+  modifyClassName = () => {
+    const { className } = this.props;
+    let modifiedClass = "backdrop-active";
+
+    if (className) {
+      if (typeof className !== "string") {
+        if (!className.includes(modifiedClass)) {
+          modifiedClass = className.push(modifiedClass);
+        } else {
+          modifiedClass = className;
+        }
+      } else {
+        modifiedClass += ` ${className}`;
+      }
+    }
+
+    return modifiedClass;
+  };
+
   render() {
     const { needBackdrop, needBackground } = this.state;
-    const { className, isAside, visible } = this.props;
+    const { isAside, visible } = this.props;
 
-    const classNameStr = className
-      ? `backdrop-active ${className}`
-      : "backdrop-active";
+    const modifiedClassName = this.modifyClassName();
 
     return visible && (needBackdrop || isAside) ? (
       <StyledBackdrop
         {...this.props}
         ref={this.backdropRef}
-        className={classNameStr}
+        className={modifiedClassName}
         needBackground={needBackground}
         visible={visible}
       />
@@ -89,7 +106,7 @@ class Backdrop extends React.Component {
 Backdrop.propTypes = {
   visible: PropTypes.bool,
   zIndex: PropTypes.number,
-  className: PropTypes.string,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   id: PropTypes.string,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   withBackground: PropTypes.bool,