reactive-bulma 1.5.0 → 1.7.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +24 -5
- package/dist/cjs/index.js +27 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/{Button/Button.d.ts → atoms/Button/index.d.ts} +1 -3
- package/dist/cjs/types/components/atoms/Column/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- 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/index.d.ts +2 -1
- package/dist/cjs/types/interfaces/atomProps.d.ts +21 -0
- package/dist/cjs/types/types/domTypes.d.ts +1 -0
- package/dist/cjs/types/types/styleTypes.d.ts +4 -0
- package/dist/esm/index.js +27 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/{Button/Button.d.ts → atoms/Button/index.d.ts} +1 -3
- package/dist/esm/types/components/atoms/Column/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- 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/index.d.ts +2 -1
- package/dist/esm/types/interfaces/atomProps.d.ts +21 -0
- package/dist/esm/types/types/domTypes.d.ts +1 -0
- package/dist/esm/types/types/styleTypes.d.ts +4 -0
- package/dist/index.d.ts +29 -4
- package/package.json +4 -3
- package/dist/cjs/types/components/Button/index.d.ts +0 -1
- package/dist/cjs/types/components/index.d.ts +0 -2
- package/dist/esm/types/components/Button/index.d.ts +0 -1
- package/dist/esm/types/components/index.d.ts +0 -2
@@ -0,0 +1 @@
|
|
1
|
+
export declare const parseClasses: (_classes: Array<string | null>) => string;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -1 +1,2 @@
|
|
1
|
-
|
1
|
+
import '../node_modules/bulma/css/bulma.min.css';
|
2
|
+
export * from './components/atoms';
|
@@ -0,0 +1,21 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { basicColorType, columnOffsetType, columnSizeType, sizeType } from '../types/styleTypes';
|
3
|
+
export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
|
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;
|
16
|
+
}
|
17
|
+
export interface ColumnProps extends React.ComponentPropsWithoutRef<'section'> {
|
18
|
+
size?: columnSizeType;
|
19
|
+
offset?: columnOffsetType;
|
20
|
+
isNarrow?: boolean;
|
21
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export type buttonType = 'submit' | 'reset' | 'button';
|
@@ -0,0 +1,4 @@
|
|
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
|
+
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,7 +2838,32 @@ 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
|
+
};
|
2857
|
+
|
2858
|
+
const Column = ({ size = null, offset = null, isNarrow = false, children = null }) => {
|
2859
|
+
const classes = parseClasses([
|
2860
|
+
'column',
|
2861
|
+
size,
|
2862
|
+
offset,
|
2863
|
+
isNarrow ? 'is-narrow' : null
|
2864
|
+
]);
|
2865
|
+
return (React.createElement("section", { "data-testid": 'test-column', className: classes }, children));
|
2866
|
+
};
|
2842
2867
|
|
2843
|
-
export { Button };
|
2868
|
+
export { Button, Column };
|
2844
2869
|
//# sourceMappingURL=index.js.map
|