reactive-bulma 2.7.0 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +80 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/PaginationItem/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +1 -0
- package/dist/cjs/types/components/molecules/Pagination/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +14 -4
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +32 -6
- package/dist/cjs/types/types/styleTypes.d.ts +2 -1
- package/dist/esm/index.js +79 -9
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/PaginationItem/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +1 -0
- package/dist/esm/types/components/molecules/Pagination/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +14 -4
- package/dist/esm/types/interfaces/moleculeProps.d.ts +32 -6
- package/dist/esm/types/types/styleTypes.d.ts +2 -1
- package/dist/index.d.ts +49 -8
- package/package.json +10 -10
@@ -17,3 +17,4 @@ export { default as BreadcrumbItem } from './BreadcrumbItem';
|
|
17
17
|
export { default as DropdownTrigger } from './DropdownTrigger';
|
18
18
|
export { default as DropdownItem } from './DropdownItem';
|
19
19
|
export { default as MenuItem } from './MenuItem';
|
20
|
+
export { default as PaginationItem } from './PaginationItem';
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
|
3
|
-
import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
|
3
|
+
import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType, reducedSizeType } from '../types/styleTypes';
|
4
4
|
import { DropdownItemType, inputTypes } from '../types/domTypes';
|
5
5
|
export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
|
6
6
|
/** `Attribute` Reffers to the component or array of components that will be shown inside the column */
|
@@ -70,7 +70,7 @@ export interface TagProps extends ComposedElementProps, React.ComponentPropsWith
|
|
70
70
|
/** `Styling` Will add round borders to tag's shape */
|
71
71
|
isRounded?: boolean;
|
72
72
|
/** `Styling` Set tag's size */
|
73
|
-
size?:
|
73
|
+
size?: reducedSizeType;
|
74
74
|
/** `Styling` Color on tag's addon based on bulma's color tokens */
|
75
75
|
addonColor?: basicColorType;
|
76
76
|
/** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
|
@@ -112,7 +112,7 @@ export interface IconProps extends ComposedElementProps {
|
|
112
112
|
/** `Styling` Color based on bulma's text color tokens */
|
113
113
|
color?: textColorType;
|
114
114
|
/** `Styling` Set icons's size */
|
115
|
-
size?:
|
115
|
+
size?: reducedSizeType;
|
116
116
|
/** `Styling` Special usage in case you want to set as dark or light mode */
|
117
117
|
colorMode?: iconColorModeType;
|
118
118
|
/** `Styling` Animates the icon spinning 360° */
|
@@ -150,7 +150,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
|
|
150
150
|
}
|
151
151
|
export interface DeleteProps extends ElementProps, ClickeableProps {
|
152
152
|
/** `Styling` Set icons's size */
|
153
|
-
size?:
|
153
|
+
size?: reducedSizeType;
|
154
154
|
}
|
155
155
|
export interface SelectOption {
|
156
156
|
id: string | number;
|
@@ -247,3 +247,13 @@ export interface MenuItemProps extends ElementProps, ClickeableProps {
|
|
247
247
|
/** `Styling` Generates a blue background to mark the item as the active one in the `MenuList` */
|
248
248
|
isActive?: boolean;
|
249
249
|
}
|
250
|
+
export interface PaginationItemProps extends ElementProps, ClickeableProps {
|
251
|
+
/** `Attribute` `Required` Sets the number string that will be shown in the item and in its title when user hovers it */
|
252
|
+
text: string | number;
|
253
|
+
/** `Attribute` Sets the custom text before the `text` when user hovers the item */
|
254
|
+
labelText?: string;
|
255
|
+
/** `Attribute` Sets the custom text before the `text` when user hovers the item if is the current one */
|
256
|
+
currentLabelText?: string;
|
257
|
+
/** `Styling` Makes the item the selected one, changing its background to blue */
|
258
|
+
isSelected?: boolean;
|
259
|
+
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { ComposedElementProps, ElementProps } from './commonProps';
|
3
|
-
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps } from './atomProps';
|
4
|
-
import { basicColorType,
|
2
|
+
import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
|
3
|
+
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps } from './atomProps';
|
4
|
+
import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType } from '../types/styleTypes';
|
5
5
|
export interface ButtonGroupProps extends ElementProps {
|
6
6
|
/** `Atribute` `Required` Array of `Button` objects that will be shown */
|
7
7
|
buttonList: ButtonProps[];
|
@@ -38,11 +38,11 @@ export interface BreadcrumbsProps extends ComposedElementProps {
|
|
38
38
|
/** `Atribute` `Required` Array of `BreadcrumbItems` objects that will be shown */
|
39
39
|
items: BreadcrumbItemProps[];
|
40
40
|
/** `Styling` Will adjust element position on screen */
|
41
|
-
alignment?:
|
41
|
+
alignment?: elementAlignType | null;
|
42
42
|
/** `Styling` Will adjust element position on screen */
|
43
43
|
separator?: breadcrumbSeparatorType | null;
|
44
44
|
/** `Styling` Set button's size on bulma's size tokens */
|
45
|
-
size?:
|
45
|
+
size?: reducedSizeType;
|
46
46
|
}
|
47
47
|
export interface DropdownProps extends ElementProps {
|
48
48
|
/** `Atribute` `Required` Sets the name will be shown on the dropdown input */
|
@@ -62,7 +62,7 @@ export interface MessageProps extends ElementProps {
|
|
62
62
|
/** `Styling` Color based on bulma's color tokens */
|
63
63
|
color?: basicColorType;
|
64
64
|
/** `Styling` Set button's size on bulma's size tokens */
|
65
|
-
size?:
|
65
|
+
size?: reducedSizeType;
|
66
66
|
}
|
67
67
|
interface MenuSubListProps {
|
68
68
|
subListTitle: MenuItemProps;
|
@@ -83,4 +83,30 @@ export interface MenuProps extends ElementProps {
|
|
83
83
|
/** `Attribute` `Required` List of sections that can be single or second level MenuItems */
|
84
84
|
menuSections: MenuSectionProps[];
|
85
85
|
}
|
86
|
+
export interface PaginationNavigationButtonProps extends ClickeableProps {
|
87
|
+
/** `Attribute` `Required` Text that will be shown on the button */
|
88
|
+
text: string;
|
89
|
+
/** `Attribute` Will disable the button */
|
90
|
+
isDisabled?: boolean;
|
91
|
+
/** `Attribute` Custom CSS classes, applicable for specific scenarios */
|
92
|
+
cssClasses?: string;
|
93
|
+
}
|
94
|
+
export interface PaginationProps extends ComposedElementProps {
|
95
|
+
/** `Attribute` `Required` List of sections that can be single or second level MenuItems */
|
96
|
+
pages: PaginationItemProps[];
|
97
|
+
/** `Attribute` Adds a couple of ellipsis between the first and last item */
|
98
|
+
hasEllipsis?: boolean;
|
99
|
+
/** `Attribute` Number of items that will be hidden if `hasEllipsis` is `true` */
|
100
|
+
ellipsisItems?: number;
|
101
|
+
/** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
|
102
|
+
showPreviousPageButton?: PaginationNavigationButtonProps | null;
|
103
|
+
/** `Attribute` Toogle `Previous` and `Next page` buttons next to the selectable pages */
|
104
|
+
showNextPageButton?: PaginationNavigationButtonProps | null;
|
105
|
+
/** `Styling` Will add round borders to each page's shape */
|
106
|
+
isRounded?: boolean;
|
107
|
+
/** `Styling` Set button's size on bulma's size tokens */
|
108
|
+
size?: reducedSizeType;
|
109
|
+
/** `Styling` Will adjust the pages position on screen */
|
110
|
+
alignment?: elementAlignType | null;
|
111
|
+
}
|
86
112
|
export {};
|
@@ -5,7 +5,8 @@ export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' |
|
|
5
5
|
export type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
|
6
6
|
export type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
|
7
7
|
export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
|
8
|
+
export type reducedSizeType = Exclude<basicSizeType, 'is-normal'>;
|
8
9
|
export type iconColorModeType = 'light' | 'dark';
|
9
10
|
export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
|
10
|
-
export type
|
11
|
+
export type elementAlignType = 'is-centered' | 'is-right';
|
11
12
|
export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
|
package/dist/esm/index.js
CHANGED
@@ -1,5 +1,3 @@
|
|
1
|
-
import crypto from 'crypto';
|
2
|
-
|
3
1
|
function styleInject(css, ref) {
|
4
2
|
if ( ref === void 0 ) ref = {};
|
5
3
|
var insertAt = ref.insertAt;
|
@@ -2865,7 +2863,7 @@ const parseKey = (max = 5000, min = 1) => {
|
|
2865
2863
|
max = Math.floor(max);
|
2866
2864
|
min = Math.ceil(min);
|
2867
2865
|
const secureRandomNumbers = new Uint32Array(1);
|
2868
|
-
crypto.getRandomValues(secureRandomNumbers);
|
2866
|
+
window.crypto.getRandomValues(secureRandomNumbers);
|
2869
2867
|
return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
|
2870
2868
|
};
|
2871
2869
|
|
@@ -2942,7 +2940,7 @@ const Tag = ({ testId = null, containerTestId = null, cssClasses = null, contain
|
|
2942
2940
|
const tagDeleteTestId = `${tagTestId}-delete`;
|
2943
2941
|
return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
|
2944
2942
|
React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
|
2945
|
-
withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', "aria-hidden": 'true', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
|
2943
|
+
withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', title: 'delete', "aria-hidden": 'true', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
|
2946
2944
|
text,
|
2947
2945
|
withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
|
2948
2946
|
};
|
@@ -2951,8 +2949,6 @@ const Box = ({ testId = 'test-box', cssClasses = 'box', style = null, children =
|
|
2951
2949
|
|
2952
2950
|
const renderTitleSection = (section) => {
|
2953
2951
|
var _a, _b;
|
2954
|
-
if (!section)
|
2955
|
-
return null;
|
2956
2952
|
const { type, size, isSpaced, cssClasses } = section;
|
2957
2953
|
const sectionClasses = parseClasses([
|
2958
2954
|
type,
|
@@ -2964,8 +2960,8 @@ const renderTitleSection = (section) => {
|
|
2964
2960
|
return (React.createElement("p", { "data-testid": sectionTestId, className: sectionClasses, style: (_b = section === null || section === void 0 ? void 0 : section.style) !== null && _b !== void 0 ? _b : undefined }, section === null || section === void 0 ? void 0 : section.text));
|
2965
2961
|
};
|
2966
2962
|
const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
|
2967
|
-
renderTitleSection(main),
|
2968
|
-
renderTitleSection(secondary)));
|
2963
|
+
main ? renderTitleSection(main) : null,
|
2964
|
+
secondary ? renderTitleSection(secondary) : null));
|
2969
2965
|
|
2970
2966
|
var IconSizeEnum;
|
2971
2967
|
(function (IconSizeEnum) {
|
@@ -3253,6 +3249,20 @@ const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActi
|
|
3253
3249
|
return (React.createElement("a", { "data-testid": menuItemTestId, className: menuItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
|
3254
3250
|
};
|
3255
3251
|
|
3252
|
+
const PaginationItem = ({ testId = null, cssClasses = null, style = null, text, labelText = 'Page', currentLabelText = 'Go to page', isSelected = null, onClick = null }) => {
|
3253
|
+
const paginationItemClasses = parseClasses([
|
3254
|
+
'pagination-link',
|
3255
|
+
isSelected ? 'is-current' : null,
|
3256
|
+
cssClasses
|
3257
|
+
]);
|
3258
|
+
const paginationItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3259
|
+
tag: 'pagination-link',
|
3260
|
+
parsedClasses: paginationItemClasses
|
3261
|
+
});
|
3262
|
+
const parsedLabelText = isSelected ? currentLabelText : labelText;
|
3263
|
+
return (React.createElement("a", { "data-testid": paginationItemTestId, className: paginationItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-label": `${parsedLabelText} ${text}`, "aria-current": isSelected ? 'page' : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
|
3264
|
+
};
|
3265
|
+
|
3256
3266
|
const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
|
3257
3267
|
const buttonGroupClasses = parseClasses([
|
3258
3268
|
'buttons',
|
@@ -3406,5 +3416,65 @@ const Menu = ({ testId = null, cssClasses = null, style = null, menuSections })
|
|
3406
3416
|
React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
|
3407
3417
|
};
|
3408
3418
|
|
3409
|
-
|
3419
|
+
const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
|
3420
|
+
React.createElement("span", { "aria-hidden": 'true', className: 'pagination-ellipsis' }, "\u2026"))) : null;
|
3421
|
+
const renderNavigationButton = (navigationButton) => {
|
3422
|
+
var _a;
|
3423
|
+
if (!navigationButton)
|
3424
|
+
return null;
|
3425
|
+
const navigationButtonClasses = parseClasses([
|
3426
|
+
navigationButton.cssClasses,
|
3427
|
+
navigationButton.isDisabled ? 'is-disabled' : null
|
3428
|
+
]);
|
3429
|
+
return (React.createElement("a", { className: navigationButtonClasses, onClick: (_a = navigationButton.onClick) !== null && _a !== void 0 ? _a : undefined, "aria-hidden": 'true' }, navigationButton.text));
|
3430
|
+
};
|
3431
|
+
const renderPages = (pages, hasEllipsis, ellipsisItems) => {
|
3432
|
+
return pages.map((pageItem, pageIndex, { length }) => {
|
3433
|
+
const lastEllipsisItemIndex = length - ellipsisItems - 1;
|
3434
|
+
if (pageIndex === 0) {
|
3435
|
+
return (React.createElement(React.Fragment, { key: `first-pagination-item` },
|
3436
|
+
React.createElement(PaginationItem, Object.assign({}, pageItem)),
|
3437
|
+
renderEllipsis(hasEllipsis)));
|
3438
|
+
}
|
3439
|
+
if (!hasEllipsis ||
|
3440
|
+
(pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
|
3441
|
+
return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${parseKey()}` }, pageItem)));
|
3442
|
+
}
|
3443
|
+
if (pageIndex === --length) {
|
3444
|
+
return (React.createElement(React.Fragment, { key: `last-pagination-item` },
|
3445
|
+
renderEllipsis(hasEllipsis),
|
3446
|
+
React.createElement(PaginationItem, Object.assign({}, pageItem))));
|
3447
|
+
}
|
3448
|
+
});
|
3449
|
+
};
|
3450
|
+
const Pagination = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, pages, ellipsisItems = 0, showPreviousPageButton = {
|
3451
|
+
text: 'Previous',
|
3452
|
+
cssClasses: 'pagination-previous'
|
3453
|
+
}, showNextPageButton = {
|
3454
|
+
text: 'Next page',
|
3455
|
+
cssClasses: 'pagination-next'
|
3456
|
+
}, hasEllipsis = false, isRounded = false, alignment = null, size = null }) => {
|
3457
|
+
const paginationContainerClasses = parseClasses([
|
3458
|
+
'pagination',
|
3459
|
+
isRounded ? 'is-rounded' : null,
|
3460
|
+
size,
|
3461
|
+
alignment,
|
3462
|
+
cssClasses
|
3463
|
+
]);
|
3464
|
+
const paginationContainerTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3465
|
+
tag: 'pagination',
|
3466
|
+
parsedClasses: paginationContainerClasses
|
3467
|
+
});
|
3468
|
+
const paginationClasses = parseClasses([
|
3469
|
+
'pagination-list',
|
3470
|
+
containerCssClasses
|
3471
|
+
]);
|
3472
|
+
const paginationTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'pagination-list', parsedClasses: paginationClasses });
|
3473
|
+
return (React.createElement("nav", { "data-testid": paginationContainerTestId, className: paginationContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, role: 'navigation', "aria-label": 'pagination' },
|
3474
|
+
renderNavigationButton(showPreviousPageButton),
|
3475
|
+
renderNavigationButton(showNextPageButton),
|
3476
|
+
React.createElement("ul", { "data-testid": paginationTestId, className: paginationClasses, style: style !== null && style !== void 0 ? style : undefined }, renderPages(pages, hasEllipsis, ellipsisItems))));
|
3477
|
+
};
|
3478
|
+
|
3479
|
+
export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Icon, Input, Menu, MenuItem, MenuList, Message, Notification, Pagination, PaginationItem, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
|
3410
3480
|
//# sourceMappingURL=index.js.map
|