✅ Get pagination configs from theme

lorisleiva · Jun 11, 2019 · 5c3dcef · 5c3dcef
1 parent f4f6a16
commit 5c3dcef
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 32 deletions.
diff --git a/pagination/index.js b/pagination/index.js
@@ -38,35 +38,34 @@ const defaultConfig = (color) => ({
     },
 })
 
-module.exports = function (config = {}) {
-    return function ({ addComponents }) {
-        config = Object.assign({}, defaultConfig(config.color || '#2779BD'), config)
-        config = Object.keys(config).reduce((acc, key) => {
-            if (key === 'color') return acc
-            acc[key] = typeof config[key] === 'string' 
-                ? { [`@apply ${config[key]}`]: {} }
-                : config[key]
-            return acc
-        }, {});
+module.exports = function ({ addComponents, theme }) {
+    let config = theme('pagination', {})
+    config = Object.assign({}, defaultConfig(config.color || '#2779BD'), config)
+    config = Object.keys(config).reduce((acc, key) => {
+        if (key === 'color') return acc
+        acc[key] = typeof config[key] === 'string' 
+            ? { [`@apply ${config[key]}`]: {} }
+            : config[key]
+        return acc
+    }, {});
 
-        addComponents({
-            '.pagination': config.wrapper,
-            '.pagination .page-item': config.item,
-            '.pagination .page-item:hover': config.itemHover,
-            '.pagination .page-item .page-link': config.link,
-            '.pagination .page-item .page-link:hover': config.linkHover,
-            '.pagination .page-item:first-child .page-link': config.linkFirst,
-            '.pagination .page-item:first-child .page-link:hover': config.linkFirstHover,
-            '.pagination .page-item:nth-child(2) .page-link': config.linkSecond,
-            '.pagination .page-item:nth-child(2) .page-link:hover': config.linkSecondHover,
-            '.pagination .page-item:nth-last-child(2) .page-link': config.linkBeforeLast,
-            '.pagination .page-item:nth-last-child(2) .page-link:hover': config.linkBeforeLastHover,
-            '.pagination .page-item:last-child .page-link': config.linkLast,
-            '.pagination .page-item:last-child .page-link:hover': config.linkLastHover,
-            '.pagination .page-item.active .page-link': config.linkActive,
-            '.pagination .page-item.active .page-link:hover': config.linkActiveHover,
-            '.pagination .page-item.disabled .page-link': config.linkDisabled,
-            '.pagination .page-item.disabled .page-link:hover': config.linkDisabledHover,
-        })
-    }
+    addComponents({
+        '.pagination': config.wrapper,
+        '.pagination .page-item': config.item,
+        '.pagination .page-item:hover': config.itemHover,
+        '.pagination .page-item .page-link': config.link,
+        '.pagination .page-item .page-link:hover': config.linkHover,
+        '.pagination .page-item:first-child .page-link': config.linkFirst,
+        '.pagination .page-item:first-child .page-link:hover': config.linkFirstHover,
+        '.pagination .page-item:nth-child(2) .page-link': config.linkSecond,
+        '.pagination .page-item:nth-child(2) .page-link:hover': config.linkSecondHover,
+        '.pagination .page-item:nth-last-child(2) .page-link': config.linkBeforeLast,
+        '.pagination .page-item:nth-last-child(2) .page-link:hover': config.linkBeforeLastHover,
+        '.pagination .page-item:last-child .page-link': config.linkLast,
+        '.pagination .page-item:last-child .page-link:hover': config.linkLastHover,
+        '.pagination .page-item.active .page-link': config.linkActive,
+        '.pagination .page-item.active .page-link:hover': config.linkActiveHover,
+        '.pagination .page-item.disabled .page-link': config.linkDisabled,
+        '.pagination .page-item.disabled .page-link:hover': config.linkDisabledHover,
+    })
 }
diff --git a/test/pagination.js b/test/pagination.js
@@ -1,8 +1,9 @@
 import test from 'ava'
-import pagination from '../pagination'
+import paginationPlugin from '../pagination'
 import { simulate } from './util'
 
-let simulatePagination = config => simulate(pagination(config)).components
+let simulatePagination = (pagination = {}) => 
+    simulate(paginationPlugin, { theme: { pagination } }).components
 
 test('it provides a default style when no configuration is given', t => {
     const newComponents = simulatePagination()