intialPage prop

Examples fixes

Author: thecodejack

src/components/PageView.svelte

@@ -10,6 +10,13 @@
   export let ariaLabel = "";
   export let page = 0;
 
+  let defaults = {
+    pageClassName,
+    pageLinkClassName,
+    activeClassName,
+    activeLinkClassName
+  };
+
   $: ariaLabel =
     ariaLabel ||
     "Page " + page + (extraAriaContext ? " " + extraAriaContext : "");
@@ -34,6 +41,13 @@
       pageLinkClassName = activeLinkClassName;
     }
   }
+
+  $: if (!selected) {
+    pageLinkClassName = defaults.pageLinkClassName;
+    pageClassName = defaults.pageClassName;
+    activeClassName = defaults.activeClassName;
+    activeLinkClassName = defaults.activeLinkClassName;
+  }
 </script>
 
 <style>

src/components/Pagination.svelte

@@ -9,7 +9,6 @@
   export let nextLabel = "Next";
   export let breakLabel = "...";
   export let hrefBuilder;
-  export let onPageChange;
   export let initialPage;
   export let forcePage;
   export let disableInitialCallback = false;
@@ -27,6 +26,7 @@
   export let breakLinkClassName;
   export let extraAriaContext;
   export let ariaLabelBuilder;
+  export let initialPageIndex = 1;
 
   const dispatch = createEventDispatcher();
 
@@ -37,7 +37,7 @@
   } else if (forcePage) {
     initialSelected = forcePage;
   } else {
-    initialSelected = 0;
+    initialSelected = 1;
   }
 
   let state = {
@@ -62,7 +62,6 @@
   }
 
   function handlePageSelected(selected, event) {
-    debugger;
     event.preventDefault ? event.preventDefault() : (event.returnValue = false);
     if (state.selected === selected) return;
 
@@ -104,7 +103,7 @@
     if (
       hrefBuilder &&
       pageIndex !== state.selected &&
-      pageIndex >= 0 &&
+      pageIndex >= initialPageIndex &&
       pageIndex < pageCount
     ) {
       return hrefBuilder(pageIndex + 1);
@@ -150,20 +149,22 @@
   let nextAriaDisabled = "";
 
   $: previousClasses =
-    previousClassName + (state.selected === 0 ? ` ${disabledClassName}` : "");
+    previousClassName +
+    (state.selected === initialPageIndex ? ` ${disabledClassName}` : "");
   $: nextClasses =
     nextClassName +
     (state.selected === pageCount - 1 ? ` ${disabledClassName}` : "");
 
-  $: previousAriaDisabled = state.selected === 0 ? "true" : "false";
+  $: previousAriaDisabled =
+    state.selected === initialPageIndex ? "true" : "false";
   $: nextAriaDisabled = state.selected === pageCount - 1 ? "true" : "false";
 
   $: {
     const items = [];
     const { selected } = state;
 
     if (pageCount <= pageRangeDisplayed) {
-      for (let index = 0; index < pageCount; index++) {
+      for (let index = initialPageIndex; index < pageCount; index++) {
         items.push({
           itemIndex: index,
           type: "PageView"
@@ -189,8 +190,8 @@
       let page;
       let breakView;
 
-      for (index = 0; index < pageCount; index++) {
-        page = index + 1;
+      for (index = initialPageIndex; index < pageCount; index++) {
+        page = index;
 
         // If the page index is lower than the margin defined,
         // the page has to be displayed on the left side of
@@ -282,7 +283,6 @@
 
   {#each state.items as { itemIndex, type }, i}
     {#if type === 'PageView'}
-      {@debug itemIndex}
       <svelte:component
         this={PageView}
         key={itemIndex}
@@ -295,7 +295,7 @@
         {extraAriaContext}
         href={hrefBuilderMain(itemIndex)}
         ariaLabel={ariaLabelBuilderMain(itemIndex)}
-        page={itemIndex + 1} />
+        page={itemIndex} />
     {:else}
       <svelte:component
         this={BreakView}

stories/1-basic.stories.js

@@ -11,7 +11,7 @@ export default {
   },
 };
 
-export const BasicDefaultPagination = () => ({
+export const BasicDefaultRawPagination = () => ({
   Component: BasicDefaultView,
   props: {},
 });

stories/2-basic.styles.stories.js

@@ -0,0 +1,17 @@
+import { action } from "@storybook/addon-actions";
+
+import BasicDefaultView from "./views/BasicDefaultStyledView.svelte";
+
+import intro from "./../README.md";
+
+export default {
+  title: "Examples",
+  parameters: {
+    notes: { Introduction: intro },
+  },
+};
+
+export const BasicDefaultStylesPagination = () => ({
+  Component: BasicDefaultView,
+  props: {},
+});

stories/3-fullexample.styles.stories.js

@@ -0,0 +1,17 @@
+import { action } from "@storybook/addon-actions";
+
+import PaginationView from "./views/FullPaginationExample.svelte";
+
+import intro from "./../README.md";
+
+export default {
+  title: "Examples",
+  parameters: {
+    notes: { Introduction: intro },
+  },
+};
+
+export const FullExamplePagination = () => ({
+  Component: PaginationView,
+  props: {},
+});

stories/views/BasicDefaultStyledView.svelte

@@ -0,0 +1,42 @@
+<script>
+  import Pagination from "./../../src";
+
+  let checkedValue = true;
+
+  function handleChange(e) {
+    const { checked } = e.detail;
+    checkedValue = checked;
+  }
+</script>
+
+<style>
+  /*
+    You can add following styles in a global stylesheets
+  */
+  :global(ul.pagination) {
+    background: aliceblue;
+    padding: 10px;
+  }
+
+  :global(ul.pagination li) {
+    padding: 5px;
+  }
+
+  :global(ul.pagination li.active) {
+    border: 1px solid;
+  }
+</style>
+
+<h1>Simple usage</h1>
+<Pagination
+  previousLabel={'previous'}
+  nextLabel={'next'}
+  breakLabel={'...'}
+  breakClassName={'break-me'}
+  pageCount={100}
+  marginPagesDisplayed={2}
+  pageRangeDisplayed={5}
+  onPageChange={handleChange}
+  containerClassName={'pagination'}
+  subContainerClassName={'pages'}
+  activeClassName={'active'} />

stories/views/BasicDefaultView.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Switch from "./../../src";
+  import Pagination from "./../../src";
 
   let checkedValue = true;
 
@@ -10,16 +10,9 @@
 </script>
 
 <h1>Simple usage</h1>
-<Switch
-  previousLabel={'previous'}
-  nextLabel={'next'}
-  breakLabel={'...'}
-  breakClassName={'break-me'}
+<Pagination
   pageCount={100}
   marginPagesDisplayed={2}
   pageRangeDisplayed={5}
-  onPageChange={handleChange}
-  containerClassName={'pagination'}
-  subContainerClassName={'pages pagination'}
-  activeClassName={'active'} />
+  onPageChange={handleChange} />
 <br />

stories/views/FullPaginationExample.svelte

@@ -0,0 +1,54 @@
+<script>
+  import Pagination from "./../../src";
+
+  let selectedValue = 1;
+
+  function handleChange(e) {
+    debugger;
+    const { selected } = e.detail;
+    selectedValue = selected;
+  }
+</script>
+
+<style>
+  /*
+    You can add following styles in a global stylesheets
+  */
+  :global(ul.pagination) {
+    background: aliceblue;
+    padding: 10px;
+  }
+
+  :global(ul.pagination li) {
+    padding: 5px;
+  }
+
+  :global(ul.pagination li.active) {
+    border: 1px solid;
+  }
+
+  .page {
+    height: 300px;
+    width: 300px;
+    background-color: azure;
+    border: 1px;
+    text-align: center;
+  }
+</style>
+
+<h1>Full Pagination Example</h1>
+<div class="page">
+  <h3>You are in Page No. {selectedValue}</h3>
+</div>
+<Pagination
+  previousLabel={'previous'}
+  nextLabel={'next'}
+  breakLabel={'...'}
+  breakClassName={'break-me'}
+  pageCount={100}
+  marginPagesDisplayed={2}
+  pageRangeDisplayed={5}
+  on:change={handleChange}
+  containerClassName={'pagination'}
+  subContainerClassName={'pages'}
+  activeClassName={'active'} />