@bodynarf/react.components 1.12.6 → 1.13.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/changelog.md +54 -0
- package/components/accordion/component/index.d.ts +6 -6
- package/components/accordion/component/index.d.ts.map +1 -1
- package/components/accordion/component/index.js +33 -35
- package/components/accordion/index.d.ts +2 -2
- package/components/accordion/index.js +2 -2
- package/components/accordion/types.d.ts +16 -17
- package/components/accordion/types.d.ts.map +1 -1
- package/components/accordion/types.js +1 -1
- package/components/anchor/component/index.d.ts +7 -5
- package/components/anchor/component/index.d.ts.map +1 -1
- package/components/anchor/component/index.js +23 -20
- package/components/anchor/components/anchorWithIcon/index.d.ts +10 -10
- package/components/anchor/components/anchorWithIcon/index.d.ts.map +1 -1
- package/components/anchor/components/anchorWithIcon/index.js +24 -24
- package/components/anchor/components/simpleAnchor/index.d.ts +4 -5
- package/components/anchor/components/simpleAnchor/index.d.ts.map +1 -1
- package/components/anchor/components/simpleAnchor/index.js +11 -11
- package/components/anchor/index.d.ts +2 -2
- package/components/anchor/index.js +2 -2
- package/components/anchor/types.d.ts +19 -16
- package/components/anchor/types.d.ts.map +1 -1
- package/components/anchor/types.js +1 -1
- package/components/breadcrumbs/component/index.d.ts +8 -8
- package/components/breadcrumbs/component/index.d.ts.map +1 -1
- package/components/breadcrumbs/component/index.js +38 -37
- package/components/breadcrumbs/index.d.ts +2 -2
- package/components/breadcrumbs/index.js +2 -2
- package/components/breadcrumbs/types.d.ts +54 -46
- package/components/breadcrumbs/types.d.ts.map +1 -1
- package/components/breadcrumbs/types.js +1 -1
- package/components/button/component/index.d.ts +9 -8
- package/components/button/component/index.d.ts.map +1 -1
- package/components/button/component/index.js +35 -33
- package/components/button/components/buttonWithIcon/index.d.ts +5 -4
- package/components/button/components/buttonWithIcon/index.d.ts.map +1 -1
- package/components/button/components/buttonWithIcon/index.js +27 -27
- package/components/button/components/simpleButton/index.d.ts +5 -5
- package/components/button/components/simpleButton/index.d.ts.map +1 -1
- package/components/button/components/simpleButton/index.js +11 -11
- package/components/button/index.d.ts +2 -2
- package/components/button/index.js +2 -2
- package/components/button/types.d.ts +71 -37
- package/components/button/types.d.ts.map +1 -1
- package/components/button/types.js +30 -1
- package/components/dropdown/component/index.d.ts +6 -6
- package/components/dropdown/component/index.d.ts.map +1 -1
- package/components/dropdown/component/index.js +12 -12
- package/components/dropdown/components/compact/index.d.ts +10 -10
- package/components/dropdown/components/compact/index.d.ts.map +1 -1
- package/components/dropdown/components/compact/index.js +80 -80
- package/components/dropdown/components/item/index.d.ts +14 -14
- package/components/dropdown/components/item/index.d.ts.map +1 -1
- package/components/dropdown/components/item/index.js +39 -38
- package/components/dropdown/components/label/component/index.d.ts +26 -26
- package/components/dropdown/components/label/component/index.d.ts.map +1 -1
- package/components/dropdown/components/label/component/index.js +16 -16
- package/components/dropdown/components/label/components/empty/index.d.ts +7 -7
- package/components/dropdown/components/label/components/empty/index.d.ts.map +1 -1
- package/components/dropdown/components/label/components/empty/index.js +16 -16
- package/components/dropdown/components/label/components/selected/index.d.ts +7 -7
- package/components/dropdown/components/label/components/selected/index.d.ts.map +1 -1
- package/components/dropdown/components/label/components/selected/index.js +20 -20
- package/components/dropdown/components/label/components/selectedWithIcon/index.d.ts +7 -7
- package/components/dropdown/components/label/components/selectedWithIcon/index.d.ts.map +1 -1
- package/components/dropdown/components/label/components/selectedWithIcon/index.js +28 -28
- package/components/dropdown/components/label/components/withSearch/index.d.ts +15 -15
- package/components/dropdown/components/label/components/withSearch/index.d.ts.map +1 -1
- package/components/dropdown/components/label/components/withSearch/index.js +33 -33
- package/components/dropdown/components/label/index.d.ts +1 -1
- package/components/dropdown/components/label/index.js +1 -1
- package/components/dropdown/components/withLabel/index.d.ts +5 -5
- package/components/dropdown/components/withLabel/index.js +11 -11
- package/components/dropdown/index.d.ts +2 -2
- package/components/dropdown/index.js +2 -2
- package/components/dropdown/types.d.ts +65 -64
- package/components/dropdown/types.d.ts.map +1 -1
- package/components/dropdown/types.js +1 -1
- package/components/file/component/index.d.ts +6 -6
- package/components/file/component/index.d.ts.map +1 -1
- package/components/file/component/index.js +51 -50
- package/components/file/component/styles.scss +13 -0
- package/components/file/index.d.ts +2 -2
- package/components/file/index.js +2 -2
- package/components/file/types.d.ts +31 -31
- package/components/file/types.d.ts.map +1 -1
- package/components/file/types.js +1 -1
- package/components/icon/component/index.d.ts +8 -8
- package/components/icon/component/index.d.ts.map +1 -1
- package/components/icon/component/index.js +23 -28
- package/components/icon/component/style.scss +3 -3
- package/components/icon/index.d.ts +2 -2
- package/components/icon/index.js +2 -2
- package/components/icon/types.d.ts +13 -15
- package/components/icon/types.d.ts.map +1 -1
- package/components/icon/types.js +1 -1
- package/components/index.d.ts +10 -10
- package/components/index.js +10 -10
- package/components/multiselect/component/index.d.ts +7 -7
- package/components/multiselect/component/index.js +13 -13
- package/components/multiselect/components/item/index.d.ts +24 -24
- package/components/multiselect/components/item/index.d.ts.map +1 -1
- package/components/multiselect/components/item/index.js +63 -62
- package/components/multiselect/components/label/component/index.d.ts +19 -19
- package/components/multiselect/components/label/component/index.d.ts.map +1 -1
- package/components/multiselect/components/label/component/index.js +12 -12
- package/components/multiselect/components/label/components/empty/index.d.ts +7 -7
- package/components/multiselect/components/label/components/empty/index.d.ts.map +1 -1
- package/components/multiselect/components/label/components/empty/index.js +16 -16
- package/components/multiselect/components/label/components/nonEmpty/index.d.ts +7 -7
- package/components/multiselect/components/label/components/nonEmpty/index.d.ts.map +1 -1
- package/components/multiselect/components/label/components/nonEmpty/index.js +16 -16
- package/components/multiselect/components/label/index.d.ts +1 -1
- package/components/multiselect/components/label/index.js +1 -1
- package/components/multiselect/components/withLabel/index.d.ts +5 -5
- package/components/multiselect/components/withLabel/index.js +11 -11
- package/components/multiselect/components/withoutLabel/index.d.ts +9 -9
- package/components/multiselect/components/withoutLabel/index.d.ts.map +1 -1
- package/components/multiselect/components/withoutLabel/index.js +85 -84
- package/components/multiselect/index.d.ts +2 -2
- package/components/multiselect/index.js +2 -2
- package/components/multiselect/types.d.ts +32 -40
- package/components/multiselect/types.d.ts.map +1 -1
- package/components/multiselect/types.js +1 -1
- package/components/paginator/component/index.d.ts +8 -8
- package/components/paginator/component/index.d.ts.map +1 -1
- package/components/paginator/component/index.js +65 -70
- package/components/paginator/index.d.ts +2 -2
- package/components/paginator/index.js +2 -2
- package/components/paginator/types.d.ts +54 -54
- package/components/paginator/types.d.ts.map +1 -1
- package/components/paginator/types.js +1 -1
- package/components/primitives/checkbox/component/index.d.ts +5 -6
- package/components/primitives/checkbox/component/index.d.ts.map +1 -1
- package/components/primitives/checkbox/component/index.js +43 -41
- package/components/primitives/checkbox/index.d.ts +2 -2
- package/components/primitives/checkbox/index.js +2 -2
- package/components/primitives/checkbox/types.d.ts +26 -24
- package/components/primitives/checkbox/types.d.ts.map +1 -1
- package/components/primitives/checkbox/types.js +1 -1
- package/components/primitives/color/component/index.d.ts +5 -6
- package/components/primitives/color/component/index.d.ts.map +1 -1
- package/components/primitives/color/component/index.js +10 -10
- package/components/primitives/color/components/picker/index.d.ts +19 -19
- package/components/primitives/color/components/picker/index.d.ts.map +1 -1
- package/components/primitives/color/components/picker/index.js +43 -42
- package/components/primitives/color/components/withLabel/index.d.ts +5 -5
- package/components/primitives/color/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/color/components/withLabel/index.js +25 -25
- package/components/primitives/color/components/withoutLabel/index.d.ts +5 -5
- package/components/primitives/color/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/color/components/withoutLabel/index.js +21 -21
- package/components/primitives/color/index.d.ts +2 -2
- package/components/primitives/color/index.js +2 -2
- package/components/primitives/color/types.d.ts +23 -23
- package/components/primitives/color/types.d.ts.map +1 -1
- package/components/primitives/color/types.js +1 -1
- package/components/primitives/date/component/index.d.ts +5 -6
- package/components/primitives/date/component/index.d.ts.map +1 -1
- package/components/primitives/date/component/index.js +31 -31
- package/components/primitives/date/index.d.ts +2 -2
- package/components/primitives/date/index.js +2 -2
- package/components/primitives/date/types.d.ts +3 -8
- package/components/primitives/date/types.d.ts.map +1 -1
- package/components/primitives/date/types.js +1 -1
- package/components/primitives/index.d.ts +7 -7
- package/components/primitives/index.js +7 -7
- package/components/primitives/internal/componentWithLabel/index.d.ts +16 -16
- package/components/primitives/internal/componentWithLabel/index.d.ts.map +1 -1
- package/components/primitives/internal/componentWithLabel/index.js +30 -30
- package/components/primitives/internal/hint/index.d.ts +8 -8
- package/components/primitives/internal/hint/index.d.ts.map +1 -1
- package/components/primitives/internal/hint/index.js +49 -48
- package/components/primitives/multiline/component/index.d.ts +4 -5
- package/components/primitives/multiline/component/index.d.ts.map +1 -1
- package/components/primitives/multiline/component/index.js +11 -11
- package/components/primitives/multiline/components/withLabel/index.d.ts +4 -5
- package/components/primitives/multiline/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/multiline/components/withLabel/index.js +27 -27
- package/components/primitives/multiline/components/withoutLabel/index.d.ts +4 -5
- package/components/primitives/multiline/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/multiline/components/withoutLabel/index.js +27 -27
- package/components/primitives/multiline/index.d.ts +2 -2
- package/components/primitives/multiline/index.js +2 -2
- package/components/primitives/multiline/types.d.ts +8 -10
- package/components/primitives/multiline/types.d.ts.map +1 -1
- package/components/primitives/multiline/types.js +1 -1
- package/components/primitives/number/component/index.d.ts +4 -5
- package/components/primitives/number/component/index.d.ts.map +1 -1
- package/components/primitives/number/component/index.js +11 -11
- package/components/primitives/number/components/withLabel/index.d.ts +4 -5
- package/components/primitives/number/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/number/components/withLabel/index.js +27 -27
- package/components/primitives/number/components/withoutLabel/index.d.ts +4 -5
- package/components/primitives/number/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/number/components/withoutLabel/index.js +27 -27
- package/components/primitives/number/index.d.ts +2 -2
- package/components/primitives/number/index.js +2 -2
- package/components/primitives/number/types.d.ts +10 -12
- package/components/primitives/number/types.d.ts.map +1 -1
- package/components/primitives/number/types.js +1 -1
- package/components/primitives/password/component/index.d.ts +5 -5
- package/components/primitives/password/component/index.d.ts.map +1 -1
- package/components/primitives/password/component/index.js +12 -12
- package/components/primitives/password/components/withLabel/index.d.ts +3 -3
- package/components/primitives/password/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/password/components/withLabel/index.js +34 -34
- package/components/primitives/password/components/withoutLabel/index.d.ts +3 -3
- package/components/primitives/password/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/password/components/withoutLabel/index.js +34 -34
- package/components/primitives/password/index.d.ts +2 -2
- package/components/primitives/password/index.js +2 -2
- package/components/primitives/password/types.d.ts +14 -14
- package/components/primitives/password/types.d.ts.map +1 -1
- package/components/primitives/password/types.js +1 -1
- package/components/primitives/text/component/index.d.ts +4 -5
- package/components/primitives/text/component/index.d.ts.map +1 -1
- package/components/primitives/text/component/index.js +11 -11
- package/components/primitives/text/components/withLabel/index.d.ts +4 -5
- package/components/primitives/text/components/withLabel/index.d.ts.map +1 -1
- package/components/primitives/text/components/withLabel/index.js +27 -27
- package/components/primitives/text/components/withoutLabel/index.d.ts +4 -5
- package/components/primitives/text/components/withoutLabel/index.d.ts.map +1 -1
- package/components/primitives/text/components/withoutLabel/index.js +27 -27
- package/components/primitives/text/index.d.ts +2 -2
- package/components/primitives/text/index.js +2 -2
- package/components/primitives/text/types.d.ts +3 -6
- package/components/primitives/text/types.d.ts.map +1 -1
- package/components/primitives/text/types.js +1 -1
- package/components/search/component/index.d.ts +6 -5
- package/components/search/component/index.d.ts.map +1 -1
- package/components/search/component/index.js +41 -40
- package/components/search/index.d.ts +2 -2
- package/components/search/index.js +2 -2
- package/components/search/types.d.ts +41 -41
- package/components/search/types.d.ts.map +1 -1
- package/components/search/types.js +1 -1
- package/components/table/component/index.d.ts +8 -9
- package/components/table/component/index.d.ts.map +1 -1
- package/components/table/component/index.js +28 -29
- package/components/table/components/heading/index.d.ts +14 -12
- package/components/table/components/heading/index.d.ts.map +1 -1
- package/components/table/components/heading/index.js +21 -21
- package/components/table/index.d.ts +2 -2
- package/components/table/index.js +2 -2
- package/components/table/types.d.ts +52 -52
- package/components/table/types.d.ts.map +1 -1
- package/components/table/types.js +1 -1
- package/components/tabs/component/index.d.ts +9 -9
- package/components/tabs/component/index.d.ts.map +1 -1
- package/components/tabs/component/index.js +68 -74
- package/components/tabs/components/item/index.d.ts +11 -12
- package/components/tabs/components/item/index.d.ts.map +1 -1
- package/components/tabs/components/item/index.js +28 -28
- package/components/tabs/index.d.ts +2 -2
- package/components/tabs/index.js +2 -2
- package/components/tabs/types.d.ts +54 -54
- package/components/tabs/types.js +22 -22
- package/components/tag/component/index.d.ts +6 -6
- package/components/tag/component/index.d.ts.map +1 -1
- package/components/tag/component/index.js +32 -32
- package/components/tag/index.d.ts +2 -2
- package/components/tag/index.js +2 -2
- package/components/tag/types.d.ts +24 -26
- package/components/tag/types.d.ts.map +1 -1
- package/components/tag/types.js +1 -1
- package/hooks/index.d.ts +11 -5
- package/hooks/index.d.ts.map +1 -1
- package/hooks/index.js +11 -5
- package/hooks/useComponentOutsideClick.d.ts +11 -11
- package/hooks/useComponentOutsideClick.d.ts.map +1 -1
- package/hooks/useComponentOutsideClick.js +31 -31
- package/hooks/useDebounceHandler.d.ts +17 -17
- package/hooks/useDebounceHandler.d.ts.map +1 -1
- package/hooks/useDebounceHandler.js +30 -30
- package/hooks/useEventListener.d.ts +13 -0
- package/hooks/useEventListener.d.ts.map +1 -0
- package/hooks/useEventListener.js +23 -0
- package/hooks/useInterval.d.ts +12 -0
- package/hooks/useInterval.d.ts.map +1 -0
- package/hooks/useInterval.js +23 -0
- package/hooks/useLocalStorage.d.ts +13 -0
- package/hooks/useLocalStorage.d.ts.map +1 -0
- package/hooks/useLocalStorage.js +23 -0
- package/hooks/useMount.d.ts +11 -11
- package/hooks/useMount.d.ts.map +1 -1
- package/hooks/useMount.js +16 -16
- package/hooks/usePagination.d.ts +19 -19
- package/hooks/usePagination.d.ts.map +1 -1
- package/hooks/usePagination.js +37 -37
- package/hooks/usePrevious.d.ts +12 -0
- package/hooks/usePrevious.d.ts.map +1 -0
- package/hooks/usePrevious.js +18 -0
- package/hooks/useTimeout.d.ts +12 -0
- package/hooks/useTimeout.d.ts.map +1 -0
- package/hooks/useTimeout.js +23 -0
- package/hooks/useUnmount.d.ts +8 -8
- package/hooks/useUnmount.d.ts.map +1 -1
- package/hooks/useUnmount.js +22 -22
- package/hooks/useUpdateEffect.d.ts +16 -0
- package/hooks/useUpdateEffect.d.ts.map +1 -0
- package/hooks/useUpdateEffect.js +25 -0
- package/index.d.ts +4 -4
- package/index.js +4 -4
- package/package.json +12 -10
- package/tsconfig.tsbuildinfo +1 -1
- package/types/{baseElementProps.d.ts → base/baseElementProps.d.ts} +10 -10
- package/types/base/baseElementProps.d.ts.map +1 -0
- package/types/{baseElementProps.js → base/baseElementProps.js} +1 -1
- package/types/{baseInputElementProps.d.ts → base/baseInputElementProps.d.ts} +49 -41
- package/types/base/baseInputElementProps.d.ts.map +1 -0
- package/types/{baseInputElementProps.js → base/baseInputElementProps.js} +1 -1
- package/types/base/blurableElement.d.ts +9 -0
- package/types/base/blurableElement.d.ts.map +1 -0
- package/types/base/blurableElement.js +1 -0
- package/types/base/clickableElement.d.ts +7 -0
- package/types/base/clickableElement.d.ts.map +1 -0
- package/types/base/clickableElement.js +1 -0
- package/types/base/index.d.ts +5 -0
- package/types/base/index.d.ts.map +1 -0
- package/types/base/index.js +4 -0
- package/types/dataAttributes.d.ts +8 -8
- package/types/dataAttributes.d.ts.map +1 -1
- package/types/dataAttributes.js +1 -1
- package/types/elementIcon.d.ts +21 -21
- package/types/elementIcon.d.ts.map +1 -1
- package/types/elementIcon.js +1 -1
- package/types/{elementColor.d.ts → enums/elementColor.d.ts} +17 -17
- package/types/enums/elementColor.d.ts.map +1 -0
- package/types/{elementColor.js → enums/elementColor.js} +18 -18
- package/types/{elementPosition.d.ts → enums/elementPosition.d.ts} +11 -11
- package/types/enums/elementPosition.d.ts.map +1 -0
- package/types/{elementPosition.js → enums/elementPosition.js} +10 -10
- package/types/{elementSize.d.ts → enums/elementSize.d.ts} +11 -11
- package/types/enums/elementSize.d.ts.map +1 -0
- package/types/{elementSize.js → enums/elementSize.js} +12 -12
- package/types/enums/index.d.ts +4 -0
- package/types/enums/index.d.ts.map +1 -0
- package/types/enums/index.js +3 -0
- package/types/hintConfiguration.d.ts +12 -12
- package/types/hintConfiguration.d.ts.map +1 -1
- package/types/hintConfiguration.js +1 -1
- package/types/index.d.ts +7 -10
- package/types/index.d.ts.map +1 -1
- package/types/index.js +7 -10
- package/types/labelConfiguration.d.ts +14 -14
- package/types/labelConfiguration.d.ts.map +1 -1
- package/types/labelConfiguration.js +1 -1
- package/types/validation/index.d.ts +2 -2
- package/types/validation/index.js +2 -2
- package/types/validation/state.d.ts +8 -8
- package/types/validation/state.js +1 -1
- package/types/validation/status.d.ts +9 -9
- package/types/validation/status.js +10 -10
- package/utils/dataAttributes.d.ts +7 -7
- package/utils/dataAttributes.d.ts.map +1 -1
- package/utils/dataAttributes.js +22 -21
- package/utils/index.d.ts +3 -2
- package/utils/index.d.ts.map +1 -1
- package/utils/index.js +3 -2
- package/utils/styles.d.ts +14 -0
- package/utils/styles.d.ts.map +1 -0
- package/utils/styles.js +33 -0
- package/utils/validation.d.ts +10 -10
- package/utils/validation.d.ts.map +1 -1
- package/utils/validation.js +20 -20
- package/bodynarf-react.components-1.12.2.tgz +0 -0
- package/bodynarf-react.components-1.12.3.tgz +0 -0
- package/bodynarf-react.components-1.12.4.tgz +0 -0
- package/types/baseElementProps.d.ts.map +0 -1
- package/types/baseInputElementProps.d.ts.map +0 -1
- package/types/elementColor.d.ts.map +0 -1
- package/types/elementPosition.d.ts.map +0 -1
- package/types/elementSize.d.ts.map +0 -1
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
|
|
2
|
-
import { BaseElementProps } from "../../types";
|
|
3
|
-
export interface TableHeading
|
|
4
|
-
/** Caption to display */
|
|
5
|
-
caption: string;
|
|
6
|
-
/** Is column sortable */
|
|
7
|
-
sortable: boolean;
|
|
8
|
-
/** Class names */
|
|
9
|
-
className?: string;
|
|
10
|
-
/** Name of model column*/
|
|
11
|
-
name?:
|
|
12
|
-
}
|
|
13
|
-
/** Generic sort column model */
|
|
14
|
-
export interface SortColumn
|
|
15
|
-
/** Column name */
|
|
16
|
-
columnName:
|
|
17
|
-
/** Is column sorted ascending */
|
|
18
|
-
ascending: boolean;
|
|
19
|
-
}
|
|
20
|
-
/** Table props type */
|
|
21
|
-
export
|
|
22
|
-
/** Header row */
|
|
23
|
-
headings: Array<TableHeading
|
|
24
|
-
/** Table body */
|
|
25
|
-
children
|
|
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
|
|
50
|
-
/** Header click handler */
|
|
51
|
-
onHeaderClick?: (columnName: TableHeading
|
|
52
|
-
}
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { BaseElementProps } from "../../types";
|
|
3
|
+
export interface TableHeading {
|
|
4
|
+
/** Caption to display */
|
|
5
|
+
caption: string;
|
|
6
|
+
/** Is column sortable */
|
|
7
|
+
sortable: boolean;
|
|
8
|
+
/** Class names */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Name of model column*/
|
|
11
|
+
name?: string;
|
|
12
|
+
}
|
|
13
|
+
/** Generic sort column model */
|
|
14
|
+
export interface SortColumn {
|
|
15
|
+
/** Column name */
|
|
16
|
+
columnName: string;
|
|
17
|
+
/** Is column sorted ascending */
|
|
18
|
+
ascending: boolean;
|
|
19
|
+
}
|
|
20
|
+
/** Table props type */
|
|
21
|
+
export type TableProps = BaseElementProps & {
|
|
22
|
+
/** Header row */
|
|
23
|
+
headings: Array<TableHeading>;
|
|
24
|
+
/** Table body */
|
|
25
|
+
children: 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;
|
|
50
|
+
/** Header click handler */
|
|
51
|
+
onHeaderClick?: (columnName: TableHeading) => void;
|
|
52
|
+
};
|
|
53
53
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,YAAY;IACzB,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,CAAC;CACjB;AAED,gCAAgC;AAChC,MAAM,WAAW,UAAU;IACvB,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAC;IAEnB,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,uBAAuB;AACvB,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG;IACxC,iBAAiB;IACjB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAE9B,iBAAiB;IACjB,QAAQ,EAAE,SAAS,CAAC;IAEpB,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;IAE/B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAC;CACtD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { FC } from "react";
|
|
2
|
-
import "./style.scss";
|
|
3
|
-
import { TabsProps } from "..";
|
|
4
|
-
/**
|
|
5
|
-
* Tabs panel
|
|
6
|
-
* @throws Items are empty
|
|
7
|
-
*/
|
|
8
|
-
declare const Tabs: FC<TabsProps>;
|
|
9
|
-
export default Tabs;
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import "./style.scss";
|
|
3
|
+
import { TabsProps } from "..";
|
|
4
|
+
/**
|
|
5
|
+
* Tabs panel
|
|
6
|
+
* @throws Items are empty
|
|
7
|
+
*/
|
|
8
|
+
declare const Tabs: FC<TabsProps>;
|
|
9
|
+
export default Tabs;
|
|
10
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":"AAAA,OAAO,EAAwD,EAAE,EAAE,MAAM,OAAO,CAAC;AAOjF,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAW,SAAS,EAAa,MAAM,IAAI,CAAC;
|
|
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;AAGnD;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAsFvB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,74 +1,68 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useState, useEffect, useRef } from "react";
|
|
3
|
-
import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
|
-
import { ElementPosition, ElementSize } from "../../../types";
|
|
5
|
-
import { mapDataAttributes } from "../../../utils";
|
|
6
|
-
import "./style.scss";
|
|
7
|
-
import { TabsStyle } from "..";
|
|
8
|
-
import TabItemComponent from "../components/item";
|
|
9
|
-
/**
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
notAllowedSizes ??= [];
|
|
70
|
-
if (isNullOrUndefined(size) || notAllowedSizes.includes(size)) {
|
|
71
|
-
return "";
|
|
72
|
-
}
|
|
73
|
-
return `is-${size}`;
|
|
74
|
-
};
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useState, useEffect, useRef } from "react";
|
|
3
|
+
import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
|
|
4
|
+
import { ElementPosition, ElementSize } from "../../../types";
|
|
5
|
+
import { getPositionClassName, mapDataAttributes } from "../../../utils";
|
|
6
|
+
import "./style.scss";
|
|
7
|
+
import { TabsStyle } from "..";
|
|
8
|
+
import TabItemComponent from "../components/item";
|
|
9
|
+
/**
|
|
10
|
+
* Tabs panel
|
|
11
|
+
* @throws Items are empty
|
|
12
|
+
*/
|
|
13
|
+
const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, position = ElementPosition.Left, style = TabsStyle.default, fullWidth = false, className, title, data, }) => {
|
|
14
|
+
if (items.length === 0) {
|
|
15
|
+
throw new Error("Invalid configuration. Tab items must be defined");
|
|
16
|
+
}
|
|
17
|
+
const [activeItem, setActiveItem] = useState(defaultActive);
|
|
18
|
+
const isFirstRun = useRef(true);
|
|
19
|
+
const onTabsClick = useCallback((event) => {
|
|
20
|
+
const closestTab = event.target.closest(".bbr-tabs__tab");
|
|
21
|
+
if (isNullOrUndefined(closestTab)) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
const itemId = closestTab.attributes.getNamedItem("data-item-id")?.value ?? "";
|
|
25
|
+
if (isNullOrEmpty(itemId)) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
const item = items.find(({ id }) => id === itemId);
|
|
29
|
+
if (isNullOrUndefined(item) || item === activeItem) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
setActiveItem(item);
|
|
33
|
+
}, [activeItem, items]);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
if (isFirstRun.current) {
|
|
36
|
+
isFirstRun.current = false;
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
onActiveItemChange(activeItem);
|
|
40
|
+
}, [activeItem, onActiveItemChange]);
|
|
41
|
+
const elClassName = getClassName([
|
|
42
|
+
"bbr-tabs",
|
|
43
|
+
"tabs",
|
|
44
|
+
className,
|
|
45
|
+
getPositionClassName(position),
|
|
46
|
+
getSizeClassName(size, [ElementSize.Normal]),
|
|
47
|
+
style,
|
|
48
|
+
fullWidth ? "is-fullwidth" : "",
|
|
49
|
+
]);
|
|
50
|
+
const dataAttributes = isNullOrUndefined(data)
|
|
51
|
+
? undefined
|
|
52
|
+
: mapDataAttributes(data);
|
|
53
|
+
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)) }) }));
|
|
54
|
+
};
|
|
55
|
+
export default Tabs;
|
|
56
|
+
/**
|
|
57
|
+
* Get class name for specified size and constraints
|
|
58
|
+
* @param size Component size
|
|
59
|
+
* @param notAllowedSizes Sizes that not applicable to component
|
|
60
|
+
* @returns Class name for react element
|
|
61
|
+
*/
|
|
62
|
+
const getSizeClassName = (size, notAllowedSizes) => {
|
|
63
|
+
notAllowedSizes ??= [];
|
|
64
|
+
if (isNullOrUndefined(size) || notAllowedSizes.includes(size)) {
|
|
65
|
+
return "";
|
|
66
|
+
}
|
|
67
|
+
return `is-${size}`;
|
|
68
|
+
};
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
item
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export default TabItem;
|
|
1
|
+
import { TabItem as Item } from "../..";
|
|
2
|
+
/** Tabs panel single tab item component props type */
|
|
3
|
+
export interface TabItemProps {
|
|
4
|
+
/** Tab item */
|
|
5
|
+
item: Item;
|
|
6
|
+
/** Active item identifier */
|
|
7
|
+
activeItem: string;
|
|
8
|
+
}
|
|
9
|
+
/** Tabs panel single tab item component */
|
|
10
|
+
declare const TabItem: ({ item, activeItem }: TabItemProps) => JSX.Element;
|
|
11
|
+
export default TabItem;
|
|
13
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,OAAO,CAAC;AAExC,sDAAsD;AACtD,MAAM,WAAW,YAAY;IACzB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,2CAA2C;AAC3C,QAAA,MAAM,OAAO,GAAI,sBAEd,YAAY,KAAG,GAAG,CAAC,OAqBrB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
3
|
-
import { ElementPosition } from "../../../../types";
|
|
4
|
-
import Icon from "../../../icon";
|
|
5
|
-
/** Tabs panel single tab item component */
|
|
6
|
-
const TabItem = ({ item, activeItem }) => {
|
|
7
|
-
if (!isNullOrUndefined(item.icon)) {
|
|
8
|
-
return _jsx(TabItemWithIcon, { item: item, activeItem: activeItem });
|
|
9
|
-
}
|
|
10
|
-
const className = getClassName([
|
|
11
|
-
"bbr-tabs__tab",
|
|
12
|
-
activeItem === item.id ? "is-active" : undefined,
|
|
13
|
-
]);
|
|
14
|
-
return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsx("a", { children: item.caption }) }, item.id));
|
|
15
|
-
};
|
|
16
|
-
export default TabItem;
|
|
17
|
-
/** Tabs panel single tab item with icon component */
|
|
18
|
-
const TabItemWithIcon = ({ item, activeItem }) => {
|
|
19
|
-
const iconConfig = item.icon;
|
|
20
|
-
const className = getClassName([
|
|
21
|
-
"bbr-tabs__tab",
|
|
22
|
-
activeItem === item.id ? "is-active" : undefined,
|
|
23
|
-
]);
|
|
24
|
-
if (iconConfig.position === ElementPosition.Right) {
|
|
25
|
-
return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx("span", { children: item.caption }), _jsx(Icon, { ...iconConfig })] }) }, item.id));
|
|
26
|
-
}
|
|
27
|
-
return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
|
|
28
|
-
};
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
3
|
+
import { ElementPosition } from "../../../../types";
|
|
4
|
+
import Icon from "../../../icon";
|
|
5
|
+
/** Tabs panel single tab item component */
|
|
6
|
+
const TabItem = ({ item, activeItem }) => {
|
|
7
|
+
if (!isNullOrUndefined(item.icon)) {
|
|
8
|
+
return _jsx(TabItemWithIcon, { item: item, activeItem: activeItem });
|
|
9
|
+
}
|
|
10
|
+
const className = getClassName([
|
|
11
|
+
"bbr-tabs__tab",
|
|
12
|
+
activeItem === item.id ? "is-active" : undefined,
|
|
13
|
+
]);
|
|
14
|
+
return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsx("a", { children: item.caption }) }, item.id));
|
|
15
|
+
};
|
|
16
|
+
export default TabItem;
|
|
17
|
+
/** Tabs panel single tab item with icon component */
|
|
18
|
+
const TabItemWithIcon = ({ item, activeItem }) => {
|
|
19
|
+
const iconConfig = item.icon;
|
|
20
|
+
const className = getClassName([
|
|
21
|
+
"bbr-tabs__tab",
|
|
22
|
+
activeItem === item.id ? "is-active" : undefined,
|
|
23
|
+
]);
|
|
24
|
+
if (iconConfig.position === ElementPosition.Right) {
|
|
25
|
+
return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx("span", { children: item.caption }), _jsx(Icon, { ...iconConfig })] }) }, item.id));
|
|
26
|
+
}
|
|
27
|
+
return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
|
|
28
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { default } from "./component";
|
|
2
|
-
export * from "./types";
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
package/components/tabs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from "./component";
|
|
2
|
-
export * from "./types";
|
|
1
|
+
export { default } from "./component";
|
|
2
|
+
export * from "./types";
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import { BaseElementProps, ElementIcon, ElementPosition, ElementSize } from "../../types";
|
|
2
|
-
/** Tabs component style */
|
|
3
|
-
export declare enum TabsStyle {
|
|
4
|
-
/**
|
|
5
|
-
* Default style.
|
|
6
|
-
* Single border at the bottom
|
|
7
|
-
*/
|
|
8
|
-
default = "",
|
|
9
|
-
/**
|
|
10
|
-
* Classic style with borders.
|
|
11
|
-
* Borders all except bottom
|
|
12
|
-
*/
|
|
13
|
-
boxed = "is-boxed",
|
|
14
|
-
/**
|
|
15
|
-
* Styled as buttons
|
|
16
|
-
*/
|
|
17
|
-
radioButton = "is-toggle",
|
|
18
|
-
/**
|
|
19
|
-
* Styled as rounded buttons
|
|
20
|
-
*/
|
|
21
|
-
radioButtonRounded = "is-toggle is-toggle-rounded"
|
|
22
|
-
}
|
|
23
|
-
/** Tab item */
|
|
24
|
-
export interface TabItem {
|
|
25
|
-
/** Unique identifier across all tab items */
|
|
26
|
-
id: string;
|
|
27
|
-
/** Displayable caption */
|
|
28
|
-
caption: string;
|
|
29
|
-
/** Icon configuration */
|
|
30
|
-
icon?: ElementIcon;
|
|
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
|
-
}
|
|
1
|
+
import { BaseElementProps, ElementIcon, ElementPosition, ElementSize } from "../../types";
|
|
2
|
+
/** Tabs component style */
|
|
3
|
+
export declare enum TabsStyle {
|
|
4
|
+
/**
|
|
5
|
+
* Default style.
|
|
6
|
+
* Single border at the bottom
|
|
7
|
+
*/
|
|
8
|
+
default = "",
|
|
9
|
+
/**
|
|
10
|
+
* Classic style with borders.
|
|
11
|
+
* Borders all except bottom
|
|
12
|
+
*/
|
|
13
|
+
boxed = "is-boxed",
|
|
14
|
+
/**
|
|
15
|
+
* Styled as buttons
|
|
16
|
+
*/
|
|
17
|
+
radioButton = "is-toggle",
|
|
18
|
+
/**
|
|
19
|
+
* Styled as rounded buttons
|
|
20
|
+
*/
|
|
21
|
+
radioButtonRounded = "is-toggle is-toggle-rounded"
|
|
22
|
+
}
|
|
23
|
+
/** Tab item */
|
|
24
|
+
export interface TabItem {
|
|
25
|
+
/** Unique identifier across all tab items */
|
|
26
|
+
id: string;
|
|
27
|
+
/** Displayable caption */
|
|
28
|
+
caption: string;
|
|
29
|
+
/** Icon configuration */
|
|
30
|
+
icon?: ElementIcon;
|
|
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
|
+
}
|
|
55
55
|
//# sourceMappingURL=types.d.ts.map
|
package/components/tabs/types.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
/** Tabs component style */
|
|
2
|
-
export var TabsStyle;
|
|
3
|
-
(function (TabsStyle) {
|
|
4
|
-
/**
|
|
5
|
-
* Default style.
|
|
6
|
-
* Single border at the bottom
|
|
7
|
-
*/
|
|
8
|
-
TabsStyle["default"] = "";
|
|
9
|
-
/**
|
|
10
|
-
* Classic style with borders.
|
|
11
|
-
* Borders all except bottom
|
|
12
|
-
*/
|
|
13
|
-
TabsStyle["boxed"] = "is-boxed";
|
|
14
|
-
/**
|
|
15
|
-
* Styled as buttons
|
|
16
|
-
*/
|
|
17
|
-
TabsStyle["radioButton"] = "is-toggle";
|
|
18
|
-
/**
|
|
19
|
-
* Styled as rounded buttons
|
|
20
|
-
*/
|
|
21
|
-
TabsStyle["radioButtonRounded"] = "is-toggle is-toggle-rounded";
|
|
22
|
-
})(TabsStyle || (TabsStyle = {}));
|
|
1
|
+
/** Tabs component style */
|
|
2
|
+
export var TabsStyle;
|
|
3
|
+
(function (TabsStyle) {
|
|
4
|
+
/**
|
|
5
|
+
* Default style.
|
|
6
|
+
* Single border at the bottom
|
|
7
|
+
*/
|
|
8
|
+
TabsStyle["default"] = "";
|
|
9
|
+
/**
|
|
10
|
+
* Classic style with borders.
|
|
11
|
+
* Borders all except bottom
|
|
12
|
+
*/
|
|
13
|
+
TabsStyle["boxed"] = "is-boxed";
|
|
14
|
+
/**
|
|
15
|
+
* Styled as buttons
|
|
16
|
+
*/
|
|
17
|
+
TabsStyle["radioButton"] = "is-toggle";
|
|
18
|
+
/**
|
|
19
|
+
* Styled as rounded buttons
|
|
20
|
+
*/
|
|
21
|
+
TabsStyle["radioButtonRounded"] = "is-toggle is-toggle-rounded";
|
|
22
|
+
})(TabsStyle || (TabsStyle = {}));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import { TagProps } from "..";
|
|
3
|
-
import "./style.scss";
|
|
4
|
-
/** Single tag item */
|
|
5
|
-
declare const Tag:
|
|
6
|
-
export default Tag;
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { TagProps } from "..";
|
|
3
|
+
import "./style.scss";
|
|
4
|
+
/** Single tag item */
|
|
5
|
+
declare const Tag: FC<TagProps>;
|
|
6
|
+
export default Tag;
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CA+CrB,CAAC;AAEF,eAAe,GAAG,CAAC"}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
3
|
-
import { ElementColor, ElementSize } from "../../../types";
|
|
4
|
-
import { mapDataAttributes } from "../../../utils";
|
|
5
|
-
import "./style.scss";
|
|
6
|
-
/** Single tag item */
|
|
7
|
-
const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default, rounded = false, lightColor = false, customColor, onClick, className, title, data, }) => {
|
|
8
|
-
if (!isNullOrUndefined(customColor)) {
|
|
9
|
-
style = ElementColor.Default;
|
|
10
|
-
}
|
|
11
|
-
const elClassName = getClassName([
|
|
12
|
-
"bbr-tag",
|
|
13
|
-
"tag",
|
|
14
|
-
className,
|
|
15
|
-
style === ElementColor.Default ? "" : `is-${style}`,
|
|
16
|
-
!isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
|
|
17
|
-
lightColor && isNullOrUndefined(customColor) ? "is-light" : "",
|
|
18
|
-
rounded ? "is-rounded" : "",
|
|
19
|
-
size === ElementSize.Normal ? "" : `is-${size}`,
|
|
20
|
-
isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
|
|
21
|
-
]);
|
|
22
|
-
const dataAttributes = isNullOrUndefined(data)
|
|
23
|
-
? undefined
|
|
24
|
-
: mapDataAttributes(data);
|
|
25
|
-
return (_jsx("span", { className: elClassName, style: isNullOrUndefined(customColor)
|
|
26
|
-
? undefined
|
|
27
|
-
: {
|
|
28
|
-
color: customColor?.color,
|
|
29
|
-
backgroundColor: customColor?.backgroundColor,
|
|
30
|
-
}, title: title, onClick: onClick, ...dataAttributes, children: content }));
|
|
31
|
-
};
|
|
32
|
-
export default Tag;
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
|
|
3
|
+
import { ElementColor, ElementSize } from "../../../types";
|
|
4
|
+
import { mapDataAttributes } from "../../../utils";
|
|
5
|
+
import "./style.scss";
|
|
6
|
+
/** Single tag item */
|
|
7
|
+
const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default, rounded = false, lightColor = false, customColor, onClick, className, title, data, }) => {
|
|
8
|
+
if (!isNullOrUndefined(customColor)) {
|
|
9
|
+
style = ElementColor.Default;
|
|
10
|
+
}
|
|
11
|
+
const elClassName = getClassName([
|
|
12
|
+
"bbr-tag",
|
|
13
|
+
"tag",
|
|
14
|
+
className,
|
|
15
|
+
style === ElementColor.Default ? "" : `is-${style}`,
|
|
16
|
+
!isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
|
|
17
|
+
lightColor && isNullOrUndefined(customColor) ? "is-light" : "",
|
|
18
|
+
rounded ? "is-rounded" : "",
|
|
19
|
+
size === ElementSize.Normal ? "" : `is-${size}`,
|
|
20
|
+
isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
|
|
21
|
+
]);
|
|
22
|
+
const dataAttributes = isNullOrUndefined(data)
|
|
23
|
+
? undefined
|
|
24
|
+
: mapDataAttributes(data);
|
|
25
|
+
return (_jsx("span", { className: elClassName, style: isNullOrUndefined(customColor)
|
|
26
|
+
? undefined
|
|
27
|
+
: {
|
|
28
|
+
color: customColor?.color,
|
|
29
|
+
backgroundColor: customColor?.backgroundColor,
|
|
30
|
+
}, title: title, onClick: onClick, ...dataAttributes, children: content }));
|
|
31
|
+
};
|
|
32
|
+
export default Tag;
|