@bodynarf/react.components 1.4.8 → 1.4.10
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/components/dropdown/components/withLabel/index.d.ts +0 -1
- package/components/dropdown/components/withLabel/index.d.ts.map +1 -1
- package/components/dropdown/components/withLabel/index.js +1 -1
- package/components/dropdown/dropdown.scss +2 -2
- package/components/icon/index.js +2 -2
- package/components/primitives/multiline/components/multilineWithLabel/index.d.ts +0 -1
- package/components/primitives/multiline/components/multilineWithLabel/index.d.ts.map +1 -1
- package/components/primitives/multiline/components/multilineWithLabel/index.js +2 -2
- package/components/primitives/number/components/withLabel/index.js +1 -1
- package/components/primitives/text/components/textWithLabel/index.d.ts +0 -1
- package/components/primitives/text/components/textWithLabel/index.d.ts.map +1 -1
- package/components/primitives/text/components/textWithLabel/index.js +1 -1
- package/package.json +1 -1
- package/readme.md +2 -0
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { DropdownProps } from '../..';
|
|
3
2
|
declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder }: DropdownProps) => JSX.Element;
|
|
4
3
|
export default DropdownWithLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,iBAAiB,8HAOpB,aAAa,KAAG,WA0KlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -62,7 +62,7 @@ const DropdownWithLabel = ({ items, value, onSelect, validationState, deselectab
|
|
|
62
62
|
"field-body",
|
|
63
63
|
label.horizontalFieldContainerClassName
|
|
64
64
|
]);
|
|
65
|
-
return (_jsxs("div", { className: "
|
|
65
|
+
return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { className: styleClassName, caption: placeholder, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
|
|
66
66
|
? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
|
|
67
67
|
: _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), isValidationDefined && validationMessages.length > 0 &&
|
|
68
68
|
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
font-style: italic;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
.bbr-icon {
|
|
39
39
|
&:hover {
|
|
40
40
|
color: #0d6efd;
|
|
41
41
|
}
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
&.is-active {
|
|
87
|
-
.bbr-dropdown__label .
|
|
87
|
+
.bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
|
|
88
88
|
transform: rotate(180deg);
|
|
89
89
|
}
|
|
90
90
|
}
|
package/components/icon/index.js
CHANGED
|
@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import './icon.scss';
|
|
3
3
|
import { getClassName } from '@bodynarf/utils';
|
|
4
4
|
const sizeToClassMap = new Map([
|
|
5
|
-
['small', '
|
|
5
|
+
['small', ' bbr-icon--smal'],
|
|
6
6
|
['medium', ''],
|
|
7
|
-
['large', '
|
|
7
|
+
['large', ' bbr-icon--large']
|
|
8
8
|
]);
|
|
9
9
|
/**
|
|
10
10
|
* Icon component. Based on bootstrap icons
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { MultilineProps } from "../..";
|
|
3
2
|
/** Multiline textual input component with describing label */
|
|
4
3
|
declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, readonly, disabled, name, className, size, style, rounded, loading, label, placeholder, fixed, rows, onBlur }: MultilineProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithLabel/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/multilineWithLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,kKAOrB,cAAc,KAAG,WAyGnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -36,10 +36,10 @@ const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, read
|
|
|
36
36
|
"field-body",
|
|
37
37
|
label.horizontalFieldContainerClassName
|
|
38
38
|
]);
|
|
39
|
-
return (_jsxs("div", { className: "
|
|
39
|
+
return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, rows: rows }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
40
40
|
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
|
|
41
41
|
}
|
|
42
|
-
return (_jsxs("div", { className: "
|
|
42
|
+
return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, rows: rows }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
43
43
|
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
|
|
44
44
|
};
|
|
45
45
|
export default MultilineWithLabel;
|
|
@@ -35,7 +35,7 @@ const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, vali
|
|
|
35
35
|
"field-body",
|
|
36
36
|
label.horizontalFieldContainerClassName
|
|
37
37
|
]);
|
|
38
|
-
return (_jsxs("div", { className: "
|
|
38
|
+
return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
39
39
|
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
|
|
40
40
|
}
|
|
41
41
|
return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { TextProps } from "../..";
|
|
3
2
|
/** Textual input with describing label */
|
|
4
3
|
declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: TextProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,sJAMhB,SAAS,KAAG,WAwGd,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -35,7 +35,7 @@ const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, valida
|
|
|
35
35
|
"field-body",
|
|
36
36
|
label.horizontalFieldContainerClassName
|
|
37
37
|
]);
|
|
38
|
-
return (_jsxs("div", { className: "
|
|
38
|
+
return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
|
|
39
39
|
_jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
|
|
40
40
|
}
|
|
41
41
|
return (_jsxs("div", { className: "field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -15,6 +15,8 @@ Small library with react components based on Bulma CSS framework <a href="
|
|
|
15
15
|
5. *(Optional)* To use **Checkbox** component - install [bulma-checkradio](https://www.npmjs.com/package/bulma-checkradio) and make sure you imported these styles in parent container
|
|
16
16
|
|
|
17
17
|
## Description
|
|
18
|
+
|
|
19
|
+
Mostly all components have root class with `bbr-` prefix. BBR - Bodynarf Bulma React
|
|
18
20
|
### Simple components
|
|
19
21
|
Simple react components based on html elements.
|
|
20
22
|
|