MetaRowPlaceholder moved to MetaRow

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;

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 {
+        &:empty {
-            width: 60%;
+            height: 1.2em;
-            height: 100%;
+            background: linear-gradient(to right, var(--color-placeholder) 0 40%, transparent 40% 100%);
-            background-color: var(--color-placeholder);
         }
     }
 
@@ -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);
+    }
 }

src/common/MetaRowPlaceholder/MetaRowPlaceholder.js

@@ -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;

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,