reactive-bulma 2.8.0 → 2.10.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.
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { TabItemProps } from '../../../interfaces/atomProps';
3
+ declare const TabItem: React.FC<TabItemProps>;
4
+ export default TabItem;
@@ -17,4 +17,6 @@ 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 Image } from './Image';
20
21
  export { default as PaginationItem } from './PaginationItem';
22
+ export { default as TabItem } from './TabItem';
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ModalProps } from '../../../interfaces/moleculeProps';
3
+ declare const Modal: React.FC<ModalProps>;
4
+ export default Modal;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { TabsProps } from '../../../interfaces/moleculeProps';
3
+ declare const Tabs: React.FC<TabsProps>;
4
+ export default Tabs;
@@ -7,3 +7,5 @@ export { default as Message } from './Message';
7
7
  export { default as Menu } from './Menu';
8
8
  export { default as MenuList } from './MenuList';
9
9
  export { default as Pagination } from './Pagination';
10
+ export { default as Modal } from './Modal';
11
+ export { default as Tabs } from './Tabs';
@@ -1,3 +1,4 @@
1
+ import { GenericObjectProps } from '../interfaces/commonProps';
1
2
  import { ParseTestIdProps } from '../interfaces/functionProps';
2
3
  /**
3
4
  * @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
@@ -13,3 +14,9 @@ export declare const parseClasses: (_classes: Array<string | null | undefined>)
13
14
  */
14
15
  export declare const parseTestId: (config: ParseTestIdProps) => string;
15
16
  export declare const parseKey: (max?: number, min?: number) => string;
17
+ interface CreateObjArrayProps {
18
+ numberOfItems?: number;
19
+ externalParser?: (i: number) => GenericObjectProps;
20
+ }
21
+ export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];
22
+ export {};
@@ -257,3 +257,11 @@ export interface PaginationItemProps extends ElementProps, ClickeableProps {
257
257
  /** `Styling` Makes the item the selected one, changing its background to blue */
258
258
  isSelected?: boolean;
259
259
  }
260
+ export interface TabItemProps extends ComposedElementProps, ClickeableProps {
261
+ /** `Attribute` `Required` The text will be shown in the `TabItem` */
262
+ text: string;
263
+ /** `Attribute` Adds an `Icon` component before the text */
264
+ icon?: IconProps;
265
+ /** `Styling` Used for Tabs styling purpose only. Will mark the tab as the one selected among its group */
266
+ isActive?: boolean;
267
+ }
@@ -21,3 +21,6 @@ export interface ClickeableProps {
21
21
  /** `Function` Click function, alone does not nothing, but can be reused for other components */
22
22
  onClick?: () => void;
23
23
  }
24
+ export interface GenericObjectProps {
25
+ [key: string]: string | number | boolean;
26
+ }
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
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';
3
+ import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
4
+ import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType, tabsFormatType } 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[];
@@ -109,4 +109,24 @@ export interface PaginationProps extends ComposedElementProps {
109
109
  /** `Styling` Will adjust the pages position on screen */
110
110
  alignment?: elementAlignType | null;
111
111
  }
112
+ export interface ModalProps extends ComposedElementProps {
113
+ /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
114
+ children?: string | React.ReactElement | React.ReactElement[] | null;
115
+ /** `Function` Custom function related to the modal's close button to inject custom code if needed */
116
+ onCloseClick?: () => void;
117
+ }
118
+ export interface TabsProps extends ElementProps {
119
+ /** `Attribute` `Required` List of tabs that will be shown in order */
120
+ tabs: TabItemProps[];
121
+ /** `Styling` Will adjust the tabs position on screen */
122
+ alignment?: elementAlignType;
123
+ /** `Styling` Set tab's size on bulma's size tokens */
124
+ size?: reducedSizeType;
125
+ /** `Styling` Set tab's size on bulma's size tokens */
126
+ format?: tabsFormatType;
127
+ /** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
128
+ isRounded?: boolean;
129
+ /** `Styling` The whole container will occupy its parent container width */
130
+ isFullWidth?: boolean;
131
+ }
112
132
  export {};
@@ -10,3 +10,4 @@ export type iconColorModeType = 'light' | 'dark';
10
10
  export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
11
11
  export type elementAlignType = 'is-centered' | 'is-right';
12
12
  export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
13
+ export type tabsFormatType = 'is-boxed' | 'is-toggle';