From ed534b22b8d4c87eecae4877bc5ea93d55f33bf1 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 10 Oct 2019 18:47:24 +0300
Subject: [PATCH] MetaRowPlaceholder moved to MetaRow

---
 .../MetaRowPlaceholder/MetaRowPlaceholder.js  | 30 +++++++++++
 .../{ => MetaRow}/MetaRowPlaceholder/index.js |  0
 .../MetaRowPlaceholder/styles.less            | 21 ++++++--
 .../MetaRowPlaceholder/MetaRowPlaceholder.js  | 52 -------------------
 src/common/index.js                           |  6 +--
 5 files changed, 48 insertions(+), 61 deletions(-)
 create mode 100644 src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
 rename src/common/{ => MetaRow}/MetaRowPlaceholder/index.js (100%)
 rename src/common/{ => MetaRow}/MetaRowPlaceholder/styles.less (57%)
 delete mode 100644 src/common/MetaRowPlaceholder/MetaRowPlaceholder.js

diff --git a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
new file mode 100644
index 000000000..a6d3bda30
--- /dev/null
+++ b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
@@ -0,0 +1,30 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const styles = require('./styles');
+
+const MetaRowPlaceholder = ({ className, title, maximumItemsCount }) => {
+    maximumItemsCount = maximumItemsCount !== null && isFinite(maximumItemsCount) ? maximumItemsCount : 20;
+    return (
+        <div className={classnames(className, styles['meta-row-placeholder-container'])}>
+            <div className={styles['title-container']} title={title}>{title}</div>
+            <div className={styles['meta-items-container']}>
+                {Array(maximumItemsCount).fill(null).map((_, index) => (
+                    <div key={index} className={styles['meta-item']}>
+                        <div className={styles['poster-container']} />
+                        <div className={styles['title-bar-container']} />
+                    </div>
+                ))}
+            </div>
+            <div className={styles['see-all-container']} />
+        </div>
+    );
+};
+
+MetaRowPlaceholder.propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string,
+    maximumItemsCount: PropTypes.number
+};
+
+module.exports = MetaRowPlaceholder;
diff --git a/src/common/MetaRowPlaceholder/index.js b/src/common/MetaRow/MetaRowPlaceholder/index.js
similarity index 100%
rename from src/common/MetaRowPlaceholder/index.js
rename to src/common/MetaRow/MetaRowPlaceholder/index.js
diff --git a/src/common/MetaRowPlaceholder/styles.less b/src/common/MetaRow/MetaRowPlaceholder/styles.less
similarity index 57%
rename from src/common/MetaRowPlaceholder/styles.less
rename to src/common/MetaRow/MetaRowPlaceholder/styles.less
index f060d73f6..8e563492c 100644
--- a/src/common/MetaRowPlaceholder/styles.less
+++ b/src/common/MetaRow/MetaRowPlaceholder/styles.less
@@ -7,13 +7,14 @@
 
     .title-container {
         grid-area: title-area;
-        height: 2.4rem;
+        max-height: 2.4em;
         margin-bottom: 2rem;
+        font-size: 1.5rem;
+        color: var(--color-surface);
 
-        .title-label-container {
-            width: 60%;
-            height: 100%;
-            background-color: var(--color-placeholder);
+        &:empty {
+            height: 1.2em;
+            background: linear-gradient(to right, var(--color-placeholder) 0 40%, transparent 40% 100%);
         }
     }
 
@@ -30,6 +31,16 @@
             .poster-container {
                 padding-bottom: calc(100% * var(--poster-shape-ratio));
             }
+
+            .title-bar-container {
+                height: 2.8rem;
+                background-color: var(--color-placeholder);
+            }
         }
     }
+
+    .see-all-container {
+        grid-area: see-all-area;
+        background-color: var(--color-placeholder);
+    }
 }
\ No newline at end of file
diff --git a/src/common/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/common/MetaRowPlaceholder/MetaRowPlaceholder.js
deleted file mode 100644
index ca36a5298..000000000
--- a/src/common/MetaRowPlaceholder/MetaRowPlaceholder.js
+++ /dev/null
@@ -1,52 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const styles = require('./styles');
-
-const MetaRowPlaceholder = ({ className }) => {
-    return (
-        <div className={classnames(className, styles['meta-row-placeholder-container'])}>
-            <div className={styles['title-container']}>
-                <div className={styles['title-label-container']} />
-            </div>
-            <div className={styles['meta-items-container']}>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-                <div className={styles['meta-item']}>
-                    <div className={styles['poster-container']} />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-MetaRowPlaceholder.propTypes = {
-    className: PropTypes.string
-};
-
-module.exports = MetaRowPlaceholder;
diff --git a/src/common/index.js b/src/common/index.js
index 3049744fb..e594b6b64 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -1,13 +1,12 @@
 const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorInput = require('./ColorInput');
-const Multiselect = require('./Multiselect');
 const Image = require('./Image');
 const MainNavBar = require('./MainNavBar');
 const MetaPreview = require('./MetaPreview');
 const MetaPreviewPlaceholder = require('./MetaPreviewPlaceholder');
 const MetaRow = require('./MetaRow');
-const MetaRowPlaceholder = require('./MetaRowPlaceholder');
+const Multiselect = require('./Multiselect');
 const NavBar = require('./NavBar');
 const Popup = require('./Popup');
 const ScrollEventEmitter = require('./ScrollEventEmitter');
@@ -27,13 +26,12 @@ module.exports = {
     Button,
     Checkbox,
     ColorInput,
-    Multiselect,
     Image,
     MainNavBar,
     MetaPreview,
     MetaPreviewPlaceholder,
     MetaRow,
-    MetaRowPlaceholder,
+    Multiselect,
     NavBar,
     Popup,
     ScrollEventEmitter,