@bit.rhplus/ui2.filter-panel 0.0.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.
@@ -0,0 +1,9 @@
1
+ export default FilterPanel;
2
+ declare function FilterPanel({ filters, onRemoveFilter, onClearAll, fieldLabels, valueLabelsMap, alwaysVisible, }: {
3
+ filters?: any[] | undefined;
4
+ onRemoveFilter: any;
5
+ onClearAll: any;
6
+ fieldLabels?: {} | undefined;
7
+ valueLabelsMap?: {} | undefined;
8
+ alwaysVisible?: boolean | undefined;
9
+ }): import("react/jsx-runtime").JSX.Element | null;
package/dist/index.js ADDED
@@ -0,0 +1,75 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import { Tag, Space, Button } from 'antd';
4
+ import { CloseOutlined, FilterOutlined } from '@ant-design/icons';
5
+ import { filterCondition } from '@bit.rhplus/ui2.filter';
6
+ const conditionLabels = {
7
+ [filterCondition.equals]: '=',
8
+ [filterCondition.notEquals]: '<>',
9
+ [filterCondition.greaterThan]: '>',
10
+ [filterCondition.greaterThanOrEqual]: '>=',
11
+ [filterCondition.lessThan]: '<',
12
+ [filterCondition.lessThanOrEqual]: '<=',
13
+ [filterCondition.contains]: 'obsahuje',
14
+ [filterCondition.startsWith]: 'začíná na',
15
+ [filterCondition.endsWith]: 'končí na',
16
+ [filterCondition.isNull]: 'je prázdné',
17
+ [filterCondition.isNotNull]: 'není prázdné',
18
+ [filterCondition.in]: 'obsahuje',
19
+ [filterCondition.notIn]: 'neobsahuje',
20
+ };
21
+ const formatValue = (value, fieldName, valueLabelsMap) => {
22
+ if (Array.isArray(value)) {
23
+ if (valueLabelsMap[fieldName]) {
24
+ return value.map(v => valueLabelsMap[fieldName][v] || v).join(', ');
25
+ }
26
+ return value.join(', ');
27
+ }
28
+ if (typeof value === 'boolean') {
29
+ return value ? 'Ano' : 'Ne';
30
+ }
31
+ if (value === null || value === undefined) {
32
+ return '';
33
+ }
34
+ if (valueLabelsMap[fieldName] && valueLabelsMap[fieldName][value]) {
35
+ return valueLabelsMap[fieldName][value];
36
+ }
37
+ return String(value);
38
+ };
39
+ const FilterPanel = ({ filters = [], onRemoveFilter, onClearAll, fieldLabels = {}, valueLabelsMap = {}, alwaysVisible = false, }) => {
40
+ if (!alwaysVisible && (!filters || filters.length === 0)) {
41
+ return null;
42
+ }
43
+ const hasFilters = filters && filters.length > 0;
44
+ return (_jsxs("div", { style: {
45
+ display: 'flex',
46
+ justifyContent: 'space-between',
47
+ alignItems: 'center',
48
+ padding: '7px 0px 7px 7px',
49
+ borderRadius: '4px',
50
+ backgroundColor: '#fafafa',
51
+ borderTop: '1px solid #f0f0f0',
52
+ }, children: [_jsxs(Space, { style: { lineHeight: 'normal', flexWrap: 'wrap' }, size: [8, 8], children: [_jsx(FilterOutlined, { style: { color: hasFilters ? '#1890ff' : '#d9d9d9', fontSize: '14px' } }), hasFilters ? (filters.map((filter, index) => {
53
+ const fieldLabel = fieldLabels[filter.field] || filter.field;
54
+ const conditionLabel = conditionLabels[filter.condition] || 'filtr';
55
+ const valueLabel = formatValue(filter.value, filter.field, valueLabelsMap);
56
+ const displayText = valueLabel
57
+ ? `${fieldLabel} ${conditionLabel} (${valueLabel})`
58
+ : `${fieldLabel} ${conditionLabel}`;
59
+ return (_jsx(Tag, { closable: true, onClose: (e) => {
60
+ e.preventDefault();
61
+ if (onRemoveFilter) {
62
+ onRemoveFilter(index);
63
+ }
64
+ }, style: {
65
+ backgroundColor: '#e6f7ff',
66
+ borderColor: '#91d5ff',
67
+ color: '#0050b3',
68
+ fontSize: '13px',
69
+ padding: '2px 8px',
70
+ margin: 0,
71
+ }, children: displayText }, `${filter.field}-${index}`));
72
+ })) : (_jsx("span", { style: { color: '#999', fontSize: '13px' }, children: "\u017D\u00E1dn\u00E9 aktivn\u00ED filtry" }))] }), _jsx(Space, { style: { lineHeight: 'normal', paddingRight: '7px' }, children: hasFilters && onClearAll && (_jsx(Button, { type: "link", size: "small", onClick: onClearAll, style: { color: '#999' }, children: "Vymazat v\u0161e" })) })] }));
73
+ };
74
+ export default FilterPanel;
75
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,7 @@
1
+ ;
2
+ ;
3
+
4
+ export const compositions = [];
5
+ export const overview = [];
6
+
7
+ export const compositions_metadata = {"compositions":[]};
package/index.jsx ADDED
@@ -0,0 +1,125 @@
1
+ import React from 'react';
2
+ import { Tag, Space, Button } from 'antd';
3
+ import { CloseOutlined, FilterOutlined } from '@ant-design/icons';
4
+ import { filterCondition } from '@bit.rhplus/ui2.filter';
5
+
6
+ const conditionLabels = {
7
+ [filterCondition.equals]: '=',
8
+ [filterCondition.notEquals]: '<>',
9
+ [filterCondition.greaterThan]: '>',
10
+ [filterCondition.greaterThanOrEqual]: '>=',
11
+ [filterCondition.lessThan]: '<',
12
+ [filterCondition.lessThanOrEqual]: '<=',
13
+ [filterCondition.contains]: 'obsahuje',
14
+ [filterCondition.startsWith]: 'začíná na',
15
+ [filterCondition.endsWith]: 'končí na',
16
+ [filterCondition.isNull]: 'je prázdné',
17
+ [filterCondition.isNotNull]: 'není prázdné',
18
+ [filterCondition.in]: 'obsahuje',
19
+ [filterCondition.notIn]: 'neobsahuje',
20
+ };
21
+
22
+ const formatValue = (value, fieldName, valueLabelsMap) => {
23
+ if (Array.isArray(value)) {
24
+ if (valueLabelsMap[fieldName]) {
25
+ return value.map(v => valueLabelsMap[fieldName][v] || v).join(', ');
26
+ }
27
+ return value.join(', ');
28
+ }
29
+ if (typeof value === 'boolean') {
30
+ return value ? 'Ano' : 'Ne';
31
+ }
32
+ if (value === null || value === undefined) {
33
+ return '';
34
+ }
35
+
36
+ if (valueLabelsMap[fieldName] && valueLabelsMap[fieldName][value]) {
37
+ return valueLabelsMap[fieldName][value];
38
+ }
39
+
40
+ return String(value);
41
+ };
42
+
43
+ const FilterPanel = ({
44
+ filters = [],
45
+ onRemoveFilter,
46
+ onClearAll,
47
+ fieldLabels = {},
48
+ valueLabelsMap = {},
49
+ alwaysVisible = false,
50
+ }) => {
51
+ if (!alwaysVisible && (!filters || filters.length === 0)) {
52
+ return null;
53
+ }
54
+
55
+ const hasFilters = filters && filters.length > 0;
56
+
57
+ return (
58
+ <div
59
+ style={{
60
+ display: 'flex',
61
+ justifyContent: 'space-between',
62
+ alignItems: 'center',
63
+ padding: '7px 0px 7px 7px',
64
+ borderRadius: '4px',
65
+ backgroundColor: '#fafafa',
66
+ borderTop: '1px solid #f0f0f0',
67
+ }}
68
+ >
69
+ <Space style={{ lineHeight: 'normal', flexWrap: 'wrap' }} size={[8, 8]}>
70
+ <FilterOutlined style={{ color: hasFilters ? '#1890ff' : '#d9d9d9', fontSize: '14px' }} />
71
+ {hasFilters ? (
72
+ filters.map((filter, index) => {
73
+ const fieldLabel = fieldLabels[filter.field] || filter.field;
74
+ const conditionLabel = conditionLabels[filter.condition] || 'filtr';
75
+ const valueLabel = formatValue(filter.value, filter.field, valueLabelsMap);
76
+
77
+ const displayText = valueLabel
78
+ ? `${fieldLabel} ${conditionLabel} (${valueLabel})`
79
+ : `${fieldLabel} ${conditionLabel}`;
80
+
81
+ return (
82
+ <Tag
83
+ key={`${filter.field}-${index}`}
84
+ closable
85
+ onClose={(e) => {
86
+ e.preventDefault();
87
+ if (onRemoveFilter) {
88
+ onRemoveFilter(index);
89
+ }
90
+ }}
91
+ style={{
92
+ backgroundColor: '#e6f7ff',
93
+ borderColor: '#91d5ff',
94
+ color: '#0050b3',
95
+ fontSize: '13px',
96
+ padding: '2px 8px',
97
+ margin: 0,
98
+ }}
99
+ >
100
+ {displayText}
101
+ </Tag>
102
+ );
103
+ })
104
+ ) : (
105
+ <span style={{ color: '#999', fontSize: '13px' }}>Žádné aktivní filtry</span>
106
+ )}
107
+ </Space>
108
+
109
+ <Space style={{ lineHeight: 'normal', paddingRight: '7px' }}>
110
+ {hasFilters && onClearAll && (
111
+ <Button
112
+ type="link"
113
+ size="small"
114
+ onClick={onClearAll}
115
+ style={{ color: '#999' }}
116
+ >
117
+ Vymazat vše
118
+ </Button>
119
+ )}
120
+ </Space>
121
+ </div>
122
+ );
123
+ };
124
+
125
+ export default FilterPanel;
package/package.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "name": "@bit.rhplus/ui2.filter-panel",
3
+ "version": "0.0.1",
4
+ "main": "dist/index.js",
5
+ "componentId": {
6
+ "name": "ui2/filter-panel",
7
+ "version": "0.0.1",
8
+ "scope": "remote-scope"
9
+ },
10
+ "dependencies": {
11
+ "@ant-design/icons": "^5.4.0",
12
+ "antd": "^5.20.6",
13
+ "@bit.rhplus/ui2.filter": "0.0.1"
14
+ },
15
+ "devDependencies": {
16
+ "@teambit/react.react-env": "1.0.132"
17
+ },
18
+ "peerDependencies": {
19
+ "react": "^17.0.0 || ^18.0.0"
20
+ },
21
+ "license": "SEE LICENSE IN UNLICENSED",
22
+ "optionalDependencies": {},
23
+ "peerDependenciesMeta": {},
24
+ "private": false,
25
+ "publishConfig": {
26
+ "scope": "@bit.rhplus",
27
+ "registry": "https://registry.npmjs.org/"
28
+ }
29
+ }
@@ -0,0 +1,43 @@
1
+ declare module '*.png' {
2
+ const value: any;
3
+ export = value;
4
+ }
5
+ declare module '*.svg' {
6
+ import type { FunctionComponent, SVGProps } from 'react';
7
+
8
+ export const ReactComponent: FunctionComponent<
9
+ SVGProps<SVGSVGElement> & { title?: string }
10
+ >;
11
+ const src: string;
12
+ export default src;
13
+ }
14
+
15
+ // @TODO Gilad
16
+ declare module '*.jpg' {
17
+ const value: any;
18
+ export = value;
19
+ }
20
+ declare module '*.jpeg' {
21
+ const value: any;
22
+ export = value;
23
+ }
24
+ declare module '*.gif' {
25
+ const value: any;
26
+ export = value;
27
+ }
28
+ declare module '*.bmp' {
29
+ const value: any;
30
+ export = value;
31
+ }
32
+ declare module '*.otf' {
33
+ const value: any;
34
+ export = value;
35
+ }
36
+ declare module '*.woff' {
37
+ const value: any;
38
+ export = value;
39
+ }
40
+ declare module '*.woff2' {
41
+ const value: any;
42
+ export = value;
43
+ }
@@ -0,0 +1,42 @@
1
+ declare module '*.module.css' {
2
+ const classes: { readonly [key: string]: string };
3
+ export default classes;
4
+ }
5
+ declare module '*.module.scss' {
6
+ const classes: { readonly [key: string]: string };
7
+ export default classes;
8
+ }
9
+ declare module '*.module.sass' {
10
+ const classes: { readonly [key: string]: string };
11
+ export default classes;
12
+ }
13
+
14
+ declare module '*.module.less' {
15
+ const classes: { readonly [key: string]: string };
16
+ export default classes;
17
+ }
18
+
19
+ declare module '*.less' {
20
+ const classes: { readonly [key: string]: string };
21
+ export default classes;
22
+ }
23
+
24
+ declare module '*.css' {
25
+ const classes: { readonly [key: string]: string };
26
+ export default classes;
27
+ }
28
+
29
+ declare module '*.sass' {
30
+ const classes: { readonly [key: string]: string };
31
+ export default classes;
32
+ }
33
+
34
+ declare module '*.scss' {
35
+ const classes: { readonly [key: string]: string };
36
+ export default classes;
37
+ }
38
+
39
+ declare module '*.mdx' {
40
+ const component: any;
41
+ export default component;
42
+ }