@teambit/react.ui.component-highlighter 0.0.495 → 0.0.499
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/dist/element-highlighter/element-highlighter.compositions.d.ts +1 -3
- package/dist/element-highlighter/element-highlighter.compositions.js +2 -2
- package/dist/element-highlighter/element-highlighter.compositions.js.map +1 -1
- package/dist/element-highlighter/element-highlighter.d.ts +2 -4
- package/dist/element-highlighter/element-highlighter.js +2 -2
- package/dist/element-highlighter/element-highlighter.js.map +1 -1
- package/dist/element-highlighter/index.d.ts +1 -1
- package/dist/hybrid-highlighter/hybrid-highlighter.d.ts +2 -3
- package/dist/hybrid-highlighter/hybrid-highlighter.js +2 -2
- package/dist/hybrid-highlighter/hybrid-highlighter.js.map +1 -1
- package/dist/label/component-strip.d.ts +0 -2
- package/dist/label/component-strip.js +2 -2
- package/dist/label/component-strip.js.map +1 -1
- package/dist/label/index.d.ts +1 -1
- package/dist/label/label.d.ts +1 -4
- package/dist/label/label.js +3 -3
- package/dist/label/label.js.map +1 -1
- package/dist/label/other-components.d.ts +1 -3
- package/dist/label/other-components.js +2 -2
- package/dist/label/other-components.js.map +1 -1
- package/element-highlighter/element-highlighter.compositions.tsx +3 -6
- package/element-highlighter/element-highlighter.tsx +2 -6
- package/element-highlighter/index.ts +1 -7
- package/hybrid-highlighter/hybrid-highlighter.tsx +1 -10
- package/label/component-strip.tsx +2 -5
- package/label/index.ts +1 -1
- package/label/label.tsx +4 -6
- package/label/other-components.tsx +2 -4
- package/package-tar/teambit-react.ui.component-highlighter-0.0.499.tgz +0 -0
- package/package.json +11 -11
- package/package-tar/teambit-react.ui.component-highlighter-0.0.495.tgz +0 -0
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
-
import { HighlighterSize } from './element-highlighter';
|
|
3
2
|
declare type HighlightedElementProps = {
|
|
4
3
|
style?: CSSProperties;
|
|
5
4
|
targetStyle?: CSSProperties;
|
|
6
5
|
className?: string;
|
|
7
6
|
watchMotion?: boolean;
|
|
8
|
-
size?: HighlighterSize;
|
|
9
7
|
};
|
|
10
|
-
export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className
|
|
8
|
+
export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => JSX.Element;
|
|
11
9
|
export declare const Customized: () => JSX.Element;
|
|
12
10
|
export declare const Sizes: () => JSX.Element;
|
|
13
11
|
export declare const MovingElement: () => JSX.Element;
|
|
@@ -32,14 +32,14 @@ const mockTarget = {
|
|
|
32
32
|
},
|
|
33
33
|
],
|
|
34
34
|
};
|
|
35
|
-
const HighlightedElement = ({ style, targetStyle, watchMotion, className
|
|
35
|
+
const HighlightedElement = ({ style, targetStyle, watchMotion, className }) => {
|
|
36
36
|
const [targetElement, setTargetElement] = (0, react_1.useState)(undefined);
|
|
37
37
|
const targetRef = (0, react_1.createRef)();
|
|
38
38
|
(0, react_1.useEffect)(() => setTargetElement(targetRef.current || undefined), [targetRef.current]);
|
|
39
39
|
const target = targetElement && Object.assign(Object.assign({}, mockTarget), { element: targetElement });
|
|
40
40
|
return (react_1.default.createElement("div", { className: className, style: { padding: '16px 16px 40px 16px', width: 300, fontFamily: 'sans-serif' } },
|
|
41
41
|
react_1.default.createElement("div", { ref: targetRef, style: Object.assign({ width: 100 }, targetStyle) }, "highlight target"),
|
|
42
|
-
target &&
|
|
42
|
+
target && react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, watchMotion: watchMotion, placement: "bottom" })));
|
|
43
43
|
};
|
|
44
44
|
exports.HighlightedElement = HighlightedElement;
|
|
45
45
|
const Customized = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,oJAAyG;AACzG,+CAA6E;AAC7E,+
|
|
1
|
+
{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,oJAAyG;AACzG,+CAA6E;AAC7E,+DAA4E;AAE5E,MAAM,UAAU,GAA6B;IAC3C,UAAU,EAAE;QACV;YACE,CAAC,+EAAkB,CAAC,EAAE;gBACpB,EAAE,EAAE,qCAAqC;aAC1C;SACF;KACF;CACF,CAAC;AASK,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAA2B,EAAE,EAAE;IAC5G,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAA0B,SAAS,CAAC,CAAC;IACvF,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAkB,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvF,MAAM,MAAM,GAAG,aAAa,oCAAS,UAAU,KAAE,OAAO,EAAE,aAAa,GAAE,CAAC;IAE1E,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACxG,uCAAK,GAAG,EAAE,SAAS,EAAE,KAAK,kBAAI,KAAK,EAAE,GAAG,IAAK,WAAW,wBAElD;QACL,MAAM,IAAI,8BAAC,wCAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,QAAQ,GAAG,CACxG,CACP,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,kBAAkB,sBAe7B;AAEK,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,8BAAC,0BAAkB,IACjB,KAAK,EACH;YACE,yBAAyB,EAAE,SAAS;YACpC,+BAA+B,EAAE,SAAS;YAC1C,gCAAgC,EAAE,SAAS;SAC3B,GAEpB,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB;AAEK,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,CACL;QACE,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI;QAC/C,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI;QAC/C,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI,CAC3C,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,KAAK,SAQhB;AAEK,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1E,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,8BAAC,0BAAkB,IAAC,WAAW,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,CAAC;AACrE,CAAC,CAAC;AATW,QAAA,aAAa,iBASxB"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
3
|
-
import { Placement
|
|
4
|
-
export declare type HighlighterSize = LabelSize;
|
|
3
|
+
import { Placement } from '../label';
|
|
5
4
|
export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
5
|
/** target element to highlight */
|
|
7
6
|
target: HighlightTarget;
|
|
@@ -11,7 +10,6 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
|
|
|
11
10
|
classes?: HighlightClasses;
|
|
12
11
|
/** continually update highlighter to match moving elements */
|
|
13
12
|
watchMotion?: boolean;
|
|
14
|
-
size?: HighlighterSize;
|
|
15
13
|
}
|
|
16
14
|
export { Placement };
|
|
17
15
|
export declare type HighlightTarget = {
|
|
@@ -25,4 +23,4 @@ export declare type HighlightClasses = {
|
|
|
25
23
|
frame?: string;
|
|
26
24
|
label?: string;
|
|
27
25
|
};
|
|
28
|
-
export declare function ElementHighlighter({ target, placement, watchMotion, className, classes,
|
|
26
|
+
export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, ...props }: ElementHighlighterProps): JSX.Element;
|
|
@@ -22,11 +22,11 @@ const label_1 = require("../label");
|
|
|
22
22
|
const ignore_highlighter_1 = require("../ignore-highlighter");
|
|
23
23
|
const element_highlighter_module_scss_1 = __importDefault(require("./element-highlighter.module.scss"));
|
|
24
24
|
function ElementHighlighter(_a) {
|
|
25
|
-
var { target, placement = 'top', watchMotion = true, className, classes
|
|
25
|
+
var { target, placement = 'top', watchMotion = true, className, classes } = _a, props = __rest(_a, ["target", "placement", "watchMotion", "className", "classes"]);
|
|
26
26
|
return (react_1.default.createElement("div", Object.assign({}, props, ignore_highlighter_1.excludeHighlighterAtt, { className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.container, element_highlighter_module_scss_1.default.container, className) }),
|
|
27
27
|
react_1.default.createElement(frame_1.Frame, { targetRef: target.element, className: (0, classnames_1.default)(element_highlighter_module_scss_1.default.frame, classes === null || classes === void 0 ? void 0 : classes.frame), watchMotion: watchMotion }),
|
|
28
28
|
target.components && (react_1.default.createElement(label_1.LabelContainer, { className: element_highlighter_module_scss_1.default.label, targetRef: target.element, placement: placement, watchMotion: watchMotion },
|
|
29
|
-
react_1.default.createElement(label_1.Label, { components: target.components, className: classes === null || classes === void 0 ? void 0 : classes.label
|
|
29
|
+
react_1.default.createElement(label_1.Label, { components: target.components, className: classes === null || classes === void 0 ? void 0 : classes.label })))));
|
|
30
30
|
}
|
|
31
31
|
exports.ElementHighlighter = ElementHighlighter;
|
|
32
32
|
//# sourceMappingURL=element-highlighter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,oCAAiC;AACjC,
|
|
1
|
+
{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,wGAAuD;AA4BvD,SAAgB,kBAAkB,CAAC,EAOT;QAPS,EACjC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,OAAO,OAEiB,EADrB,KAAK,cANyB,8DAOlC,CADS;IAER,OAAO,CACL,uDAAS,KAAK,EAAM,0CAAqB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/G,8BAAC,aAAK,IACJ,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EACnD,WAAW,EAAE,WAAW,GACxB;QAED,MAAM,CAAC,UAAU,IAAI,CACpB,8BAAC,sBAAc,IACb,SAAS,EAAE,yCAAM,CAAC,KAAK,EACvB,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;YAExB,8BAAC,aAAK,IAAC,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GAAI,CACpD,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AA5BD,gDA4BC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { ElementHighlighter } from './element-highlighter';
|
|
2
|
-
export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses
|
|
2
|
+
export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
|
-
import { Placement, HighlightClasses
|
|
2
|
+
import { Placement, HighlightClasses } from '../element-highlighter';
|
|
3
3
|
import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
|
|
4
4
|
export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
5
|
/** stop all highlighting and drop listeners */
|
|
@@ -31,7 +31,6 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
|
|
|
31
31
|
bgColor?: string;
|
|
32
32
|
bgColorHover?: string;
|
|
33
33
|
bgColorActive?: string;
|
|
34
|
-
size?: HighlighterSize;
|
|
35
34
|
}
|
|
36
35
|
/** automatically highlight components on hover */
|
|
37
|
-
export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive,
|
|
36
|
+
export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children, ...rest }: HybridHighlighterProps): JSX.Element;
|
|
@@ -42,7 +42,7 @@ const element_highlighter_1 = require("../element-highlighter");
|
|
|
42
42
|
const children_highlighter_1 = require("../children-highlighter");
|
|
43
43
|
/** automatically highlight components on hover */
|
|
44
44
|
function HybridHighlighter(_a) {
|
|
45
|
-
var { disabled, mode = 'hover', debounceSelection = 80, watchMotion = true, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive,
|
|
45
|
+
var { disabled, mode = 'hover', debounceSelection = 80, watchMotion = true, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children } = _a, rest = __rest(_a, ["disabled", "mode", "debounceSelection", "watchMotion", "placement", "rule", "componentRule", "classes", "highlightStyle", "className", "style", "bgColor", "bgColorHover", "bgColorActive", "children"]);
|
|
46
46
|
const ref = (0, react_1.createRef)();
|
|
47
47
|
const [targets, setTarget] = (0, react_1.useState)({});
|
|
48
48
|
const scopeClass = (0, react_1.useRef)(`hl-scope-${(0, uuid_1.v4)()}`).current;
|
|
@@ -70,7 +70,7 @@ function HybridHighlighter(_a) {
|
|
|
70
70
|
const _styles = (0, react_1.useMemo)(() => (Object.assign({ '--bit-highlighter-color': bgColor, '--bit-highlighter-color-hover': bgColorHover, '--bit-highlighter-color-active': bgColorActive }, style)), [bgColor, bgColorHover, bgColorActive, style]);
|
|
71
71
|
return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, handlers, { style: _styles, className: (0, classnames_1.default)(className, scopeClass), "data-nullify-component-highlight": true }),
|
|
72
72
|
children,
|
|
73
|
-
Object.entries(targets).map(([key, target]) => (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { key: key, target: target, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion
|
|
73
|
+
Object.entries(targets).map(([key, target]) => (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { key: key, target: target, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion })))));
|
|
74
74
|
}
|
|
75
75
|
exports.HybridHighlighter = HybridHighlighter;
|
|
76
76
|
//# sourceMappingURL=hybrid-highlighter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hybrid-highlighter.js","sourceRoot":"","sources":["../../hybrid-highlighter/hybrid-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8F;AAC9F,4DAAoC;AACpC,+BAA0B;AAE1B,4DAA2D;AAC3D,
|
|
1
|
+
{"version":3,"file":"hybrid-highlighter.js","sourceRoot":"","sources":["../../hybrid-highlighter/hybrid-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8F;AAC9F,4DAAoC;AACpC,+BAA0B;AAE1B,4DAA2D;AAC3D,gEAA0G;AAC1G,kEAAiE;AAqCjE,kDAAkD;AAClD,SAAgB,iBAAiB,CAAC,EAkBT;QAlBS,EAChC,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,iBAAiB,GAAG,EAAE,EACtB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,IAAI,EACJ,aAAa,EAEb,OAAO,EACP,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,QAAQ,OAEe,EADpB,IAAI,cAjByB,yMAkBjC,CADQ;IAEP,MAAM,GAAG,GAAG,IAAA,iBAAS,GAAkB,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAkC,EAAE,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,YAAY,IAAA,SAAE,GAAE,EAAE,CAAC,CAAC,OAAO,CAAC;IACtD,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtD,8BAA8B;IAC9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,QAAQ,GAAG,IAAA,uCAAmB,EAClC,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,IAAI,EACJ;QACE,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACpD,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,OAAO;QACtC,IAAI;QACJ,aAAa;KACd,CACF,CAAC;IAEF,IAAA,6CAAsB,EAAC;QACrB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,GAAG;QACb,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,aAAa;QAC5C,IAAI;QACJ,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CAAC,iBACJ,yBAAyB,EAAE,OAAO,EAClC,+BAA+B,EAAE,YAAY,EAC7C,gCAAgC,EAAE,aAAa,IAC5C,KAAK,EACR,EACF,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,CAAC,CAC9C,CAAC;IAEF,OAAO,CACL,qDACE,GAAG,EAAE,GAAG,IACJ,IAAI,EACJ,QAAQ,IACZ,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,UAAU,CAAC;QAG3C,QAAQ;QAKR,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC9C,8BAAC,wCAAkB,IACjB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAtFD,8CAsFC"}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
3
|
-
export declare type ComponentStripSize = 's' | 'm' | 'l';
|
|
4
3
|
interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
4
|
component: ComponentMetaHolder;
|
|
6
|
-
size?: ComponentStripSize;
|
|
7
5
|
}
|
|
8
6
|
export declare const ComponentStrip: React.ForwardRefExoticComponent<ComponentStripProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
7
|
export {};
|
|
@@ -30,11 +30,11 @@ const component_modules_component_url_1 = require("@teambit/component.modules.co
|
|
|
30
30
|
const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
|
|
31
31
|
const component_strip_module_scss_1 = __importDefault(require("./component-strip.module.scss"));
|
|
32
32
|
const links_1 = require("./links");
|
|
33
|
-
exports.ComponentStrip = (0, react_1.forwardRef)(function ComponentStrip({ component,
|
|
33
|
+
exports.ComponentStrip = (0, react_1.forwardRef)(function ComponentStrip({ component, children }, ref) {
|
|
34
34
|
const { id, homepage, exported } = component[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
|
|
35
35
|
const parsedId = (0, react_1.useMemo)(() => component_id_1.ComponentID.tryFromString(id), [id]);
|
|
36
36
|
const componentLink = homepage || (0, links_1.calcComponentLink)(parsedId, exported);
|
|
37
|
-
return (react_1.default.createElement("div", { className: component_strip_module_scss_1.default.componentStrip, ref: ref
|
|
37
|
+
return (react_1.default.createElement("div", { className: component_strip_module_scss_1.default.componentStrip, ref: ref },
|
|
38
38
|
!parsedId && react_1.default.createElement(LabelBlock, { link: homepage }, id),
|
|
39
39
|
parsedId && react_1.default.createElement(LabelBlock, { link: component_modules_component_url_1.ScopeUrl.toUrl(parsedId.scope) }, parsedId.scope),
|
|
40
40
|
parsedId && (react_1.default.createElement(LabelBlock, { link: componentLink },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-strip.js","sourceRoot":"","sources":["../../label/component-strip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4E;AAC5E,sFAAkE;AAClE,wDAAoD;AACpD,8FAAoE;AACpE,oJAG6E;AAC7E,gGAAmD;AACnD,mCAA4C;
|
|
1
|
+
{"version":3,"file":"component-strip.js","sourceRoot":"","sources":["../../label/component-strip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4E;AAC5E,sFAAkE;AAClE,wDAAoD;AACpD,8FAAoE;AACpE,oJAG6E;AAC7E,gGAAmD;AACnD,mCAA4C;AAK/B,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,SAAS,cAAc,CAC9D,EAAE,SAAS,EAAE,QAAQ,EAAuB,EAC5C,GAAiC;IAEjC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,+EAAkB,CAAC,CAAC;IAEjE,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAA,yBAAiB,EAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAExE,OAAO,CACL,uCAAK,SAAS,EAAE,qCAAM,CAAC,cAAc,EAAE,GAAG,EAAE,GAAG;QAC5C,CAAC,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,QAAQ,IAAG,EAAE,CAAc;QAC1D,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,0CAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAC,KAAK,CAAc;QAC3F,QAAQ,IAAI,CACX,8BAAC,UAAU,IAAC,IAAI,EAAE,aAAa;YAC5B,QAAQ,CAAC,QAAQ;YACjB,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE,CACjE,CACd;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAA0C;IAC5E,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,wCAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IACxC,OAAO,CACL,8BAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,IAC/B,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC"}
|
package/dist/label/index.d.ts
CHANGED
package/dist/label/label.d.ts
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
3
|
-
import { ComponentStripSize } from './component-strip';
|
|
4
|
-
export declare type LabelSize = ComponentStripSize;
|
|
5
3
|
export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
4
|
components: ComponentMetaHolder[];
|
|
7
|
-
size?: LabelSize;
|
|
8
5
|
}
|
|
9
|
-
export declare function Label({ components,
|
|
6
|
+
export declare function Label({ components, ...props }: LabelProps): JSX.Element;
|
package/dist/label/label.js
CHANGED
|
@@ -40,7 +40,7 @@ const label_module_scss_1 = __importDefault(require("./label.module.scss"));
|
|
|
40
40
|
const component_strip_1 = require("./component-strip");
|
|
41
41
|
const other_components_1 = require("./other-components");
|
|
42
42
|
function Label(_a) {
|
|
43
|
-
var { components
|
|
43
|
+
var { components } = _a, props = __rest(_a, ["components"]);
|
|
44
44
|
const [showMore, setShowMore] = (0, react_1.useState)(false);
|
|
45
45
|
const last = components.slice(-1).pop();
|
|
46
46
|
if (!last)
|
|
@@ -50,8 +50,8 @@ function Label(_a) {
|
|
|
50
50
|
(0, react_1.useEffect)(() => {
|
|
51
51
|
setShowMore(false);
|
|
52
52
|
}, [components]);
|
|
53
|
-
return (react_1.default.createElement(other_components_1.OtherComponentsPopper, { components: components, visible: showMore, placement: "bottom-start"
|
|
54
|
-
react_1.default.createElement(component_strip_1.ComponentStrip, Object.assign({}, props, { component: last
|
|
53
|
+
return (react_1.default.createElement(other_components_1.OtherComponentsPopper, { components: components, visible: showMore, placement: "bottom-start" },
|
|
54
|
+
react_1.default.createElement(component_strip_1.ComponentStrip, Object.assign({}, props, { component: last }), hasMore && (react_1.default.createElement("span", { className: (0, classnames_1.default)(label_module_scss_1.default.othersTooltip, showMore && label_module_scss_1.default.active), onClick: () => setShowMore((x) => !x) })))));
|
|
55
55
|
}
|
|
56
56
|
exports.Label = Label;
|
|
57
57
|
//# sourceMappingURL=label.js.map
|
package/dist/label/label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,4DAAoC;AAGpC,4EAAyC;AACzC,
|
|
1
|
+
{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,4DAAoC;AAGpC,4EAAyC;AACzC,uDAAmD;AACnD,yDAA2D;AAM3D,SAAgB,KAAK,CAAC,EAAoC;QAApC,EAAE,UAAU,OAAwB,EAAnB,KAAK,cAAtB,cAAwB,CAAF;IAC1C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;IACxC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtC,+BAA+B;IAC/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,8BAAC,wCAAqB,IAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc;QACxF,8BAAC,gCAAc,oBAAK,KAAK,IAAE,SAAS,EAAE,IAAI,KACvC,OAAO,IAAI,CACV,wCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAAM,CAAC,aAAa,EAAE,QAAQ,IAAI,2BAAM,CAAC,MAAM,CAAC,EACtE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GACrC,CACH,CACc,CACK,CACzB,CAAC;AACJ,CAAC;AAxBD,sBAwBC"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { TippyProps } from '@tippyjs/react/headless';
|
|
2
2
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
3
|
-
import { ComponentStripSize } from './component-strip';
|
|
4
3
|
export declare type OtherComponentsProps = {
|
|
5
4
|
components: ComponentMetaHolder[];
|
|
6
|
-
size?: ComponentStripSize;
|
|
7
5
|
start?: number;
|
|
8
6
|
end?: number;
|
|
9
7
|
} & TippyProps;
|
|
10
|
-
export declare function OtherComponentsPopper({ components, children, start, end,
|
|
8
|
+
export declare function OtherComponentsPopper({ components, children, start, end, placement, interactive, ...tippyProps }: OtherComponentsProps): JSX.Element;
|
|
@@ -21,11 +21,11 @@ const component_strip_1 = require("./component-strip");
|
|
|
21
21
|
const label_module_scss_1 = __importDefault(require("./label.module.scss"));
|
|
22
22
|
// a popper ("tooltip") that shows the additional React Components related to this dom element
|
|
23
23
|
function OtherComponentsPopper(_a) {
|
|
24
|
-
var { components, children, start, end = -1,
|
|
24
|
+
var { components, children, start, end = -1, placement = 'bottom', interactive = true } = _a, tippyProps = __rest(_a, ["components", "children", "start", "end", "placement", "interactive"]);
|
|
25
25
|
const content = (react_1.default.createElement(react_1.default.Fragment, null, components
|
|
26
26
|
.slice(start, end)
|
|
27
27
|
.reverse()
|
|
28
|
-
.map((comp, idx) => (react_1.default.createElement(component_strip_1.ComponentStrip, { key: idx, component: comp
|
|
28
|
+
.map((comp, idx) => (react_1.default.createElement(component_strip_1.ComponentStrip, { key: idx, component: comp })))));
|
|
29
29
|
return (react_1.default.createElement(headless_1.default, Object.assign({ placement: placement, interactive: interactive }, tippyProps, {
|
|
30
30
|
// second parameter "content" is always undefined, use content inline
|
|
31
31
|
// https://github.com/atomiks/tippyjs-react/issues/341
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"other-components.js","sourceRoot":"","sources":["../../label/other-components.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAA4D;AAG5D,
|
|
1
|
+
{"version":3,"file":"other-components.js","sourceRoot":"","sources":["../../label/other-components.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAA4D;AAG5D,uDAAmD;AACnD,4EAAyC;AAQzC,8FAA8F;AAC9F,SAAgB,qBAAqB,CAAC,EAQf;QARe,EACpC,UAAU,EACV,QAAQ,EACR,KAAK,EACL,GAAG,GAAG,CAAC,CAAC,EACR,SAAS,GAAG,QAAQ,EACpB,WAAW,GAAG,IAAI,OAEG,EADlB,UAAU,cAPuB,sEAQrC,CADc;IAEb,MAAM,OAAO,GAAG,CACd,8DACG,UAAU;SACR,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC;SACjB,OAAO,EAAE;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAClB,8BAAC,gCAAc,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,GAAI,CAC9C,CAAC,CACH,CACJ,CAAC;IAEF,OAAO,CACL,8BAAC,kBAAK,kBACJ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IACpB,UAAU;QACd,qEAAqE;QACrE,sDAAsD;QACtD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACjB,uDAAS,KAAK,IAAE,SAAS,EAAE,2BAAM,CAAC,eAAe,KAC9C,OAAO,CACJ,CACP,KAEA,QAAQ,CACH,CACT,CAAC;AACJ,CAAC;AApCD,sDAoCC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
2
2
|
import React, { useState, createRef, useEffect, CSSProperties } from 'react';
|
|
3
|
-
import { ElementHighlighter,
|
|
3
|
+
import { ElementHighlighter, HighlightTarget } from './element-highlighter';
|
|
4
4
|
|
|
5
5
|
const mockTarget: Partial<HighlightTarget> = {
|
|
6
6
|
components: [
|
|
@@ -17,10 +17,9 @@ type HighlightedElementProps = {
|
|
|
17
17
|
targetStyle?: CSSProperties;
|
|
18
18
|
className?: string;
|
|
19
19
|
watchMotion?: boolean;
|
|
20
|
-
size?: HighlighterSize;
|
|
21
20
|
};
|
|
22
21
|
|
|
23
|
-
export const HighlightedElement = ({ style, targetStyle, watchMotion, className
|
|
22
|
+
export const HighlightedElement = ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => {
|
|
24
23
|
const [targetElement, setTargetElement] = useState<HTMLElement | undefined>(undefined);
|
|
25
24
|
const targetRef = createRef<HTMLDivElement>();
|
|
26
25
|
|
|
@@ -32,9 +31,7 @@ export const HighlightedElement = ({ style, targetStyle, watchMotion, className,
|
|
|
32
31
|
<div ref={targetRef} style={{ width: 100, ...targetStyle }}>
|
|
33
32
|
highlight target
|
|
34
33
|
</div>
|
|
35
|
-
{target &&
|
|
36
|
-
<ElementHighlighter target={target} style={style} watchMotion={watchMotion} placement="bottom" size={size} />
|
|
37
|
-
)}
|
|
34
|
+
{target && <ElementHighlighter target={target} style={style} watchMotion={watchMotion} placement="bottom" />}
|
|
38
35
|
</div>
|
|
39
36
|
);
|
|
40
37
|
};
|
|
@@ -2,12 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
4
4
|
import { Frame } from '../frame';
|
|
5
|
-
import { Label, LabelContainer, Placement
|
|
5
|
+
import { Label, LabelContainer, Placement } from '../label';
|
|
6
6
|
import { excludeHighlighterAtt } from '../ignore-highlighter';
|
|
7
7
|
import styles from './element-highlighter.module.scss';
|
|
8
8
|
|
|
9
|
-
export type HighlighterSize = LabelSize;
|
|
10
|
-
|
|
11
9
|
export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
12
10
|
/** target element to highlight */
|
|
13
11
|
target: HighlightTarget;
|
|
@@ -17,7 +15,6 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
|
|
|
17
15
|
classes?: HighlightClasses;
|
|
18
16
|
/** continually update highlighter to match moving elements */
|
|
19
17
|
watchMotion?: boolean;
|
|
20
|
-
size?: HighlighterSize;
|
|
21
18
|
}
|
|
22
19
|
|
|
23
20
|
export { Placement };
|
|
@@ -41,7 +38,6 @@ export function ElementHighlighter({
|
|
|
41
38
|
watchMotion = true,
|
|
42
39
|
className,
|
|
43
40
|
classes,
|
|
44
|
-
size,
|
|
45
41
|
...props
|
|
46
42
|
}: ElementHighlighterProps) {
|
|
47
43
|
return (
|
|
@@ -59,7 +55,7 @@ export function ElementHighlighter({
|
|
|
59
55
|
placement={placement}
|
|
60
56
|
watchMotion={watchMotion}
|
|
61
57
|
>
|
|
62
|
-
<Label components={target.components} className={classes?.label}
|
|
58
|
+
<Label components={target.components} className={classes?.label} />
|
|
63
59
|
</LabelContainer>
|
|
64
60
|
)}
|
|
65
61
|
</div>
|
|
@@ -1,8 +1,2 @@
|
|
|
1
1
|
export { ElementHighlighter } from './element-highlighter';
|
|
2
|
-
export type {
|
|
3
|
-
ElementHighlighterProps,
|
|
4
|
-
HighlightTarget,
|
|
5
|
-
Placement,
|
|
6
|
-
HighlightClasses,
|
|
7
|
-
HighlighterSize,
|
|
8
|
-
} from './element-highlighter';
|
|
2
|
+
export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
|
|
@@ -3,13 +3,7 @@ import classnames from 'classnames';
|
|
|
3
3
|
import { v4 } from 'uuid';
|
|
4
4
|
|
|
5
5
|
import { useHoverHighlighter } from '../hover-highlighter';
|
|
6
|
-
import {
|
|
7
|
-
ElementHighlighter,
|
|
8
|
-
HighlightTarget,
|
|
9
|
-
Placement,
|
|
10
|
-
HighlightClasses,
|
|
11
|
-
HighlighterSize,
|
|
12
|
-
} from '../element-highlighter';
|
|
6
|
+
import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
|
|
13
7
|
import { useChildrenHighlighter } from '../children-highlighter';
|
|
14
8
|
import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
|
|
15
9
|
|
|
@@ -45,7 +39,6 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
|
|
|
45
39
|
bgColor?: string;
|
|
46
40
|
bgColorHover?: string;
|
|
47
41
|
bgColorActive?: string;
|
|
48
|
-
size?: HighlighterSize;
|
|
49
42
|
}
|
|
50
43
|
|
|
51
44
|
/** automatically highlight components on hover */
|
|
@@ -65,7 +58,6 @@ export function HybridHighlighter({
|
|
|
65
58
|
bgColor,
|
|
66
59
|
bgColorHover,
|
|
67
60
|
bgColorActive,
|
|
68
|
-
size,
|
|
69
61
|
children,
|
|
70
62
|
...rest
|
|
71
63
|
}: HybridHighlighterProps) {
|
|
@@ -132,7 +124,6 @@ export function HybridHighlighter({
|
|
|
132
124
|
style={highlightStyle}
|
|
133
125
|
placement={placement}
|
|
134
126
|
watchMotion={watchMotion}
|
|
135
|
-
size={size}
|
|
136
127
|
/>
|
|
137
128
|
))}
|
|
138
129
|
</div>
|
|
@@ -9,14 +9,11 @@ import {
|
|
|
9
9
|
import styles from './component-strip.module.scss';
|
|
10
10
|
import { calcComponentLink } from './links';
|
|
11
11
|
|
|
12
|
-
export type ComponentStripSize = 's' | 'm' | 'l';
|
|
13
|
-
|
|
14
12
|
interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
15
13
|
component: ComponentMetaHolder;
|
|
16
|
-
size?: ComponentStripSize;
|
|
17
14
|
}
|
|
18
15
|
export const ComponentStrip = forwardRef(function ComponentStrip(
|
|
19
|
-
{ component,
|
|
16
|
+
{ component, children }: ComponentStripProps,
|
|
20
17
|
ref: ForwardedRef<HTMLDivElement>
|
|
21
18
|
) {
|
|
22
19
|
const { id, homepage, exported } = component[componentMetaField];
|
|
@@ -25,7 +22,7 @@ export const ComponentStrip = forwardRef(function ComponentStrip(
|
|
|
25
22
|
const componentLink = homepage || calcComponentLink(parsedId, exported);
|
|
26
23
|
|
|
27
24
|
return (
|
|
28
|
-
<div className={styles.componentStrip} ref={ref}
|
|
25
|
+
<div className={styles.componentStrip} ref={ref}>
|
|
29
26
|
{!parsedId && <LabelBlock link={homepage}>{id}</LabelBlock>}
|
|
30
27
|
{parsedId && <LabelBlock link={ScopeUrl.toUrl(parsedId.scope)}>{parsedId.scope}</LabelBlock>}
|
|
31
28
|
{parsedId && (
|
package/label/index.ts
CHANGED
package/label/label.tsx
CHANGED
|
@@ -3,16 +3,14 @@ import classNames from 'classnames';
|
|
|
3
3
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
4
4
|
|
|
5
5
|
import styles from './label.module.scss';
|
|
6
|
-
import { ComponentStrip
|
|
6
|
+
import { ComponentStrip } from './component-strip';
|
|
7
7
|
import { OtherComponentsPopper } from './other-components';
|
|
8
8
|
|
|
9
|
-
export type LabelSize = ComponentStripSize;
|
|
10
9
|
export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
11
10
|
components: ComponentMetaHolder[];
|
|
12
|
-
size?: LabelSize;
|
|
13
11
|
}
|
|
14
12
|
|
|
15
|
-
export function Label({ components,
|
|
13
|
+
export function Label({ components, ...props }: LabelProps) {
|
|
16
14
|
const [showMore, setShowMore] = useState(false);
|
|
17
15
|
const last = components.slice(-1).pop();
|
|
18
16
|
if (!last) return null;
|
|
@@ -25,8 +23,8 @@ export function Label({ components, size, ...props }: LabelProps) {
|
|
|
25
23
|
}, [components]);
|
|
26
24
|
|
|
27
25
|
return (
|
|
28
|
-
<OtherComponentsPopper components={components} visible={showMore} placement="bottom-start"
|
|
29
|
-
<ComponentStrip {...props} component={last}
|
|
26
|
+
<OtherComponentsPopper components={components} visible={showMore} placement="bottom-start">
|
|
27
|
+
<ComponentStrip {...props} component={last}>
|
|
30
28
|
{hasMore && (
|
|
31
29
|
<span
|
|
32
30
|
className={classNames(styles.othersTooltip, showMore && styles.active)}
|
|
@@ -2,12 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import Tippy, { TippyProps } from '@tippyjs/react/headless';
|
|
3
3
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
4
4
|
|
|
5
|
-
import { ComponentStrip
|
|
5
|
+
import { ComponentStrip } from './component-strip';
|
|
6
6
|
import styles from './label.module.scss';
|
|
7
7
|
|
|
8
8
|
export type OtherComponentsProps = {
|
|
9
9
|
components: ComponentMetaHolder[];
|
|
10
|
-
size?: ComponentStripSize;
|
|
11
10
|
start?: number;
|
|
12
11
|
end?: number;
|
|
13
12
|
} & TippyProps;
|
|
@@ -18,7 +17,6 @@ export function OtherComponentsPopper({
|
|
|
18
17
|
children,
|
|
19
18
|
start,
|
|
20
19
|
end = -1,
|
|
21
|
-
size,
|
|
22
20
|
placement = 'bottom',
|
|
23
21
|
interactive = true,
|
|
24
22
|
...tippyProps
|
|
@@ -29,7 +27,7 @@ export function OtherComponentsPopper({
|
|
|
29
27
|
.slice(start, end)
|
|
30
28
|
.reverse()
|
|
31
29
|
.map((comp, idx) => (
|
|
32
|
-
<ComponentStrip key={idx} component={comp}
|
|
30
|
+
<ComponentStrip key={idx} component={comp} />
|
|
33
31
|
))}
|
|
34
32
|
</>
|
|
35
33
|
);
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/react.ui.component-highlighter",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.499",
|
|
4
4
|
"homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "teambit.react",
|
|
8
8
|
"name": "ui/component-highlighter",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.499"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"get-xpath": "3.0.1",
|
|
13
13
|
"classnames": "2.2.6",
|
|
14
|
+
"use-debounce": "6.0.1",
|
|
14
15
|
"@popperjs/core": "2.6.0",
|
|
15
16
|
"react-popper": "2.2.4",
|
|
16
|
-
"use-debounce": "6.0.1",
|
|
17
17
|
"uuid": "3.4.0",
|
|
18
18
|
"url-join": "4.0.1",
|
|
19
19
|
"@tippyjs/react": "4.2.0",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"@teambit/base-ui.utils.popper-js.ignore-popper-size": "1.0.0",
|
|
22
22
|
"@teambit/base-ui.utils.popper-js.resize-to-match-reference": "1.0.0",
|
|
23
23
|
"@teambit/base-ui.routing.native-link": "1.0.0",
|
|
24
|
-
"@teambit/component-id": "0.0.
|
|
25
|
-
"@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.
|
|
26
|
-
"@teambit/react.modules.dom-to-react": "0.0.
|
|
27
|
-
"@teambit/ui-foundation.ui.constants.z-indexes": "0.0.
|
|
28
|
-
"@teambit/react.ui.hover-selector": "0.0.
|
|
29
|
-
"@teambit/component.modules.component-url": "0.0.
|
|
24
|
+
"@teambit/component-id": "0.0.393",
|
|
25
|
+
"@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.15",
|
|
26
|
+
"@teambit/react.modules.dom-to-react": "0.0.481",
|
|
27
|
+
"@teambit/ui-foundation.ui.constants.z-indexes": "0.0.481",
|
|
28
|
+
"@teambit/react.ui.hover-selector": "0.0.159",
|
|
29
|
+
"@teambit/component.modules.component-url": "0.0.114"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@types/react": "^17.0.8",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@teambit/design.ui.icon-button": "1.0.10"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"@teambit/legacy": "1.0.
|
|
46
|
+
"@teambit/legacy": "1.0.189",
|
|
47
47
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
48
48
|
"react": "^16.8.0 || ^17.0.0"
|
|
49
49
|
},
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"react": "-"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
|
-
"@teambit/legacy": "1.0.
|
|
74
|
+
"@teambit/legacy": "1.0.189",
|
|
75
75
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
76
76
|
"react": "^16.8.0 || ^17.0.0"
|
|
77
77
|
}
|
|
Binary file
|