ag-common 0.0.65 → 0.0.66

package/dist/ui/components/DropdownList/index.js

@@ -120,10 +120,11 @@ function DropdownList({ options, value, onChange, placeholder, className, render
             setOpen(!open);
         } },
         react_1.default.createElement(SItems, { open: open, style: style }, open &&
-            options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: () => {
+            options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: (e) => {
                     if (s !== state) {
                         onChange(s, i);
                     }
+                    e.preventDefault();
                 } }, renderF(s))))),
         children || (react_1.default.createElement(Icon_1.Icon, { width: "2rem", height: "2rem", onClick: (e) => {
                 e.stopPropagation();

package/dist/ui/components/TextEdit/TextEdit.d.ts

@@ -1,12 +1,18 @@
 /// <reference types="react" />
-export declare const ValueReadonly: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextEdit: ({ defaultValue, defaultEditing, onSubmit, canEdit, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine, }: {
+import { StyledComponent } from 'styled-components';
+export declare const ValueReadonly: StyledComponent<"div", any, {}, never>;
+export declare const TextEdit: ({ defaultValue, defaultEditing, onSubmit, disableEdit, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine, }: {
     singleLine?: boolean | undefined;
     className?: string | undefined;
     defaultValue: string;
-    defaultEditing?: boolean | undefined;
+    /**
+     * if truthy will enable. if focus is true, will also focus on open
+     */
+    defaultEditing?: {
+        focus: boolean;
+    } | undefined;
     onSubmit: (val: string) => void;
-    canEdit?: boolean | undefined;
+    disableEdit?: boolean | undefined;
     placeholder?: string | undefined;
     onEditingChange?: ((editing: boolean) => void) | undefined;
     onClickOutsideWithNoValue?: (() => void) | undefined;

package/dist/ui/components/TextEdit/TextEdit.js

@@ -18,16 +18,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextEdit = exports.ValueReadonly = void 0;
 /* eslint-disable jsx-a11y/no-onchange */
 const react_1 = __importStar(require("react"));
 const images_1 = require("./images");
 const common_1 = require("./common");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const common_2 = require("../../styles/common");
 exports.ValueReadonly = styled_components_1.default.div `
@@ -35,17 +32,24 @@ exports.ValueReadonly = styled_components_1.default.div `
   word-break: break-word;
   flex-basis: calc(100% - 3rem);
 `;
-const ValueTextArea = styled_components_1.default.textarea `
+const basecss = (0, styled_components_1.css) `
+  outline: none;
   border: 0;
   word-break: break-word;
   ${common_1.valueCss};
   resize: none;
   overflow: hidden;
   background-color: white;
+`;
+const ValueTextArea = styled_components_1.default.textarea `
+  ${basecss}
   &[data-editing='true'] {
     min-height: 5rem;
   }
 `;
+const ValueTextBox = styled_components_1.default.input `
+  ${basecss}
+`;
 const ValueBoxEdit = (0, styled_components_1.default)(common_1.ValueBox) `
   border: solid 1px #ccc;
 `;
@@ -61,18 +65,18 @@ const Icon = styled_components_1.default.div `
     filter: saturate(3);
   }
 `;
-const TextEdit = ({ defaultValue, defaultEditing = false, onSubmit, canEdit = true, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine = false, }) => {
+const TextEdit = ({ defaultValue, defaultEditing, onSubmit, disableEdit = false, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine = false, }) => {
     const ref = (0, react_1.useRef)(null);
     const taref = (0, react_1.useRef)(null);
     const [value, setValue] = (0, react_1.useState)(defaultValue);
-    const [editing, setEditingRaw] = (0, react_1.useState)(defaultEditing);
+    const [editing, setEditingRaw] = (0, react_1.useState)(!!defaultEditing);
     const valueChange = value !== defaultValue;
     (0, useOnClickOutside_1.useOnClickOutside)({ ref, moveMouseOutside: false }, () => {
         if (valueChange) {
             onSubmit(value);
         }
         else {
-            if (canEdit && editing && defaultEditing) {
+            if (!disableEdit && editing && defaultEditing) {
                 return;
             }
             if (onClickOutsideWithNoValue) {
@@ -89,20 +93,19 @@ const TextEdit = ({ defaultValue, defaultEditing = false, onSubmit, canEdit = tr
     };
     (0, react_1.useEffect)(() => {
         setValue(defaultValue);
-        //setEditing(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultValue]);
     (0, react_1.useEffect)(() => {
-        if (defaultEditing && taref.current) {
+        if ((defaultEditing === null || defaultEditing === void 0 ? void 0 : defaultEditing.focus) && taref.current) {
             taref.current.focus();
         }
-        setEditing(defaultEditing);
+        setEditing(!!defaultEditing);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultEditing]);
-    if (!editing || !canEdit) {
+    if (!editing || disableEdit) {
         return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "false", onClick: () => onClickNotEditing === null || onClickNotEditing === void 0 ? void 0 : onClickNotEditing(), "data-pointer": onClickNotEditing ? 'true' : 'false' }),
             react_1.default.createElement(exports.ValueReadonly, { "data-type": "text" }, value),
-            react_1.default.createElement(Right, null, canEdit && (react_1.default.createElement(Icon, { style: common_1.iconRight, onClick: (e) => {
+            react_1.default.createElement(Right, null, !disableEdit && (react_1.default.createElement(Icon, { style: common_1.iconRight, onClick: (e) => {
                     e.stopPropagation();
                     setEditing(true);
                 } },
@@ -111,13 +114,20 @@ const TextEdit = ({ defaultValue, defaultEditing = false, onSubmit, canEdit = tr
     if (!open) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
-    return (react_1.default.createElement(ValueBoxEdit, Object.assign({ "data-editing": "true" }, common_2.noDrag, { ref: ref, tabIndex: editing ? 0 : undefined, className: className }),
-        react_1.default.createElement(ValueTextArea, { "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => setValue(v.currentTarget.value), placeholder: placeholder, rows: singleLine ? 1 : undefined, onKeyDown: (e) => singleLine && e.code.endsWith('Enter') && onSubmit(value) && false }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Comp = singleLine
+        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ValueTextBox
+        : ValueTextArea;
+    return (react_1.default.createElement(ValueBoxEdit, Object.assign({ "data-editing": "true" }, common_2.noDrag, { 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref: ref, tabIndex: editing ? 0 : undefined, className: className }),
+        react_1.default.createElement(Comp, { "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => setValue(v.currentTarget.value), placeholder: placeholder, rows: singleLine ? 1 : undefined, onKeyDown: (e) => singleLine && e.code.endsWith('Enter') && onSubmit(value) && false }),
         react_1.default.createElement(Right, null,
             valueChange && (react_1.default.createElement(Icon, { style: common_1.iconLeft, onClick: () => valueChange && onSubmit(value) },
                 react_1.default.createElement(images_1.SaveIcon, null))),
-            (valueChange || editing !== defaultEditing) && (react_1.default.createElement(Icon, { style: common_1.iconRight, onClick: () => {
-                    setEditing(defaultEditing);
+            (valueChange || editing !== !!defaultEditing) && (react_1.default.createElement(Icon, { style: common_1.iconRight, onClick: () => {
+                    setEditing(!!defaultEditing);
                     setValue(defaultValue);
                 } },
                 react_1.default.createElement(images_1.UndoIcon, null))))));

package/dist/ui/components/TextEdit/common.js

@@ -44,7 +44,6 @@ exports.valueCss = (0, styled_components_1.css) `
   width: 100%;
   height: 100%;
   word-break: break-all;
-  font-size: 1rem;
 
   &[data-type='checkbox'] {
     cursor: pointer;

package/dist/ui/helpers/index.d.ts

@@ -13,6 +13,7 @@ export * from './mutex';
 export * from './mutexData';
 export * from './plural';
 export * from './routes';
+export * from './useContextMenu';
 export * from './useLocalStorage';
 export * from './useLockBodyScroll';
 export * from './useOnClickOutside';

package/dist/ui/helpers/index.js

@@ -25,6 +25,7 @@ __exportStar(require("./mutex"), exports);
 __exportStar(require("./mutexData"), exports);
 __exportStar(require("./plural"), exports);
 __exportStar(require("./routes"), exports);
+__exportStar(require("./useContextMenu"), exports);
 __exportStar(require("./useLocalStorage"), exports);
 __exportStar(require("./useLockBodyScroll"), exports);
 __exportStar(require("./useOnClickOutside"), exports);

package/dist/ui/helpers/useContextMenu.d.ts

@@ -0,0 +1,7 @@
+export declare const useContextMenu: ({ ref, }: {
+    ref: React.RefObject<HTMLDivElement>;
+}) => {
+    xPos: string;
+    yPos: string;
+    showMenu: boolean;
+};

package/dist/ui/helpers/useContextMenu.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextMenu = void 0;
+const react_1 = require("react");
+const useContextMenu = ({ ref, }) => {
+    const [xPos, setXPos] = (0, react_1.useState)('0px');
+    const [yPos, setYPos] = (0, react_1.useState)('0px');
+    const [showMenu, setShowMenu] = (0, react_1.useState)(false);
+    const handleContextMenu = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        e.preventDefault();
+        setXPos(`${e.pageX}px`);
+        setYPos(`${e.pageY}px`);
+        setShowMenu(true);
+    }, [ref]);
+    const handleClick = (0, react_1.useCallback)(() => {
+        if (!showMenu) {
+            return;
+        }
+        setShowMenu(false);
+    }, [showMenu]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('click', handleClick);
+        document.addEventListener('contextmenu', handleContextMenu);
+        return () => {
+            document.addEventListener('click', handleClick);
+            document.removeEventListener('contextmenu', handleContextMenu);
+        };
+    });
+    return { xPos, yPos, showMenu };
+};
+exports.useContextMenu = useContextMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",