reactive-bulma 1.9.0 → 1.10.1
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 +49 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/Tag/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- package/dist/cjs/types/functions/persers.d.ts +2 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +22 -5
- package/dist/cjs/types/interfaces/functionProps.d.ts +5 -0
- package/dist/esm/index.js +48 -9
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/Tag/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- package/dist/esm/types/functions/persers.d.ts +2 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +22 -5
- package/dist/esm/types/interfaces/functionProps.d.ts +5 -0
- package/dist/index.d.ts +31 -9
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
@@ -2841,8 +2841,12 @@ function requireReact_development () {
|
|
2841
2841
|
var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
|
2842
2842
|
|
2843
2843
|
const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
|
2844
|
+
const parseTestId = (config) => `test-${config.tag}${config.parsedClasses
|
2845
|
+
.replace(`${config.tag}`, '')
|
2846
|
+
.replace(/is-/gm, '-')
|
2847
|
+
.replace(/ /gm, config.separator || '')}`;
|
2844
2848
|
|
2845
|
-
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 }) => {
|
2849
|
+
const Button = ({ text = null, type = 'button', testId = null, style = null, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isDisabled = false, isStatic = false, size = null, onClick = null }) => {
|
2846
2850
|
const buttonClasses = parseClasses([
|
2847
2851
|
'button',
|
2848
2852
|
color,
|
@@ -2854,26 +2858,63 @@ const Button = ({ text = null, type = 'button', style = null, color = 'is-primar
|
|
2854
2858
|
isStatic ? 'is-static' : null,
|
2855
2859
|
size
|
2856
2860
|
]);
|
2857
|
-
|
2861
|
+
const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
|
2862
|
+
return (React.createElement("button", { "data-testid": _testId, 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));
|
2858
2863
|
};
|
2859
2864
|
|
2860
|
-
const Column = ({ size = null, offset = null, isNarrow = false, children = null }) => {
|
2861
|
-
const
|
2865
|
+
const Column = ({ testId = null, style = null, size = null, offset = null, isNarrow = false, children = null }) => {
|
2866
|
+
const columnClasses = parseClasses([
|
2862
2867
|
'column',
|
2863
2868
|
size,
|
2864
2869
|
offset,
|
2865
2870
|
isNarrow ? 'is-narrow' : null
|
2866
2871
|
]);
|
2867
|
-
|
2872
|
+
const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
|
2873
|
+
return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style || undefined }, children));
|
2868
2874
|
};
|
2869
2875
|
|
2870
|
-
const ProgressBar = ({ value = 0, max = 100, style = null, color = 'is-primary', size = null, isLoading = false }) => {
|
2871
|
-
const progressClasses = parseClasses(['progress', color, size]);
|
2876
|
+
const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color = 'is-primary', size = null, isLoading = false }) => {
|
2872
2877
|
const fixedValue = value > max || value < 0 ? 0 : value;
|
2873
|
-
|
2878
|
+
const progressClasses = parseClasses(['progress', color, size]);
|
2879
|
+
const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
2880
|
+
tag: 'progress',
|
2881
|
+
parsedClasses: progressClasses
|
2882
|
+
});
|
2883
|
+
return (React.createElement("progress", { "data-testid": _testId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
|
2884
|
+
};
|
2885
|
+
|
2886
|
+
const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'block', style: style || undefined }, children)) : null;
|
2887
|
+
|
2888
|
+
const Tag = ({ text, testId = null, style = null, color = null, isLight = null, isRounded = null, size = null, withDelete = false, withAddon = false, addonText = null, addonColor = null, onDeleteClick = null }) => {
|
2889
|
+
const tagLabel = withAddon ? 'tags' : 'tag';
|
2890
|
+
const tagClasses = parseClasses([
|
2891
|
+
'tag',
|
2892
|
+
color,
|
2893
|
+
isLight && !withAddon ? 'is-light' : null,
|
2894
|
+
isRounded && !withAddon ? 'is-rounded' : null,
|
2895
|
+
size
|
2896
|
+
]);
|
2897
|
+
const tagsWrapperClasses = parseClasses([
|
2898
|
+
'tags',
|
2899
|
+
'has-addons',
|
2900
|
+
size ? size.replace('is-', 'are-') : null
|
2901
|
+
]);
|
2902
|
+
const addonTagClasses = parseClasses(['tag', addonColor]);
|
2903
|
+
const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
2904
|
+
tag: tagLabel,
|
2905
|
+
parsedClasses: withAddon ? tagsWrapperClasses : tagClasses,
|
2906
|
+
separator: withAddon ? '-' : ''
|
2907
|
+
});
|
2908
|
+
return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style || undefined, className: tagsWrapperClasses },
|
2909
|
+
React.createElement("span", { className: tagClasses }, text),
|
2910
|
+
withDelete ? (React.createElement("a", { "data-testid": `${_testId}-delete`, className: 'tag is-delete', onClick: onDeleteClick || undefined })) : (React.createElement("span", { className: addonTagClasses }, addonText)))) : (React.createElement("span", { "data-testid": _testId, style: style || undefined, className: tagClasses },
|
2911
|
+
text,
|
2912
|
+
withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick || undefined })) : null));
|
2874
2913
|
};
|
2875
2914
|
|
2915
|
+
exports.Block = Block;
|
2876
2916
|
exports.Button = Button;
|
2877
2917
|
exports.Column = Column;
|
2878
2918
|
exports.ProgressBar = ProgressBar;
|
2919
|
+
exports.Tag = Tag;
|
2879
2920
|
//# sourceMappingURL=index.js.map
|