reactive-bulma 1.20.0 → 1.21.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/README.md +25 -20
- package/dist/cjs/index.js +161 -86
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/Checkbox/index.d.ts +3 -3
- package/dist/cjs/types/components/atoms/RadioButton/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- package/dist/cjs/types/functions/parsers.d.ts +5 -5
- package/dist/cjs/types/interfaces/atomProps.d.ts +123 -9
- package/dist/cjs/types/interfaces/functionProps.d.ts +2 -2
- package/dist/esm/index.js +160 -87
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/Checkbox/index.d.ts +3 -3
- package/dist/esm/types/components/atoms/RadioButton/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- package/dist/esm/types/functions/parsers.d.ts +5 -5
- package/dist/esm/types/interfaces/atomProps.d.ts +123 -9
- package/dist/esm/types/interfaces/functionProps.d.ts +2 -2
- package/dist/index.d.ts +129 -9
- package/package.json +25 -25
package/dist/esm/index.js
CHANGED
@@ -2833,15 +2833,15 @@ var reactExports = react.exports;
|
|
2833
2833
|
var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
|
2834
2834
|
|
2835
2835
|
/**
|
2836
|
-
* @param { Array<string | null> } _classes Required
|
2836
|
+
* @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
|
2837
2837
|
* @returns { string } A single string product of merge all classNames, separated by spaces
|
2838
2838
|
*/
|
2839
2839
|
const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
|
2840
2840
|
/**
|
2841
2841
|
* @param { ParseTestIdProps } config Configuration object
|
2842
|
-
* @param { string } config.tag Required
|
2843
|
-
* @param { string } config.parsedClasses Required
|
2844
|
-
* @param { {
|
2842
|
+
* @param { string } config.tag `Required`. Component tag used between to build the final testId string.
|
2843
|
+
* @param { string } config.parsedClasses `Required`. A single string of previously parsed classes what will be joined with `tag` property.
|
2844
|
+
* @param { { regExp?: RegExp, replacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
|
2845
2845
|
* @returns A single string product of merge all classNames, separated by `separator` value
|
2846
2846
|
*/
|
2847
2847
|
const parseTestId = (config) => {
|
@@ -2849,7 +2849,7 @@ const parseTestId = (config) => {
|
|
2849
2849
|
let fixedClassString = config.parsedClasses;
|
2850
2850
|
if (config.rules) {
|
2851
2851
|
for (const rule of config.rules) {
|
2852
|
-
fixedClassString = fixedClassString.replace(rule.
|
2852
|
+
fixedClassString = fixedClassString.replace(rule.regExp, rule.replacer);
|
2853
2853
|
}
|
2854
2854
|
}
|
2855
2855
|
else {
|
@@ -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 = ({
|
2863
|
+
const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, size = null, onClick = null }) => {
|
2864
2864
|
const buttonClasses = parseClasses([
|
2865
2865
|
'button',
|
2866
2866
|
color,
|
@@ -2870,72 +2870,88 @@ const Button = ({ text = null, type = 'button', testId = null, style = null, col
|
|
2870
2870
|
isRounded ? 'is-rounded' : null,
|
2871
2871
|
isLoading ? 'is-loading' : null,
|
2872
2872
|
isStatic ? 'is-static' : null,
|
2873
|
-
size
|
2873
|
+
size,
|
2874
|
+
cssClasses
|
2874
2875
|
]);
|
2875
|
-
const
|
2876
|
-
return (React.createElement("button", { "data-testid":
|
2876
|
+
const buttonTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
|
2877
|
+
return (React.createElement("button", { "data-testid": buttonTestId, 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));
|
2877
2878
|
};
|
2878
2879
|
|
2879
|
-
const Column = ({ testId = null,
|
2880
|
+
const Column = ({ testId = null, cssClasses = null, style = null, children = null, size = null, offset = null, isNarrow = false }) => {
|
2880
2881
|
const columnClasses = parseClasses([
|
2881
2882
|
'column',
|
2882
2883
|
size,
|
2883
2884
|
offset,
|
2884
|
-
isNarrow ? 'is-narrow' : null
|
2885
|
+
isNarrow ? 'is-narrow' : null,
|
2886
|
+
cssClasses
|
2885
2887
|
]);
|
2886
|
-
const
|
2887
|
-
return (React.createElement("section", { "data-testid":
|
2888
|
+
const columnTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
|
2889
|
+
return (React.createElement("section", { "data-testid": columnTestId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
|
2888
2890
|
};
|
2889
2891
|
|
2890
|
-
const ProgressBar = ({
|
2892
|
+
const ProgressBar = ({ testId = null, cssClasses = null, style = null, value = 0, max = 100, color = 'is-primary', size = null, isLoading = false }) => {
|
2891
2893
|
const fixedValue = value > max || value < 0 ? 0 : value;
|
2892
|
-
const progressClasses = parseClasses([
|
2893
|
-
|
2894
|
+
const progressClasses = parseClasses([
|
2895
|
+
'progress',
|
2896
|
+
color,
|
2897
|
+
size,
|
2898
|
+
cssClasses
|
2899
|
+
]);
|
2900
|
+
const progressTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
2894
2901
|
tag: 'progress',
|
2895
2902
|
parsedClasses: progressClasses
|
2896
2903
|
});
|
2897
|
-
return (React.createElement("progress", { "data-testid":
|
2904
|
+
return (React.createElement("progress", { "data-testid": progressTestId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
|
2898
2905
|
};
|
2899
2906
|
|
2900
|
-
const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className:
|
2907
|
+
const Block = ({ testId = 'test-block', cssClasses = 'block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: cssClasses, style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
|
2901
2908
|
|
2902
|
-
const Tag = ({
|
2903
|
-
const
|
2909
|
+
const Tag = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, text, withDelete = false, withAddon = false, addonText = null, color = null, isLight = null, isRounded = null, size = null, addonColor = null, onDeleteClick = null }) => {
|
2910
|
+
const tagContainerClasses = parseClasses([
|
2911
|
+
'tags',
|
2912
|
+
'has-addons',
|
2913
|
+
size ? size.replace('is-', 'are-') : null,
|
2914
|
+
containerCssClasses
|
2915
|
+
]);
|
2904
2916
|
const tagClasses = parseClasses([
|
2905
2917
|
'tag',
|
2906
2918
|
color,
|
2907
2919
|
isLight && !withAddon ? 'is-light' : null,
|
2908
2920
|
isRounded && !withAddon ? 'is-rounded' : null,
|
2909
|
-
size
|
2910
|
-
|
2911
|
-
const tagsWrapperClasses = parseClasses([
|
2912
|
-
'tags',
|
2913
|
-
'has-addons',
|
2914
|
-
size ? size.replace('is-', 'are-') : null
|
2921
|
+
size,
|
2922
|
+
cssClasses
|
2915
2923
|
]);
|
2916
|
-
const
|
2917
|
-
const
|
2924
|
+
const tagAddonClasses = parseClasses(['tag', addonColor]);
|
2925
|
+
const tagLabel = withAddon ? 'tags' : 'tag';
|
2926
|
+
const tagTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
2918
2927
|
tag: tagLabel,
|
2919
|
-
parsedClasses: withAddon ?
|
2928
|
+
parsedClasses: withAddon ? tagContainerClasses : tagClasses,
|
2920
2929
|
separator: withAddon ? '-' : ''
|
2921
2930
|
});
|
2922
|
-
|
2923
|
-
|
2924
|
-
|
2931
|
+
const tagContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${tagTestId}-container`;
|
2932
|
+
const tagDeleteTestId = `${tagTestId}-delete`;
|
2933
|
+
return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
|
2934
|
+
React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
|
2935
|
+
withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
|
2925
2936
|
text,
|
2926
|
-
withDelete ? (React.createElement("button", { "data-testid":
|
2937
|
+
withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
|
2927
2938
|
};
|
2928
2939
|
|
2929
|
-
const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className:
|
2940
|
+
const Box = ({ testId = 'test-box', cssClasses = 'box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: cssClasses, style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
|
2930
2941
|
|
2931
2942
|
const renderTitleSection = (section) => {
|
2932
|
-
var _a, _b
|
2943
|
+
var _a, _b;
|
2944
|
+
if (!section)
|
2945
|
+
return null;
|
2946
|
+
const { type, size, isSpaced, cssClasses } = section;
|
2933
2947
|
const sectionClasses = parseClasses([
|
2934
|
-
|
2935
|
-
|
2936
|
-
|
2948
|
+
type,
|
2949
|
+
size !== null && size !== void 0 ? size : null,
|
2950
|
+
type === 'title' && isSpaced ? 'is-spaced' : null,
|
2951
|
+
cssClasses
|
2937
2952
|
]);
|
2938
|
-
|
2953
|
+
const sectionTestId = (_a = section === null || section === void 0 ? void 0 : section.testId) !== null && _a !== void 0 ? _a : `${section === null || section === void 0 ? void 0 : section.type}-test`;
|
2954
|
+
return (React.createElement("p", { "data-testid": sectionTestId, className: sectionClasses, style: (_b = section === null || section === void 0 ? void 0 : section.style) !== null && _b !== void 0 ? _b : undefined }, section === null || section === void 0 ? void 0 : section.text));
|
2939
2955
|
};
|
2940
2956
|
const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
|
2941
2957
|
renderTitleSection(main),
|
@@ -2956,146 +2972,203 @@ const generateIconContainer = (icon, color) => {
|
|
2956
2972
|
parsedClasses: (_a = color === null || color === void 0 ? void 0 : color.toString()) !== null && _a !== void 0 ? _a : '',
|
2957
2973
|
rules: [
|
2958
2974
|
{
|
2959
|
-
|
2960
|
-
|
2975
|
+
regExp: /has-text/gm,
|
2976
|
+
replacer: ''
|
2961
2977
|
}
|
2962
2978
|
]
|
2963
2979
|
});
|
2964
2980
|
return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
|
2965
2981
|
};
|
2966
|
-
const Icon = ({
|
2967
|
-
const
|
2982
|
+
const Icon = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, iconLabel, text = null, color = null, size = null, colorMode = null, isSpinning = false }) => {
|
2983
|
+
const iconContainerClasses = parseClasses([
|
2984
|
+
'icon',
|
2985
|
+
color,
|
2986
|
+
size,
|
2987
|
+
containerCssClasses
|
2988
|
+
]);
|
2968
2989
|
const iconClasses = parseClasses([
|
2969
2990
|
'mdi',
|
2970
2991
|
`mdi-${iconLabel}`,
|
2971
2992
|
colorMode ? `mdi-${colorMode}` : null,
|
2972
2993
|
isSpinning ? 'mdi-spin' : null,
|
2973
|
-
size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px'
|
2994
|
+
size ? `mdi-${IconSizeEnum[size]}px` : 'mdi-24px',
|
2995
|
+
cssClasses
|
2974
2996
|
]);
|
2975
|
-
const
|
2997
|
+
const iconContainertestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
|
2976
2998
|
tag: 'icon',
|
2977
2999
|
parsedClasses: iconClasses,
|
2978
3000
|
rules: [
|
2979
3001
|
{
|
2980
|
-
|
2981
|
-
|
3002
|
+
regExp: /mdi-|mdi--/gm,
|
3003
|
+
replacer: ''
|
2982
3004
|
},
|
2983
3005
|
{
|
2984
|
-
|
2985
|
-
|
3006
|
+
regExp: /mdi /gm,
|
3007
|
+
replacer: '-'
|
2986
3008
|
}
|
2987
3009
|
],
|
2988
3010
|
separator: '-'
|
2989
3011
|
});
|
2990
|
-
const
|
2991
|
-
const iconComponent = (React.createElement("span", { "data-testid":
|
2992
|
-
React.createElement("i", { "data-testid":
|
3012
|
+
const iconTestId = testId !== null && testId !== void 0 ? testId : `${iconContainertestId}-i`;
|
3013
|
+
const iconComponent = (React.createElement("span", { "data-testid": iconContainertestId, className: iconContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3014
|
+
React.createElement("i", { "data-testid": iconTestId, className: iconClasses, style: style !== null && style !== void 0 ? style : undefined }),
|
2993
3015
|
text ? React.createElement("span", null, text) : null));
|
2994
3016
|
return text ? generateIconContainer(iconComponent, color) : iconComponent;
|
2995
3017
|
};
|
2996
3018
|
|
2997
|
-
const Input = ({ testId = null, type, text = null, isDisabled = false, isReadonly = false,
|
3019
|
+
const Input = ({ testId = null, cssClasses = null, style = null, type, text = null, isDisabled = false, isReadonly = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
|
2998
3020
|
const inputClasses = parseClasses([
|
2999
3021
|
'input',
|
3000
3022
|
color,
|
3001
3023
|
size,
|
3002
3024
|
isRounded ? 'is-rounded' : null,
|
3003
3025
|
isHovered ? 'is-hovered' : null,
|
3004
|
-
isFocused ? 'is-focused' : null
|
3026
|
+
isFocused ? 'is-focused' : null,
|
3027
|
+
cssClasses
|
3005
3028
|
]);
|
3006
|
-
const
|
3029
|
+
const inputTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3007
3030
|
tag: 'input',
|
3008
3031
|
parsedClasses: inputClasses
|
3009
3032
|
});
|
3010
|
-
return (React.createElement("input", { "data-testid":
|
3033
|
+
return (React.createElement("input", { "data-testid": inputTestId, type: type, defaultValue: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, className: inputClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
|
3011
3034
|
};
|
3012
3035
|
|
3013
|
-
const TextArea = ({ testId = null, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false,
|
3036
|
+
const TextArea = ({ testId = null, cssClasses = null, style = null, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false, color = null, size = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
|
3014
3037
|
const textAreaClasses = parseClasses([
|
3015
3038
|
'textarea',
|
3016
3039
|
color,
|
3017
3040
|
size,
|
3018
3041
|
isHovered ? 'is-hovered' : null,
|
3019
3042
|
isFocused ? 'is-focused' : null,
|
3020
|
-
isFixedSize ? 'has-fixed-size' : null
|
3043
|
+
isFixedSize ? 'has-fixed-size' : null,
|
3044
|
+
cssClasses
|
3021
3045
|
]);
|
3022
|
-
const
|
3046
|
+
const textAreaTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3023
3047
|
tag: 'textarea',
|
3024
3048
|
parsedClasses: textAreaClasses,
|
3025
3049
|
rules: [
|
3026
3050
|
{
|
3027
|
-
|
3028
|
-
|
3051
|
+
regExp: /textarea/gm,
|
3052
|
+
replacer: ''
|
3029
3053
|
},
|
3030
3054
|
{
|
3031
|
-
|
3032
|
-
|
3055
|
+
regExp: /is-|has-/gm,
|
3056
|
+
replacer: '-'
|
3033
3057
|
}
|
3034
3058
|
]
|
3035
3059
|
});
|
3036
|
-
return (React.createElement("textarea", { "data-testid":
|
3060
|
+
return (React.createElement("textarea", { "data-testid": textAreaTestId, defaultValue: text !== null && text !== void 0 ? text : undefined, cols: cols !== null && cols !== void 0 ? cols : undefined, rows: rows !== null && rows !== void 0 ? rows : undefined, disabled: isDisabled, readOnly: isReadonly, className: textAreaClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
|
3037
3061
|
};
|
3038
3062
|
|
3039
|
-
const Delete = ({ testId = null, style = null, size = null, onClick = null }) => {
|
3040
|
-
const deleteClasses = parseClasses(['delete', size]);
|
3041
|
-
const
|
3063
|
+
const Delete = ({ testId = null, cssClasses = null, style = null, size = null, onClick = null }) => {
|
3064
|
+
const deleteClasses = parseClasses(['delete', size, cssClasses]);
|
3065
|
+
const deleteTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3042
3066
|
tag: 'delete',
|
3043
3067
|
parsedClasses: deleteClasses
|
3044
3068
|
});
|
3045
|
-
return (React.createElement("button", { "data-testid":
|
3069
|
+
return (React.createElement("button", { "data-testid": deleteTestId, className: deleteClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }));
|
3046
3070
|
};
|
3047
3071
|
|
3048
|
-
const Select = ({ testId = null,
|
3049
|
-
const
|
3072
|
+
const Select = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, options = [], showOptions = 1, isMultiple = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null }) => {
|
3073
|
+
const containerSelectClasses = parseClasses([
|
3050
3074
|
'select',
|
3051
3075
|
color,
|
3052
3076
|
size,
|
3053
3077
|
isMultiple ? 'is-multiple' : null,
|
3054
3078
|
isRounded ? 'is-rounded' : null,
|
3055
3079
|
isHovered ? 'is-hovered' : null,
|
3056
|
-
isFocused ? 'is-focused' : null
|
3080
|
+
isFocused ? 'is-focused' : null,
|
3081
|
+
containerCssClasses
|
3057
3082
|
]);
|
3058
3083
|
const selectTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3059
3084
|
tag: 'select',
|
3060
|
-
parsedClasses:
|
3085
|
+
parsedClasses: containerSelectClasses
|
3061
3086
|
});
|
3062
|
-
|
3063
|
-
|
3087
|
+
const containerSelectTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${selectTestId}-container`;
|
3088
|
+
return (React.createElement("section", { "data-testid": containerSelectTestId, className: containerSelectClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3089
|
+
React.createElement("select", { "data-testid": selectTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, multiple: isMultiple, size: showOptions }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), defaultChecked: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
|
3064
3090
|
};
|
3065
3091
|
|
3066
|
-
const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…',
|
3067
|
-
const
|
3092
|
+
const File = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…', buttonOnRight = false, isFullWidth = false, isBoxed = false, color = null, size = null, onClick = null }) => {
|
3093
|
+
const fileContainerClasses = parseClasses([
|
3068
3094
|
'file',
|
3069
3095
|
fileName ? 'has-name' : null,
|
3070
3096
|
buttonOnRight ? 'is-right' : null,
|
3071
3097
|
isFullWidth ? 'is-fullwidth' : null,
|
3072
3098
|
isBoxed ? 'is-boxed' : null,
|
3073
3099
|
color,
|
3074
|
-
size
|
3100
|
+
size,
|
3101
|
+
containerCssClasses
|
3075
3102
|
]);
|
3076
|
-
const
|
3103
|
+
const fileContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
|
3077
3104
|
tag: 'file',
|
3078
|
-
parsedClasses:
|
3105
|
+
parsedClasses: fileContainerClasses,
|
3079
3106
|
rules: [
|
3080
3107
|
{
|
3081
|
-
|
3082
|
-
|
3108
|
+
regExp: /has/gm,
|
3109
|
+
replacer: '-has'
|
3083
3110
|
},
|
3084
3111
|
{
|
3085
|
-
|
3086
|
-
|
3112
|
+
regExp: /is|file/gm,
|
3113
|
+
replacer: ''
|
3087
3114
|
}
|
3088
3115
|
]
|
3089
3116
|
});
|
3090
|
-
const
|
3091
|
-
|
3117
|
+
const fileInputClasses = cssClasses !== null && cssClasses !== void 0 ? cssClasses : 'file-input';
|
3118
|
+
const fileInputTestId = testId !== null && testId !== void 0 ? testId : `${fileContainerTestId}-input`;
|
3119
|
+
return (React.createElement("section", { "data-testid": fileContainerTestId, className: fileContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3092
3120
|
React.createElement("label", { className: 'file-label' },
|
3093
|
-
React.createElement("input", { "data-testid": fileInputTestId,
|
3121
|
+
React.createElement("input", { "data-testid": fileInputTestId, type: 'file', name: 'resume', className: fileInputClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }),
|
3094
3122
|
React.createElement("span", { className: 'file-cta' },
|
3095
3123
|
uploadIcon ? React.createElement(Icon, Object.assign({}, uploadIcon)) : null,
|
3096
3124
|
React.createElement("span", { className: 'file-label' }, uploadText)),
|
3097
3125
|
fileName ? React.createElement("span", { className: 'file-name' }, fileName) : null)));
|
3098
3126
|
};
|
3099
3127
|
|
3100
|
-
|
3128
|
+
const parseContentTestId = (content) => {
|
3129
|
+
if (typeof content === 'string')
|
3130
|
+
return `-${content === null || content === void 0 ? void 0 : content.toString()}`;
|
3131
|
+
if (content !== null)
|
3132
|
+
return '-with-component';
|
3133
|
+
return '';
|
3134
|
+
};
|
3135
|
+
const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, content = null, isDisabled = null, onChange = null }) => {
|
3136
|
+
const checkboxContainerClasses = parseClasses([
|
3137
|
+
'checkbox',
|
3138
|
+
containerCssClasses
|
3139
|
+
]);
|
3140
|
+
const checkboxContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
|
3141
|
+
tag: 'checkbox-container',
|
3142
|
+
parsedClasses: parseContentTestId(content)
|
3143
|
+
});
|
3144
|
+
const checkboxTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3145
|
+
tag: 'checkbox',
|
3146
|
+
parsedClasses: parseContentTestId(content)
|
3147
|
+
});
|
3148
|
+
return (React.createElement("label", { "data-testid": checkboxContainerTestId, className: checkboxContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3149
|
+
React.createElement("input", { "data-testid": checkboxTestId, type: 'checkbox', className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }),
|
3150
|
+
content));
|
3151
|
+
};
|
3152
|
+
|
3153
|
+
// PARSERS
|
3154
|
+
const renderRadioButton = (config, index) => {
|
3155
|
+
const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
|
3156
|
+
const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
|
3157
|
+
return (React.createElement("label", { key: index, className: 'radio' },
|
3158
|
+
React.createElement("input", { "data-testid": radioButtonTestId, type: 'radio', style: style !== null && style !== void 0 ? style : undefined, name: name, defaultChecked: isChecked, disabled: isDisabled, onChange: onChange }),
|
3159
|
+
label));
|
3160
|
+
};
|
3161
|
+
const RadioButton = ({ containerTestId = null, containerCssClasses = null, containerStyle = null, options, name, onChange = null }) => {
|
3162
|
+
const radioButtonContainerClasses = parseClasses([
|
3163
|
+
'control',
|
3164
|
+
containerCssClasses
|
3165
|
+
]);
|
3166
|
+
const radioButtonContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
|
3167
|
+
tag: 'container-',
|
3168
|
+
parsedClasses: radioButtonContainerClasses
|
3169
|
+
});
|
3170
|
+
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
|
+
|
3173
|
+
export { Block, Box, Button, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
|
3101
3174
|
//# sourceMappingURL=index.js.map
|