pixel-react 1.21.41 → 1.21.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -75
- package/lib/components/AutoTruncateText/AutoTruncateText.d.ts +1 -1
- package/lib/components/AutoTruncateText/AutoTruncateText.js +4 -23
- package/lib/components/AutoTruncateText/AutoTruncateText.js.map +1 -1
- package/lib/components/AutoTruncateText/types.d.ts +0 -1
- package/lib/components/Charts/BarChart/BarChart.js +8 -8
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.js +6 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.js +4 -4
- package/lib/components/Charts/PieChart/PieChart.js +5 -5
- package/lib/components/Comments/Comments.js +14 -14
- package/lib/components/Comments/childComment/ChildComment.js +14 -14
- package/lib/components/EditTextField/EditTextField.js +2 -2
- package/lib/components/HighlightText/HighlightText.d.ts +1 -6
- package/lib/components/HighlightText/HighlightText.js +13 -102
- package/lib/components/HighlightText/HighlightText.js.map +1 -1
- package/lib/components/HighlightText/types.d.ts +2 -3
- package/lib/components/LabelEditTextField/LabelEditTextField.js +4 -4
- package/lib/components/StatusBadge/StatusBadge.js +1 -1
- package/lib/components/StatusIndicator/StatusIndicator.js +5 -5
- package/lib/components/TooltipService/TooltipService.js +1 -6
- package/lib/components/TooltipService/TooltipService.js.map +1 -1
- package/lib/index.d.ts +5 -5
- package/lib/index.js +9 -9
- package/package.json +118 -118
package/README.md
CHANGED
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: PixelReact UI
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { Button, Input } from 'pixel-react';
|
|
6
|
-
|
|
7
|
-
<h1 align="center">PixelReact UI</h1>
|
|
8
|
-
|
|
9
|
-
<p align="center">
|
|
10
|
-
<strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
|
|
11
|
-
</p>
|
|
12
|
-
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
## Table of Contents
|
|
16
|
-
|
|
17
|
-
- [Installation](#installation)
|
|
18
|
-
- [Usage](#usage)
|
|
19
|
-
- [Documentation](#documentation)
|
|
20
|
-
- [Contributing](#contributing)
|
|
21
|
-
- [License](#license)
|
|
22
|
-
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
## Installation
|
|
26
|
-
|
|
27
|
-
Install PixelReact UI in your project directory with:
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
npm install pixel-react
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
or with Yarn:
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
yarn add pixel-react
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
## Usage
|
|
40
|
-
|
|
41
|
-
Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
|
|
42
|
-
|
|
43
|
-
```jsx
|
|
44
|
-
import { Button } from 'pixel-react';
|
|
45
|
-
|
|
46
|
-
function App() {
|
|
47
|
-
return (
|
|
48
|
-
<div>
|
|
49
|
-
<Button label="Button Label" variant="primary" />
|
|
50
|
-
</div>
|
|
51
|
-
);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
export default App;
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Documentation
|
|
58
|
-
|
|
59
|
-
For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
|
|
60
|
-
|
|
61
|
-
## Example
|
|
62
|
-
|
|
63
|
-
```jsx
|
|
64
|
-
import { Button } from 'pixel-react';
|
|
65
|
-
|
|
66
|
-
function ExampleComponent() {
|
|
67
|
-
return <Button label="Click Me!" variant="primary" />;
|
|
68
|
-
}
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## License
|
|
72
|
-
|
|
73
|
-
PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
|
|
74
|
-
|
|
75
|
-
---
|
|
1
|
+
---
|
|
2
|
+
title: PixelReact UI
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { Button, Input } from 'pixel-react';
|
|
6
|
+
|
|
7
|
+
<h1 align="center">PixelReact UI</h1>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Table of Contents
|
|
16
|
+
|
|
17
|
+
- [Installation](#installation)
|
|
18
|
+
- [Usage](#usage)
|
|
19
|
+
- [Documentation](#documentation)
|
|
20
|
+
- [Contributing](#contributing)
|
|
21
|
+
- [License](#license)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
Install PixelReact UI in your project directory with:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install pixel-react
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
or with Yarn:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
yarn add pixel-react
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
import { Button } from 'pixel-react';
|
|
45
|
+
|
|
46
|
+
function App() {
|
|
47
|
+
return (
|
|
48
|
+
<div>
|
|
49
|
+
<Button label="Button Label" variant="primary" />
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export default App;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Documentation
|
|
58
|
+
|
|
59
|
+
For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
|
|
60
|
+
|
|
61
|
+
## Example
|
|
62
|
+
|
|
63
|
+
```jsx
|
|
64
|
+
import { Button } from 'pixel-react';
|
|
65
|
+
|
|
66
|
+
function ExampleComponent() {
|
|
67
|
+
return <Button label="Click Me!" variant="primary" />;
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
|
|
74
|
+
|
|
75
|
+
---
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import './AutoTruncateText.scss';
|
|
2
2
|
import { AutoTruncateTextComponentProps } from './types';
|
|
3
|
-
declare const AutoTruncateText: import("react").MemoExoticComponent<({ children, className, lines, interactive, placement,
|
|
3
|
+
declare const AutoTruncateText: import("react").MemoExoticComponent<({ children, className, lines, interactive, placement, }: AutoTruncateTextComponentProps) => import("react").JSX.Element>;
|
|
4
4
|
export default AutoTruncateText;
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo, useLayoutEffect, useRef } from 'react';
|
|
3
3
|
import './AutoTruncateText.scss';
|
|
4
4
|
import { useResizeSignal } from './useResizeSignal';
|
|
5
|
-
const AutoTruncateText = memo(({ children, className, lines = 1, interactive = false, placement = 'bottom',
|
|
5
|
+
const AutoTruncateText = memo(({ children, className, lines = 1, interactive = false, placement = 'bottom', }) => {
|
|
6
6
|
const textRef = useRef(null);
|
|
7
7
|
const signal = useResizeSignal(textRef);
|
|
8
8
|
useLayoutEffect(() => {
|
|
@@ -20,32 +20,13 @@ const AutoTruncateText = memo(({ children, className, lines = 1, interactive = f
|
|
|
20
20
|
el.setAttribute('data-tooltip-placement', normalizedPlacement);
|
|
21
21
|
}
|
|
22
22
|
if (truncated) {
|
|
23
|
-
const
|
|
24
|
-
if (
|
|
25
|
-
|
|
26
|
-
el.setAttribute('data-tooltip', tooltipText);
|
|
27
|
-
}
|
|
28
|
-
else {
|
|
29
|
-
el.setAttribute('data-tooltip', el.innerHTML);
|
|
30
|
-
}
|
|
31
|
-
el.setAttribute('data-tooltip-allowhtml', 'true');
|
|
32
|
-
}
|
|
33
|
-
else {
|
|
34
|
-
const text = el.textContent?.trim() || '';
|
|
35
|
-
if (text) {
|
|
36
|
-
if (tooltipText) {
|
|
37
|
-
el.setAttribute('data-tooltip', tooltipText);
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
el.setAttribute('data-tooltip', text);
|
|
41
|
-
}
|
|
42
|
-
el.removeAttribute('data-tooltip-allowhtml');
|
|
43
|
-
}
|
|
23
|
+
const text = el.textContent?.trim() || '';
|
|
24
|
+
if (text) {
|
|
25
|
+
el.setAttribute('data-tooltip', text);
|
|
44
26
|
}
|
|
45
27
|
}
|
|
46
28
|
else {
|
|
47
29
|
el.removeAttribute('data-tooltip');
|
|
48
|
-
el.removeAttribute('data-tooltip-allowhtml');
|
|
49
30
|
}
|
|
50
31
|
}, [signal, children, interactive, lines, placement]);
|
|
51
32
|
return (_jsx("div", { ref: textRef, className: className ? `ff-ellipsis ${className}` : 'ff-ellipsis', style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoTruncateText.js","sourceRoot":"","sources":["../../../src/components/AutoTruncateText/AutoTruncateText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,gBAAgB,GAAG,IAAI,CAC3B,CAAC,EACC,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,CAAC,EACT,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,QAAQ,
|
|
1
|
+
{"version":3,"file":"AutoTruncateText.js","sourceRoot":"","sources":["../../../src/components/AutoTruncateText/AutoTruncateText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,gBAAgB,GAAG,IAAI,CAC3B,CAAC,EACC,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,CAAC,EACT,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,QAAQ,GACW,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAExC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,MAAM,mBAAmB,GAAG,SAAS,EAAE,WAAW,EAAE,CAAC;QAErD,MAAM,SAAS,GACb,KAAK,GAAG,CAAC;YACP,CAAC,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,GAAG,GAAG;YACzC,CAAC,CAAC,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,GAAG,CAAC;QAC5C,IAAI,WAAW,EAAE,CAAC;YAChB,EAAE,CAAC,YAAY,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;QACtD,CAAC;QACD,IAAI,mBAAmB,EAAE,CAAC;YACxB,EAAE,CAAC,YAAY,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,CAAC;QACjE,CAAC;QACD,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,IAAI,GAAG,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YAC1C,IAAI,IAAI,EAAE,CAAC;gBACT,EAAE,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACxC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtD,OAAO,CACL,cACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,SAAS,EAAE,CAAC,CAAC,CAAC,aAAa,EACjE,KAAK,EAAE;YACL,OAAO,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;YAC5C,eAAe,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YAC9C,eAAe,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;YACnD,UAAU,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;SAC9C,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAClD,eAAe,gBAAgB,CAAC"}
|
|
@@ -118,20 +118,20 @@ const BarChart = ({ data, isYaxisSticky = false, barWidth, height, barGap = 20,
|
|
|
118
118
|
if (tooltip) {
|
|
119
119
|
tooltip.style.display = 'block';
|
|
120
120
|
if (customToolTip) {
|
|
121
|
-
tooltip.innerHTML = `<div>
|
|
122
|
-
<div><Typography fontWeight='semi-bold'>${label}</Typography></div>
|
|
123
|
-
<div><Typography>${id ? id : ''}</Typography></div>
|
|
124
|
-
<div><Typography>${totalLabel} : ${value} ${percent ? '(' + percent + '%)' : ''}</Typography></div>
|
|
121
|
+
tooltip.innerHTML = `<div>
|
|
122
|
+
<div><Typography fontWeight='semi-bold'>${label}</Typography></div>
|
|
123
|
+
<div><Typography>${id ? id : ''}</Typography></div>
|
|
124
|
+
<div><Typography>${totalLabel} : ${value} ${percent ? '(' + percent + '%)' : ''}</Typography></div>
|
|
125
125
|
</div>`;
|
|
126
126
|
}
|
|
127
127
|
else if (isDashboardVersions) {
|
|
128
128
|
const versionsList = versions ? versions.join(', ') : '';
|
|
129
|
-
tooltip.innerHTML = `
|
|
130
|
-
<div>
|
|
131
|
-
<div><Typography>${totalLabel} : ${value}</Typography></div>
|
|
129
|
+
tooltip.innerHTML = `
|
|
130
|
+
<div>
|
|
131
|
+
<div><Typography>${totalLabel} : ${value}</Typography></div>
|
|
132
132
|
${versionsList
|
|
133
133
|
? `<div><Typography>Versions : ${versionsList}</Typography></div>`
|
|
134
|
-
: ''}
|
|
134
|
+
: ''}
|
|
135
135
|
</div>`;
|
|
136
136
|
}
|
|
137
137
|
else {
|
|
@@ -47,12 +47,12 @@ const calculateDonutSegmentBorderPath = (innerR, outerR, startAngle, endAngle) =
|
|
|
47
47
|
const startInnerX = outerR * Math.cos(startAngle);
|
|
48
48
|
const startInnerY = outerR * Math.sin(startAngle);
|
|
49
49
|
const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
|
|
50
|
-
return `
|
|
51
|
-
M ${startOuterX} ${startOuterY}
|
|
52
|
-
A ${innerR} ${innerR} 0 ${largeArcFlag} 1 ${endOuterX} ${endOuterY}
|
|
53
|
-
L ${endInnerX} ${endInnerY}
|
|
54
|
-
A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${startInnerX} ${startInnerY}
|
|
55
|
-
Z
|
|
50
|
+
return `
|
|
51
|
+
M ${startOuterX} ${startOuterY}
|
|
52
|
+
A ${innerR} ${innerR} 0 ${largeArcFlag} 1 ${endOuterX} ${endOuterY}
|
|
53
|
+
L ${endInnerX} ${endInnerY}
|
|
54
|
+
A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${startInnerX} ${startInnerY}
|
|
55
|
+
Z
|
|
56
56
|
`;
|
|
57
57
|
};
|
|
58
58
|
const colorMapping = [
|
|
@@ -12,10 +12,10 @@ const calculateArc = ({ x, y, radius, startAngle, endAngle, }) => {
|
|
|
12
12
|
const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
|
|
13
13
|
if (endAngle - startAngle >= 2 * Math.PI) {
|
|
14
14
|
// Special case for a full circle
|
|
15
|
-
return `
|
|
16
|
-
M ${x + radius} ${y}
|
|
17
|
-
A ${radius} ${radius} 0 1 1 ${x - radius} ${y}
|
|
18
|
-
A ${radius} ${radius} 0 1 1 ${x + radius} ${y}
|
|
15
|
+
return `
|
|
16
|
+
M ${x + radius} ${y}
|
|
17
|
+
A ${radius} ${radius} 0 1 1 ${x - radius} ${y}
|
|
18
|
+
A ${radius} ${radius} 0 1 1 ${x + radius} ${y}
|
|
19
19
|
`;
|
|
20
20
|
}
|
|
21
21
|
return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
|
|
@@ -24,11 +24,11 @@ const calculateArcAngles = (value, total, currentAngle, radius) => {
|
|
|
24
24
|
const startAngle = currentAngle;
|
|
25
25
|
const endAngle = startAngle + angleIncrement;
|
|
26
26
|
if (percentage === 1) {
|
|
27
|
-
const path = `
|
|
28
|
-
M ${radius} 0
|
|
29
|
-
A ${radius} ${radius} 0 1 1 ${-radius} 0
|
|
30
|
-
A ${radius} ${radius} 0 1 1 ${radius} 0
|
|
31
|
-
Z
|
|
27
|
+
const path = `
|
|
28
|
+
M ${radius} 0
|
|
29
|
+
A ${radius} ${radius} 0 1 1 ${-radius} 0
|
|
30
|
+
A ${radius} ${radius} 0 1 1 ${radius} 0
|
|
31
|
+
Z
|
|
32
32
|
`;
|
|
33
33
|
return {
|
|
34
34
|
endAngle,
|
|
@@ -136,20 +136,20 @@ const Comments = ({ commentsData, handleAddComment, handleEditComment, handleDel
|
|
|
136
136
|
const getCaretCoordinates = (element, position) => {
|
|
137
137
|
const div = document.createElement('div');
|
|
138
138
|
const copyStyle = getComputedStyle(element);
|
|
139
|
-
div.style.cssText = `
|
|
140
|
-
position: absolute;
|
|
141
|
-
visibility: hidden;
|
|
142
|
-
white-space: pre-wrap;
|
|
143
|
-
word-wrap: break-word;
|
|
144
|
-
overflow: auto;
|
|
145
|
-
width: ${element.offsetWidth}px;
|
|
146
|
-
height: ${element.offsetHeight}px;
|
|
147
|
-
font-family: ${copyStyle.fontFamily};
|
|
148
|
-
font-size: ${copyStyle.fontSize};
|
|
149
|
-
padding: ${copyStyle.padding};
|
|
150
|
-
border: ${copyStyle.border};
|
|
151
|
-
box-sizing: ${copyStyle.boxSizing};
|
|
152
|
-
line-height: ${copyStyle.lineHeight};
|
|
139
|
+
div.style.cssText = `
|
|
140
|
+
position: absolute;
|
|
141
|
+
visibility: hidden;
|
|
142
|
+
white-space: pre-wrap;
|
|
143
|
+
word-wrap: break-word;
|
|
144
|
+
overflow: auto;
|
|
145
|
+
width: ${element.offsetWidth}px;
|
|
146
|
+
height: ${element.offsetHeight}px;
|
|
147
|
+
font-family: ${copyStyle.fontFamily};
|
|
148
|
+
font-size: ${copyStyle.fontSize};
|
|
149
|
+
padding: ${copyStyle.padding};
|
|
150
|
+
border: ${copyStyle.border};
|
|
151
|
+
box-sizing: ${copyStyle.boxSizing};
|
|
152
|
+
line-height: ${copyStyle.lineHeight};
|
|
153
153
|
`;
|
|
154
154
|
div.scrollTop = element.scrollTop;
|
|
155
155
|
div.scrollLeft = element.scrollLeft;
|
|
@@ -93,20 +93,20 @@ const ChildComment = ({ handleInsertNode, handleEditNode, handleDeleteNode, comm
|
|
|
93
93
|
const getCaretCoordinates = (element, position) => {
|
|
94
94
|
const div = document.createElement('div');
|
|
95
95
|
const copyStyle = getComputedStyle(element);
|
|
96
|
-
div.style.cssText = `
|
|
97
|
-
position: absolute;
|
|
98
|
-
visibility: hidden;
|
|
99
|
-
white-space: pre-wrap;
|
|
100
|
-
word-wrap: break-word;
|
|
101
|
-
overflow: auto;
|
|
102
|
-
width: ${element.offsetWidth}px;
|
|
103
|
-
height: ${element.offsetHeight}px;
|
|
104
|
-
font-family: ${copyStyle.fontFamily};
|
|
105
|
-
font-size: ${copyStyle.fontSize};
|
|
106
|
-
padding: ${copyStyle.padding};
|
|
107
|
-
border: ${copyStyle.border};
|
|
108
|
-
box-sizing: ${copyStyle.boxSizing};
|
|
109
|
-
line-height: ${copyStyle.lineHeight};
|
|
96
|
+
div.style.cssText = `
|
|
97
|
+
position: absolute;
|
|
98
|
+
visibility: hidden;
|
|
99
|
+
white-space: pre-wrap;
|
|
100
|
+
word-wrap: break-word;
|
|
101
|
+
overflow: auto;
|
|
102
|
+
width: ${element.offsetWidth}px;
|
|
103
|
+
height: ${element.offsetHeight}px;
|
|
104
|
+
font-family: ${copyStyle.fontFamily};
|
|
105
|
+
font-size: ${copyStyle.fontSize};
|
|
106
|
+
padding: ${copyStyle.padding};
|
|
107
|
+
border: ${copyStyle.border};
|
|
108
|
+
box-sizing: ${copyStyle.boxSizing};
|
|
109
|
+
line-height: ${copyStyle.lineHeight};
|
|
110
110
|
`;
|
|
111
111
|
div.scrollTop = element.scrollTop;
|
|
112
112
|
div.scrollLeft = element.scrollLeft;
|
|
@@ -77,8 +77,8 @@ isOpen = false, confirmAction, onClick, nameTooltipTitle, }) => {
|
|
|
77
77
|
{ key: 'Enter', action: () => handleKeyBoard('Enter') },
|
|
78
78
|
{ key: 'Escape', action: () => handleKeyBoard('Escape') },
|
|
79
79
|
], containerRef);
|
|
80
|
-
return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: "Enter your name", value: inputValue, onChange: handleTextFieldChange, className: `
|
|
81
|
-
|
|
80
|
+
return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: "Enter your name", value: inputValue, onChange: handleTextFieldChange, className: `
|
|
81
|
+
|
|
82
82
|
${isTextFieldModified ? 'modified' : ''}`, type: "text" }) }), _jsxs("div", { className: "ff-icon-container", children: [confirmIcon && (_jsx(Tooltip, { title: "confirm", placement: 'bottom', children: _jsx(Icon, { color: confirmIcon?.color ?? 'var(--default-confirm-icon-color)', height: confirmIcon?.height ?? 20, disabled: disabled, width: confirmIcon?.width ?? 20, name: confirmIcon?.name ?? 'default-confirm-icon', className: `${confirmIcon?.className ?? 'default-confirm-class'} ${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`, onClick: handleConfirm }) })), cancelIcon && (_jsx(Tooltip, { title: "cancel", placement: 'bottom', children: _jsx(Icon, { color: cancelIcon?.color ?? 'var(--label-edit-cancel-icon)', height: cancelIcon?.height ?? 12, width: cancelIcon?.width ?? 20, name: cancelIcon?.name ?? 'default-cancel-icon', className: cancelIcon?.className ?? 'cancel-icon', onClick: handleCancel, ref: cancelRef }) }))] })] })) : (_jsxs("div", { className: "display-text-container", children: [nameTooltipTitle ? (_jsx(Tooltip, { title: nameTooltipTitle, children: _jsx("span", { className: "display-text", onClick: onClick, children: _jsx(HighlightText, { text: inputValue, highlight: highlightText }) }) })) : (_jsx("span", { className: "display-text", onClick: onClick, children: _jsx(HighlightText, { text: inputValue, highlight: highlightText }) })), _jsx(Tooltip, { title: capitalize(editIcon?.name ?? 'Edit'), children: _jsx(Icon, { color: editIcon?.color ?? 'var(--label-edit-cancel-icon)', height: editIcon?.height ?? 20, width: editIcon?.width ?? 20, name: editIcon?.name ?? 'edit', className: editIcon?.className ?? 'edit-icon', onClick: handleEditButtonClick }) })] })), showError && isEditing && (_jsx(Typography, { as: "p", fontSize: 8, className: "error-text", children: showError }))] }));
|
|
83
83
|
};
|
|
84
84
|
export default EditTextField;
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { HighlightTextProps } from './types';
|
|
2
2
|
import './HighlightText.scss';
|
|
3
|
-
export interface HighlightTextProps {
|
|
4
|
-
text?: ReactNode;
|
|
5
|
-
highlight?: string;
|
|
6
|
-
onlyExactMatch?: boolean;
|
|
7
|
-
}
|
|
8
3
|
declare const HighlightText: React.FC<HighlightTextProps>;
|
|
9
4
|
export default HighlightText;
|
|
@@ -1,110 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Children, Fragment, cloneElement, isValidElement, } from 'react';
|
|
3
|
-
// import classNames from 'classnames';
|
|
4
2
|
import './HighlightText.scss';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
id: state.id++,
|
|
11
|
-
text,
|
|
12
|
-
start: state.offset,
|
|
13
|
-
end: state.offset + text.length,
|
|
14
|
-
});
|
|
15
|
-
state.offset += text.length;
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
if (Array.isArray(node)) {
|
|
19
|
-
node.forEach((child) => collectSegments(child, segments, state));
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
if (isValidElement(node)) {
|
|
23
|
-
collectSegments(node.props.children, segments, state);
|
|
24
|
-
}
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { Fragment } from 'react';
|
|
5
|
+
// Function to escape special characters in the search term
|
|
6
|
+
const escapeRegExp = (text) => {
|
|
7
|
+
return text?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
|
|
25
8
|
};
|
|
26
|
-
const
|
|
27
|
-
if (!
|
|
28
|
-
return
|
|
9
|
+
const HighlightText = ({ text = '', highlight = '', onlyExactMatch = false, }) => {
|
|
10
|
+
if (!highlight)
|
|
11
|
+
return _jsx("span", { children: text });
|
|
12
|
+
const escapedHighlight = escapeRegExp(highlight); // Escape special characters
|
|
13
|
+
const parts = text?.split(new RegExp(`(${escapedHighlight})`, 'gi')); // Use escaped string in the regex
|
|
29
14
|
if (onlyExactMatch) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
return [];
|
|
34
|
-
}
|
|
35
|
-
const escaped = escapeRegExp(search);
|
|
36
|
-
const regex = new RegExp(escaped, 'gi');
|
|
37
|
-
const matches = [];
|
|
38
|
-
let result;
|
|
39
|
-
while ((result = regex.exec(text)) !== null) {
|
|
40
|
-
matches.push({
|
|
41
|
-
start: result.index,
|
|
42
|
-
end: result.index + result[0].length,
|
|
43
|
-
});
|
|
44
|
-
if (result.index === regex.lastIndex) {
|
|
45
|
-
regex.lastIndex++;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
return matches;
|
|
49
|
-
};
|
|
50
|
-
const splitText = (text, absoluteStart, matches) => {
|
|
51
|
-
if (!matches.length) {
|
|
52
|
-
return [text];
|
|
53
|
-
}
|
|
54
|
-
const pieces = [];
|
|
55
|
-
let cursor = 0;
|
|
56
|
-
matches.forEach((match, index) => {
|
|
57
|
-
const localStart = Math.max(match.start - absoluteStart, 0);
|
|
58
|
-
const localEnd = Math.min(match.end - absoluteStart, text.length);
|
|
59
|
-
if (localEnd <= 0 || localStart >= text.length) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
if (localStart > cursor) {
|
|
63
|
-
pieces.push(text.slice(cursor, localStart));
|
|
64
|
-
}
|
|
65
|
-
pieces.push(_jsx("span", { className: "ff-highlight-bg", children: text.slice(localStart, localEnd) }, `highlight-${absoluteStart}-${index}`));
|
|
66
|
-
cursor = localEnd;
|
|
67
|
-
});
|
|
68
|
-
if (cursor < text.length) {
|
|
69
|
-
pieces.push(text.slice(cursor));
|
|
70
|
-
}
|
|
71
|
-
return pieces;
|
|
72
|
-
};
|
|
73
|
-
const rebuildTree = (node, matches, state) => {
|
|
74
|
-
if (typeof node === 'string' || typeof node === 'number') {
|
|
75
|
-
const text = String(node);
|
|
76
|
-
const result = splitText(text, state.offset, matches);
|
|
77
|
-
state.offset += text.length;
|
|
78
|
-
return _jsx(_Fragment, { children: result });
|
|
79
|
-
}
|
|
80
|
-
if (Array.isArray(node)) {
|
|
81
|
-
return node.map((child, index) => (_jsx(Fragment, { children: rebuildTree(child, matches, state) }, index)));
|
|
82
|
-
}
|
|
83
|
-
if (isValidElement(node)) {
|
|
84
|
-
return cloneElement(node, {
|
|
85
|
-
...node.props,
|
|
86
|
-
children: Children.map(node.props.children, (child) => rebuildTree(child, matches, state)),
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
return node;
|
|
90
|
-
};
|
|
91
|
-
const HighlightText = ({ text, highlight = '', onlyExactMatch = false, }) => {
|
|
92
|
-
if (!highlight) {
|
|
93
|
-
return _jsx(_Fragment, { children: text });
|
|
94
|
-
}
|
|
95
|
-
const segments = [];
|
|
96
|
-
collectSegments(text, segments, {
|
|
97
|
-
offset: 0,
|
|
98
|
-
id: 0,
|
|
99
|
-
});
|
|
100
|
-
const combinedText = segments.map((s) => s.text).join('');
|
|
101
|
-
const matches = findMatches(combinedText, highlight, onlyExactMatch);
|
|
102
|
-
if (!matches.length) {
|
|
103
|
-
return _jsx(_Fragment, { children: text });
|
|
15
|
+
const isTextEqualsHighlight = text.toLowerCase() === highlight.toLowerCase();
|
|
16
|
+
return (_jsx("span", { className: classNames(isTextEqualsHighlight ? 'ff-highlight-bg' : ''), children: text }));
|
|
104
17
|
}
|
|
105
|
-
return (_jsx(_Fragment, { children:
|
|
106
|
-
offset: 0,
|
|
107
|
-
}) }));
|
|
18
|
+
return (_jsx(_Fragment, { children: parts.map((part, index) => part?.toLowerCase() === highlight?.toLowerCase() ? (_jsx("span", { className: "ff-highlight-bg", children: part }, `highlight-${index}-${part}`)) : (_jsx(Fragment, { children: part }, `normal-${index}-${part}`))) }));
|
|
108
19
|
};
|
|
109
20
|
export default HighlightText;
|
|
110
21
|
//# sourceMappingURL=HighlightText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HighlightText.js","sourceRoot":"","sources":["../../../src/components/HighlightText/HighlightText.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"HighlightText.js","sourceRoot":"","sources":["../../../src/components/HighlightText/HighlightText.tsx"],"names":[],"mappings":";AACA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,2DAA2D;AAC3D,MAAM,YAAY,GAAG,CAAC,IAAY,EAAU,EAAE;IAC5C,OAAO,IAAI,EAAE,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC,oCAAoC;AAC3F,CAAC,CAAC;AAEF,MAAM,aAAa,GAAiC,CAAC,EACnD,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,KAAK,GACvB,EAAE,EAAE;IACH,IAAI,CAAC,SAAS;QAAE,OAAO,yBAAO,IAAI,GAAQ,CAAC;IAE3C,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,4BAA4B;IAC9E,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,gBAAgB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,kCAAkC;IAExG,IAAI,cAAc,EAAE,CAAC;QACnB,MAAM,qBAAqB,GACzB,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,CAAC,WAAW,EAAE,CAAC;QACjD,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,YAEpE,IAAI,GACA,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACzB,IAAI,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,CACjD,eAAyC,SAAS,EAAC,iBAAiB,YACjE,IAAI,IADI,aAAa,KAAK,IAAI,IAAI,EAAE,CAEhC,CACR,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,cAAkC,IAAI,IAAhC,UAAU,KAAK,IAAI,IAAI,EAAE,CAAmB,CAC5D,CACF,GACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -158,10 +158,10 @@ className, height, isOpen = false, confirmAction, onClick, tooltip, onDoubleClic
|
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
160
|
useKeyboardActions([{ key: 'Enter', action: () => handleKeyBoard('Enter') }], containerRef);
|
|
161
|
-
return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [variant === 'textFieldWithDropdown' ? (_jsxs("div", { className: `ff-label-text-field-with-dropdown ${isEditing ? 'open' : ''}`, style: { height }, children: [_jsx(Input, { name: "input", type: "text", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: placeholder ? placeholder : '', value: inputValue, onChange: handleTextFieldChange, className: `${className}
|
|
162
|
-
|
|
163
|
-
${isTextFieldModified ? 'modified' : ''}` }), _jsx(Select, { label: '', optionsList: dropdownData, selectedOption: { value: dropdownValue, label: dropdownValue }, onChange: (option) => setDropdownValue(option.value) })] })) : (_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", type: "text", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: placeholder ? placeholder : '', value: inputValue, onChange: handleTextFieldChange, className: `${className}
|
|
164
|
-
|
|
161
|
+
return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [variant === 'textFieldWithDropdown' ? (_jsxs("div", { className: `ff-label-text-field-with-dropdown ${isEditing ? 'open' : ''}`, style: { height }, children: [_jsx(Input, { name: "input", type: "text", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: placeholder ? placeholder : '', value: inputValue, onChange: handleTextFieldChange, className: `${className}
|
|
162
|
+
|
|
163
|
+
${isTextFieldModified ? 'modified' : ''}` }), _jsx(Select, { label: '', optionsList: dropdownData, selectedOption: { value: dropdownValue, label: dropdownValue }, onChange: (option) => setDropdownValue(option.value) })] })) : (_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", type: "text", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: placeholder ? placeholder : '', value: inputValue, onChange: handleTextFieldChange, className: `${className}
|
|
164
|
+
|
|
165
165
|
${isTextFieldModified ? 'modified' : ''}` }) })), _jsxs("div", { className: "ff-icon-container", children: [confirmIcon && (_jsx(Tooltip, { title: "Confirm", placement: 'bottom', children: _jsx(Icon, { color: "var(--label-edit-confirm-icon)", height: 20, width: 20, name: confirmIcon.name, disabled: disabled, className: `${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`, onClick: handleConfirm }) })), cancelIcon && (_jsx(Tooltip, { title: "Cancel", placement: 'bottom', children: _jsx(Icon, { color: "var(--label-edit-cancel-icon)", height: 12, width: 20, name: cancelIcon.name, className: "cancel-icon", onClick: handleCancel, ref: cancelRef }) }))] })] })) : (_jsx(Tooltip, { title: tooltip?.tooltipTitle ? tooltip?.tooltipTitle : '', placement: 'bottom', children: showText && (_jsx("span", { className: "display-text", onDoubleClick: handleDoubleClick, role: "button", onClick: handleClick, children: _jsx(HighlightText, { text: inputValue, highlight: highlightText }) })) })), showError && isEditing && (_jsx(Typography, { as: "p", fontSize: 8, className: "error-text", children: showError }))] }));
|
|
166
166
|
};
|
|
167
167
|
export default LabelEditTextField;
|
|
@@ -29,7 +29,7 @@ const StatusBadge = ({ gap = 8, fontSize = 12, entityType, statusValues, }) => {
|
|
|
29
29
|
// };
|
|
30
30
|
return (_jsx("div", { className: "ff-statusbadge-container", style: {
|
|
31
31
|
gap: `${gap}px`,
|
|
32
|
-
}, children: statusValues.map((val, idx) => (_jsxs("div", { className: "ff-statusbadge-item", "data-tooltip": `${capitalize(val?.status)}${entityType ? ` ${entityType}` : ''} :
|
|
32
|
+
}, children: statusValues.map((val, idx) => (_jsxs("div", { className: "ff-statusbadge-item", "data-tooltip": `${capitalize(val?.status)}${entityType ? ` ${entityType}` : ''} :
|
|
33
33
|
${Number(val?.tooltipValue).toLocaleString('fullwide', {
|
|
34
34
|
useGrouping: false,
|
|
35
35
|
maximumSignificantDigits: 21,
|
|
@@ -11,15 +11,15 @@ const StatusIndicator = forwardRef(({ label = 'Status', iconName = 'update_icon'
|
|
|
11
11
|
danger: 'var(--ff-delete-button-attachment)',
|
|
12
12
|
};
|
|
13
13
|
const iconColor = variantColorMap[variant] || variantColorMap.default;
|
|
14
|
-
return (_jsx("button", { disabled: isDisable, onClick: onClick, className: `
|
|
15
|
-
ff-status-indicator
|
|
16
|
-
ff-status-indicator--${variant}
|
|
14
|
+
return (_jsx("button", { disabled: isDisable, onClick: onClick, className: `
|
|
15
|
+
ff-status-indicator
|
|
16
|
+
ff-status-indicator--${variant}
|
|
17
17
|
${backgroundColor
|
|
18
18
|
? `ff-status-indicator--with-bg ff-status-indicator--${variant}-bg`
|
|
19
|
-
: ''}
|
|
19
|
+
: ''}
|
|
20
20
|
${border
|
|
21
21
|
? `ff-status-indicator--with-border ff-status-indicator--${variant}-border`
|
|
22
|
-
: ''}
|
|
22
|
+
: ''}
|
|
23
23
|
`, ref: ref, children: _jsxs("div", { className: "ff-status-indicator__content", children: [_jsx(Icon, { name: resolvedIconName, color: iconColor, className: `ff-status-indicator__icon ff-status-indicator__icon--${variant}` }), _jsx(Typography, { as: "div", fontSize: 12, className: `ff-status-indicator__label ff-status-indicator__label--${variant}`, fontWeight: "medium", lineHeight: "20px", children: label })] }) }));
|
|
24
24
|
});
|
|
25
25
|
export default StatusIndicator;
|
|
@@ -26,7 +26,7 @@ const getTooltipContent = (reference) => {
|
|
|
26
26
|
if (templateId) {
|
|
27
27
|
const templateEl = document.getElementById(templateId);
|
|
28
28
|
if (templateEl) {
|
|
29
|
-
// Remove HTML comments
|
|
29
|
+
// Remove HTML comments
|
|
30
30
|
let htmlContent = templateEl.innerHTML
|
|
31
31
|
.replace(/<!--[\s\S]*?-->/g, '')
|
|
32
32
|
.trim();
|
|
@@ -124,11 +124,6 @@ const TooltipService = () => {
|
|
|
124
124
|
if (latestContent === '') {
|
|
125
125
|
return false;
|
|
126
126
|
}
|
|
127
|
-
// Hide other tooltips to prevent overlapping (e.g. parent and child tooltips)
|
|
128
|
-
// unless this tooltip is triggered from inside an existing tooltip's popup.
|
|
129
|
-
if (!reference.closest('[data-tippy-root]')) {
|
|
130
|
-
hideAll({ exclude: tippyInstance });
|
|
131
|
-
}
|
|
132
127
|
// This is specific tooltip attributefor interactive
|
|
133
128
|
const isInteractive = tippyInstance.reference.hasAttribute('data-tooltip-interactive');
|
|
134
129
|
// placement attribute for tooltip
|