analysis-ui-components - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

lib-esm/layout/Accordion.d.ts

@@ -5,3 +5,3 @@ import React, { ReactNode, ReactFragment } from 'react';
 }
-interface AccordionItemProps {
+export interface AccordionItemProps {
     title: string;
@@ -8,0 +8,0 @@ children: ReactNode;

lib-esm/layout/Accordion.js

 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useState } from 'react';
+import { AccordionProvider, useAccordionContext, } from './context/AccordionContext';
+import { useDoubleClick } from './hooks/useDoubleClick';
 const styles = {
@@ -16,3 +17,2 @@ container: css({
                 flexDirection: 'column',
-                transition: 'flex-grow 500ms',
             },
@@ -41,12 +41,16 @@ isOpen && { flex: '1 1 0%' },
 export function Accordion(props) {
-    return _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0);
+    return (_jsx(AccordionProvider, { children: _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0) }, void 0));
 }
 Accordion.Item = function AccordionItem(props) {
-    const { children, title, defaultOpened = false } = props;
-    const [open, setOpen] = useState(defaultOpened);
-    function handleClick() {
-        setOpen(!open);
+    const { item, utils } = useAccordionContext(props.title, props.defaultOpened);
+    const onClickHandle = useDoubleClick({
+        onClick: utils.toggle,
+        onDoubleClick: utils.clear,
+    });
+    let displayable = false;
+    if (item) {
+        displayable = item.isOpen;
     }
-    return (_jsxs("div", Object.assign({ css: styles.item(open) }, { children: [_jsx("div", Object.assign({ onClick: handleClick, css: styles.header }, { children: title }), void 0), _jsx("div", Object.assign({ style: { display: open ? 'block' : 'none' } }, { children: children }), void 0)] }), void 0));
+    return (_jsxs("div", Object.assign({ css: styles.item(displayable) }, { children: [_jsx("div", Object.assign({ onClick: onClickHandle, css: styles.header }, { children: props.title }), void 0), _jsx("div", Object.assign({ style: { display: displayable ? 'flex' : 'none' } }, { children: props.children }), void 0)] }), void 0));
 };
 //# sourceMappingURL=Accordion.js.map

lib-esm/layout/SplitPane.js

@@ -22,2 +22,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
                 userSelect: 'none',
+                minWidth: 11,
                 ':hover': {
@@ -24,0 +25,0 @@ backgroundColor: 'rgb(223, 223, 223)',

lib/layout/Accordion.js

 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useState } from 'react';
+import { AccordionProvider, useAccordionContext, } from './context/AccordionContext';
+import { useDoubleClick } from './hooks/useDoubleClick';
 const styles = {
@@ -16,3 +17,2 @@ container: css({
                 flexDirection: 'column',
-                transition: 'flex-grow 500ms',
             },
@@ -41,11 +41,15 @@ isOpen && { flex: '1 1 0%' },
 export function Accordion(props) {
-    return _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0);
+    return (_jsx(AccordionProvider, { children: _jsx("div", Object.assign({ css: styles.container }, { children: props.children }), void 0) }, void 0));
 }
 Accordion.Item = function AccordionItem(props) {
-    const { children, title, defaultOpened = false } = props;
-    const [open, setOpen] = useState(defaultOpened);
-    function handleClick() {
-        setOpen(!open);
+    const { item, utils } = useAccordionContext(props.title, props.defaultOpened);
+    const onClickHandle = useDoubleClick({
+        onClick: utils.toggle,
+        onDoubleClick: utils.clear,
+    });
+    let displayable = false;
+    if (item) {
+        displayable = item.isOpen;
     }
-    return (_jsxs("div", Object.assign({ css: styles.item(open) }, { children: [_jsx("div", Object.assign({ onClick: handleClick, css: styles.header }, { children: title }), void 0), _jsx("div", Object.assign({ style: { display: open ? 'block' : 'none' } }, { children: children }), void 0)] }), void 0));
+    return (_jsxs("div", Object.assign({ css: styles.item(displayable) }, { children: [_jsx("div", Object.assign({ onClick: onClickHandle, css: styles.header }, { children: props.title }), void 0), _jsx("div", Object.assign({ style: { display: displayable ? 'flex' : 'none' } }, { children: props.children }), void 0)] }), void 0));
 };

lib/layout/SplitPane.js

@@ -22,2 +22,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
                 userSelect: 'none',
+                minWidth: 11,
                 ':hover': {
@@ -24,0 +25,0 @@ backgroundColor: 'rgb(223, 223, 223)',

package.json

 {
   "name": "analysis-ui-components",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "React components to build analysis UI",
@@ -24,2 +24,4 @@ "main": "lib/index.js",
     "prettier-write": "prettier --write .",
+    "test-only": "jest",
+    "watch": "jest --watchAll",
     "test": "npm run eslint && npm run prettier && npm run check-types",
@@ -34,3 +36,4 @@ "build-storybook": "build-storybook -s ./public",
   "dependencies": {
-    "@emotion/react": "^11.4.1"
+    "@emotion/react": "^11.4.1",
+    "immer": "^9.0.6"
   },
@@ -45,2 +48,7 @@ "devDependencies": {
     "@storybook/react": "^6.3.7",
+    "@testing-library/dom": "^8.5.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
     "@types/react": "^17.0.0",
@@ -52,2 +60,3 @@ "@types/react-dom": "^17.0.0",
     "eslint": "^7.32.0",
+    "jest": "^27.2.0",
     "prettier": "^2.3.2",
@@ -57,5 +66,13 @@ "react": "^17.0.0",
     "rimraf": "^3.0.2",
+    "ts-jest": "^27.0.5",
     "typescript": "^4.4.2",
     "vite": "^2.5.1"
   },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "@testing-library/jest-dom/extend-expect"
+    ]
+  },
   "repository": {
@@ -62,0 +79,0 @@ "type": "git",

No alert changes

Improved metrics

Total package byte prevSize

83372

increased by70.71%

Number of package files

71

increased by65.12%

Lines of code

1330

increased by75%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

26

increased by36.84%

Dependency changes

• + Addedimmer@^9.0.6

• + Addedimmer@9.0.21(transitive)