@bodynarf/react.components 1.9.1 → 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/bodynarf-react.components-1.10.0.tgz +0 -0
- package/components/accordion/component/index.d.ts +1 -0
- package/components/accordion/component/index.d.ts.map +1 -1
- package/components/accordion/component/index.js +3 -3
- package/components/anchor/component/index.js +2 -2
- package/components/anchor/components/anchorWithIcon/index.d.ts +9 -2
- package/components/anchor/components/anchorWithIcon/index.d.ts.map +1 -1
- package/components/anchor/components/anchorWithIcon/index.js +2 -2
- package/components/anchor/components/simpleAnchor/index.d.ts +3 -2
- package/components/anchor/components/simpleAnchor/index.d.ts.map +1 -1
- package/components/anchor/components/simpleAnchor/index.js +1 -1
- package/components/anchor/types.d.ts +3 -11
- package/components/anchor/types.d.ts.map +1 -1
- package/components/breadcrumbs/component/index.d.ts +7 -32
- package/components/breadcrumbs/component/index.d.ts.map +1 -1
- package/components/breadcrumbs/component/index.js +22 -6
- package/components/breadcrumbs/types.d.ts +30 -1
- package/components/breadcrumbs/types.d.ts.map +1 -1
- package/components/button/component/index.d.ts.map +1 -1
- package/components/button/component/index.js +3 -3
- package/components/button/types.d.ts +1 -1
- package/components/dropdown/component/style.scss +3 -3
- package/components/dropdown/components/compact/index.d.ts +8 -1
- package/components/dropdown/components/compact/index.d.ts.map +1 -1
- package/components/dropdown/components/compact/index.js +17 -5
- package/components/dropdown/components/label/index.d.ts +1 -17
- package/components/dropdown/components/label/index.d.ts.map +1 -1
- package/components/dropdown/components/label/index.js +1 -54
- package/components/dropdown/components/withLabel/index.d.ts +3 -1
- package/components/dropdown/components/withLabel/index.d.ts.map +1 -1
- package/components/dropdown/components/withLabel/index.js +8 -82
- package/components/dropdown/types.d.ts +8 -0
- package/components/dropdown/types.d.ts.map +1 -1
- package/components/icon/component/index.d.ts +3 -2
- package/components/icon/component/index.d.ts.map +1 -1
- package/components/icon/component/index.js +4 -3
- package/components/icon/types.d.ts +2 -0
- package/components/icon/types.d.ts.map +1 -1
- package/components/multiselect/component/index.d.ts +8 -0
- package/components/multiselect/component/index.d.ts.map +1 -0
- package/components/multiselect/component/index.js +13 -0
- package/components/multiselect/component/style.scss +20 -0
- package/components/multiselect/components/item/index.d.ts +25 -0
- package/components/multiselect/components/item/index.d.ts.map +1 -0
- package/components/multiselect/components/item/index.js +62 -0
- package/components/multiselect/components/label/component/index.d.ts +20 -0
- package/components/multiselect/components/label/component/index.d.ts.map +1 -0
- package/components/multiselect/components/label/component/index.js +12 -0
- package/components/multiselect/components/label/components/empty/index.d.ts +8 -0
- package/components/multiselect/components/label/components/empty/index.d.ts.map +1 -0
- package/components/multiselect/components/label/components/empty/index.js +16 -0
- package/components/multiselect/components/label/components/nonEmpty/index.d.ts +8 -0
- package/components/multiselect/components/label/components/nonEmpty/index.d.ts.map +1 -0
- package/components/multiselect/components/label/components/nonEmpty/index.js +16 -0
- package/components/multiselect/components/label/index.d.ts +2 -0
- package/components/multiselect/components/label/index.d.ts.map +1 -0
- package/components/multiselect/components/label/index.js +1 -0
- package/components/multiselect/components/withLabel/index.d.ts +6 -0
- package/components/multiselect/components/withLabel/index.d.ts.map +1 -0
- package/components/multiselect/components/withLabel/index.js +11 -0
- package/components/multiselect/components/withoutLabel/index.d.ts +10 -0
- package/components/multiselect/components/withoutLabel/index.d.ts.map +1 -0
- package/components/multiselect/components/withoutLabel/index.js +84 -0
- package/components/multiselect/index.d.ts +3 -0
- package/components/multiselect/index.d.ts.map +1 -0
- package/components/multiselect/index.js +2 -0
- package/components/multiselect/types.d.ts +41 -0
- package/components/multiselect/types.d.ts.map +1 -0
- package/components/multiselect/types.js +1 -0
- package/components/paginator/component/index.d.ts.map +1 -1
- package/components/paginator/component/index.js +22 -5
- package/components/paginator/index.d.ts +0 -1
- package/components/paginator/index.d.ts.map +1 -1
- package/components/paginator/index.js +0 -1
- package/components/primitives/checkbox/component/index.d.ts +2 -1
- package/components/primitives/checkbox/component/index.d.ts.map +1 -1
- package/components/primitives/checkbox/component/index.js +8 -6
- package/components/primitives/checkbox/component/style.scss +22 -3
- package/components/primitives/color/components/picker/index.d.ts +3 -3
- package/components/primitives/color/components/picker/index.d.ts.map +1 -1
- package/components/primitives/color/components/picker/index.js +8 -8
- package/components/primitives/color/components/withLabel/index.d.ts +1 -1
- package/components/primitives/color/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/color/components/withLabel/index.js +3 -4
- package/components/primitives/color/components/withoutLabel/index.d.ts +1 -1
- package/components/primitives/color/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/color/components/withoutLabel/index.js +2 -3
- package/components/primitives/date/component/index.d.ts +3 -2
- package/components/primitives/date/component/index.d.ts.map +1 -1
- package/components/primitives/date/component/index.js +5 -7
- package/components/primitives/date/component/style.scss +11 -0
- package/components/primitives/date/types.d.ts +1 -1
- package/components/primitives/date/types.d.ts.map +1 -1
- package/components/primitives/internal/componentWithLabel/index.d.ts.map +1 -1
- package/components/primitives/internal/componentWithLabel/index.js +2 -2
- package/components/primitives/internal/hint/index.d.ts +4 -7
- package/components/primitives/internal/hint/index.d.ts.map +1 -1
- package/components/primitives/internal/hint/index.js +1 -0
- package/components/primitives/internal/hint/style.scss +4 -0
- package/components/primitives/multiline/component/index.d.ts +0 -1
- package/components/primitives/multiline/component/index.d.ts.map +1 -1
- package/components/primitives/multiline/component/index.js +0 -1
- package/components/primitives/multiline/components/withLabel/index.d.ts +2 -1
- package/components/primitives/multiline/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/multiline/components/withLabel/index.js +4 -6
- package/components/primitives/multiline/components/withoutLabel/index.d.ts +1 -0
- package/components/primitives/multiline/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/multiline/components/withoutLabel/index.js +4 -5
- package/components/primitives/number/components/withLabel/index.d.ts +2 -1
- package/components/primitives/number/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/number/components/withLabel/index.js +4 -6
- package/components/primitives/number/components/withoutLabel/index.d.ts +2 -1
- package/components/primitives/number/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/number/components/withoutLabel/index.js +5 -6
- package/components/primitives/password/components/withLabel/index.d.ts +2 -1
- package/components/primitives/password/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/password/components/withLabel/index.js +5 -6
- package/components/primitives/password/components/withoutLabel/index.d.ts +1 -0
- package/components/primitives/password/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/password/components/withoutLabel/index.js +6 -7
- package/components/primitives/text/component/index.d.ts +0 -1
- package/components/primitives/text/component/index.d.ts.map +1 -1
- package/components/primitives/text/component/index.js +0 -1
- package/components/primitives/text/components/withLabel/index.d.ts +1 -0
- package/components/primitives/text/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/text/components/withLabel/index.js +4 -6
- package/components/primitives/text/components/withoutLabel/index.d.ts +2 -1
- package/components/primitives/text/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/text/components/withoutLabel/index.js +5 -6
- package/components/search/component/index.d.ts.map +1 -1
- package/components/search/component/index.js +6 -8
- package/components/table/component/index.d.ts +1 -35
- package/components/table/component/index.d.ts.map +1 -1
- package/components/table/component/index.js +1 -1
- package/components/table/types.d.ts +36 -1
- package/components/table/types.d.ts.map +1 -1
- package/components/tabs/component/index.d.ts +3 -26
- package/components/tabs/component/index.d.ts.map +1 -1
- package/components/tabs/component/index.js +3 -3
- package/components/tabs/types.d.ts +24 -1
- package/components/tabs/types.d.ts.map +1 -1
- package/components/tag/component/index.d.ts +1 -0
- package/components/tag/component/index.d.ts.map +1 -1
- package/components/tag/component/index.js +3 -3
- package/components/tag/types.d.ts +3 -3
- package/components/tag/types.d.ts.map +1 -1
- package/hooks/index.d.ts +1 -0
- package/hooks/index.d.ts.map +1 -1
- package/hooks/index.js +1 -0
- package/hooks/useComponentOutsideClick.d.ts.map +1 -1
- package/hooks/useComponentOutsideClick.js +2 -3
- package/package.json +2 -2
- package/readme.md +5 -3
- package/tsconfig.tsbuildinfo +1 -1
- package/bodynarf-react.components-1.9.3.tgz +0 -0
- package/common.scss +0 -8
- package/components/paginator/utils.d.ts +0 -10
- package/components/paginator/utils.d.ts.map +0 -1
- package/components/paginator/utils.js +0 -18
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
|
-
import { generateGuid, getClassName,
|
|
3
|
+
import { generateGuid, getClassName, isNullOrUndefined, isStringEmpty } from "@bodynarf/utils";
|
|
4
4
|
import { ElementSize } from "../../../../../types";
|
|
5
5
|
import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
|
|
6
6
|
import ComponentWithLabel from "../../../internal/componentWithLabel";
|
|
7
7
|
import InternalHint from "../../../internal/hint";
|
|
8
8
|
/** Number component with label */
|
|
9
|
-
const NumberWithLabel = ({ onValueChange,
|
|
9
|
+
const NumberWithLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), label, placeholder, size = ElementSize.Normal, style, rounded = false, loading = false, readonly = false, disabled = false, onBlur, step = 1, className, title, data, hint, }) => {
|
|
10
10
|
const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
|
|
11
|
-
const id = name ?? generateGuid();
|
|
12
|
-
const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
|
|
13
11
|
const elClassName = getClassName([
|
|
14
12
|
className,
|
|
15
|
-
|
|
13
|
+
size === ElementSize.Normal ? "" : `is-${size}`,
|
|
16
14
|
rounded ? "is-rounded" : "",
|
|
17
15
|
getStyleClassName(style, validationState),
|
|
18
16
|
"input",
|
|
@@ -24,6 +22,6 @@ const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, vali
|
|
|
24
22
|
const dataAttributes = isNullOrUndefined(data)
|
|
25
23
|
? undefined
|
|
26
24
|
: mapDataAttributes(data);
|
|
27
|
-
return (_jsxs(ComponentWithLabel, { id:
|
|
25
|
+
return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
|
|
28
26
|
};
|
|
29
27
|
export default NumberWithLabel;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { NumberProps } from "../..";
|
|
2
3
|
/** Number component without label */
|
|
3
|
-
declare const NumberWithoutLabel: ({ onValueChange,
|
|
4
|
+
declare const NumberWithoutLabel: ({ onValueChange, defaultValue, validationState, name, size, style, readonly, disabled, rounded, loading, placeholder, onBlur, step, className, title, data, hint, }: NumberProps) => JSX.Element;
|
|
4
5
|
export default NumberWithoutLabel;
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,wKAYrB,WAAW,KAAG,WAqDhB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
|
-
import { generateGuid, getClassName,
|
|
3
|
+
import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
4
|
import { ElementSize } from "../../../../../types";
|
|
5
5
|
import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
|
|
6
6
|
import InternalHint from "../../../internal/hint";
|
|
7
7
|
/** Number component without label */
|
|
8
|
-
const NumberWithoutLabel = ({ onValueChange,
|
|
8
|
+
const NumberWithoutLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), size, style, readonly = false, disabled = false, rounded = false, loading = false, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
|
|
9
9
|
const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
|
|
10
10
|
const elClassName = getClassName([
|
|
11
11
|
className,
|
|
12
|
-
|
|
12
|
+
size === ElementSize.Normal ? "" : `is-${size}`,
|
|
13
13
|
rounded ? "is-rounded" : "",
|
|
14
14
|
getStyleClassName(style, validationState),
|
|
15
15
|
"input",
|
|
@@ -19,10 +19,9 @@ const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, v
|
|
|
19
19
|
"bbr-input",
|
|
20
20
|
loading ? "is-loading" : "",
|
|
21
21
|
]);
|
|
22
|
-
const id = name ?? generateGuid();
|
|
23
22
|
const dataAttributes = isNullOrUndefined(data)
|
|
24
23
|
? undefined
|
|
25
24
|
: mapDataAttributes(data);
|
|
26
|
-
return (_jsxs(
|
|
25
|
+
return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
|
|
27
26
|
};
|
|
28
27
|
export default NumberWithoutLabel;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { PasswordProps } from "../..";
|
|
2
|
-
declare const PasswordWithLabel: ({ onValueChange,
|
|
3
|
+
declare const PasswordWithLabel: ({ onValueChange, validationState, name, size, style, rounded, loading, disabled, canShowPassword, label, placeholder, className, title, data, hint, }: PasswordProps) => JSX.Element;
|
|
3
4
|
export default PasswordWithLabel;
|
|
4
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,0JAUpB,aAAa,KAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,0JAUpB,aAAa,KAAG,WAqElB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useState } from "react";
|
|
3
|
-
import { generateGuid, getClassName,
|
|
3
|
+
import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
4
|
import { ElementSize } from "../../../../../types";
|
|
5
5
|
import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
|
|
6
6
|
import Icon from "../../../../icon";
|
|
7
7
|
import ComponentWithLabel from "../../../internal/componentWithLabel";
|
|
8
8
|
import InternalHint from "../../../internal/hint";
|
|
9
|
-
const PasswordWithLabel = ({ onValueChange,
|
|
9
|
+
const PasswordWithLabel = ({ onValueChange, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, disabled = false, canShowPassword = false, label, placeholder, className, title, data, hint, }) => {
|
|
10
10
|
const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
|
|
11
11
|
const [contentIsHidden, setContentIsHidden] = useState(true);
|
|
12
12
|
const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
|
|
13
|
-
const elSizeClassName = "is-{0}".format(
|
|
14
|
-
const id = name ?? generateGuid();
|
|
13
|
+
const elSizeClassName = size === ElementSize.Normal ? "" : "is-{0}".format(size);
|
|
15
14
|
const elClassName = getClassName([
|
|
16
15
|
"bbr-password",
|
|
17
16
|
className,
|
|
@@ -29,7 +28,7 @@ const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, siz
|
|
|
29
28
|
const dataAttributes = isNullOrUndefined(data)
|
|
30
29
|
? undefined
|
|
31
30
|
: mapDataAttributes(data);
|
|
32
|
-
return (_jsxs(ComponentWithLabel, { id:
|
|
33
|
-
_jsx("span", { className: `icon is-right ${elSizeClassName}`,
|
|
31
|
+
return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
|
|
32
|
+
_jsx("span", { onClick: onIconClick, title: "Show password", className: `icon is-right ${elSizeClassName}`, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
|
|
34
33
|
};
|
|
35
34
|
export default PasswordWithLabel;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { PasswordProps } from "../..";
|
|
2
3
|
declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, size, style, rounded, loading, placeholder, canShowPassword, className, title, data, hint, }: PasswordProps) => JSX.Element;
|
|
3
4
|
export default PasswordWithoutLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,mJAUvB,aAAa,KAAG,WAoElB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,mJAUvB,aAAa,KAAG,WAoElB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useState } from "react";
|
|
3
|
-
import { generateGuid, getClassName,
|
|
3
|
+
import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
4
|
import { ElementSize } from "../../../../../types";
|
|
5
5
|
import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
|
|
6
6
|
import Icon from "../../../../icon";
|
|
7
7
|
import InternalHint from "../../../internal/hint";
|
|
8
|
-
const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, size, style, rounded = false, loading = false, placeholder, canShowPassword = false, className, title, data, hint, }) => {
|
|
8
|
+
const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, placeholder, canShowPassword = false, className, title, data, hint, }) => {
|
|
9
9
|
const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
|
|
10
10
|
const [contentIsHidden, setContentIsHidden] = useState(true);
|
|
11
11
|
const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
|
|
12
|
-
const elSizeClassName = "is-{0}".format(
|
|
13
|
-
const id = name ?? generateGuid();
|
|
12
|
+
const elSizeClassName = size === ElementSize.Normal ? "" : "is-{0}".format(size);
|
|
14
13
|
const elClassName = getClassName([
|
|
15
14
|
"bbr-password",
|
|
16
15
|
className,
|
|
@@ -29,7 +28,7 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name,
|
|
|
29
28
|
const dataAttributes = isNullOrUndefined(data)
|
|
30
29
|
? undefined
|
|
31
30
|
: mapDataAttributes(data);
|
|
32
|
-
return (_jsxs(
|
|
33
|
-
_jsx("span", { className: `icon is-right ${elSizeClassName}`,
|
|
31
|
+
return (_jsxs("div", { className: "bbr-field field", children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
|
|
32
|
+
_jsx("span", { onClick: onIconClick, title: "Show password", className: `icon is-right ${elSizeClassName}`, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
|
|
34
33
|
};
|
|
35
34
|
export default PasswordWithoutLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/text/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAI/B,8BAA8B;AAC9B,QAAA,MAAM,IAAI,UAAW,SAAS,KAAG,WAIhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { isNullOrUndefined } from "@bodynarf/utils";
|
|
3
|
-
import "../../../../common.scss";
|
|
4
3
|
import TextWithLabel from "../components/withLabel";
|
|
5
4
|
import TextWithoutLabel from "../components/withoutLabel";
|
|
6
5
|
/** Textual input component */
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { TextProps } from "../..";
|
|
2
3
|
/** Textual input with describing label */
|
|
3
4
|
declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded, loading, label, placeholder, onBlur, className, title, data, hint, }: TextProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,yKAUhB,SAAS,KAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,yKAUhB,SAAS,KAAG,WAqDd,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
|
-
import { generateGuid, getClassName,
|
|
3
|
+
import { generateGuid, getClassName, isNullOrUndefined, } from "@bodynarf/utils";
|
|
4
4
|
import { ElementSize } from "../../../../../types";
|
|
5
5
|
import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
|
|
6
6
|
import InternalHint from "../../../internal/hint";
|
|
7
7
|
import ComponentWithLabel from "../../../internal/componentWithLabel";
|
|
8
8
|
/** Textual input with describing label */
|
|
9
|
-
const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, label, placeholder, onBlur, className, title, data, hint, }) => {
|
|
9
|
+
const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, label, placeholder, onBlur, className, title, data, hint, }) => {
|
|
10
10
|
const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
|
|
11
|
-
const id = name ?? generateGuid();
|
|
12
|
-
const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
|
|
13
11
|
const elClassName = getClassName([
|
|
14
12
|
className,
|
|
15
|
-
|
|
13
|
+
size === ElementSize.Normal ? "" : `is-${size}`,
|
|
16
14
|
rounded ? "is-rounded" : "",
|
|
17
15
|
getStyleClassName(style, validationState),
|
|
18
16
|
"input",
|
|
@@ -24,6 +22,6 @@ const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, valida
|
|
|
24
22
|
const dataAttributes = isNullOrUndefined(data)
|
|
25
23
|
? undefined
|
|
26
24
|
: mapDataAttributes(data);
|
|
27
|
-
return (_jsxs(ComponentWithLabel, { id:
|
|
25
|
+
return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "text", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
|
|
28
26
|
};
|
|
29
27
|
export default TextWithLabel;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { TextProps } from "../..";
|
|
2
3
|
/** Textual input without describing label */
|
|
3
|
-
declare const TextWithoutLabel: ({ onValueChange,
|
|
4
|
+
declare const TextWithoutLabel: ({ onValueChange, defaultValue, validationState, readonly, disabled, name, size, style, rounded, loading, placeholder, onBlur, className, title, data, hint, }: TextProps) => JSX.Element;
|
|
4
5
|
export default TextWithoutLabel;
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,kKAWnB,SAAS,KAAG,WAoDd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
|
-
import { generateGuid, getClassName,
|
|
3
|
+
import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
4
|
import { ElementSize } from "../../../../../types";
|
|
5
5
|
import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
|
|
6
6
|
import InternalHint from "../../../internal/hint";
|
|
7
7
|
/** Textual input without describing label */
|
|
8
|
-
const TextWithoutLabel = ({ onValueChange,
|
|
8
|
+
const TextWithoutLabel = ({ onValueChange, defaultValue, validationState, readonly = false, disabled = false, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, placeholder, onBlur, className, title, data, hint, }) => {
|
|
9
9
|
const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
|
|
10
10
|
const elClassName = getClassName([
|
|
11
11
|
className,
|
|
12
|
-
|
|
12
|
+
size === ElementSize.Normal ? "" : `is-${size}`,
|
|
13
13
|
rounded ? "is-rounded" : "",
|
|
14
14
|
getStyleClassName(style, validationState),
|
|
15
15
|
"input",
|
|
@@ -19,10 +19,9 @@ const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, val
|
|
|
19
19
|
"bbr-input",
|
|
20
20
|
loading ? "is-loading" : "",
|
|
21
21
|
]);
|
|
22
|
-
const id = name ?? generateGuid();
|
|
23
22
|
const dataAttributes = isNullOrUndefined(data)
|
|
24
23
|
? undefined
|
|
25
24
|
: mapDataAttributes(data);
|
|
26
|
-
return (_jsxs(
|
|
25
|
+
return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "text", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
|
|
27
26
|
};
|
|
28
27
|
export default TextWithoutLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAqB,EAAE,YAAiB,EACxC,IAAyB,EACzB,SAAiB,EAAE,OAAe,EAAE,QAAgB,EAEpD,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwF3B"}
|
|
@@ -6,9 +6,9 @@ import { mapDataAttributes } from "../../../utils";
|
|
|
6
6
|
import Button from "../../button";
|
|
7
7
|
import "./style.scss";
|
|
8
8
|
/** Search component */
|
|
9
|
-
export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading = false, rounded = false, disabled, className, title, data, }) {
|
|
10
|
-
const [elementName] = useState(name
|
|
11
|
-
const [searchValue, setSearchValue] = useState(defaultValue
|
|
9
|
+
export default function Search({ searchType, onSearch, caption, name = generateGuid(), defaultValue = "", size = ElementSize.Normal, isLoading = false, rounded = false, disabled = false, className, title, data, }) {
|
|
10
|
+
const [elementName] = useState(name);
|
|
11
|
+
const [searchValue, setSearchValue] = useState(defaultValue);
|
|
12
12
|
const onChange = useCallback((event) => {
|
|
13
13
|
const elementValue = event.target.value;
|
|
14
14
|
if (searchType === "byTyping") {
|
|
@@ -21,14 +21,14 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
|
|
|
21
21
|
"bbr-search",
|
|
22
22
|
"control",
|
|
23
23
|
className,
|
|
24
|
-
`is-${
|
|
24
|
+
`is-${size}`,
|
|
25
25
|
isLoading ? "is-loading" : "",
|
|
26
26
|
searchType === "byButton" ? "is-expanded" : "",
|
|
27
27
|
]);
|
|
28
28
|
const inputClassName = getClassName([
|
|
29
29
|
"input",
|
|
30
30
|
"is-unselectable",
|
|
31
|
-
`is-${
|
|
31
|
+
`is-${size}`,
|
|
32
32
|
rounded ? "is-rounded" : "",
|
|
33
33
|
]);
|
|
34
34
|
const dataAttributes = isNullOrUndefined(data)
|
|
@@ -37,7 +37,5 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
|
|
|
37
37
|
if (searchType === "byButton") {
|
|
38
38
|
return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }), _jsx("div", { className: "control", children: _jsx(Button, { type: "info", size: size, caption: "Search", disabled: disabled, isLoading: isLoading, onClick: onSearchButtonClick }) })] }));
|
|
39
39
|
}
|
|
40
|
-
|
|
41
|
-
return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
|
|
42
|
-
}
|
|
40
|
+
return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
|
|
43
41
|
}
|
|
@@ -1,40 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { TableProps } from "..";
|
|
3
3
|
import "./style.scss";
|
|
4
|
-
import { SortColumn, TableHeading } from "..";
|
|
5
|
-
/** Table props type */
|
|
6
|
-
export interface TableProps<TItem> extends BaseElementProps {
|
|
7
|
-
/** Header row */
|
|
8
|
-
headings: Array<TableHeading<TItem>>;
|
|
9
|
-
/** Table body */
|
|
10
|
-
children?: React.ReactNode;
|
|
11
|
-
/** Add border to all cells */
|
|
12
|
-
hasBorder?: boolean;
|
|
13
|
-
/** Is row hover effect active */
|
|
14
|
-
hoverable?: boolean;
|
|
15
|
-
/** Reduce space between cells */
|
|
16
|
-
narrow?: boolean;
|
|
17
|
-
/** Use all container width */
|
|
18
|
-
fullWidth?: boolean;
|
|
19
|
-
/** Is header sticks to page on scroll */
|
|
20
|
-
hasStickyHeader?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Header has border.
|
|
23
|
-
* @description Applied only with `hasStickyHeader` sets as `true`. Adds border effect
|
|
24
|
-
*/
|
|
25
|
-
headerWithBorder?: boolean;
|
|
26
|
-
/** Header has no borders */
|
|
27
|
-
headerBorderless?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Should rows be stripped.
|
|
30
|
-
* @description Even rows will have gray background
|
|
31
|
-
*/
|
|
32
|
-
zebra?: boolean;
|
|
33
|
-
/** Current sort column */
|
|
34
|
-
currentSortColumn?: SortColumn<TItem>;
|
|
35
|
-
/** Header click handler */
|
|
36
|
-
onHeaderClick?: (columnName: TableHeading<TItem>) => void;
|
|
37
|
-
}
|
|
38
4
|
/**
|
|
39
5
|
* Tiny table component.
|
|
40
6
|
* If no sorting is use - use `any` as generic param
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/component/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAChC,OAAO,cAAc,CAAC;AAItB;;;GAGG;AACH,iBAAS,KAAK,CAAC,KAAK,EAAE,EAClB,QAAQ,EAER,SAAiB,EAAE,SAAiB,EAAE,MAAc,EACpD,SAAiB,EAAE,KAAa,EAAE,gBAAwB,EAC1D,eAAuB,EAAE,gBAAwB,EAEjD,iBAAiB,EAAE,aAAa,EAChC,QAAQ,EAER,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CA4CjC;AAED,eAAe,KAAK,CAAC"}
|
|
@@ -7,7 +7,7 @@ import TableHeader from "../components/heading";
|
|
|
7
7
|
* Tiny table component.
|
|
8
8
|
* If no sorting is use - use `any` as generic param
|
|
9
9
|
*/
|
|
10
|
-
function Table({ headings, hasBorder, hoverable, narrow, fullWidth, zebra, headerBorderless, hasStickyHeader, headerWithBorder, currentSortColumn, onHeaderClick, children, className, title, data, }) {
|
|
10
|
+
function Table({ headings, hasBorder = false, hoverable = false, narrow = false, fullWidth = false, zebra = false, headerBorderless = false, hasStickyHeader = false, headerWithBorder = false, currentSortColumn, onHeaderClick, children, className, title, data, }) {
|
|
11
11
|
const elClassName = getClassName([
|
|
12
12
|
"bbr-table",
|
|
13
13
|
"table",
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseElementProps } from "../../types";
|
|
1
3
|
export interface TableHeading<TItem> {
|
|
2
4
|
/** Caption to display */
|
|
3
5
|
caption: string;
|
|
4
6
|
/** Is column sortable */
|
|
5
7
|
sortable: boolean;
|
|
6
8
|
/** Class names */
|
|
7
|
-
className
|
|
9
|
+
className?: string;
|
|
8
10
|
/** Name of model column*/
|
|
9
11
|
name?: keyof TItem;
|
|
10
12
|
}
|
|
@@ -15,4 +17,37 @@ export interface SortColumn<TModel> {
|
|
|
15
17
|
/** Is column sorted ascending */
|
|
16
18
|
ascending: boolean;
|
|
17
19
|
}
|
|
20
|
+
/** Table props type */
|
|
21
|
+
export interface TableProps<TItem> extends BaseElementProps {
|
|
22
|
+
/** Header row */
|
|
23
|
+
headings: Array<TableHeading<TItem>>;
|
|
24
|
+
/** Table body */
|
|
25
|
+
children?: React.ReactNode;
|
|
26
|
+
/** Add border to all cells */
|
|
27
|
+
hasBorder?: boolean;
|
|
28
|
+
/** Is row hover effect active */
|
|
29
|
+
hoverable?: boolean;
|
|
30
|
+
/** Reduce space between cells */
|
|
31
|
+
narrow?: boolean;
|
|
32
|
+
/** Use all container width */
|
|
33
|
+
fullWidth?: boolean;
|
|
34
|
+
/** Is header sticks to page on scroll */
|
|
35
|
+
hasStickyHeader?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Header has border.
|
|
38
|
+
* @description Applied only with `hasStickyHeader` sets as `true`. Adds border effect
|
|
39
|
+
*/
|
|
40
|
+
headerWithBorder?: boolean;
|
|
41
|
+
/** Header has no borders */
|
|
42
|
+
headerBorderless?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Should rows be stripped.
|
|
45
|
+
* @description Even rows will have gray background
|
|
46
|
+
*/
|
|
47
|
+
zebra?: boolean;
|
|
48
|
+
/** Current sort column */
|
|
49
|
+
currentSortColumn?: SortColumn<TItem>;
|
|
50
|
+
/** Header click handler */
|
|
51
|
+
onHeaderClick?: (columnName: TableHeading<TItem>) => void;
|
|
52
|
+
}
|
|
18
53
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY,CAAC,KAAK;IAC/B,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB;IAClB,SAAS,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,YAAY,CAAC,KAAK;IAC/B,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAElB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,KAAK,CAAC;CACtB;AAED,gCAAgC;AAChC,MAAM,WAAW,UAAU,CAAC,MAAM;IAC9B,kBAAkB;IAClB,UAAU,EAAE,MAAM,MAAM,CAAC;IAEzB,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,uBAAuB;AACvB,MAAM,WAAW,UAAU,CAAC,KAAK,CAAE,SAAQ,gBAAgB;IACvD,iBAAiB;IACjB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAErC,iBAAiB;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yCAAyC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;MAGE;IACF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAEtC,2BAA2B;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC7D"}
|
|
@@ -1,33 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC } from "react";
|
|
2
2
|
import "./style.scss";
|
|
3
|
-
import {
|
|
4
|
-
/** Tabs component props type */
|
|
5
|
-
export interface TabsProps extends BaseElementProps {
|
|
6
|
-
/** Tabs */
|
|
7
|
-
items: Array<TabItem>;
|
|
8
|
-
/** Handler of changing current active item */
|
|
9
|
-
onActiveItemChange: (item: TabItem) => void;
|
|
10
|
-
/**
|
|
11
|
-
* Active item by default.
|
|
12
|
-
* If not set - first item will be active
|
|
13
|
-
*/
|
|
14
|
-
defaultActive?: TabItem;
|
|
15
|
-
/**
|
|
16
|
-
* Component size.
|
|
17
|
-
* Default is `normal`
|
|
18
|
-
*/
|
|
19
|
-
size?: ElementSize;
|
|
20
|
-
/** Component position */
|
|
21
|
-
position?: ElementPosition;
|
|
22
|
-
/** Component style */
|
|
23
|
-
style?: TabsStyle;
|
|
24
|
-
/** Is component tabs should take all width of parent */
|
|
25
|
-
fullWidth?: boolean;
|
|
26
|
-
}
|
|
3
|
+
import { TabsProps } from "..";
|
|
27
4
|
/**
|
|
28
5
|
* Tabs panel
|
|
29
6
|
* @throws Items are empty
|
|
30
7
|
*/
|
|
31
|
-
declare const Tabs:
|
|
8
|
+
declare const Tabs: FC<TabsProps>;
|
|
32
9
|
export default Tabs;
|
|
33
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwD,EAAE,EAAE,MAAM,OAAO,CAAC;AAOjF,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAW,SAAS,EAAa,MAAM,IAAI,CAAC;AAUnD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAsFvB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -22,8 +22,8 @@ const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, posit
|
|
|
22
22
|
}
|
|
23
23
|
const [activeItem, setActiveItem] = useState(defaultActive);
|
|
24
24
|
const isFirstRun = useRef(true);
|
|
25
|
-
const onTabsClick = useCallback((
|
|
26
|
-
const closestTab =
|
|
25
|
+
const onTabsClick = useCallback((event) => {
|
|
26
|
+
const closestTab = event.target.closest(".bbr-tabs__tab");
|
|
27
27
|
if (isNullOrUndefined(closestTab)) {
|
|
28
28
|
return;
|
|
29
29
|
}
|
|
@@ -56,7 +56,7 @@ const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, posit
|
|
|
56
56
|
const dataAttributes = isNullOrUndefined(data)
|
|
57
57
|
? undefined
|
|
58
58
|
: mapDataAttributes(data);
|
|
59
|
-
return (_jsx("nav", {
|
|
59
|
+
return (_jsx("nav", { className: elClassName, title: title, ...dataAttributes, onClick: onTabsClick, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
|
|
60
60
|
};
|
|
61
61
|
export default Tabs;
|
|
62
62
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ElementIcon } from "../../types";
|
|
1
|
+
import { BaseElementProps, ElementIcon, ElementPosition, ElementSize } from "../../types";
|
|
2
2
|
/** Tabs component style */
|
|
3
3
|
export declare enum TabsStyle {
|
|
4
4
|
/**
|
|
@@ -29,4 +29,27 @@ export interface TabItem {
|
|
|
29
29
|
/** Icon configuration */
|
|
30
30
|
icon?: ElementIcon;
|
|
31
31
|
}
|
|
32
|
+
/** Tabs component props type */
|
|
33
|
+
export interface TabsProps extends BaseElementProps {
|
|
34
|
+
/** Tabs */
|
|
35
|
+
items: Array<TabItem>;
|
|
36
|
+
/** Handler of changing current active item */
|
|
37
|
+
onActiveItemChange: (item: TabItem) => void;
|
|
38
|
+
/**
|
|
39
|
+
* Active item by default.
|
|
40
|
+
* If not set - first item will be active
|
|
41
|
+
*/
|
|
42
|
+
defaultActive?: TabItem;
|
|
43
|
+
/**
|
|
44
|
+
* Component size.
|
|
45
|
+
* Default is `normal`
|
|
46
|
+
*/
|
|
47
|
+
size?: ElementSize;
|
|
48
|
+
/** Component position */
|
|
49
|
+
position?: ElementPosition;
|
|
50
|
+
/** Component style */
|
|
51
|
+
style?: TabsStyle;
|
|
52
|
+
/** Is component tabs should take all width of parent */
|
|
53
|
+
fullWidth?: boolean;
|
|
54
|
+
}
|
|
32
55
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzF,2BAA2B;AAC3B,oBAAY,SAAS;IACjB;;;OAGG;IACH,OAAO,KAAK;IAEZ;;;OAGG;IACH,KAAK,aAAa;IAElB;;OAEG;IACH,WAAW,cAAc;IAEzB;;OAEG;IACH,kBAAkB,gCAAgC;CACrD;AAED,eAAe;AACf,MAAM,WAAW,OAAO;IACpB,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IAEX,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,iGAON,QAAQ,KAAG,WAuCb,CAAC;AAEF,eAAe,GAAG,CAAC"}
|
|
@@ -16,17 +16,17 @@ const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default,
|
|
|
16
16
|
!isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
|
|
17
17
|
lightColor && isNullOrUndefined(customColor) ? "is-light" : "",
|
|
18
18
|
rounded ? "is-rounded" : "",
|
|
19
|
-
size === ElementSize.Normal
|
|
19
|
+
size === ElementSize.Normal ? "" : `is-${size}`,
|
|
20
20
|
isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
|
|
21
21
|
]);
|
|
22
22
|
const dataAttributes = isNullOrUndefined(data)
|
|
23
23
|
? undefined
|
|
24
24
|
: mapDataAttributes(data);
|
|
25
|
-
return (_jsx("span", {
|
|
25
|
+
return (_jsx("span", { className: elClassName, style: isNullOrUndefined(customColor)
|
|
26
26
|
? undefined
|
|
27
27
|
: {
|
|
28
28
|
color: customColor?.color,
|
|
29
29
|
backgroundColor: customColor?.backgroundColor,
|
|
30
|
-
}, title: title, ...dataAttributes, children: content }));
|
|
30
|
+
}, title: title, onClick: onClick, ...dataAttributes, children: content }));
|
|
31
31
|
};
|
|
32
32
|
export default Tag;
|