react-science 0.27.0 → 0.27.1-pre.1696432898

package/src/components/toolbar/Toolbar.tsx

@@ -1,24 +1,37 @@
 /** @jsxImportSource @emotion/react */
-import { css, CSSObject } from '@emotion/react';
+import {
+  Button,
+  ButtonGroup,
+  ButtonProps,
+  Classes,
+  Colors,
+  Intent,
+  Tooltip,
+} from '@blueprintjs/core';
+import { css } from '@emotion/react';
 import {
   ReactElement,
-  ReactFragment,
   ReactNode,
   useLayoutEffect,
+  useMemo,
   useRef,
 } from 'react';
 
-import { ToolbarProvider, useToolbarContext } from './ToolbarContext';
-
-export type ToolbarOrientation = 'vertical' | 'horizontal';
-export type ToolbarItemOrientation = 'vertical' | 'horizontal' | 'auto';
+import {
+  ToolbarContext,
+  toolbarContext,
+  useToolbarContext,
+} from './toolbarContext';
 
 export interface ToolbarProps {
-  orientation: ToolbarOrientation;
+  vertical?: boolean;
+  large?: boolean;
+  intent?: Intent;
+  disabled?: boolean;
   children?:
     | Array<ReactElement<ToolbarItemProps>>
     | ReactElement<ToolbarItemProps>
-    | ReactFragment
+    | Iterable<ReactNode>
     | boolean
     | null;
 }
@@ -26,93 +39,30 @@ export interface ToolbarProps {
 export interface ToolbarItemProps {
   id?: string;
   title: string;
-  children: ReactNode;
-
+  icon: ButtonProps['icon'];
   active?: boolean;
-  titleOrientation?: ToolbarItemOrientation;
   onClick?: (item: ToolbarItemProps) => void;
   className?: string;
 }
 
 const border = '1px solid rgb(247, 247, 247)';
 
-const styles = {
-  toolbar: (orientation: ToolbarOrientation) => {
-    return css([
-      { display: 'flex', flexWrap: 'wrap' },
-      orientation === 'vertical'
-        ? {
-            flexDirection: 'column',
-            minHeight: '100%',
-            borderRight: border,
-          }
-        : {
-            flexDirection: 'row',
-            minWidth: '100%',
-          },
-    ]);
-  },
-  item: (active: boolean) => {
-    return css([
-      active && { backgroundColor: 'rgb(247, 247, 247)', borderRadius: 5 },
-      {
-        width: 30,
-        height: 30,
-        outline: 'none',
-        alignItems: 'center',
-        justifyContent: 'center',
-        display: 'flex',
-        '&:hover + .content': { display: 'flex' },
-      },
-    ]);
-  },
-  tooltip: (
-    orientation: ToolbarOrientation,
-    itemOrientation: ToolbarItemOrientation,
-  ) => {
-    const common: CSSObject = {
-      display: 'none',
-      position: 'absolute',
-      backgroundColor: 'gray',
-      borderRadius: '2px',
-      color: 'white',
-      bottom: '0px',
-      right: '0px',
-      width: 'fit-content',
-      height: '50%',
-      fontSize: '0.875em',
-      whiteSpace: 'nowrap',
-      paddingLeft: '3px',
-      paddingRight: '3px',
-      zIndex: 50,
-    };
-
-    if (itemOrientation === 'auto') {
-      return css([
-        common,
-        orientation === 'vertical' && { margin: 'auto', marginLeft: 5 },
-        orientation === 'horizontal'
-          ? { top: '100%' }
-          : { top: '0px', left: '100%' },
-      ]);
-    } else {
-      return css([
-        common,
-        itemOrientation === 'horizontal' && { margin: 'auto', marginLeft: 5 },
-        itemOrientation === 'vertical'
-          ? { top: '100%' }
-          : { top: '0px', left: '100%' },
-      ]);
-    }
-  },
-};
-
 export function Toolbar(props: ToolbarProps) {
-  const { children, orientation } = props;
+  const { children, disabled, intent, large, vertical } = props;
+
+  const contextValue = useMemo(
+    () => ({ intent, large, vertical, disabled }),
+    [intent, large, vertical, disabled],
+  );
 
   const ref = useRef<HTMLDivElement>(null);
+
+  // Work around wrong width on vertical flex when wrapping
+  // In Chrome: recently fixed (https://bugs.chromium.org/p/chromium/issues/detail?id=507397)
+  // In Firefox: work-around needed (https://bugzilla.mozilla.org/show_bug.cgi?id=995020)
+  // In Safari: work-around needed
   useLayoutEffect(() => {
-    if (orientation === 'horizontal') {
+    if (!vertical) {
       return;
     }
 
@@ -136,57 +86,66 @@ export function Toolbar(props: ToolbarProps) {
       observer.observe(element);
       return () => observer.unobserve(element);
     }
-  }, [orientation]);
-
+  }, [vertical]);
   return (
-    <div css={styles.toolbar(orientation)} ref={ref}>
-      <ToolbarProvider orientation={orientation}>{children}</ToolbarProvider>
-    </div>
+    <ToolbarProvider value={contextValue}>
+      <ButtonGroup
+        ref={ref}
+        vertical={vertical}
+        large={large}
+        style={{ flexWrap: 'wrap', borderRight: vertical ? border : undefined }}
+      >
+        {children}
+      </ButtonGroup>
+    </ToolbarProvider>
   );
 }
 
 Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
-  const orientation = useToolbarContext();
-  const {
-    active = false,
-    children,
-    onClick,
-    title,
-    titleOrientation = 'auto',
-    id,
-    ...other
-  } = props;
+  const { active = false, icon, onClick, title, id, ...other } = props;
 
+  const { intent, large, vertical, disabled } = useToolbarContext();
   return (
-    <div
-      style={{ position: 'relative', padding: 4, fontSize: '1.25em' }}
-      {...other}
+    <Tooltip
+      css={css`
+        flex-grow: 0 !important;
+      `}
+      compact={!large}
+      intent={intent}
+      content={title}
+      placement={vertical ? 'right' : 'bottom'}
     >
-      <button
+      <Button
+        minimal
+        disabled={disabled}
+        css={css`
+          .${Classes.ICON} {
+            color: ${Colors.DARK_GRAY3};
+          }
+        `}
+        intent={intent}
+        style={{ position: 'relative', fontSize: '1.25em' }}
         type="button"
-        css={styles.item(active)}
+        active={active}
+        icon={icon}
         onClick={() => {
           if (onClick) {
             onClick(props);
           }
         }}
-      >
-        {children}
-      </button>
-      <div
-        className="content"
-        css={styles.tooltip(orientation, titleOrientation)}
-      >
-        <span
-          style={{
-            display: 'flex',
-            margin: 'auto',
-            justifyContent: 'center',
-          }}
-        >
-          {title}
-        </span>
-      </div>
-    </div>
+        {...other}
+      />
+    </Tooltip>
   );
 };
+
+function ToolbarProvider(props: {
+  value: ToolbarContext;
+  children: ReactNode;
+}) {
+  return (
+    <toolbarContext.Provider value={props.value}>
+      {props.children}
+    </toolbarContext.Provider>
+  );
+}

package/src/components/toolbar/toolbarContext.ts

@@ -0,0 +1,21 @@
+import { Intent } from '@blueprintjs/core';
+import { createContext, useContext } from 'react';
+
+export interface ToolbarContext {
+  intent?: Intent;
+  large?: boolean;
+  vertical?: boolean;
+  disabled?: boolean;
+}
+
+export const toolbarContext = createContext<ToolbarContext | null>(null);
+
+export function useToolbarContext() {
+  const ctx = useContext(toolbarContext);
+  if (!ctx) {
+    throw new Error(
+      'useToolbarContext must be used within a ToolbarContextProvider',
+    );
+  }
+  return ctx;
+}

package/lib/components/toolbar/ToolbarContext.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarProvider = exports.useToolbarContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const toolbarContext = (0, react_1.createContext)(null);
-function useToolbarContext() {
-    const context = (0, react_1.useContext)(toolbarContext);
-    if (!context) {
-        throw new Error('ToolbarContext was not found');
-    }
-    return context;
-}
-exports.useToolbarContext = useToolbarContext;
-function ToolbarProvider(props) {
-    return ((0, jsx_runtime_1.jsx)(toolbarContext.Provider, { value: props.orientation, children: props.children }));
-}
-exports.ToolbarProvider = ToolbarProvider;

package/lib-esm/components/toolbar/ToolbarContext.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-import type { ToolbarOrientation } from './Toolbar';
-export declare function useToolbarContext(): ToolbarOrientation;
-export declare function ToolbarProvider(props: {
-    children: ReactNode;
-    orientation: ToolbarOrientation;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ToolbarContext.d.ts.map

package/lib-esm/components/toolbar/ToolbarContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarContext.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/ToolbarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAIpD,wBAAgB,iBAAiB,uBAOhC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,EAAE,kBAAkB,CAAC;CACjC,2CAMA"}

package/lib-esm/components/toolbar/ToolbarContext.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
-const toolbarContext = createContext(null);
-export function useToolbarContext() {
-    const context = useContext(toolbarContext);
-    if (!context) {
-        throw new Error('ToolbarContext was not found');
-    }
-    return context;
-}
-export function ToolbarProvider(props) {
-    return (_jsx(toolbarContext.Provider, { value: props.orientation, children: props.children }));
-}
-//# sourceMappingURL=ToolbarContext.js.map

package/lib-esm/components/toolbar/ToolbarContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarContext.js","sourceRoot":"","sources":["../../../src/components/toolbar/ToolbarContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAI7D,MAAM,cAAc,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAEtE,MAAM,UAAU,iBAAiB;IAC/B,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;KACjD;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,KAG/B;IACC,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,WAAW,YAC9C,KAAK,CAAC,QAAQ,GACS,CAC3B,CAAC;AACJ,CAAC"}

package/src/components/toolbar/ToolbarContext.tsx

@@ -1,25 +0,0 @@
-import { createContext, ReactNode, useContext } from 'react';
-
-import type { ToolbarOrientation } from './Toolbar';
-
-const toolbarContext = createContext<ToolbarOrientation | null>(null);
-
-export function useToolbarContext() {
-  const context = useContext(toolbarContext);
-  if (!context) {
-    throw new Error('ToolbarContext was not found');
-  }
-
-  return context;
-}
-
-export function ToolbarProvider(props: {
-  children: ReactNode;
-  orientation: ToolbarOrientation;
-}) {
-  return (
-    <toolbarContext.Provider value={props.orientation}>
-      {props.children}
-    </toolbarContext.Provider>
-  );
-}