ehscan-react-components 0.1.4 → 0.1.5

package/dist/Components.d.ts

@@ -1 +1,2 @@
-export declare const myComp: () => boolean;
+import './style/button.css';
+export declare const myComp: () => import("react/jsx-runtime").JSX.Element;

package/dist/Components.js

@@ -1,3 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ExtButton from './ExtButton';
+import './style/button.css';
 export const myComp = () => {
-    return true;
+    return _jsx(ExtButton, {});
 };

package/dist/ExtButton.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+type Props = {
+    index?: string | number;
+    text?: string;
+    selected?: boolean;
+    addClass?: string;
+    notimeout?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    click?: (args?: any) => void;
+    children?: ReactNode;
+};
+declare const ExtButton: React.FC<Props>;
+export default ExtButton;

package/dist/ExtButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useCallback } from "react";
+import useRipple from "./tools/useRipple";
+const ExtButton = ({ index, text, selected, addClass, notimeout, size = 'md', click, children }) => {
+    const buttonRef = useRef(null);
+    const handleRipple = useRipple();
+    const handleButtonClick = useCallback((event) => {
+        handleRipple(event, buttonRef);
+        if (notimeout) {
+            click === null || click === void 0 ? void 0 : click(event);
+            return;
+        }
+        setTimeout(() => {
+            click === null || click === void 0 ? void 0 : click(event);
+        }, 200);
+    }, [notimeout, click, handleRipple]);
+    return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `ext-btn ext-btn--primary ext-btn--${size} _ripple ${addClass !== null && addClass !== void 0 ? addClass : ''}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: "ext-btn-label", children: text })] }, index) }));
+};
+export default ExtButton;

package/dist/tools/useRipple.d.ts

@@ -0,0 +1,3 @@
+import { MouseEvent } from 'react';
+declare const useRipple: () => (event: MouseEvent<HTMLElement>, buttonRef: React.RefObject<HTMLElement>) => void;
+export default useRipple;

package/dist/tools/useRipple.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+const useRipple = () => {
+    const handleRipple = useCallback((event, buttonRef) => {
+        const button = buttonRef.current;
+        if (!button)
+            return;
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = event.clientX - rect.left - size / 2;
+        const y = event.clientY - rect.top - size / 2;
+        const ripple = document.createElement('span');
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+        ripple.className = 'ripple';
+        button.appendChild(ripple);
+        setTimeout(() => ripple.remove(), 600);
+    }, []);
+    return handleRipple;
+};
+export default useRipple;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",