ag-common 0.0.302 → 0.0.305
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui/components/Chevron/index.js +2 -2
- package/dist/ui/components/Close/index.d.ts +1 -1
- package/dist/ui/components/Close/index.js +4 -1
- package/dist/ui/components/DropdownList/types.d.ts +2 -2
- package/dist/ui/components/FlexColumn/index.d.ts +5 -3
- package/dist/ui/components/FlexColumn/index.js +0 -1
- package/dist/ui/components/FlexRow/index.d.ts +5 -3
- package/dist/ui/components/FlexRow/index.js +0 -1
- package/dist/ui/components/Icon/index.d.ts +2 -2
- package/dist/ui/components/Loader/index.js +2 -9
- package/dist/ui/components/Modal/Dialog.d.ts +0 -6
- package/dist/ui/components/Modal/types.d.ts +6 -0
- package/dist/ui/components/Prompt/Modal.js +1 -1
- package/dist/ui/components/RowOrColumn/index.d.ts +5 -3
- package/dist/ui/components/RowOrColumn/index.js +0 -1
- package/dist/ui/components/Search/Base.d.ts +1 -1
- package/dist/ui/components/Search/Base.js +16 -15
- package/dist/ui/components/Search/Dialog.js +10 -13
- package/dist/ui/components/Search/images.d.ts +5 -0
- package/dist/ui/components/Search/images.js +23 -0
- package/dist/ui/components/Search/types.d.ts +0 -1
- package/dist/ui/components/Table/index.js +1 -1
- package/dist/ui/components/TextEdit/CheckboxEdit.js +5 -5
- package/dist/ui/components/TextEdit/TextEdit.d.ts +3 -3
- package/dist/ui/components/TextEdit/TextEdit.js +9 -8
- package/dist/ui/components/TextEdit/types.d.ts +4 -0
- package/dist/ui/helpers/useQueryString.js +0 -1
- package/package.json +1 -1
|
@@ -18,8 +18,8 @@ const IconStyled = (0, styled_components_1.default)(Icon_1.Icon) `
|
|
|
18
18
|
margin: 0;
|
|
19
19
|
padding: 0;
|
|
20
20
|
`;
|
|
21
|
-
const ChevronIcon = (react_1.default.createElement("svg", {
|
|
22
|
-
react_1.default.createElement("path", {
|
|
21
|
+
const ChevronIcon = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor" },
|
|
22
|
+
react_1.default.createElement("path", { fillRule: "evenodd", d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })));
|
|
23
23
|
const Chevron = ({ width = '1.2rem', className, colour = 'black', onToggle, point = 'right', }) => {
|
|
24
24
|
let rotate = 0;
|
|
25
25
|
switch (point) {
|
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.Close = void 0;
|
|
7
|
+
const dom_1 = require("../../helpers/dom");
|
|
7
8
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
9
10
|
const SClose = styled_components_1.default.div `
|
|
@@ -35,5 +36,7 @@ const SClose = styled_components_1.default.div `
|
|
|
35
36
|
transform: rotate(-45deg);
|
|
36
37
|
}
|
|
37
38
|
`;
|
|
38
|
-
const Close = (
|
|
39
|
+
const Close = (p) => {
|
|
40
|
+
return (react_1.default.createElement(SClose, Object.assign({}, (0, dom_1.filterDataProps)(p), { className: p.className, onClick: (e) => { var _a; return (_a = p.onClick) === null || _a === void 0 ? void 0 : _a.call(p, e); } })));
|
|
41
|
+
};
|
|
39
42
|
exports.Close = Close;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
export interface IDropdownList<T> {
|
|
3
3
|
/**
|
|
4
4
|
* all items that can be in dropdown
|
|
@@ -29,5 +29,5 @@ export interface IDropdownList<T> {
|
|
|
29
29
|
/**
|
|
30
30
|
* if not provided, will default display value, then kebab dots
|
|
31
31
|
*/
|
|
32
|
-
children?:
|
|
32
|
+
children?: ReactNode;
|
|
33
33
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare const FlexColumn:
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export declare const FlexColumn: (props: {
|
|
3
3
|
noGrow?: boolean;
|
|
4
4
|
center?: boolean;
|
|
5
5
|
allowOverflow?: boolean;
|
|
6
|
-
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}) => JSX.Element;
|
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.FlexColumn = void 0;
|
|
7
|
-
/* eslint-disable react/destructuring-assignment */
|
|
8
7
|
const react_1 = __importDefault(require("react"));
|
|
9
8
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
10
9
|
const Base = styled_components_1.default.div `
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare const FlexRow:
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export declare const FlexRow: (props: {
|
|
3
3
|
noWrap?: boolean;
|
|
4
4
|
noGrow?: boolean;
|
|
5
5
|
center?: boolean;
|
|
6
6
|
enableOverflow?: boolean;
|
|
7
|
-
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
className?: string;
|
|
9
|
+
}) => JSX.Element;
|
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.FlexRow = void 0;
|
|
7
|
-
/* eslint-disable react/destructuring-assignment */
|
|
8
7
|
const react_1 = __importDefault(require("react"));
|
|
9
8
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
10
9
|
const Base = styled_components_1.default.div `
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
export interface IIconProps {
|
|
3
3
|
disabled?: boolean;
|
|
4
4
|
fill?: string;
|
|
@@ -14,7 +14,7 @@ export interface IIconProps {
|
|
|
14
14
|
/** default 0 */
|
|
15
15
|
padding?: string;
|
|
16
16
|
onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
|
|
17
|
-
children?:
|
|
17
|
+
children?: ReactNode;
|
|
18
18
|
role?: string;
|
|
19
19
|
title?: string;
|
|
20
20
|
tabIndex?: number;
|
|
@@ -63,19 +63,12 @@ const LoadingBack = styled_components_1.default.div `
|
|
|
63
63
|
}
|
|
64
64
|
transition: opacity 5s;
|
|
65
65
|
`;
|
|
66
|
-
const Loader = ({ name, height, width, }) => {
|
|
66
|
+
const Loader = ({ name, height = '2rem', width = '2rem', }) => {
|
|
67
67
|
const [trans, setTrans] = (0, react_1.useState)(true);
|
|
68
68
|
(0, react_1.useEffect)(() => {
|
|
69
69
|
setTrans(false);
|
|
70
70
|
}, []);
|
|
71
|
-
const style = {};
|
|
72
|
-
if (width !== null) {
|
|
73
|
-
style.width = width !== null && width !== void 0 ? width : '2rem';
|
|
74
|
-
}
|
|
75
|
-
if (height !== null) {
|
|
76
|
-
style.height = height !== null && height !== void 0 ? height : '2rem';
|
|
77
|
-
}
|
|
78
71
|
return (react_1.default.createElement(LoadingBack, { "data-loading": name, "data-transparent": trans },
|
|
79
|
-
react_1.default.createElement(SLoader, { style:
|
|
72
|
+
react_1.default.createElement(SLoader, { style: { height: height, width: width } })));
|
|
80
73
|
};
|
|
81
74
|
exports.Loader = Loader;
|
|
@@ -86,7 +86,7 @@ const PromptModal = ({ wrapper, res, bottomText, topText, okText = 'OK', cancelT
|
|
|
86
86
|
else {
|
|
87
87
|
setText(c);
|
|
88
88
|
}
|
|
89
|
-
}, placeholder: placeholder, defaultEditing: { focus: true }, singleLine: true, noGrow: true }),
|
|
89
|
+
}, placeholder: placeholder, defaultEditing: { focus: true }, singleLine: true, noGrow: true, allowUndo: false }),
|
|
90
90
|
react_1.default.createElement(Bottom, { noGrow: true },
|
|
91
91
|
react_1.default.createElement(Button_1.Button, { onClick: () => ret(text) }, okText),
|
|
92
92
|
react_1.default.createElement(Button_1.Button, { invert: true, onClick: () => ret(undefined) }, cancelText))))));
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare const RowOrColumn:
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export declare const RowOrColumn: (props: {
|
|
3
3
|
noGrow?: boolean;
|
|
4
4
|
center?: boolean;
|
|
5
5
|
noWrap?: boolean;
|
|
6
|
-
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}) => JSX.Element;
|
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.RowOrColumn = void 0;
|
|
7
|
-
/* eslint-disable react/destructuring-assignment */
|
|
8
7
|
const media_1 = require("../../styles/media");
|
|
9
8
|
const react_1 = __importDefault(require("react"));
|
|
10
9
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ISearchDialog, TSearchModalRes } from './types';
|
|
3
|
-
export declare const SearchBase: <T>({ onSelectItem, onSearchTextChange, placeholderText,
|
|
3
|
+
export declare const SearchBase: <T>({ onSelectItem, onSearchTextChange, placeholderText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, }: ISearchDialog<T> & {
|
|
4
4
|
onSearchTextChange?: ((v: string) => void) | undefined;
|
|
5
5
|
onSelectItem?: ((v: TSearchModalRes<T>) => void) | undefined;
|
|
6
6
|
}) => JSX.Element;
|
|
@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.SearchBase = void 0;
|
|
30
|
+
const images_1 = require("./images");
|
|
30
31
|
const helpers_1 = require("../../helpers");
|
|
31
32
|
const TextEdit_1 = require("../TextEdit");
|
|
32
33
|
const styles_1 = require("../../styles");
|
|
@@ -50,6 +51,7 @@ const SearchBox = styled_components_1.default.div `
|
|
|
50
51
|
@media ${styles_1.smallScreen} {
|
|
51
52
|
margin: 0;
|
|
52
53
|
padding: 0;
|
|
54
|
+
padding-top: 0.5rem;
|
|
53
55
|
width: 100%;
|
|
54
56
|
}
|
|
55
57
|
`;
|
|
@@ -60,17 +62,6 @@ const Icon = styled_components_1.default.div `
|
|
|
60
62
|
height: 1.5rem;
|
|
61
63
|
margin-right: 0.5rem;
|
|
62
64
|
`;
|
|
63
|
-
const CloseButton = styled_components_1.default.div `
|
|
64
|
-
font-weight: bold;
|
|
65
|
-
margin-left: 1rem;
|
|
66
|
-
font-size: 1.1rem;
|
|
67
|
-
z-index: 1;
|
|
68
|
-
color: #333;
|
|
69
|
-
cursor: pointer;
|
|
70
|
-
&:hover {
|
|
71
|
-
text-decoration: underline;
|
|
72
|
-
}
|
|
73
|
-
`;
|
|
74
65
|
const Content = styled_components_1.default.div `
|
|
75
66
|
width: calc(100% - 2rem);
|
|
76
67
|
margin: auto;
|
|
@@ -94,8 +85,13 @@ const Content = styled_components_1.default.div `
|
|
|
94
85
|
`;
|
|
95
86
|
const Row = styled_components_1.default.div `
|
|
96
87
|
width: 100%;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
`;
|
|
90
|
+
const CrossIconStyled = (0, styled_components_1.default)(images_1.CrossIcon) `
|
|
91
|
+
position: absolute;
|
|
92
|
+
right: 1rem;
|
|
97
93
|
`;
|
|
98
|
-
const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText,
|
|
94
|
+
const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, }) => {
|
|
99
95
|
var _a, _b;
|
|
100
96
|
const [searchText, setSearchText] = (0, react_1.useState)('');
|
|
101
97
|
const resWrap = (foundItem) => {
|
|
@@ -109,13 +105,18 @@ const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, closeTe
|
|
|
109
105
|
const filteredItems = displayItems.filter((i) => willDisplayItem(searchText, i));
|
|
110
106
|
const showText = (_b = (_a = texts === null || texts === void 0 ? void 0 : texts.totalItems) === null || _a === void 0 ? void 0 : _a.call(texts, filteredItems.length, displayItems.length)) !== null && _b !== void 0 ? _b : `Showing ${filteredItems.length} out of ${displayItems.length} total
|
|
111
107
|
items`;
|
|
108
|
+
const textEditRef = (0, react_1.createRef)();
|
|
112
109
|
return (react_1.default.createElement(Base, { className: className },
|
|
113
110
|
react_1.default.createElement(SearchBox, { "data-type": "search" },
|
|
114
|
-
react_1.default.createElement(TextEdit_1.TextEdit, { placeholder: placeholderText, defaultValue: "", onSubmit: (v) => (0, helpers_1.debounce)(() => {
|
|
111
|
+
react_1.default.createElement(TextEdit_1.TextEdit, { ref: textEditRef, placeholder: placeholderText, defaultValue: "", defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, null, MagnifyIconSvg), noGrow: true, allowUndo: false, onEscape: () => resWrap(undefined), onClickOutsideWithNoValue: null, onSubmit: (v) => (0, helpers_1.debounce)(() => {
|
|
115
112
|
setSearchText(v);
|
|
116
113
|
onSearchTextChange === null || onSearchTextChange === void 0 ? void 0 : onSearchTextChange(v);
|
|
117
|
-
}, { key: 'pagesearch', time: 200 })
|
|
118
|
-
react_1.default.createElement(
|
|
114
|
+
}, { key: 'pagesearch', time: 200 }) }),
|
|
115
|
+
searchText && (react_1.default.createElement(CrossIconStyled, { onClick: () => {
|
|
116
|
+
var _a;
|
|
117
|
+
(_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue('');
|
|
118
|
+
setSearchText('');
|
|
119
|
+
} }))),
|
|
119
120
|
react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length, "data-type": "content" },
|
|
120
121
|
filteredItems.map((i, index) => (react_1.default.createElement(Row, { key: getKeyF(i), onClick: () => resWrap(i) }, renderItem(searchText, i, index)))),
|
|
121
122
|
searchText && react_1.default.createElement(Row, null, showText))));
|
|
@@ -24,7 +24,6 @@ const react_dom_1 = __importDefault(require("react-dom"));
|
|
|
24
24
|
*/
|
|
25
25
|
const SearchDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
|
|
26
26
|
const placeholderText = p.placeholderText || '';
|
|
27
|
-
const closeText = p.closeText || 'CLOSE';
|
|
28
27
|
let originalStyle;
|
|
29
28
|
return new Promise((res) => {
|
|
30
29
|
const idName = 'ag-search-dialog';
|
|
@@ -36,21 +35,19 @@ const SearchDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
|
|
|
36
35
|
const wrapper = document.body.appendChild(document.createElement('div'));
|
|
37
36
|
wrapper.id = idName;
|
|
38
37
|
if (originalStyle === undefined) {
|
|
39
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
40
38
|
originalStyle = window.getComputedStyle(document.body).overflow || '';
|
|
41
39
|
document.body.style.overflow = 'hidden';
|
|
42
40
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
react_dom_1.default.render(react_1.default.createElement(Modal_1.SearchModal, Object.assign({}, p, { placeholderText: placeholderText, closeText: closeText, onSelectItem: onSelectItem })), wrapper);
|
|
41
|
+
react_dom_1.default.render(react_1.default.createElement(Modal_1.SearchModal, Object.assign({}, p, { placeholderText: placeholderText, onSelectItem: (f) => {
|
|
42
|
+
try {
|
|
43
|
+
document.body.style.overflow = originalStyle || '';
|
|
44
|
+
res(f);
|
|
45
|
+
}
|
|
46
|
+
finally {
|
|
47
|
+
react_dom_1.default.unmountComponentAtNode(wrapper);
|
|
48
|
+
wrapper.remove();
|
|
49
|
+
}
|
|
50
|
+
} })), wrapper);
|
|
54
51
|
});
|
|
55
52
|
});
|
|
56
53
|
exports.SearchDialog = SearchDialog;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.CrossIcon = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
9
|
+
const CrossIconBase = styled_components_1.default.svg `
|
|
10
|
+
color: rgb(170, 170, 170);
|
|
11
|
+
margin: auto;
|
|
12
|
+
font-size: 2rem;
|
|
13
|
+
height: 2rem;
|
|
14
|
+
width: 2rem;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
transition: color 0.2s ease-out 0s;
|
|
17
|
+
&:hover {
|
|
18
|
+
color: rgb(136, 136, 136);
|
|
19
|
+
}
|
|
20
|
+
`;
|
|
21
|
+
const CrossIcon = ({ className, onClick, }) => (react_1.default.createElement(CrossIconBase, { className: className, stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 352 512", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", onClick: onClick },
|
|
22
|
+
react_1.default.createElement("path", { d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" })));
|
|
23
|
+
exports.CrossIcon = CrossIcon;
|
|
@@ -32,7 +32,7 @@ const GroupTitle = styled_components_1.default.div `
|
|
|
32
32
|
`;
|
|
33
33
|
const GroupWrap = styled_components_1.default.div `
|
|
34
34
|
display: flex;
|
|
35
|
-
flex-flow:
|
|
35
|
+
flex-flow: column;
|
|
36
36
|
`;
|
|
37
37
|
const Table = ({ children, className, headerRow, }) => {
|
|
38
38
|
const grouped = (0, groupBy_1.groupByList)(children, (s) => s.groupTitle);
|
|
@@ -60,10 +60,10 @@ const CheckboxEdit = ({ defaultValue, onSubmit, noGrow = false, allowUndo = true
|
|
|
60
60
|
onSubmit(!value);
|
|
61
61
|
}
|
|
62
62
|
}, onKeyPress: (e) => e.key === 'Enter' && value !== defaultValue && onSubmit(value) }),
|
|
63
|
-
allowUndo && (react_1.default.createElement(Icons, { center: true, enableOverflow: true },
|
|
64
|
-
|
|
65
|
-
react_1.default.createElement(images_1.SaveIcon, null))
|
|
66
|
-
|
|
67
|
-
react_1.default.createElement(images_1.UndoIcon, null))))))
|
|
63
|
+
allowUndo && value !== defaultValue && (react_1.default.createElement(Icons, { center: true, enableOverflow: true },
|
|
64
|
+
react_1.default.createElement(common_1.IconD, { style: common_1.iconLeft, onClick: () => value !== defaultValue && onSubmit(value) },
|
|
65
|
+
react_1.default.createElement(images_1.SaveIcon, null)),
|
|
66
|
+
react_1.default.createElement(common_1.IconD, { style: common_1.iconRight, onClick: () => setValue(defaultValue) },
|
|
67
|
+
react_1.default.createElement(images_1.UndoIcon, null))))));
|
|
68
68
|
};
|
|
69
69
|
exports.CheckboxEdit = CheckboxEdit;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { ITextEdit } from './types';
|
|
1
|
+
import { IRefTextEdit, ITextEdit } from './types';
|
|
3
2
|
import { StyledComponent } from 'styled-components';
|
|
3
|
+
import React from 'react';
|
|
4
4
|
export declare const ValueReadonly: StyledComponent<"div", any, {}, never>;
|
|
5
|
-
export declare const TextEdit:
|
|
5
|
+
export declare const TextEdit: React.ForwardRefExoticComponent<ITextEdit & React.RefAttributes<IRefTextEdit>>;
|
|
@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.TextEdit = exports.ValueReadonly = void 0;
|
|
27
|
+
/* eslint-disable react/display-name */
|
|
27
28
|
const images_1 = require("./images");
|
|
28
29
|
const common_1 = require("./common");
|
|
29
30
|
const LengthBox_1 = require("./LengthBox");
|
|
@@ -82,16 +83,19 @@ const Icon = styled_components_1.default.div `
|
|
|
82
83
|
filter: saturate(3);
|
|
83
84
|
}
|
|
84
85
|
`;
|
|
85
|
-
|
|
86
|
+
exports.TextEdit = (0, react_1.forwardRef)((p, ref) => {
|
|
86
87
|
const { defaultValue = '', defaultEditing, disableEdit = false, placeholder, className, singleLine = false, noGrow = false, leftContent, onSubmit, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, allowUndo = true, onEscape, maxLength, onKeyDown, } = p;
|
|
87
|
-
const
|
|
88
|
+
const divRef = (0, react_1.useRef)(null);
|
|
88
89
|
const taref = (0, react_1.useRef)(null);
|
|
89
90
|
const [value, setValue] = (0, react_1.useState)(defaultValue);
|
|
90
91
|
const [editing, setEditingRaw] = (0, react_1.useState)(!!defaultEditing);
|
|
91
92
|
const valueChange = value !== defaultValue;
|
|
93
|
+
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
94
|
+
setValue,
|
|
95
|
+
}));
|
|
92
96
|
(0, useOnClickOutside_1.useOnClickOutside)({
|
|
93
97
|
disabled: onClickOutsideWithNoValue === null || disableEdit,
|
|
94
|
-
ref,
|
|
98
|
+
ref: divRef,
|
|
95
99
|
moveMouseOutside: false,
|
|
96
100
|
}, () => {
|
|
97
101
|
if (valueChange) {
|
|
@@ -116,14 +120,12 @@ const TextEdit = (p) => {
|
|
|
116
120
|
}, [onEditingChange]);
|
|
117
121
|
(0, react_1.useEffect)(() => {
|
|
118
122
|
setValue(defaultValue);
|
|
119
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
120
123
|
}, [defaultValue]);
|
|
121
124
|
(0, react_1.useEffect)(() => {
|
|
122
125
|
if ((defaultEditing === null || defaultEditing === void 0 ? void 0 : defaultEditing.focus) && taref.current) {
|
|
123
126
|
taref.current.focus();
|
|
124
127
|
}
|
|
125
|
-
|
|
126
|
-
}, []);
|
|
128
|
+
}, [defaultEditing === null || defaultEditing === void 0 ? void 0 : defaultEditing.focus]);
|
|
127
129
|
if (!editing || disableEdit) {
|
|
128
130
|
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', "data-nogrow": noGrow }, (0, dom_1.filterDataProps)(p)),
|
|
129
131
|
leftContent || null,
|
|
@@ -170,5 +172,4 @@ const TextEdit = (p) => {
|
|
|
170
172
|
setValue(defaultValue);
|
|
171
173
|
} },
|
|
172
174
|
react_1.default.createElement(images_1.UndoIcon, null)))))));
|
|
173
|
-
};
|
|
174
|
-
exports.TextEdit = TextEdit;
|
|
175
|
+
});
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export interface IRefTextEdit {
|
|
3
|
+
/** Set the internal value of the typed string. Can be used to clear externally */
|
|
4
|
+
setValue: React.Dispatch<React.SetStateAction<string>>;
|
|
5
|
+
}
|
|
2
6
|
export interface ITextEdit {
|
|
3
7
|
/**
|
|
4
8
|
* forces single row input style. will also enable 'Enter' to auto submit
|
|
@@ -11,7 +11,6 @@ exports.isServer = typeof window === 'undefined';
|
|
|
11
11
|
* @returns
|
|
12
12
|
*/
|
|
13
13
|
const useQueryStringRaw = ({ name, queryValues, defaultValue, stringify, parse, }) => {
|
|
14
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15
14
|
const qv = exports.isServer
|
|
16
15
|
? queryValues || {}
|
|
17
16
|
: (0, object_1.paramsToObject)(new URLSearchParams(window.location.search));
|