reactive-bulma 2.0.0 → 2.1.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 +33 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/molecules/ButtonGroup/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +1 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +3 -15
- package/dist/cjs/types/interfaces/commonProps.d.ts +33 -0
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +10 -0
- package/dist/esm/index.js +33 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/molecules/ButtonGroup/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +3 -15
- package/dist/esm/types/interfaces/commonProps.d.ts +33 -0
- package/dist/esm/types/interfaces/moleculeProps.d.ts +10 -0
- package/dist/index.d.ts +61 -38
- package/package.json +41 -41
@@ -0,0 +1 @@
|
|
1
|
+
export { default as ButtonGroup } from './ButtonGroup';
|
@@ -1,20 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
|
+
import { BasicProps } from './commonProps';
|
2
3
|
import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
|
3
4
|
import { inputTypes } from '../types/domTypes';
|
4
|
-
interface BasicProps {
|
5
|
-
/** `Attribute` ID used to locate the element in unit test suites (like Jest) */
|
6
|
-
testId?: string;
|
7
|
-
/** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
|
8
|
-
containerTestId?: string;
|
9
|
-
/** `Attribute` Custom CSS classes, applicable for specific scenarios */
|
10
|
-
cssClasses?: string;
|
11
|
-
/** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
|
12
|
-
containerCssClasses?: string;
|
13
|
-
/** `Attribute` Custom styling applicable for specific scenarios */
|
14
|
-
style?: React.CSSProperties;
|
15
|
-
/** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
|
16
|
-
containerStyle?: React.CSSProperties;
|
17
|
-
}
|
18
5
|
export interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
|
19
6
|
/** `Attribute` Reffers to the component or array of components that will be shown inside the column */
|
20
7
|
children?: string | React.ReactElement | React.ReactElement[];
|
@@ -44,6 +31,8 @@ export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<
|
|
44
31
|
isLoading?: boolean;
|
45
32
|
/** `Styling` Similar to `isDisabled`, but will remove any color style */
|
46
33
|
isStatic?: boolean;
|
34
|
+
/** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
|
35
|
+
isSelected?: boolean;
|
47
36
|
/** `Styling` Set button's size on bulma's size tokens */
|
48
37
|
size?: basicSizeType;
|
49
38
|
/** `Function` Click function, alone does not nothing, but can be reused for other components */
|
@@ -240,4 +229,3 @@ export interface RadioButtonProps extends BasicProps {
|
|
240
229
|
/** `Function` Click function, alone does not nothing, but can be reused for other components */
|
241
230
|
onChange?: () => void;
|
242
231
|
}
|
243
|
-
export {};
|
@@ -0,0 +1,33 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export interface BasicProps {
|
3
|
+
/** `Attribute` ID used to locate the element in unit test suites (like Jest) */
|
4
|
+
testId?: string;
|
5
|
+
/** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
|
6
|
+
containerTestId?: string;
|
7
|
+
/** `Attribute` Custom CSS classes, applicable for specific scenarios */
|
8
|
+
cssClasses?: string;
|
9
|
+
/** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
|
10
|
+
containerCssClasses?: string;
|
11
|
+
/** `Attribute` Custom styling applicable for specific scenarios */
|
12
|
+
style?: React.CSSProperties;
|
13
|
+
/** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
|
14
|
+
containerStyle?: React.CSSProperties;
|
15
|
+
}
|
16
|
+
export interface ContainerProps {
|
17
|
+
/** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
|
18
|
+
containerTestId?: string;
|
19
|
+
/** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
|
20
|
+
containerCssClasses?: string;
|
21
|
+
/** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
|
22
|
+
containerStyle?: React.CSSProperties;
|
23
|
+
}
|
24
|
+
export interface ElementProps {
|
25
|
+
/** `Attribute` ID used to locate the element in unit test suites (like Jest) */
|
26
|
+
testId?: string;
|
27
|
+
/** `Attribute` Custom CSS classes, applicable for specific scenarios */
|
28
|
+
cssClasses?: string;
|
29
|
+
/** `Attribute` Custom styling applicable for specific scenarios */
|
30
|
+
style?: React.CSSProperties;
|
31
|
+
}
|
32
|
+
export interface ComponentProps extends BasicProps, ElementProps {
|
33
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { ElementProps } from './commonProps';
|
2
|
+
import { ButtonProps } from './atomProps';
|
3
|
+
export interface ButtonGroupProps extends ElementProps {
|
4
|
+
/** `Atribute` Array of button objects that will be shown */
|
5
|
+
buttonList: ButtonProps[];
|
6
|
+
/** `Styling` Will group the list of buttonList in a single line */
|
7
|
+
isAttached?: boolean;
|
8
|
+
/** `Styling` Sets group position on the container */
|
9
|
+
position?: 'left' | 'centered' | 'right';
|
10
|
+
}
|
package/dist/esm/index.js
CHANGED
@@ -2860,7 +2860,7 @@ const parseTestId = (config) => {
|
|
2860
2860
|
return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
|
2861
2861
|
};
|
2862
2862
|
|
2863
|
-
const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color =
|
2863
|
+
const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = null, isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, isSelected = false, size = null, onClick = null }) => {
|
2864
2864
|
const buttonClasses = parseClasses([
|
2865
2865
|
'button',
|
2866
2866
|
color,
|
@@ -2870,6 +2870,7 @@ const Button = ({ testId = null, cssClasses = null, style = null, type = 'button
|
|
2870
2870
|
isRounded ? 'is-rounded' : null,
|
2871
2871
|
isLoading ? 'is-loading' : null,
|
2872
2872
|
isStatic ? 'is-static' : null,
|
2873
|
+
isSelected ? 'is-selected' : null,
|
2873
2874
|
size,
|
2874
2875
|
cssClasses
|
2875
2876
|
]);
|
@@ -3170,5 +3171,35 @@ const RadioButton = ({ containerTestId = null, containerCssClasses = null, conta
|
|
3170
3171
|
return (React.createElement("section", { "data-testid": radioButtonContainerTestId, className: radioButtonContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined }, options.map((_option, i) => renderRadioButton(Object.assign(Object.assign({}, _option), { name, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }), i))));
|
3171
3172
|
};
|
3172
3173
|
|
3173
|
-
|
3174
|
+
const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
|
3175
|
+
const buttonGroupClasses = parseClasses([
|
3176
|
+
'buttons',
|
3177
|
+
isAttached ? 'has-addons' : null,
|
3178
|
+
!position || position === 'left' ? null : `is-${position}`,
|
3179
|
+
cssClasses
|
3180
|
+
]);
|
3181
|
+
const buttonGroupTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3182
|
+
tag: 'buttons',
|
3183
|
+
parsedClasses: buttonGroupClasses,
|
3184
|
+
rules: [
|
3185
|
+
{
|
3186
|
+
regExp: /has-|is-/gm,
|
3187
|
+
replacer: '-'
|
3188
|
+
},
|
3189
|
+
{
|
3190
|
+
regExp: /buttons/gm,
|
3191
|
+
replacer: ''
|
3192
|
+
}
|
3193
|
+
]
|
3194
|
+
});
|
3195
|
+
return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, i, originalButtonList) => {
|
3196
|
+
const hasSelectedButton = originalButtonList.some(({ isSelected }) => isSelected);
|
3197
|
+
const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
|
3198
|
+
!hasSelectedButton;
|
3199
|
+
const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
|
3200
|
+
return (React.createElement(Button, Object.assign({ key: `button-list-item-${i}` }, buttonConfig)));
|
3201
|
+
})));
|
3202
|
+
};
|
3203
|
+
|
3204
|
+
export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
|
3174
3205
|
//# sourceMappingURL=index.js.map
|