reactive-bulma 2.9.0 → 2.10.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -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;
@@ -19,3 +19,4 @@ export { default as DropdownItem } from './DropdownItem';
19
19
  export { default as MenuItem } from './MenuItem';
20
20
  export { default as Image } from './Image';
21
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 { TabsProps } from '../../../interfaces/moleculeProps';
3
+ declare const Tabs: React.FC<TabsProps>;
4
+ export default Tabs;
@@ -8,3 +8,4 @@ export { default as Menu } from './Menu';
8
8
  export { default as MenuList } from './MenuList';
9
9
  export { default as Pagination } from './Pagination';
10
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[];
@@ -115,4 +115,18 @@ export interface ModalProps extends ComposedElementProps {
115
115
  /** `Function` Custom function related to the modal's close button to inject custom code if needed */
116
116
  onCloseClick?: () => void;
117
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
+ }
118
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';