ag-common 0.0.367 → 0.0.368
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/DropdownList/Base.d.ts +3 -0
- package/dist/ui/components/DropdownList/Base.js +161 -0
- package/dist/ui/components/DropdownList/Dialog.d.ts +7 -0
- package/dist/ui/components/DropdownList/Dialog.js +38 -0
- package/dist/ui/components/DropdownList/index.d.ts +2 -3
- package/dist/ui/components/DropdownList/index.js +4 -146
- package/dist/ui/components/DropdownList/types.d.ts +4 -2
- package/package.json +1 -1
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
exports.DropdownList = void 0;
|
|
30
|
+
const dom_1 = require("../../helpers/dom");
|
|
31
|
+
const common_1 = require("../../styles/common");
|
|
32
|
+
const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
|
|
33
|
+
const colours_1 = require("../../styles/colours");
|
|
34
|
+
const KebabDots_1 = require("../KebabDots");
|
|
35
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
36
|
+
const react_1 = __importStar(require("react"));
|
|
37
|
+
const Base = styled_components_1.default.div `
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-flow: row;
|
|
40
|
+
position: relative;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: space-between;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
flex-grow: 0;
|
|
45
|
+
`;
|
|
46
|
+
const DropItems = styled_components_1.default.div `
|
|
47
|
+
flex-flow: column;
|
|
48
|
+
z-index: 5;
|
|
49
|
+
display: none;
|
|
50
|
+
background-color: white;
|
|
51
|
+
cursor: default;
|
|
52
|
+
width: 100%;
|
|
53
|
+
position: absolute;
|
|
54
|
+
|
|
55
|
+
overflow-y: auto;
|
|
56
|
+
&[data-open='true'] {
|
|
57
|
+
display: flex;
|
|
58
|
+
}
|
|
59
|
+
${(0, common_1.bounce)('data-bounced')}
|
|
60
|
+
`;
|
|
61
|
+
const ListItemStyle = styled_components_1.default.div `
|
|
62
|
+
z-index: 1;
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
padding-left: 0.5rem;
|
|
65
|
+
flex-grow: 1;
|
|
66
|
+
padding: 1rem;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
display: flex;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
align-items: center;
|
|
72
|
+
&[data-default='false'] {
|
|
73
|
+
&[data-selected='true'] {
|
|
74
|
+
opacity: 1 !important;
|
|
75
|
+
background-color: ${colours_1.colours.orangeRed} !important;
|
|
76
|
+
}
|
|
77
|
+
&[data-selected='false'] {
|
|
78
|
+
&:hover {
|
|
79
|
+
opacity: 0.9 !important;
|
|
80
|
+
background-color: ${colours_1.colours.orange} !important;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&:nth-child(even) {
|
|
86
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
87
|
+
}
|
|
88
|
+
&:nth-child(odd) {
|
|
89
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
90
|
+
}
|
|
91
|
+
`;
|
|
92
|
+
const ListItem = ({ render, onChange, selected, defaultV = false, }) => (react_1.default.createElement(ListItemStyle, { "data-selected": selected, "data-default": defaultV, onClick: (e) => {
|
|
93
|
+
if (!selected) {
|
|
94
|
+
onChange === null || onChange === void 0 ? void 0 : onChange();
|
|
95
|
+
}
|
|
96
|
+
e.preventDefault();
|
|
97
|
+
} }, render));
|
|
98
|
+
function DropdownList(p) {
|
|
99
|
+
const { options, value, placeholder, className, renderF, shadow = '#555', maxHeight = '50vh', } = p;
|
|
100
|
+
const ref = (0, react_1.useRef)(null);
|
|
101
|
+
const [state, setState] = (0, react_1.useState)(value);
|
|
102
|
+
const [open, setOpen] = (0, react_1.useState)(p.open);
|
|
103
|
+
const [bounced, setBounced] = (0, react_1.useState)(false);
|
|
104
|
+
(0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
|
|
105
|
+
setOpen(false);
|
|
106
|
+
setBounced(false);
|
|
107
|
+
p.onChange(undefined, 0);
|
|
108
|
+
});
|
|
109
|
+
(0, react_1.useEffect)(() => {
|
|
110
|
+
const newv = value;
|
|
111
|
+
if (JSON.stringify(newv) !== JSON.stringify(value)) {
|
|
112
|
+
setState(newv);
|
|
113
|
+
}
|
|
114
|
+
}, [options, value]);
|
|
115
|
+
const [style, setStyle] = (0, react_1.useState)({});
|
|
116
|
+
(0, react_1.useEffect)(() => {
|
|
117
|
+
var _a, _b, _c, _d;
|
|
118
|
+
const maxLen = 20;
|
|
119
|
+
const newStyle = {
|
|
120
|
+
minWidth: `calc(${maxLen}ch + 2rem)`,
|
|
121
|
+
};
|
|
122
|
+
const minPx = (0, dom_1.convertRemToPixels)(2 + maxLen / 2);
|
|
123
|
+
const offsetLeft = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0;
|
|
124
|
+
if (offsetLeft < minPx) {
|
|
125
|
+
newStyle.left = '0';
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
newStyle.right = '0';
|
|
129
|
+
}
|
|
130
|
+
const b = (_d = (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) !== null && _d !== void 0 ? _d : { bottom: 0 };
|
|
131
|
+
const ih = typeof window !== 'undefined' ? window.innerHeight : 0;
|
|
132
|
+
//below screen
|
|
133
|
+
if (b.bottom + 50 > ih) {
|
|
134
|
+
newStyle.bottom = '1rem';
|
|
135
|
+
}
|
|
136
|
+
else {
|
|
137
|
+
newStyle.top = '0';
|
|
138
|
+
}
|
|
139
|
+
newStyle.filter = `drop-shadow(1px 1px 0.5rem ${shadow})`;
|
|
140
|
+
newStyle.maxHeight = maxHeight;
|
|
141
|
+
if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
|
|
142
|
+
setStyle(newStyle);
|
|
143
|
+
}
|
|
144
|
+
}, [maxHeight, open, options, renderF, shadow, style]);
|
|
145
|
+
const defaultRender = !p.value ? react_1.default.createElement(KebabDots_1.KebabDots, null) : react_1.default.createElement(react_1.default.Fragment, null, p.renderF(p.value));
|
|
146
|
+
const openDisplay = p.children || (react_1.default.createElement(ListItem, { selected: true, render: defaultRender, key: defaultRender.key, defaultV: !p.value }));
|
|
147
|
+
(0, react_1.useEffect)(() => {
|
|
148
|
+
if (!bounced && open) {
|
|
149
|
+
setBounced(true);
|
|
150
|
+
}
|
|
151
|
+
}, [bounced, open]);
|
|
152
|
+
return (react_1.default.createElement(Base, { className: className, ref: ref, title: placeholder, onClick: (e) => {
|
|
153
|
+
e.stopPropagation();
|
|
154
|
+
e.preventDefault();
|
|
155
|
+
setOpen(!open);
|
|
156
|
+
} },
|
|
157
|
+
react_1.default.createElement(DropItems, { "data-open": open, style: style, "data-bounced": bounced }, open &&
|
|
158
|
+
options.map((s, i) => (react_1.default.createElement(ListItem, { key: p.renderF(s).key, render: p.renderF(s), onChange: () => p.onChange(s, i), selected: s === state })))),
|
|
159
|
+
openDisplay));
|
|
160
|
+
}
|
|
161
|
+
exports.DropdownList = DropdownList;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
12
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
exports.DropdownListDialog = void 0;
|
|
16
|
+
const index_1 = require("./index");
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const react_dom_1 = __importDefault(require("react-dom"));
|
|
19
|
+
const DropdownListDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
|
|
20
|
+
return new Promise((res) => {
|
|
21
|
+
const id = 'ag-common-ddld';
|
|
22
|
+
if (document.querySelectorAll('#' + id).length) {
|
|
23
|
+
res(undefined);
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const wrapper = document.body.appendChild(document.createElement('div'));
|
|
27
|
+
wrapper.id = id;
|
|
28
|
+
wrapper.style.position = 'absolute';
|
|
29
|
+
wrapper.style.top = `${p.position.y}px`;
|
|
30
|
+
wrapper.style.left = `${p.position.x}px`;
|
|
31
|
+
react_dom_1.default.render(react_1.default.createElement(index_1.DropdownList, Object.assign({}, p, { open: true, onChange: (v, i) => {
|
|
32
|
+
react_dom_1.default.unmountComponentAtNode(wrapper);
|
|
33
|
+
wrapper.remove();
|
|
34
|
+
res(!v ? undefined : [v, i]);
|
|
35
|
+
} }), "\u00A0"), wrapper);
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
exports.DropdownListDialog = DropdownListDialog;
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export declare function DropdownList<T>(p: IDropdownList<T>): JSX.Element;
|
|
1
|
+
export * from './Base';
|
|
2
|
+
export * from './Dialog';
|
|
@@ -10,151 +10,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
|
|
|
10
10
|
if (k2 === undefined) k2 = k;
|
|
11
11
|
o[k2] = m[k];
|
|
12
12
|
}));
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
27
15
|
};
|
|
28
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports
|
|
30
|
-
|
|
31
|
-
const common_1 = require("../../styles/common");
|
|
32
|
-
const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
|
|
33
|
-
const colours_1 = require("../../styles/colours");
|
|
34
|
-
const KebabDots_1 = require("../KebabDots");
|
|
35
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
36
|
-
const react_1 = __importStar(require("react"));
|
|
37
|
-
const Base = styled_components_1.default.div `
|
|
38
|
-
display: flex;
|
|
39
|
-
flex-flow: row;
|
|
40
|
-
position: relative;
|
|
41
|
-
align-items: center;
|
|
42
|
-
justify-content: space-between;
|
|
43
|
-
cursor: pointer;
|
|
44
|
-
flex-grow: 0;
|
|
45
|
-
`;
|
|
46
|
-
const DropItems = styled_components_1.default.div `
|
|
47
|
-
flex-flow: column;
|
|
48
|
-
z-index: 5;
|
|
49
|
-
display: none;
|
|
50
|
-
background-color: white;
|
|
51
|
-
cursor: default;
|
|
52
|
-
width: 100%;
|
|
53
|
-
position: absolute;
|
|
54
|
-
|
|
55
|
-
overflow-y: auto;
|
|
56
|
-
&[data-open='true'] {
|
|
57
|
-
display: flex;
|
|
58
|
-
}
|
|
59
|
-
${(0, common_1.bounce)('data-bounced')}
|
|
60
|
-
`;
|
|
61
|
-
const ListItemStyle = styled_components_1.default.div `
|
|
62
|
-
z-index: 1;
|
|
63
|
-
font-weight: 500;
|
|
64
|
-
padding-left: 0.5rem;
|
|
65
|
-
flex-grow: 1;
|
|
66
|
-
padding: 1rem;
|
|
67
|
-
cursor: pointer;
|
|
68
|
-
display: flex;
|
|
69
|
-
overflow: hidden;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
align-items: center;
|
|
72
|
-
&[data-default='false'] {
|
|
73
|
-
&[data-selected='true'] {
|
|
74
|
-
opacity: 1 !important;
|
|
75
|
-
background-color: ${colours_1.colours.orangeRed} !important;
|
|
76
|
-
}
|
|
77
|
-
&[data-selected='false'] {
|
|
78
|
-
&:hover {
|
|
79
|
-
opacity: 0.9 !important;
|
|
80
|
-
background-color: ${colours_1.colours.orange} !important;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
&:nth-child(even) {
|
|
86
|
-
background-color: rgba(0, 0, 0, 0.1);
|
|
87
|
-
}
|
|
88
|
-
&:nth-child(odd) {
|
|
89
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
90
|
-
}
|
|
91
|
-
`;
|
|
92
|
-
const ListItem = ({ render, onChange, selected, defaultV = false, }) => (react_1.default.createElement(ListItemStyle, { "data-selected": selected, "data-default": defaultV, onClick: (e) => {
|
|
93
|
-
if (!selected) {
|
|
94
|
-
onChange === null || onChange === void 0 ? void 0 : onChange();
|
|
95
|
-
}
|
|
96
|
-
e.preventDefault();
|
|
97
|
-
} }, render));
|
|
98
|
-
function DropdownList(p) {
|
|
99
|
-
const { options, value, placeholder, className, renderF, shadow = '#555', maxHeight = '50vh', } = p;
|
|
100
|
-
const ref = (0, react_1.useRef)(null);
|
|
101
|
-
const [state, setState] = (0, react_1.useState)(value);
|
|
102
|
-
const [open, setOpen] = (0, react_1.useState)(false);
|
|
103
|
-
const [bounced, setBounced] = (0, react_1.useState)(false);
|
|
104
|
-
(0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
|
|
105
|
-
setOpen(false);
|
|
106
|
-
setBounced(false);
|
|
107
|
-
});
|
|
108
|
-
(0, react_1.useEffect)(() => {
|
|
109
|
-
const newv = value;
|
|
110
|
-
if (JSON.stringify(newv) !== JSON.stringify(value)) {
|
|
111
|
-
setState(newv);
|
|
112
|
-
}
|
|
113
|
-
}, [options, value]);
|
|
114
|
-
const [style, setStyle] = (0, react_1.useState)({});
|
|
115
|
-
(0, react_1.useEffect)(() => {
|
|
116
|
-
var _a, _b, _c, _d;
|
|
117
|
-
const maxLen = 20;
|
|
118
|
-
const newStyle = {
|
|
119
|
-
minWidth: `calc(${maxLen}ch + 2rem)`,
|
|
120
|
-
};
|
|
121
|
-
const minPx = (0, dom_1.convertRemToPixels)(2 + maxLen / 2);
|
|
122
|
-
const offsetLeft = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0;
|
|
123
|
-
if (offsetLeft < minPx) {
|
|
124
|
-
newStyle.left = '0';
|
|
125
|
-
}
|
|
126
|
-
else {
|
|
127
|
-
newStyle.right = '0';
|
|
128
|
-
}
|
|
129
|
-
const b = (_d = (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) !== null && _d !== void 0 ? _d : { bottom: 0 };
|
|
130
|
-
const ih = typeof window !== 'undefined' ? window.innerHeight : 0;
|
|
131
|
-
//below screen
|
|
132
|
-
if (b.bottom + 50 > ih) {
|
|
133
|
-
newStyle.bottom = '1rem';
|
|
134
|
-
}
|
|
135
|
-
else {
|
|
136
|
-
newStyle.top = '0';
|
|
137
|
-
}
|
|
138
|
-
newStyle.filter = `drop-shadow(1px 1px 0.5rem ${shadow})`;
|
|
139
|
-
newStyle.maxHeight = maxHeight;
|
|
140
|
-
if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
|
|
141
|
-
setStyle(newStyle);
|
|
142
|
-
}
|
|
143
|
-
}, [maxHeight, open, options, renderF, shadow, style]);
|
|
144
|
-
const defaultRender = !p.value ? react_1.default.createElement(KebabDots_1.KebabDots, null) : react_1.default.createElement(react_1.default.Fragment, null, p.renderF(p.value));
|
|
145
|
-
const openDisplay = p.children || (react_1.default.createElement(ListItem, { selected: true, render: defaultRender, key: defaultRender.key, defaultV: !p.value }));
|
|
146
|
-
(0, react_1.useEffect)(() => {
|
|
147
|
-
if (!bounced && open) {
|
|
148
|
-
setBounced(true);
|
|
149
|
-
}
|
|
150
|
-
}, [bounced, open]);
|
|
151
|
-
return (react_1.default.createElement(Base, { className: className, ref: ref, title: placeholder, onClick: (e) => {
|
|
152
|
-
e.stopPropagation();
|
|
153
|
-
e.preventDefault();
|
|
154
|
-
setOpen(!open);
|
|
155
|
-
} },
|
|
156
|
-
react_1.default.createElement(DropItems, { "data-open": open, style: style, "data-bounced": bounced }, open &&
|
|
157
|
-
options.map((s, i) => (react_1.default.createElement(ListItem, { key: p.renderF(s).key, render: p.renderF(s), onChange: () => p.onChange(s, i), selected: s === state })))),
|
|
158
|
-
openDisplay));
|
|
159
|
-
}
|
|
160
|
-
exports.DropdownList = DropdownList;
|
|
17
|
+
__exportStar(require("./Base"), exports);
|
|
18
|
+
__exportStar(require("./Dialog"), exports);
|
|
@@ -5,10 +5,10 @@ export interface IDropdownList<T> {
|
|
|
5
5
|
*/
|
|
6
6
|
options: T[];
|
|
7
7
|
/**
|
|
8
|
-
* selected item from options.
|
|
8
|
+
* selected item from options. closing will return undefined
|
|
9
9
|
*/
|
|
10
10
|
value?: T;
|
|
11
|
-
onChange: (v: T, index: number) => void;
|
|
11
|
+
onChange: (v: T | undefined, index: number) => void;
|
|
12
12
|
/**
|
|
13
13
|
* placeholder title for list
|
|
14
14
|
*/
|
|
@@ -30,4 +30,6 @@ export interface IDropdownList<T> {
|
|
|
30
30
|
* if not provided, will default display value, then kebab dots
|
|
31
31
|
*/
|
|
32
32
|
children?: ReactNode;
|
|
33
|
+
/** default false */
|
|
34
|
+
open?: boolean;
|
|
33
35
|
}
|