@stack-spot/citric-react 0.30.0 → 0.30.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/IconBox.d.ts.map +1 -1
- package/dist/components/IconBox.js +12 -2
- package/dist/components/IconBox.js.map +1 -1
- package/dist/components/ImageBox.d.ts.map +1 -1
- package/dist/components/ImageBox.js +12 -2
- package/dist/components/ImageBox.js.map +1 -1
- package/package.json +1 -1
- package/src/components/IconBox.tsx +13 -9
- package/src/components/ImageBox.tsx +13 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,GACD,CAAC,SAAS,UAAU,QAAQ,CAAC,SAAS,SAAS,wGAC4B,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,GACD,CAAC,SAAS,UAAU,QAAQ,CAAC,SAAS,SAAS,wGAC4B,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,4CAwB/G,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,SAAS,SAAS,kCAAkC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,4CAGhH,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,GACD,CAAC,SAAS,SAAS,qBAAqB,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,4CAG5F,CAAA"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
3
|
import { useCitricController } from '../context/hooks.js';
|
|
4
4
|
import { withRef } from '../utils/react.js';
|
|
5
|
-
import { CitricComponent } from './CitricComponent.js';
|
|
5
|
+
import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
6
6
|
/**
|
|
7
7
|
* Renders a wrapper for an icon. The icon must specified by the properties "icon" and "group", this component accepts no children.
|
|
8
8
|
*
|
|
@@ -25,7 +25,17 @@ export const IconBox = withRef(function IconBox({ group, icon, tag, appearance,
|
|
|
25
25
|
else if (tag === 'a')
|
|
26
26
|
citric?.onClickLink?.(e, metadata);
|
|
27
27
|
}
|
|
28
|
-
|
|
28
|
+
const componentProps = {
|
|
29
|
+
tag: (tag || 'i'),
|
|
30
|
+
component: 'icon-box',
|
|
31
|
+
className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]),
|
|
32
|
+
'data-feedback': feedback || undefined,
|
|
33
|
+
onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
|
|
34
|
+
...props,
|
|
35
|
+
};
|
|
36
|
+
return tag === 'a' && citric?.renderLink
|
|
37
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
38
|
+
: _jsx(CitricComponent, { ...componentProps });
|
|
29
39
|
});
|
|
30
40
|
/**
|
|
31
41
|
* A shortcut for `<IconBox tag="button">`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAwDlE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAC5B,SAAS,OAAO,CACd,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAE5G,KAAK,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,KAAK,CAAA,CAAC,gBAAgB;IACpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;aACrD,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;IAC1D,CAAC;IAED,MAAM,cAAc,GAAG;QACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ;QACxB,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;QAC9F,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;QACpE,GAAG,KAAK;KACA,CAAA;IAEV,OAAO,GAAG,KAAK,GAAG,IAAI,MAAM,EAAE,UAAU;QACtC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAClD,CAAC,CAAC,KAAC,eAAe,OAAK,cAAc,GAAI,CAAA;AAC7C,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAC/B,SAAS,UAAU,CAAkC,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0C;IAC7G,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,GAAK,CAAA;AACrE,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAC7B,SAAS,QAAQ,CAAkC,KAAwC;IACzF,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACvC,CAAC,CACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GACD,CAAC,SAAS,WAAW,uFACwC,aAAa,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GACD,CAAC,SAAS,WAAW,uFACwC,aAAa,CAAC,CAAC,CAAC,4CAwBhG,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,UACM,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,4CAGjE,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,UACM,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,4CAG1D,CAAA"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
3
|
import { useCitricController } from '../context/hooks.js';
|
|
4
4
|
import { withRef } from '../utils/react.js';
|
|
5
|
-
import { CitricComponent } from './CitricComponent.js';
|
|
5
|
+
import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
6
6
|
/**
|
|
7
7
|
* Renders a wrapper for its child (normally an image). The image will be resized and cropped to fit the container. The image is not cropped
|
|
8
8
|
* if the property "feedback" is set.
|
|
@@ -26,7 +26,17 @@ export const ImageBox = withRef(function ImageBox({ tag, appearance, size, class
|
|
|
26
26
|
else if (tag === 'a')
|
|
27
27
|
citric?.onClickLink?.(e, metadata);
|
|
28
28
|
}
|
|
29
|
-
|
|
29
|
+
const componentProps = {
|
|
30
|
+
tag: (tag || 'i'),
|
|
31
|
+
component: 'icon-box',
|
|
32
|
+
className: listToClass([appearance, size, className]),
|
|
33
|
+
'data-feedback': feedback || undefined,
|
|
34
|
+
onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
|
|
35
|
+
...props,
|
|
36
|
+
};
|
|
37
|
+
return tag === 'a' && citric?.renderLink
|
|
38
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
39
|
+
: _jsx(CitricComponent, { ...componentProps });
|
|
30
40
|
});
|
|
31
41
|
/**
|
|
32
42
|
* A shortcut for `<ImageBox tag="button">`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+
|
|
1
|
+
{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+ClE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAC7B,SAAS,QAAQ,CACf,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IAE7F,KAAK,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,KAAK,CAAA,CAAC,gBAAgB;IACpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;aACrD,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;IAC1D,CAAC;IAED,MAAM,cAAc,GAAG;QACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ;QACxB,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;QACrD,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;QACpE,GAAG,KAAK;KACA,CAAA;IAEV,OAAO,GAAG,KAAK,GAAG,IAAI,MAAM,EAAE,UAAU;QACtC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAClD,CAAC,CAAC,KAAC,eAAe,OAAK,cAAc,GAAI,CAAA;AAC7C,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAChC,SAAS,WAAW,CAAC,KAA2C;IAC9D,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAI,CAAA;AAC3E,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAC9B,SAAS,SAAS,CAAC,KAAsC;IACvD,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACxC,CAAC,CACF,CAAA"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import { listToClass } from '@stack-spot/portal-theme'
|
|
|
3
3
|
import { useCitricController } from '../context/hooks'
|
|
4
4
|
import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
|
|
5
5
|
import { withRef } from '../utils/react'
|
|
6
|
-
import { CitricComponent } from './CitricComponent'
|
|
6
|
+
import { asCitricProps, CitricComponent } from './CitricComponent'
|
|
7
7
|
|
|
8
8
|
type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
|
|
9
9
|
|
|
@@ -84,14 +84,18 @@ export const IconBox = withRef(
|
|
|
84
84
|
else if (tag === 'a') citric?.onClickLink?.(e, metadata)
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
tag
|
|
89
|
-
component
|
|
90
|
-
className
|
|
91
|
-
data-feedback
|
|
92
|
-
onClick
|
|
93
|
-
|
|
94
|
-
|
|
87
|
+
const componentProps = {
|
|
88
|
+
tag: (tag || 'i') as any,
|
|
89
|
+
component: 'icon-box',
|
|
90
|
+
className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]),
|
|
91
|
+
'data-feedback': feedback || undefined,
|
|
92
|
+
onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
|
|
93
|
+
...props,
|
|
94
|
+
} as const
|
|
95
|
+
|
|
96
|
+
return tag === 'a' && citric?.renderLink
|
|
97
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
98
|
+
: <CitricComponent {...componentProps} />
|
|
95
99
|
},
|
|
96
100
|
)
|
|
97
101
|
|
|
@@ -2,7 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
|
|
|
2
2
|
import { useCitricController } from '../context/hooks'
|
|
3
3
|
import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
|
|
4
4
|
import { withRef } from '../utils/react'
|
|
5
|
-
import { CitricComponent } from './CitricComponent'
|
|
5
|
+
import { asCitricProps, CitricComponent } from './CitricComponent'
|
|
6
6
|
|
|
7
7
|
type ImageBoxTag = 'a' | 'button' | 'span' | 'div'
|
|
8
8
|
|
|
@@ -75,14 +75,18 @@ export const ImageBox = withRef(
|
|
|
75
75
|
else if (tag === 'a') citric?.onClickLink?.(e, metadata)
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
|
|
79
|
-
tag
|
|
80
|
-
component
|
|
81
|
-
className
|
|
82
|
-
data-feedback
|
|
83
|
-
onClick
|
|
84
|
-
|
|
85
|
-
|
|
78
|
+
const componentProps = {
|
|
79
|
+
tag: (tag || 'i') as any,
|
|
80
|
+
component: 'icon-box',
|
|
81
|
+
className: listToClass([appearance, size, className]),
|
|
82
|
+
'data-feedback': feedback || undefined,
|
|
83
|
+
onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
|
|
84
|
+
...props,
|
|
85
|
+
} as const
|
|
86
|
+
|
|
87
|
+
return tag === 'a' && citric?.renderLink
|
|
88
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
89
|
+
: <CitricComponent {...componentProps} />
|
|
86
90
|
},
|
|
87
91
|
)
|
|
88
92
|
|