react-science 8.0.1 → 9.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/activity_bar/activity_bar.d.ts +19 -0
- package/lib/components/activity_bar/activity_bar.d.ts.map +1 -0
- package/lib/components/activity_bar/activity_bar.js +58 -0
- package/lib/components/activity_bar/activity_bar.js.map +1 -0
- package/lib/components/activity_bar/index.d.ts +2 -0
- package/lib/components/activity_bar/index.d.ts.map +1 -0
- package/lib/components/activity_bar/index.js +2 -0
- package/lib/components/activity_bar/index.js.map +1 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/index.js +1 -0
- package/lib/components/index.js.map +1 -1
- package/lib/components/toolbar/Toolbar.d.ts +1 -1
- package/lib/components/toolbar/Toolbar.d.ts.map +1 -1
- package/lib/components/toolbar/Toolbar.js +17 -19
- package/lib/components/toolbar/Toolbar.js.map +1 -1
- package/lib/components/toolbar/toolbarContext.d.ts +0 -1
- package/lib/components/toolbar/toolbarContext.d.ts.map +1 -1
- package/lib/components/toolbar/toolbarContext.js.map +1 -1
- package/package.json +1 -1
- package/src/components/activity_bar/activity_bar.tsx +118 -0
- package/src/components/activity_bar/index.ts +1 -0
- package/src/components/index.ts +1 -0
- package/src/components/toolbar/Toolbar.tsx +25 -37
- package/src/components/toolbar/toolbarContext.ts +0 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
|
2
|
+
import { type TooltipProps } from '@blueprintjs/core';
|
|
3
|
+
import { type MouseEvent, type ReactNode } from 'react';
|
|
4
|
+
import { type ButtonProps } from '../button/index.js';
|
|
5
|
+
export interface ActivityBarProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export interface ActivityBarItemProps extends Pick<ButtonProps, 'id' | 'icon' | 'active' | 'tag' | 'tagProps'> {
|
|
9
|
+
tooltip?: TooltipProps['content'];
|
|
10
|
+
tooltipProps?: Omit<TooltipProps, 'content'>;
|
|
11
|
+
onClick?: (event: MouseEvent) => void;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare function ActivityBar(props: ActivityBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare namespace ActivityBar {
|
|
16
|
+
var Item: typeof ActivityBarItem;
|
|
17
|
+
}
|
|
18
|
+
export declare function ActivityBarItem(props: ActivityBarItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
19
|
+
//# sourceMappingURL=activity_bar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"activity_bar.d.ts","sourceRoot":"","sources":["../../../src/components/activity_bar/activity_bar.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,OAAO,EAKL,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAgB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;IACxE,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,oDAelD;yBAfe,WAAW;;;AAiB3B,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,oDAwE1D"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
/** @jsxImportSource @emotion/react */
|
|
3
|
+
import { ButtonGroup, Classes, Colors, Icon, } from '@blueprintjs/core';
|
|
4
|
+
import { css } from '@emotion/react';
|
|
5
|
+
import { cloneElement } from 'react';
|
|
6
|
+
import { Button } from '../button/index.js';
|
|
7
|
+
export function ActivityBar(props) {
|
|
8
|
+
const { children } = props;
|
|
9
|
+
return (_jsx(ButtonGroup, { vertical: true, large: true, minimal: true, style: {
|
|
10
|
+
flexWrap: 'wrap-reverse',
|
|
11
|
+
}, children: children }));
|
|
12
|
+
}
|
|
13
|
+
export function ActivityBarItem(props) {
|
|
14
|
+
const { active = false, icon, onClick, tooltip, tooltipProps, ...otherProps } = props;
|
|
15
|
+
const resizedIcon = !icon || typeof icon === 'string'
|
|
16
|
+
? icon
|
|
17
|
+
: cloneElement(icon, {
|
|
18
|
+
className: icon.props.className
|
|
19
|
+
? `${icon.props.className} bp5-icon`
|
|
20
|
+
: 'bp5-icon',
|
|
21
|
+
});
|
|
22
|
+
return (_jsx(Button, { type: "button", css: css `
|
|
23
|
+
.${Classes.ICON} {
|
|
24
|
+
color: ${Colors.DARK_GRAY3};
|
|
25
|
+
}
|
|
26
|
+
.bp5-icon {
|
|
27
|
+
width: 20px;
|
|
28
|
+
height: 20px;
|
|
29
|
+
font-size: 14px;
|
|
30
|
+
}
|
|
31
|
+
.bp5-tag {
|
|
32
|
+
font-size: 12px;
|
|
33
|
+
line-height: 14px;
|
|
34
|
+
min-width: 18px;
|
|
35
|
+
min-height: 18px;
|
|
36
|
+
}
|
|
37
|
+
`, style: {
|
|
38
|
+
fontSize: '1.125em',
|
|
39
|
+
width: 'fit-content',
|
|
40
|
+
}, active: active, icon: _jsx("div", { style: {
|
|
41
|
+
display: 'flex',
|
|
42
|
+
justifyContent: 'center',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
width: 0,
|
|
45
|
+
height: 0,
|
|
46
|
+
marginRight: 0,
|
|
47
|
+
}, children: _jsx(Icon, { icon: resizedIcon, size: 20 }) }), onClick: onClick, tooltipProps: !tooltip
|
|
48
|
+
? undefined
|
|
49
|
+
: {
|
|
50
|
+
content: tooltip,
|
|
51
|
+
placement: 'left',
|
|
52
|
+
compact: false,
|
|
53
|
+
interactionKind: 'hover',
|
|
54
|
+
...tooltipProps,
|
|
55
|
+
}, ...otherProps }));
|
|
56
|
+
}
|
|
57
|
+
ActivityBar.Item = ActivityBarItem;
|
|
58
|
+
//# sourceMappingURL=activity_bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"activity_bar.js","sourceRoot":"","sources":["../../../src/components/activity_bar/activity_bar.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AAEtC,OAAO,EACL,WAAW,EACX,OAAO,EACP,MAAM,EACN,IAAI,GAEL,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAmC,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAoB,MAAM,oBAAoB,CAAC;AAc9D,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,OAAO,CACL,KAAC,WAAW,IACV,QAAQ,QACR,KAAK,QACL,OAAO,QACP,KAAK,EAAE;YACL,QAAQ,EAAE,cAAc;SACzB,YAEA,QAAQ,GACG,CACf,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EACJ,MAAM,GAAG,KAAK,EACd,IAAI,EACJ,OAAO,EACP,OAAO,EACP,YAAY,EACZ,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GACf,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ;QAC/B,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE;YACjB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;gBAC7B,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,WAAW;gBACpC,CAAC,CAAC,UAAU;SACf,CAAC,CAAC;IAET,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,CAAA;WACH,OAAO,CAAC,IAAI;mBACJ,MAAM,CAAC,UAAU;;;;;;;;;;;;;OAa7B,EACD,KAAK,EAAE;YACL,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,aAAa;SACrB,EACD,MAAM,EAAE,MAAM,EACd,IAAI,EACF,cACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,WAAW,EAAE,CAAC;aACf,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,GAAI,GACjC,EAER,OAAO,EAAE,OAAO,EAChB,YAAY,EACV,CAAC,OAAO;YACN,CAAC,CAAC,SAAS;YACX,CAAC,CAAC;gBACE,OAAO,EAAE,OAAO;gBAChB,SAAS,EAAE,MAAM;gBACjB,OAAO,EAAE,KAAK;gBACd,eAAe,EAAE,OAAO;gBACxB,GAAG,YAAY;aAChB,KAEH,UAAU,GACd,CACH,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/activity_bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/activity_bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
|
|
@@ -13,6 +13,7 @@ export * from './root-layout/index.js';
|
|
|
13
13
|
export * from './split-pane/index.js';
|
|
14
14
|
export * from './table/index.js';
|
|
15
15
|
export * from './toolbar/index.js';
|
|
16
|
+
export * from './activity_bar/index.js';
|
|
16
17
|
export * from './utils/index.js';
|
|
17
18
|
export * from './selected-total/index.js';
|
|
18
19
|
export * as ValueRenderers from './value-renderers/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}
|
package/lib/components/index.js
CHANGED
|
@@ -13,6 +13,7 @@ export * from './root-layout/index.js';
|
|
|
13
13
|
export * from './split-pane/index.js';
|
|
14
14
|
export * from './table/index.js';
|
|
15
15
|
export * from './toolbar/index.js';
|
|
16
|
+
export * from './activity_bar/index.js';
|
|
16
17
|
export * from './utils/index.js';
|
|
17
18
|
export * from './selected-total/index.js';
|
|
18
19
|
export * as ValueRenderers from './value-renderers/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}
|
|
@@ -7,7 +7,7 @@ interface ToolbarBaseProps {
|
|
|
7
7
|
intent?: Intent;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
}
|
|
10
|
-
export interface ToolbarProps extends ToolbarBaseProps, Pick<ButtonGroupProps, 'children' | '
|
|
10
|
+
export interface ToolbarProps extends ToolbarBaseProps, Pick<ButtonGroupProps, 'children' | 'vertical'> {
|
|
11
11
|
popoverInteractionKind?: PopoverInteractionType;
|
|
12
12
|
}
|
|
13
13
|
export interface ToolbarItemProps extends ToolbarBaseProps, Pick<ButtonProps, 'id' | 'icon' | 'active' | 'tag' | 'tagProps'> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAEL,KAAK,gBAAgB,EAIrB,MAAM,EAEN,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAEL,KAAK,UAAU,EAKhB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAQ9D,MAAM,MAAM,sBAAsB,GAC9B,OAAO,GACP,OAAO,GACP,cAAc,GACd,cAAc,CAAC;AAEnB,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,YACf,SAAQ,gBAAgB,EACtB,IAAI,
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAEL,KAAK,gBAAgB,EAIrB,MAAM,EAEN,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAEL,KAAK,UAAU,EAKhB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAQ9D,MAAM,MAAM,sBAAsB,GAC9B,OAAO,GACP,OAAO,GACP,cAAc,GACd,cAAc,CAAC;AAEnB,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,YACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,CAAC;IACjD,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAED,MAAM,WAAW,gBACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;IAClE,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,CACR,IAAI,EAAE,gBAAgB,GAAG;QACvB,KAAK,EAAE,UAAU,CAAC;KACnB,KACE,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IAC3D,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAID,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,oDA+D1C;yBA/De,OAAO;sBAiEoB,gBAAgB;6BA0GlD,uBAAuB"}
|
|
@@ -7,14 +7,13 @@ import { Button } from '../button/index.js';
|
|
|
7
7
|
import { toolbarContext, useToolbarContext, } from './toolbarContext.js';
|
|
8
8
|
const border = '1px solid rgb(247, 247, 247)';
|
|
9
9
|
export function Toolbar(props) {
|
|
10
|
-
const { children, disabled, intent,
|
|
10
|
+
const { children, disabled, intent, vertical, popoverInteractionKind } = props;
|
|
11
11
|
const contextValue = useMemo(() => ({
|
|
12
12
|
intent,
|
|
13
|
-
large,
|
|
14
13
|
vertical,
|
|
15
14
|
disabled,
|
|
16
15
|
popoverInteractionKind,
|
|
17
|
-
}), [intent,
|
|
16
|
+
}), [intent, vertical, disabled, popoverInteractionKind]);
|
|
18
17
|
const ref = useRef(null);
|
|
19
18
|
// Work around wrong width on vertical flex when wrapping
|
|
20
19
|
// In Chrome: recently fixed (https://bugs.chromium.org/p/chromium/issues/detail?id=507397)
|
|
@@ -44,14 +43,14 @@ export function Toolbar(props) {
|
|
|
44
43
|
return () => observer.unobserve(element);
|
|
45
44
|
}
|
|
46
45
|
}, [vertical]);
|
|
47
|
-
return (_jsx(ToolbarProvider, { value: contextValue, children: _jsx(ButtonGroup, {
|
|
46
|
+
return (_jsx(ToolbarProvider, { value: contextValue, children: _jsx(ButtonGroup, { ref: ref, vertical: vertical, minimal: true, style: {
|
|
48
47
|
flexWrap: 'wrap',
|
|
49
48
|
borderRight: vertical ? border : undefined,
|
|
50
49
|
}, children: children }, String(vertical)) }));
|
|
51
50
|
}
|
|
52
51
|
Toolbar.Item = function ToolbarItem(props) {
|
|
53
52
|
const { active = false, icon, onClick, tooltip, tooltipProps, intent: itemIntent, disabled: itemDisabled, isPopover, ...other } = props;
|
|
54
|
-
const { intent: toolbarIntent, disabled: toolbarDisabled,
|
|
53
|
+
const { intent: toolbarIntent, disabled: toolbarDisabled, vertical, } = useToolbarContext();
|
|
55
54
|
const intent = itemIntent ?? toolbarIntent;
|
|
56
55
|
const disabled = itemDisabled ?? toolbarDisabled;
|
|
57
56
|
const resizedIcon = !icon || typeof icon === 'string'
|
|
@@ -66,15 +65,15 @@ Toolbar.Item = function ToolbarItem(props) {
|
|
|
66
65
|
color: ${Colors.DARK_GRAY3};
|
|
67
66
|
}
|
|
68
67
|
.bp5-icon {
|
|
69
|
-
width:
|
|
70
|
-
height:
|
|
71
|
-
font-size:
|
|
68
|
+
width: 16px;
|
|
69
|
+
height: 16px;
|
|
70
|
+
font-size: 12px;
|
|
72
71
|
}
|
|
73
72
|
.bp5-tag {
|
|
74
|
-
font-size:
|
|
75
|
-
line-height:
|
|
76
|
-
min-width:
|
|
77
|
-
min-height:
|
|
73
|
+
font-size: 10px;
|
|
74
|
+
line-height: 12px;
|
|
75
|
+
min-width: 12px;
|
|
76
|
+
min-height: 12px;
|
|
78
77
|
}
|
|
79
78
|
`, intent: intent, style: {
|
|
80
79
|
position: 'relative',
|
|
@@ -87,13 +86,13 @@ Toolbar.Item = function ToolbarItem(props) {
|
|
|
87
86
|
width: 0,
|
|
88
87
|
height: 0,
|
|
89
88
|
marginRight: 0,
|
|
90
|
-
}, children: [_jsx(Icon, { icon: resizedIcon, size:
|
|
89
|
+
}, children: [_jsx(Icon, { icon: resizedIcon, size: 16 }), isPopover && (_jsx(Icon, { icon: "caret-right", size: 9, style: {
|
|
91
90
|
transform: 'rotate(45deg)',
|
|
92
91
|
position: 'absolute',
|
|
93
92
|
bottom: 0,
|
|
94
93
|
right: 0,
|
|
95
|
-
width:
|
|
96
|
-
height:
|
|
94
|
+
width: 9,
|
|
95
|
+
height: 9,
|
|
97
96
|
} }))] }), onClick: (event) => {
|
|
98
97
|
onClick?.({ event, ...props });
|
|
99
98
|
}, tooltipProps: !tooltip
|
|
@@ -102,7 +101,7 @@ Toolbar.Item = function ToolbarItem(props) {
|
|
|
102
101
|
content: tooltip,
|
|
103
102
|
placement: vertical ? 'right' : 'bottom',
|
|
104
103
|
intent,
|
|
105
|
-
compact:
|
|
104
|
+
compact: true,
|
|
106
105
|
interactionKind: 'hover',
|
|
107
106
|
...tooltipProps,
|
|
108
107
|
}, ...other }));
|
|
@@ -110,18 +109,17 @@ Toolbar.Item = function ToolbarItem(props) {
|
|
|
110
109
|
Toolbar.PopoverItem = function ToolbarPopoverItem(props) {
|
|
111
110
|
const { itemProps, ...other } = props;
|
|
112
111
|
const { disabled, vertical, popoverInteractionKind } = useToolbarContext();
|
|
113
|
-
return (_jsx(Popover, { minimal: true, disabled: disabled, placement: vertical ? 'right-start' : 'bottom-start', interactionKind: popoverInteractionKind, hasBackdrop:
|
|
112
|
+
return (_jsx(Popover, { minimal: true, disabled: disabled, placement: vertical ? 'right-start' : 'bottom-start', interactionKind: popoverInteractionKind, hasBackdrop: popoverInteractionKind === 'click', hoverCloseDelay: 0, css: css `
|
|
114
113
|
.${Classes.ICON} {
|
|
115
114
|
color: ${Colors.DARK_GRAY3};
|
|
116
115
|
}
|
|
117
116
|
`, targetProps: {
|
|
118
117
|
style: {
|
|
119
|
-
position: 'relative',
|
|
120
118
|
fontSize: '1.125em',
|
|
121
119
|
width: 'fit-content',
|
|
122
120
|
height: 'fit-content',
|
|
123
121
|
},
|
|
124
|
-
}, ...
|
|
122
|
+
}, renderTarget: ({ isOpen, className, ...targetProps }) => (_jsx("span", { ...targetProps, style: { flex: '0 0 auto' }, children: _jsx(Toolbar.Item, { isPopover: true, ...itemProps }) })), ...other }));
|
|
125
123
|
};
|
|
126
124
|
function ToolbarProvider(props) {
|
|
127
125
|
return (_jsx(toolbarContext.Provider, { value: props.value, children: props.children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EACL,WAAW,EAEX,OAAO,EACP,MAAM,EACN,IAAI,EACJ,MAAM,EACN,OAAO,GAGR,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EACL,YAAY,EAGZ,eAAe,EACf,OAAO,EACP,MAAM,GACP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAoB,MAAM,oBAAoB,CAAC;AAE9D,OAAO,EAEL,cAAc,EACd,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,6 @@ import { Intent } from '@blueprintjs/core';
|
|
|
2
2
|
import type { PopoverInteractionType } from './Toolbar.js';
|
|
3
3
|
export interface ToolbarContext {
|
|
4
4
|
intent?: Intent;
|
|
5
|
-
large?: boolean;
|
|
6
5
|
vertical?: boolean;
|
|
7
6
|
disabled?: boolean;
|
|
8
7
|
popoverInteractionKind?: PopoverInteractionType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarContext.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/toolbarContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,
|
|
1
|
+
{"version":3,"file":"toolbarContext.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/toolbarContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAED,eAAO,MAAM,cAAc,gDAA6C,CAAC;AAEzE,wBAAgB,iBAAiB,mBAQhC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarContext.js","sourceRoot":"","sources":["../../../src/components/toolbar/toolbarContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"toolbarContext.js","sourceRoot":"","sources":["../../../src/components/toolbar/toolbarContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAWlD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAC;AAEzE,MAAM,UAAU,iBAAiB;IAC/B,MAAM,GAAG,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACvC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
ButtonGroup,
|
|
5
|
+
Classes,
|
|
6
|
+
Colors,
|
|
7
|
+
Icon,
|
|
8
|
+
type TooltipProps,
|
|
9
|
+
} from '@blueprintjs/core';
|
|
10
|
+
import { css } from '@emotion/react';
|
|
11
|
+
import { cloneElement, type MouseEvent, type ReactNode } from 'react';
|
|
12
|
+
|
|
13
|
+
import { Button, type ButtonProps } from '../button/index.js';
|
|
14
|
+
|
|
15
|
+
export interface ActivityBarProps {
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export interface ActivityBarItemProps
|
|
20
|
+
extends Pick<ButtonProps, 'id' | 'icon' | 'active' | 'tag' | 'tagProps'> {
|
|
21
|
+
tooltip?: TooltipProps['content'];
|
|
22
|
+
tooltipProps?: Omit<TooltipProps, 'content'>;
|
|
23
|
+
onClick?: (event: MouseEvent) => void;
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export function ActivityBar(props: ActivityBarProps) {
|
|
28
|
+
const { children } = props;
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<ButtonGroup
|
|
32
|
+
vertical
|
|
33
|
+
large
|
|
34
|
+
minimal
|
|
35
|
+
style={{
|
|
36
|
+
flexWrap: 'wrap-reverse',
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
{children}
|
|
40
|
+
</ButtonGroup>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export function ActivityBarItem(props: ActivityBarItemProps) {
|
|
45
|
+
const {
|
|
46
|
+
active = false,
|
|
47
|
+
icon,
|
|
48
|
+
onClick,
|
|
49
|
+
tooltip,
|
|
50
|
+
tooltipProps,
|
|
51
|
+
...otherProps
|
|
52
|
+
} = props;
|
|
53
|
+
|
|
54
|
+
const resizedIcon =
|
|
55
|
+
!icon || typeof icon === 'string'
|
|
56
|
+
? icon
|
|
57
|
+
: cloneElement(icon, {
|
|
58
|
+
className: icon.props.className
|
|
59
|
+
? `${icon.props.className} bp5-icon`
|
|
60
|
+
: 'bp5-icon',
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<Button
|
|
65
|
+
type="button"
|
|
66
|
+
css={css`
|
|
67
|
+
.${Classes.ICON} {
|
|
68
|
+
color: ${Colors.DARK_GRAY3};
|
|
69
|
+
}
|
|
70
|
+
.bp5-icon {
|
|
71
|
+
width: 20px;
|
|
72
|
+
height: 20px;
|
|
73
|
+
font-size: 14px;
|
|
74
|
+
}
|
|
75
|
+
.bp5-tag {
|
|
76
|
+
font-size: 12px;
|
|
77
|
+
line-height: 14px;
|
|
78
|
+
min-width: 18px;
|
|
79
|
+
min-height: 18px;
|
|
80
|
+
}
|
|
81
|
+
`}
|
|
82
|
+
style={{
|
|
83
|
+
fontSize: '1.125em',
|
|
84
|
+
width: 'fit-content',
|
|
85
|
+
}}
|
|
86
|
+
active={active}
|
|
87
|
+
icon={
|
|
88
|
+
<div
|
|
89
|
+
style={{
|
|
90
|
+
display: 'flex',
|
|
91
|
+
justifyContent: 'center',
|
|
92
|
+
alignItems: 'center',
|
|
93
|
+
width: 0,
|
|
94
|
+
height: 0,
|
|
95
|
+
marginRight: 0,
|
|
96
|
+
}}
|
|
97
|
+
>
|
|
98
|
+
<Icon icon={resizedIcon} size={20} />
|
|
99
|
+
</div>
|
|
100
|
+
}
|
|
101
|
+
onClick={onClick}
|
|
102
|
+
tooltipProps={
|
|
103
|
+
!tooltip
|
|
104
|
+
? undefined
|
|
105
|
+
: {
|
|
106
|
+
content: tooltip,
|
|
107
|
+
placement: 'left',
|
|
108
|
+
compact: false,
|
|
109
|
+
interactionKind: 'hover',
|
|
110
|
+
...tooltipProps,
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
{...otherProps}
|
|
114
|
+
/>
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
ActivityBar.Item = ActivityBarItem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './activity_bar.js';
|
package/src/components/index.ts
CHANGED
|
@@ -13,6 +13,7 @@ export * from './root-layout/index.js';
|
|
|
13
13
|
export * from './split-pane/index.js';
|
|
14
14
|
export * from './table/index.js';
|
|
15
15
|
export * from './toolbar/index.js';
|
|
16
|
+
export * from './activity_bar/index.js';
|
|
16
17
|
export * from './utils/index.js';
|
|
17
18
|
export * from './selected-total/index.js';
|
|
18
19
|
export * as ValueRenderers from './value-renderers/index.js';
|
|
@@ -40,10 +40,7 @@ interface ToolbarBaseProps {
|
|
|
40
40
|
}
|
|
41
41
|
export interface ToolbarProps
|
|
42
42
|
extends ToolbarBaseProps,
|
|
43
|
-
Pick<
|
|
44
|
-
ButtonGroupProps,
|
|
45
|
-
'children' | 'minimal' | 'large' | 'vertical' | 'fill'
|
|
46
|
-
> {
|
|
43
|
+
Pick<ButtonGroupProps, 'children' | 'vertical'> {
|
|
47
44
|
popoverInteractionKind?: PopoverInteractionType;
|
|
48
45
|
}
|
|
49
46
|
|
|
@@ -67,26 +64,17 @@ export interface ToolbarPopoverItemProps extends PopoverProps {
|
|
|
67
64
|
const border = '1px solid rgb(247, 247, 247)';
|
|
68
65
|
|
|
69
66
|
export function Toolbar(props: ToolbarProps) {
|
|
70
|
-
const {
|
|
71
|
-
|
|
72
|
-
disabled,
|
|
73
|
-
intent,
|
|
74
|
-
large,
|
|
75
|
-
vertical,
|
|
76
|
-
popoverInteractionKind,
|
|
77
|
-
minimal,
|
|
78
|
-
fill,
|
|
79
|
-
} = props;
|
|
67
|
+
const { children, disabled, intent, vertical, popoverInteractionKind } =
|
|
68
|
+
props;
|
|
80
69
|
|
|
81
70
|
const contextValue = useMemo(
|
|
82
71
|
() => ({
|
|
83
72
|
intent,
|
|
84
|
-
large,
|
|
85
73
|
vertical,
|
|
86
74
|
disabled,
|
|
87
75
|
popoverInteractionKind,
|
|
88
76
|
}),
|
|
89
|
-
[intent,
|
|
77
|
+
[intent, vertical, disabled, popoverInteractionKind],
|
|
90
78
|
);
|
|
91
79
|
const ref = useRef<HTMLDivElement>(null);
|
|
92
80
|
|
|
@@ -123,13 +111,12 @@ export function Toolbar(props: ToolbarProps) {
|
|
|
123
111
|
return (
|
|
124
112
|
<ToolbarProvider value={contextValue}>
|
|
125
113
|
<ButtonGroup
|
|
126
|
-
|
|
114
|
+
ref={ref}
|
|
127
115
|
// Reset because of layout effect above
|
|
128
116
|
// TODO: remove once the workaround is no longer needed
|
|
129
117
|
key={String(vertical)}
|
|
130
118
|
vertical={vertical}
|
|
131
|
-
|
|
132
|
-
minimal={minimal}
|
|
119
|
+
minimal
|
|
133
120
|
style={{
|
|
134
121
|
flexWrap: 'wrap',
|
|
135
122
|
borderRight: vertical ? border : undefined,
|
|
@@ -157,7 +144,6 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
|
|
|
157
144
|
const {
|
|
158
145
|
intent: toolbarIntent,
|
|
159
146
|
disabled: toolbarDisabled,
|
|
160
|
-
large,
|
|
161
147
|
vertical,
|
|
162
148
|
} = useToolbarContext();
|
|
163
149
|
const intent = itemIntent ?? toolbarIntent;
|
|
@@ -180,15 +166,15 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
|
|
|
180
166
|
color: ${Colors.DARK_GRAY3};
|
|
181
167
|
}
|
|
182
168
|
.bp5-icon {
|
|
183
|
-
width:
|
|
184
|
-
height:
|
|
185
|
-
font-size:
|
|
169
|
+
width: 16px;
|
|
170
|
+
height: 16px;
|
|
171
|
+
font-size: 12px;
|
|
186
172
|
}
|
|
187
173
|
.bp5-tag {
|
|
188
|
-
font-size:
|
|
189
|
-
line-height:
|
|
190
|
-
min-width:
|
|
191
|
-
min-height:
|
|
174
|
+
font-size: 10px;
|
|
175
|
+
line-height: 12px;
|
|
176
|
+
min-width: 12px;
|
|
177
|
+
min-height: 12px;
|
|
192
178
|
}
|
|
193
179
|
`}
|
|
194
180
|
intent={intent}
|
|
@@ -210,18 +196,18 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
|
|
|
210
196
|
marginRight: 0,
|
|
211
197
|
}}
|
|
212
198
|
>
|
|
213
|
-
<Icon icon={resizedIcon} size={
|
|
199
|
+
<Icon icon={resizedIcon} size={16} />
|
|
214
200
|
{isPopover && (
|
|
215
201
|
<Icon
|
|
216
202
|
icon="caret-right"
|
|
217
|
-
size={
|
|
203
|
+
size={9}
|
|
218
204
|
style={{
|
|
219
205
|
transform: 'rotate(45deg)',
|
|
220
206
|
position: 'absolute',
|
|
221
207
|
bottom: 0,
|
|
222
208
|
right: 0,
|
|
223
|
-
width:
|
|
224
|
-
height:
|
|
209
|
+
width: 9,
|
|
210
|
+
height: 9,
|
|
225
211
|
}}
|
|
226
212
|
/>
|
|
227
213
|
)}
|
|
@@ -237,7 +223,7 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
|
|
|
237
223
|
content: tooltip,
|
|
238
224
|
placement: vertical ? 'right' : 'bottom',
|
|
239
225
|
intent,
|
|
240
|
-
compact:
|
|
226
|
+
compact: true,
|
|
241
227
|
interactionKind: 'hover',
|
|
242
228
|
...tooltipProps,
|
|
243
229
|
}
|
|
@@ -259,7 +245,7 @@ Toolbar.PopoverItem = function ToolbarPopoverItem(
|
|
|
259
245
|
disabled={disabled}
|
|
260
246
|
placement={vertical ? 'right-start' : 'bottom-start'}
|
|
261
247
|
interactionKind={popoverInteractionKind}
|
|
262
|
-
hasBackdrop
|
|
248
|
+
hasBackdrop={popoverInteractionKind === 'click'}
|
|
263
249
|
hoverCloseDelay={0}
|
|
264
250
|
css={css`
|
|
265
251
|
.${Classes.ICON} {
|
|
@@ -268,16 +254,18 @@ Toolbar.PopoverItem = function ToolbarPopoverItem(
|
|
|
268
254
|
`}
|
|
269
255
|
targetProps={{
|
|
270
256
|
style: {
|
|
271
|
-
position: 'relative',
|
|
272
257
|
fontSize: '1.125em',
|
|
273
258
|
width: 'fit-content',
|
|
274
259
|
height: 'fit-content',
|
|
275
260
|
},
|
|
276
261
|
}}
|
|
262
|
+
renderTarget={({ isOpen, className, ...targetProps }) => (
|
|
263
|
+
<span {...targetProps} style={{ flex: '0 0 auto' }}>
|
|
264
|
+
<Toolbar.Item isPopover {...itemProps} />
|
|
265
|
+
</span>
|
|
266
|
+
)}
|
|
277
267
|
{...other}
|
|
278
|
-
|
|
279
|
-
<Toolbar.Item isPopover {...itemProps} />
|
|
280
|
-
</Popover>
|
|
268
|
+
/>
|
|
281
269
|
);
|
|
282
270
|
};
|
|
283
271
|
|