reactive-bulma 1.6.0 → 1.7.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 +22 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/functions/persers.d.ts +1 -0
- package/dist/cjs/types/functions/tests/parsers.test.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +13 -2
- package/dist/cjs/types/types/domTypes.d.ts +1 -0
- package/dist/cjs/types/types/styleTypes.d.ts +2 -0
- package/dist/esm/index.js +22 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/functions/persers.d.ts +1 -0
- package/dist/esm/types/functions/tests/parsers.test.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +13 -2
- package/dist/esm/types/types/domTypes.d.ts +1 -0
- package/dist/esm/types/types/styleTypes.d.ts +2 -0
- package/dist/index.d.ts +14 -1
- package/package.json +1 -1
@@ -0,0 +1 @@
|
|
1
|
+
export declare const parseClasses: (_classes: Array<string | null>) => string;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -1,7 +1,18 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { columnOffsetType, columnSizeType } from '../types/styleTypes';
|
3
|
-
export interface ButtonProps {
|
2
|
+
import { basicColorType, columnOffsetType, columnSizeType, sizeType } from '../types/styleTypes';
|
3
|
+
export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
|
4
4
|
text?: string;
|
5
|
+
style?: React.CSSProperties;
|
6
|
+
color?: basicColorType;
|
7
|
+
isLightColor?: boolean;
|
8
|
+
isInvertedColor?: boolean;
|
9
|
+
isOutlined?: boolean;
|
10
|
+
isRounded?: boolean;
|
11
|
+
isLoading?: boolean;
|
12
|
+
isDisabled?: boolean;
|
13
|
+
isStatic?: boolean;
|
14
|
+
size?: sizeType;
|
15
|
+
onClick?: () => void;
|
5
16
|
}
|
6
17
|
export interface ColumnProps extends React.ComponentPropsWithoutRef<'section'> {
|
7
18
|
size?: columnSizeType;
|
@@ -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,12 +2838,30 @@ function requireReact_development () {
|
|
2838
2838
|
|
2839
2839
|
var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
|
2840
2840
|
|
2841
|
-
const
|
2841
|
+
const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
|
2842
|
+
|
2843
|
+
const Button = ({ text = null, type = 'button', style = null, color = 'is-white', 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 = [
|
2845
|
-
|
2846
|
-
|
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
|
|