@synerise/ds-panels-resizer 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+---
+id: panels-resizer
+title: PanelResizer
+---
+
+The `PanelsResizer` component allows you to create a layout with resizable left and right panels, separated by a draggable resizer. 
+
+Users can adjust the width of the panels by dragging the resizer, providing a flexible and customizable interface.
+
+## Installation
+```
+npm i @synerise/ds-panels-resizer
+or
+yarn add @synerise/ds-panels-resizer
+```
+
+## Usage
+```
+import { PanelsResizer } from '@synerise/ds-panels-resizer';
+
+const App = () => (
+  <div style={{ width: '100%', height: '680px' }}>
+    <PanelsResizer
+      leftPanel={<div>Left Panel Content</div>}
+      rightPanel={<div>Right Panel Content</div>}
+    />
+  </div>
+);
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-panels-resizer--default"></iframe>
+
+## API
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| leftPanel | The content to display in the left panel. | React.ReactNode | --- |
+| rightPanel | The content to display in the right panel. | React.ReactNode | --- |
+| initial | Initial widths of the panels. Can specify leftPanel or rightPanel width in pixels. | { leftPanel: number } \| { rightPanel: number } | --- |
+| scrollable | Whether the panels should be scrollable when their content overflows. | boolean | false |

package/dist/PanelResizer.styles.d.ts

@@ -0,0 +1 @@
+export declare const PanelsResizerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/PanelResizer.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var PanelsResizerContainer = styled.div.withConfig({
+  displayName: "PanelResizerstyles__PanelsResizerContainer",
+  componentId: "d1bdei-0"
+})(["display:flex;flex:1;height:-webkit-fill-available;"]);

package/dist/PanelsResizer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { InitialVectorOptions } from './utils';
+type PanelsResizerProps = {
+    leftPanel: ReactNode;
+    rightPanel: ReactNode;
+    initial?: InitialVectorOptions;
+    scrollable?: boolean;
+};
+export declare const PanelsResizer: ({ leftPanel, rightPanel, initial, scrollable }: PanelsResizerProps) => React.JSX.Element;
+export {};

package/dist/PanelsResizer.js

@@ -0,0 +1,65 @@
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+import { Resizer } from './Resizer';
+import { calculateLeftPanelWidth, calculateRightPanelWidth, getInitialVector } from './utils';
+import * as S from './PanelResizer.styles';
+export var PanelsResizer = function PanelsResizer(_ref) {
+  var leftPanel = _ref.leftPanel,
+    rightPanel = _ref.rightPanel,
+    initial = _ref.initial,
+    scrollable = _ref.scrollable;
+  var containerRef = useRef(null);
+  var _useState = useState(false),
+    isResizing = _useState[0],
+    setIsResizing = _useState[1];
+  var _useState2 = useState(0),
+    vector = _useState2[0],
+    setVector = _useState2[1];
+  var startClientXRef = useRef(0);
+  useEffect(function () {
+    if (containerRef.current) {
+      var containerWidth = containerRef.current.offsetWidth;
+      var initialVector = getInitialVector(initial, containerWidth);
+      setVector(initialVector);
+    }
+  }, [initial]);
+  var handleMouseMove = useCallback(function (event) {
+    if (!isResizing) return;
+    var deltaX = event.clientX - startClientXRef.current;
+    setVector(function (prevVector) {
+      return prevVector !== null ? prevVector + deltaX : deltaX;
+    });
+    startClientXRef.current = event.clientX;
+  }, [isResizing]);
+  var handleMouseUpOrLeave = useCallback(function () {
+    if (!isResizing) return;
+    setIsResizing(false);
+  }, [isResizing]);
+  var handleMouseDownOnResizer = useCallback(function (event) {
+    setIsResizing(true);
+    startClientXRef.current = event.clientX;
+  }, []);
+  return /*#__PURE__*/React.createElement(S.PanelsResizerContainer, {
+    ref: containerRef,
+    "data-testid": "panels-resizer-container",
+    onMouseUp: handleMouseUpOrLeave,
+    onMouseMove: handleMouseMove,
+    onMouseLeave: handleMouseUpOrLeave
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "left-panel-wrapper",
+    style: {
+      width: calculateLeftPanelWidth(vector),
+      pointerEvents: isResizing ? 'none' : 'auto',
+      overflow: scrollable ? 'auto' : 'hidden'
+    }
+  }, leftPanel), /*#__PURE__*/React.createElement(Resizer, {
+    onMouseDown: handleMouseDownOnResizer
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "right-panel-wrapper",
+    style: {
+      width: calculateRightPanelWidth(vector),
+      pointerEvents: isResizing ? 'none' : 'auto',
+      zIndex: 4,
+      overflow: scrollable ? 'auto' : 'hidden'
+    }
+  }, rightPanel));
+};

package/dist/Resizer/Resizer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MouseEvent } from 'react';
+type ResizerProps = {
+    onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+};
+export declare const Resizer: ({ onMouseDown }: ResizerProps) => React.JSX.Element;
+export {};

package/dist/Resizer/Resizer.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DragHandleM } from '@synerise/ds-icon';
+import { Handler, HandlerIcon } from './Resizer.styles';
+var HANDLER_WIDTH = 16;
+export var Resizer = function Resizer(_ref) {
+  var onMouseDown = _ref.onMouseDown;
+  return /*#__PURE__*/React.createElement(Handler, {
+    "data-testid": "resizer-handler",
+    onMouseDown: onMouseDown,
+    width: HANDLER_WIDTH
+  }, /*#__PURE__*/React.createElement(HandlerIcon, {
+    component: /*#__PURE__*/React.createElement(DragHandleM, null),
+    size: HANDLER_WIDTH
+  }));
+};

package/dist/Resizer/Resizer.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Handler: import("styled-components").StyledComponent<"div", any, {
+    width: number;
+}, never>;
+export declare const HandlerIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;

package/dist/Resizer/Resizer.styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import Icon from '@synerise/ds-icon';
+export var Handler = styled.div.withConfig({
+  displayName: "Resizerstyles__Handler",
+  componentId: "s3ii80-0"
+})(["display:flex;align-items:center;width:", "px;flex-grow:1;z-index:5;background-color:", ";&:hover{cursor:ew-resize;background-color:", ";}"], function (props) {
+  return props.width;
+}, function (props) {
+  return props.theme.palette['grey-200'];
+}, function (props) {
+  return props.theme.palette['blue-100'];
+});
+export var HandlerIcon = styled(Icon).withConfig({
+  displayName: "Resizerstyles__HandlerIcon",
+  componentId: "s3ii80-1"
+})(["svg{fill:", ";}&:hover{color:", ";}"], function (props) {
+  return props.theme.palette['grey-600'];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+});

package/dist/Resizer/index.d.ts

@@ -0,0 +1 @@
+export * from './Resizer';

package/dist/Resizer/index.js

@@ -0,0 +1 @@
+export * from './Resizer';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { PanelsResizer } from './PanelsResizer';

package/dist/index.js

@@ -0,0 +1 @@
+export { PanelsResizer } from './PanelsResizer';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/utils/calculatePanelsWidth.d.ts

@@ -0,0 +1,8 @@
+export type InitialVectorOptions = {
+    leftPanel: number;
+} | {
+    rightPanel: number;
+};
+export declare const getInitialVector: (options: InitialVectorOptions | undefined, containerWidth: number) => number;
+export declare const calculateLeftPanelWidth: (vector: number) => string;
+export declare const calculateRightPanelWidth: (vector: number) => string;

package/dist/utils/calculatePanelsWidth.js

@@ -0,0 +1,18 @@
+export var getInitialVector = function getInitialVector(options, containerWidth) {
+  if (!options) return 0;
+  var half = containerWidth / 2;
+  if ('leftPanel' in options) {
+    return options.leftPanel - half;
+  }
+  if ('rightPanel' in options) {
+    return half - options.rightPanel;
+  }
+  return 0;
+};
+var HALF_WIDTH = '50%';
+export var calculateLeftPanelWidth = function calculateLeftPanelWidth(vector) {
+  return "calc(" + HALF_WIDTH + " + " + vector + "px)";
+};
+export var calculateRightPanelWidth = function calculateRightPanelWidth(vector) {
+  return "calc(" + HALF_WIDTH + " - " + vector + "px)";
+};

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './calculatePanelsWidth';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from './calculatePanelsWidth';

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@synerise/ds-panels-resizer",
+  "version": "0.0.1",
+  "description": "PanelResizer UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^0.68.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 17.0.2",
+    "styled-components": "5.0.1"
+  },
+  "gitHead": "cc884c487bf337d59ff357e1232dda3156d4396e"
+}