@imposium-hub/components 2.2.0 → 2.2.2
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/cjs/components/button/Button.d.ts +1 -0
- package/dist/cjs/components/button/Button.js +3 -3
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/utils/assets.d.ts +1 -1
- package/dist/cjs/utils/assets.js +10 -9
- package/dist/cjs/utils/assets.js.map +1 -1
- package/dist/esm/components/button/Button.d.ts +1 -0
- package/dist/esm/components/button/Button.js +3 -3
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/utils/assets.d.ts +1 -1
- package/dist/esm/utils/assets.js +9 -9
- package/dist/esm/utils/assets.js.map +1 -1
- package/package.json +1 -1
- package/src/components/button/Button.tsx +4 -3
- package/src/utils/assets.ts +12 -9
|
@@ -68,10 +68,10 @@ var Button = /** @class */ (function (_super) {
|
|
|
68
68
|
Button.prototype.render = function () {
|
|
69
69
|
var _this = this;
|
|
70
70
|
var _a = this.props, style = _a.style, color = _a.color, size = _a.size, customStyles = _a.customStyles;
|
|
71
|
-
var _b = this.props, width = _b.width, loading = _b.loading, tooltip = _b.tooltip;
|
|
72
|
-
var _c = this.props, active = _c.active, disabled = _c.disabled, buttonRef = _c.buttonRef;
|
|
71
|
+
var _b = this.props, width = _b.width, loading = _b.loading, tooltip = _b.tooltip, customClass = _b.customClass, active = _b.active, disabled = _b.disabled, buttonRef = _b.buttonRef;
|
|
73
72
|
var activeClass = active ? 'active' : '';
|
|
74
73
|
var disabledClass = disabled ? 'disabled' : '';
|
|
74
|
+
var customClassName = customClass ? customClass : '';
|
|
75
75
|
if (!size) {
|
|
76
76
|
size = '';
|
|
77
77
|
}
|
|
@@ -92,7 +92,7 @@ var Button = /** @class */ (function (_super) {
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
var kids = !loading ? (this.props.children) : (React.createElement("span", { className: 'loading-icon' }, icons_1.ICON_CIRCLE_NOTCH));
|
|
95
|
-
var content = (React.createElement("div", __assign({}, (0, Tooltip_1.renderTooltipProps)(this.tooltipId, tooltip), { ref: buttonRef, className: "imposium-btn btn-".concat(style, " ").concat(size, " ").concat(color, " ").concat(activeClass, " ").concat(disabledClass), onClick: function (e) { return _this.onClick(e); }, style: customStyles }),
|
|
95
|
+
var content = (React.createElement("div", __assign({}, (0, Tooltip_1.renderTooltipProps)(this.tooltipId, tooltip), { ref: buttonRef, className: "imposium-btn btn-".concat(style, " ").concat(size, " ").concat(color, " ").concat(activeClass, " ").concat(disabledClass, " ").concat(customClassName), onClick: function (e) { return _this.onClick(e); }, style: customStyles }),
|
|
96
96
|
kids,
|
|
97
97
|
(0, Tooltip_1.renderTooltip)(this.tooltipId, tooltip)));
|
|
98
98
|
return content;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,mCAA0C;AAC1C,sCAA+E;AAC/E,+CAA0D;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,mCAA0C;AAC1C,sCAA+E;AAC/E,+CAA0D;AAkB1D;IAAqB,0BAAiC;IAGlD,gBAAY,KAAK;QAAjB,YACI,kBAAM,KAAK,CAAC,SAGf;QADG,KAAI,CAAC,SAAS,GAAG,0BAAmB,IAAA,mBAAY,GAAE,CAAE,CAAC;;IACzD,CAAC;IAEO,wBAAO,GAAf,UAAgB,CAAC;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACzB;IACL,CAAC;IAEM,uBAAM,GAAb;QAAA,iBA6CC;QA5CO,IAAA,KAAuC,IAAI,CAAC,KAAK,EAA/C,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAe,CAAC;QAChD,IAAA,KAAwE,IAAI,CAAC,KAAK,EAAhF,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAE,WAAW,iBAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAe,CAAC;QACzF,IAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,IAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,IAAM,eAAe,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAEvD,IAAI,CAAC,IAAI,EAAE;YACP,IAAI,GAAG,EAAE,CAAC;SACb;QACD,IAAI,CAAC,KAAK,EAAE;YACR,KAAK,GAAG,SAAS,CAAC;SACrB;QACD,IAAI,CAAC,KAAK,EAAE;YACR,KAAK,GAAG,EAAE,CAAC;SACd;QACD,IAAI,KAAK,EAAE;YACP,IAAI,YAAY,EAAE;gBACd,YAAY,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;aACjC;iBAAM;gBACH,YAAY,GAAG;oBACX,KAAK,OAAA;iBACR,CAAC;aACL;SACJ;QAED,IAAM,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CACpB,IAAI,CAAC,KAAK,CAAC,QAAQ,CACtB,CAAC,CAAC,CAAC,CACA,8BAAM,SAAS,EAAC,cAAc,IAAE,yBAAiB,CAAQ,CAC5D,CAAC;QAEF,IAAM,OAAO,GAAG,CACZ,wCACQ,IAAA,4BAAkB,EAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,IAC/C,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,2BAAoB,KAAK,cAAI,IAAI,cAAI,KAAK,cAAI,WAAW,cAAI,aAAa,cAAI,eAAe,CAAE,EAC1G,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,KAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAf,CAAe,EAC/B,KAAK,EAAE,YAAY;YAClB,IAAI;YACJ,IAAA,uBAAa,EAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CACrC,CACT,CAAC;QAEF,OAAO,OAAO,CAAC;IACnB,CAAC;IACL,aAAC;AAAD,CAAC,AA7DD,CAAqB,KAAK,CAAC,aAAa,GA6DvC;AAED,kBAAe,MAAM,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
-
export declare const getMediaPreviewStyle: (mediaWidth: number, mediaHeight: number, element: any) => CSSProperties;
|
|
2
|
+
export declare const getMediaPreviewStyle: (mediaWidth: number, mediaHeight: number, element: any, offsetY?: number) => CSSProperties;
|
package/dist/cjs/utils/assets.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getMediaPreviewStyle = void 0;
|
|
4
4
|
var assets_1 = require("../constants/assets");
|
|
5
|
-
var getMediaPreviewStyle = function (mediaWidth, mediaHeight, element) {
|
|
5
|
+
var getMediaPreviewStyle = function (mediaWidth, mediaHeight, element, offsetY) {
|
|
6
|
+
if (offsetY === void 0) { offsetY = 0; }
|
|
6
7
|
if (!element) {
|
|
7
8
|
return;
|
|
8
9
|
}
|
|
@@ -24,17 +25,17 @@ var getMediaPreviewStyle = function (mediaWidth, mediaHeight, element) {
|
|
|
24
25
|
height = assets_1.PREVIEW_MAX_HEIGHT;
|
|
25
26
|
width = height * aspect;
|
|
26
27
|
}
|
|
27
|
-
//
|
|
28
|
-
var left = iconRect.x + iconRect.width - width
|
|
29
|
-
var top = iconRect.y
|
|
30
|
-
//
|
|
28
|
+
// Default to top right
|
|
29
|
+
var left = iconRect.x + iconRect.width - width;
|
|
30
|
+
var top = iconRect.y - height - offsetY;
|
|
31
|
+
// If it's off on the top, put it on the bottom
|
|
32
|
+
if (top < assets_1.HEADER_HEIGHT) {
|
|
33
|
+
top = iconRect.y + iconRect.height + offsetY;
|
|
34
|
+
}
|
|
35
|
+
// If it's off on the left, put it on the right
|
|
31
36
|
if (left < 0) {
|
|
32
37
|
left = iconRect.x;
|
|
33
38
|
}
|
|
34
|
-
// if the preview is off on the top, switch to bottom of the icon
|
|
35
|
-
if (top < assets_1.HEADER_HEIGHT) {
|
|
36
|
-
top = iconRect.y + 20;
|
|
37
|
-
}
|
|
38
39
|
return {
|
|
39
40
|
top: top,
|
|
40
41
|
left: left,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":";;;AAAA,8CAA2F;AAGpF,IAAM,oBAAoB,GAAG,UAChC,UAAkB,EAClB,WAAmB,EACnB,OAAY;
|
|
1
|
+
{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":";;;AAAA,8CAA2F;AAGpF,IAAM,oBAAoB,GAAG,UAChC,UAAkB,EAClB,WAAmB,EACnB,OAAY,EACZ,OAAmB;IAAnB,wBAAA,EAAA,WAAmB;IAEnB,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;KACV;IACD,IAAI,CAAC,UAAU,EAAE;QACb,UAAU,GAAG,0BAAiB,CAAC;KAClC;IACD,IAAI,CAAC,WAAW,EAAE;QACd,WAAW,GAAG,2BAAkB,CAAC;KACpC;IAED,IAAM,UAAU,GAAG,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7E,IAAI,CAAC,UAAU,EAAE;QACb,OAAO;KACV;IACD,IAAM,QAAQ,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;IACpD,IAAM,MAAM,GAAW,UAAU,GAAG,WAAW,CAAC;IAChD,IAAI,KAAK,GAAW,0BAAiB,CAAC;IACtC,IAAI,MAAM,GAAW,KAAK,GAAG,MAAM,CAAC;IAEpC,IAAI,MAAM,GAAG,2BAAkB,EAAE;QAC7B,MAAM,GAAG,2BAAkB,CAAC;QAC5B,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KAC3B;IAED,uBAAuB;IACvB,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;IAC/C,IAAI,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC,+CAA+C;IAC/C,IAAI,GAAG,GAAG,sBAAa,EAAE;QACrB,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;KAChD;IAED,+CAA+C;IAC/C,IAAI,IAAI,GAAG,CAAC,EAAE;QACV,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;KACrB;IAED,OAAO;QACH,GAAG,KAAA;QACH,IAAI,MAAA;QACJ,KAAK,OAAA;QACL,MAAM,QAAA;QACN,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,IAAI;KACf,CAAC;AACN,CAAC,CAAC;AApDW,QAAA,oBAAoB,wBAoD/B"}
|
|
@@ -15,10 +15,10 @@ class Button extends React.PureComponent {
|
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
17
|
let { style, color, size, customStyles } = this.props;
|
|
18
|
-
const { width, loading, tooltip } = this.props;
|
|
19
|
-
const { active, disabled, buttonRef } = this.props;
|
|
18
|
+
const { width, loading, tooltip, customClass, active, disabled, buttonRef } = this.props;
|
|
20
19
|
const activeClass = active ? 'active' : '';
|
|
21
20
|
const disabledClass = disabled ? 'disabled' : '';
|
|
21
|
+
const customClassName = customClass ? customClass : '';
|
|
22
22
|
if (!size) {
|
|
23
23
|
size = '';
|
|
24
24
|
}
|
|
@@ -39,7 +39,7 @@ class Button extends React.PureComponent {
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
const kids = !loading ? (this.props.children) : (React.createElement("span", { className: 'loading-icon' }, ICON_CIRCLE_NOTCH));
|
|
42
|
-
const content = (React.createElement("div", { ...renderTooltipProps(this.tooltipId, tooltip), ref: buttonRef, className: `imposium-btn btn-${style} ${size} ${color} ${activeClass} ${disabledClass}`, onClick: (e) => this.onClick(e), style: customStyles },
|
|
42
|
+
const content = (React.createElement("div", { ...renderTooltipProps(this.tooltipId, tooltip), ref: buttonRef, className: `imposium-btn btn-${style} ${size} ${color} ${activeClass} ${disabledClass} ${customClassName}`, onClick: (e) => this.onClick(e), style: customStyles },
|
|
43
43
|
kids,
|
|
44
44
|
renderTooltip(this.tooltipId, tooltip)));
|
|
45
45
|
return content;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAkB,MAAM,YAAY,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAkB,MAAM,YAAY,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAkB1D,MAAM,MAAO,SAAQ,KAAK,CAAC,aAA2B;IAC1C,SAAS,CAAS;IAE1B,YAAY,KAAK;QACb,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,SAAS,GAAG,mBAAmB,YAAY,EAAE,EAAE,CAAC;IACzD,CAAC;IAEO,OAAO,CAAC,CAAC;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACzB;IACL,CAAC;IAEM,MAAM;QACT,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACzF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAEvD,IAAI,CAAC,IAAI,EAAE;YACP,IAAI,GAAG,EAAE,CAAC;SACb;QACD,IAAI,CAAC,KAAK,EAAE;YACR,KAAK,GAAG,SAAS,CAAC;SACrB;QACD,IAAI,CAAC,KAAK,EAAE;YACR,KAAK,GAAG,EAAE,CAAC;SACd;QACD,IAAI,KAAK,EAAE;YACP,IAAI,YAAY,EAAE;gBACd,YAAY,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;aACjC;iBAAM;gBACH,YAAY,GAAG;oBACX,KAAK;iBACR,CAAC;aACL;SACJ;QAED,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CACpB,IAAI,CAAC,KAAK,CAAC,QAAQ,CACtB,CAAC,CAAC,CAAC,CACA,8BAAM,SAAS,EAAC,cAAc,IAAE,iBAAiB,CAAQ,CAC5D,CAAC;QAEF,MAAM,OAAO,GAAG,CACZ,gCACQ,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAC/C,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,oBAAoB,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,WAAW,IAAI,aAAa,IAAI,eAAe,EAAE,EAC1G,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/B,KAAK,EAAE,YAAY;YAClB,IAAI;YACJ,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CACrC,CACT,CAAC;QAEF,OAAO,OAAO,CAAC;IACnB,CAAC;CACJ;AAED,eAAe,MAAM,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
-
export declare const getMediaPreviewStyle: (mediaWidth: number, mediaHeight: number, element: any) => CSSProperties;
|
|
2
|
+
export declare const getMediaPreviewStyle: (mediaWidth: number, mediaHeight: number, element: any, offsetY?: number) => CSSProperties;
|
package/dist/esm/utils/assets.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HEADER_HEIGHT, PREVIEW_MAX_HEIGHT, PREVIEW_MAX_WIDTH } from '../constants/assets';
|
|
2
|
-
export const getMediaPreviewStyle = (mediaWidth, mediaHeight, element) => {
|
|
2
|
+
export const getMediaPreviewStyle = (mediaWidth, mediaHeight, element, offsetY = 0) => {
|
|
3
3
|
if (!element) {
|
|
4
4
|
return;
|
|
5
5
|
}
|
|
@@ -21,17 +21,17 @@ export const getMediaPreviewStyle = (mediaWidth, mediaHeight, element) => {
|
|
|
21
21
|
height = PREVIEW_MAX_HEIGHT;
|
|
22
22
|
width = height * aspect;
|
|
23
23
|
}
|
|
24
|
-
//
|
|
25
|
-
let left = iconRect.x + iconRect.width - width
|
|
26
|
-
let top = iconRect.y
|
|
27
|
-
//
|
|
24
|
+
// Default to top right
|
|
25
|
+
let left = iconRect.x + iconRect.width - width;
|
|
26
|
+
let top = iconRect.y - height - offsetY;
|
|
27
|
+
// If it's off on the top, put it on the bottom
|
|
28
|
+
if (top < HEADER_HEIGHT) {
|
|
29
|
+
top = iconRect.y + iconRect.height + offsetY;
|
|
30
|
+
}
|
|
31
|
+
// If it's off on the left, put it on the right
|
|
28
32
|
if (left < 0) {
|
|
29
33
|
left = iconRect.x;
|
|
30
34
|
}
|
|
31
|
-
// if the preview is off on the top, switch to bottom of the icon
|
|
32
|
-
if (top < HEADER_HEIGHT) {
|
|
33
|
-
top = iconRect.y + 20;
|
|
34
|
-
}
|
|
35
35
|
return {
|
|
36
36
|
top,
|
|
37
37
|
left,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,UAAkB,EAClB,WAAmB,EACnB,OAAY,
|
|
1
|
+
{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,UAAkB,EAClB,WAAmB,EACnB,OAAY,EACZ,UAAkB,CAAC,EACN,EAAE;IACf,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;KACV;IACD,IAAI,CAAC,UAAU,EAAE;QACb,UAAU,GAAG,iBAAiB,CAAC;KAClC;IACD,IAAI,CAAC,WAAW,EAAE;QACd,WAAW,GAAG,kBAAkB,CAAC;KACpC;IAED,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7E,IAAI,CAAC,UAAU,EAAE;QACb,OAAO;KACV;IACD,MAAM,QAAQ,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;IACpD,MAAM,MAAM,GAAW,UAAU,GAAG,WAAW,CAAC;IAChD,IAAI,KAAK,GAAW,iBAAiB,CAAC;IACtC,IAAI,MAAM,GAAW,KAAK,GAAG,MAAM,CAAC;IAEpC,IAAI,MAAM,GAAG,kBAAkB,EAAE;QAC7B,MAAM,GAAG,kBAAkB,CAAC;QAC5B,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KAC3B;IAED,uBAAuB;IACvB,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;IAC/C,IAAI,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC,+CAA+C;IAC/C,IAAI,GAAG,GAAG,aAAa,EAAE;QACrB,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC;KAChD;IAED,+CAA+C;IAC/C,IAAI,IAAI,GAAG,CAAC,EAAE;QACV,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;KACrB;IAED,OAAO;QACH,GAAG;QACH,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,IAAI;KACf,CAAC;AACN,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ import { renderTooltipProps, renderTooltip, IToolTipConfig } from '../Tooltip';
|
|
|
4
4
|
import { ICON_CIRCLE_NOTCH } from '../../constants/icons';
|
|
5
5
|
|
|
6
6
|
interface IButtonProps {
|
|
7
|
+
customClass?: string;
|
|
7
8
|
active?: boolean;
|
|
8
9
|
buttonRef?: any;
|
|
9
10
|
children?: any;
|
|
@@ -35,10 +36,10 @@ class Button extends React.PureComponent<IButtonProps> {
|
|
|
35
36
|
|
|
36
37
|
public render() {
|
|
37
38
|
let { style, color, size, customStyles } = this.props;
|
|
38
|
-
const { width, loading, tooltip } = this.props;
|
|
39
|
-
const { active, disabled, buttonRef } = this.props;
|
|
39
|
+
const { width, loading, tooltip, customClass, active, disabled, buttonRef } = this.props;
|
|
40
40
|
const activeClass = active ? 'active' : '';
|
|
41
41
|
const disabledClass = disabled ? 'disabled' : '';
|
|
42
|
+
const customClassName = customClass ? customClass : '';
|
|
42
43
|
|
|
43
44
|
if (!size) {
|
|
44
45
|
size = '';
|
|
@@ -69,7 +70,7 @@ class Button extends React.PureComponent<IButtonProps> {
|
|
|
69
70
|
<div
|
|
70
71
|
{...renderTooltipProps(this.tooltipId, tooltip)}
|
|
71
72
|
ref={buttonRef}
|
|
72
|
-
className={`imposium-btn btn-${style} ${size} ${color} ${activeClass} ${disabledClass}`}
|
|
73
|
+
className={`imposium-btn btn-${style} ${size} ${color} ${activeClass} ${disabledClass} ${customClassName}`}
|
|
73
74
|
onClick={(e) => this.onClick(e)}
|
|
74
75
|
style={customStyles}>
|
|
75
76
|
{kids}
|
package/src/utils/assets.ts
CHANGED
|
@@ -4,7 +4,8 @@ import { CSSProperties } from 'react';
|
|
|
4
4
|
export const getMediaPreviewStyle = (
|
|
5
5
|
mediaWidth: number,
|
|
6
6
|
mediaHeight: number,
|
|
7
|
-
element: any
|
|
7
|
+
element: any,
|
|
8
|
+
offsetY: number = 0
|
|
8
9
|
): CSSProperties => {
|
|
9
10
|
if (!element) {
|
|
10
11
|
return;
|
|
@@ -30,17 +31,19 @@ export const getMediaPreviewStyle = (
|
|
|
30
31
|
width = height * aspect;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
|
-
//
|
|
34
|
-
let left = iconRect.x + iconRect.width - width
|
|
35
|
-
let top = iconRect.y
|
|
36
|
-
|
|
34
|
+
// Default to top right
|
|
35
|
+
let left = iconRect.x + iconRect.width - width;
|
|
36
|
+
let top = iconRect.y - height - offsetY;
|
|
37
|
+
|
|
38
|
+
// If it's off on the top, put it on the bottom
|
|
39
|
+
if (top < HEADER_HEIGHT) {
|
|
40
|
+
top = iconRect.y + iconRect.height + offsetY;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// If it's off on the left, put it on the right
|
|
37
44
|
if (left < 0) {
|
|
38
45
|
left = iconRect.x;
|
|
39
46
|
}
|
|
40
|
-
// if the preview is off on the top, switch to bottom of the icon
|
|
41
|
-
if (top < HEADER_HEIGHT) {
|
|
42
|
-
top = iconRect.y + 20;
|
|
43
|
-
}
|
|
44
47
|
|
|
45
48
|
return {
|
|
46
49
|
top,
|