mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Made use of after update

Browse source
This commit is contained in:
Matthew Bentley 2020-05-29 10:04:09 -07:00
commit 8f27c983a5
1 changed files with 10 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/Pagination/Pagination.svelte
View file

@ -22,19 +22,13 @@
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24'; import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
import { cx, fillArray } from '../../lib'; import { cx, fillArray } from '../../lib';
import Select, { SelectItem } from '../Select'; import Select, { SelectItem } from '../Select';
import { createEventDispatcher } from 'svelte'; import { afterUpdate, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const handlePaginationChange = (type, value) => {
if (type === 'pageSize') {
page = 1;
pageSize = value;
} else {
page = value;
}
dispatch('update', {pageSize, page}); afterUpdate(() => {
}; dispatch('update', {pageSize, page});
});
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1); $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
$: selectItems = fillArray(totalPages); $: selectItems = fillArray(totalPages);
@ -57,9 +51,6 @@
hideLabel hideLabel
noLabel noLabel
inline inline
on:blur={() => {
handlePaginationChange('pageSize', pageSize);
}}
bind:selected={pageSize}> bind:selected={pageSize}>
{#each pageSizes as size, i (size)} {#each pageSizes as size, i (size)}
<SelectItem value={size} text={size.toString()} /> <SelectItem value={size} text={size.toString()} />
@ -81,9 +72,6 @@
labelText={`Page number, of ${totalPages} pages`} labelText={`Page number, of ${totalPages} pages`}
inline inline
hideLabel hideLabel
on:blur={() => {
handlePaginationChange('page', page);
}}
bind:selected={page}> bind:selected={page}>
{#each selectItems as size, i (size)} {#each selectItems as size, i (size)}
<SelectItem value={size + 1} text={(size + 1).toString()} /> <SelectItem value={size + 1} text={(size + 1).toString()} />
@ -96,9 +84,8 @@
<button <button
type="button" type="button"
class={cx('--pagination__button', '--pagination__button--backward', backButtonDisabled && '--pagination__button--no-index')} class={cx('--pagination__button', '--pagination__button--backward', backButtonDisabled && '--pagination__button--no-index')}
on:click={() => { on:click|capture={() => {
page--; page--;
handlePaginationChange('page', page);
}} }}
aria-label={backwardText} aria-label={backwardText}
disabled={backButtonDisabled}> disabled={backButtonDisabled}>
@ -108,9 +95,8 @@
type="button" type="button"
class={cx('--pagination__button', '--pagination__button--forward', forwardButtonDisabled && '--pagination__button--no-index')} class={cx('--pagination__button', '--pagination__button--forward', forwardButtonDisabled && '--pagination__button--no-index')}
aria-label={forwardText} aria-label={forwardText}
on:click={() => { on:click|capture={() => {
page++; page++;
handlePaginationChange('page', page);
}} }}
disabled={forwardButtonDisabled}> disabled={forwardButtonDisabled}>
<CaretRight24 /> <CaretRight24 />