reactive-bulma 1.6.0 → 1.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.
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ProgressBarProps } from '../../../interfaces/atomProps';
3
+ declare const ProgressBar: React.FC<ProgressBarProps>;
4
+ export default ProgressBar;
@@ -1,2 +1,3 @@
1
1
  export { default as Button } from './Button';
2
2
  export { default as Column } from './Column';
3
+ export { default as ProgressBar } from './ProgressBar';
@@ -0,0 +1 @@
1
+ export declare const parseClasses: (_classes: Array<string | null>) => string;
@@ -0,0 +1 @@
1
+ export {};
@@ -1,10 +1,29 @@
1
1
  /// <reference types="react" />
2
- import { columnOffsetType, columnSizeType } from '../types/styleTypes';
3
- export interface ButtonProps {
4
- text?: string;
5
- }
2
+ import { basicColorType, columnOffsetType, columnSizeType, sizeType } from '../types/styleTypes';
6
3
  export interface ColumnProps extends React.ComponentPropsWithoutRef<'section'> {
7
4
  size?: columnSizeType;
8
5
  offset?: columnOffsetType;
9
6
  isNarrow?: boolean;
10
7
  }
8
+ export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
9
+ text?: string;
10
+ style?: React.CSSProperties;
11
+ color?: basicColorType;
12
+ isLightColor?: boolean;
13
+ isInvertedColor?: boolean;
14
+ isOutlined?: boolean;
15
+ isRounded?: boolean;
16
+ isLoading?: boolean;
17
+ isDisabled?: boolean;
18
+ isStatic?: boolean;
19
+ size?: sizeType;
20
+ onClick?: () => void;
21
+ }
22
+ export interface ProgressBarProps extends React.ComponentPropsWithoutRef<'progress'> {
23
+ value?: number;
24
+ max?: number;
25
+ style?: React.CSSProperties;
26
+ color?: basicColorType;
27
+ size?: sizeType;
28
+ isLoading?: boolean;
29
+ }
@@ -0,0 +1 @@
1
+ export type buttonType = 'submit' | 'reset' | 'button';
@@ -1,2 +1,4 @@
1
1
  export type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
2
2
  export type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
3
+ export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
4
+ export type sizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
package/dist/esm/index.js CHANGED
@@ -2838,14 +2838,38 @@ function requireReact_development () {
2838
2838
 
2839
2839
  var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
2840
2840
 
2841
- const Button = ({ text = '' }) => (React.createElement("button", { "data-testid": 'test-button', className: 'button' }, text));
2841
+ const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
2842
+
2843
+ const Button = ({ text = null, type = 'button', style = null, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isDisabled = false, isStatic = false, size = null, onClick = null }) => {
2844
+ const buttonClasses = parseClasses([
2845
+ 'button',
2846
+ color,
2847
+ isLightColor ? 'is-light' : null,
2848
+ isInvertedColor ? 'is-inverted' : null,
2849
+ isOutlined ? 'is-outlined' : null,
2850
+ isRounded ? 'is-rounded' : null,
2851
+ isLoading ? 'is-loading' : null,
2852
+ isStatic ? 'is-static' : null,
2853
+ size
2854
+ ]);
2855
+ return (React.createElement("button", { "data-testid": 'test-button', type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
2856
+ };
2842
2857
 
2843
2858
  const Column = ({ size = null, offset = null, isNarrow = false, children = null }) => {
2844
- const classes = ['column', size, offset, isNarrow ? 'is-narrow' : null]
2845
- .filter(_class => _class)
2846
- .join(' ');
2859
+ const classes = parseClasses([
2860
+ 'column',
2861
+ size,
2862
+ offset,
2863
+ isNarrow ? 'is-narrow' : null
2864
+ ]);
2847
2865
  return (React.createElement("section", { "data-testid": 'test-column', className: classes }, children));
2848
2866
  };
2849
2867
 
2850
- export { Button, Column };
2868
+ const ProgressBar = ({ value = 0, max = 100, style = null, color = 'is-primary', size = null, isLoading = false }) => {
2869
+ const progressClasses = parseClasses(['progress', color, size]);
2870
+ const fixedValue = value > max || value < 0 ? 0 : value;
2871
+ return (React.createElement("progress", { "data-testid": 'test-progress-bar', className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
2872
+ };
2873
+
2874
+ export { Button, Column, ProgressBar };
2851
2875
  //# sourceMappingURL=index.js.map