ag-common 0.0.233 → 0.0.236

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.
Files changed (6) hide show
  1. package/dist/ui/components/DropdownList/index.d.ts +2 -17
  2. package/dist/ui/components/DropdownList/index.js +48 -39
  3. package/dist/ui/components/DropdownList/types.d.ts +22 -0
  4. package/dist/ui/components/DropdownList/types.js +2 -0
  5. package/dist/ui/components/TextEdit/TextEdit.js +2 -2
  6. package/package.json +2 -2
package/dist/ui/components/DropdownList/index.d.ts CHANGED
@@ -1,18 +1,3 @@
1
1
  /// <reference types="react" />
2
- export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, shadow, maxHeight, }: {
3
- options: T[];
4
- value?: T;
5
- onChange: (v: T, index: number) => void;
6
- placeholder?: string;
7
- className?: string;
8
- renderF: (v: T) => string;
9
- children?: JSX.Element;
10
- /**
11
- * colour of dropdown shadow. default #555
12
- */
13
- shadow?: string;
14
- /**
15
- * max height of items list. default 50vh
16
- */
17
- maxHeight?: string;
18
- }): JSX.Element;
2
+ import { IDropdownList } from './types';
3
+ export declare function DropdownList<T>(p: IDropdownList<T>): JSX.Element;
package/dist/ui/components/DropdownList/index.js CHANGED
@@ -24,11 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.DropdownList = void 0;
27
- const colours_1 = require("../../styles/colours");
28
27
  const Icon_1 = require("../Icon");
29
28
  const dom_1 = require("../../helpers/dom");
30
29
  const common_1 = require("../../styles/common");
31
30
  const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
31
+ const colours_1 = require("../../styles/colours");
32
32
  const styled_components_1 = __importStar(require("styled-components"));
33
33
  const react_1 = __importStar(require("react"));
34
34
  const SBase = styled_components_1.default.div `
@@ -40,12 +40,12 @@ const SBase = styled_components_1.default.div `
40
40
  cursor: pointer;
41
41
  flex-grow: 0;
42
42
  `;
43
- const SItems = styled_components_1.default.div `
43
+ const DropItems = styled_components_1.default.div `
44
44
  flex-flow: column;
45
45
  z-index: 5;
46
46
 
47
47
  display: none;
48
- position: absolute;
48
+
49
49
  background-color: white;
50
50
  cursor: default;
51
51
  width: 100%;
@@ -56,36 +56,38 @@ const SItems = styled_components_1.default.div `
56
56
  `}
57
57
 
58
58
  overflow-y: auto;
59
- ${({ open }) => open &&
60
- (0, styled_components_1.css) `
61
- display: flex;
62
- `}
63
- ${({ shadow }) => shadow && (0, common_1.Shadow)(shadow)}
59
+ &[data-open='true'] {
60
+ display: flex;
61
+ }
62
+ &[data-defaultopen='false'] {
63
+ position: absolute;
64
+ ${({ shadow }) => shadow && (0, common_1.Shadow)(shadow)}
65
+ }
64
66
  `;
65
67
  const Dots = (react_1.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fillRule: "evenodd", clipRule: "evenodd" },
66
68
  react_1.default.createElement("path", { d: "M16 12a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0117 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 0110 12zm-8 0a3.001 3.001 0 016 0 3.001 3.001 0 01-6 0zm1 0a2 2 0 114.001.001A2 2 0 013 12z" })));
67
- const SItem = styled_components_1.default.div `
69
+ const IconStyled = (0, styled_components_1.default)(Icon_1.Icon) `
70
+ position: absolute;
71
+ `;
72
+ const SList = styled_components_1.default.div `
68
73
  z-index: 1;
69
74
  font-weight: 500;
70
75
  padding-left: 0.5rem;
71
76
  flex-grow: 1;
72
77
  padding: 1rem;
73
78
  cursor: pointer;
74
- ${({ selected }) => selected &&
75
- (0, styled_components_1.css) `
76
- opacity: 1 !important;
77
- `}
78
- &:hover {
79
- opacity: 0.9 !important;
80
- background-color: ${colours_1.colours.orange} !important;
79
+ &[data-selected='true'] {
80
+ cursor: default;
81
+ opacity: 1 !important;
82
+ background-color: ${colours_1.colours.orangeRed} !important;
81
83
  }
82
- ${({ selected }) => selected &&
83
- (0, styled_components_1.css) `
84
- background-color: ${colours_1.colours.orangeRed} !important;
85
- &:hover {
86
- background-color: ${colours_1.colours.orangeRed} !important;
87
- }
88
- `}
84
+ &[data-selected='false'] {
85
+ &:hover {
86
+ opacity: 0.9 !important;
87
+ background-color: ${colours_1.colours.orange} !important;
88
+ }
89
+ }
90
+
89
91
  &:nth-child(even) {
90
92
  background-color: rgba(0, 0, 0, 0.1);
91
93
  }
@@ -93,11 +95,20 @@ const SItem = styled_components_1.default.div `
93
95
  background-color: rgba(0, 0, 0, 0.2);
94
96
  }
95
97
  `;
96
- function DropdownList({ options, value, onChange, placeholder, className, renderF, children, shadow = '#555', maxHeight = '50vh', }) {
98
+ const List = ({ options, renderF, onChange, state, }) => {
99
+ return (react_1.default.createElement(react_1.default.Fragment, null, options.map((s, i) => (react_1.default.createElement(SList, { key: renderF(s), "data-selected": s === state, onClick: (e) => {
100
+ if (s !== state) {
101
+ onChange(s, i);
102
+ }
103
+ e.preventDefault();
104
+ } }, renderF(s))))));
105
+ };
106
+ function DropdownList(p) {
107
+ const { options, value, placeholder, className, renderF, children, shadow = '#555', maxHeight = '50vh', defaultOpen = false, } = p;
97
108
  const ref = (0, react_1.useRef)(null);
98
109
  const [state, setState] = (0, react_1.useState)(value);
99
- const [open, setOpen] = (0, react_1.useState)(false);
100
- (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
110
+ const [open, setOpen] = (0, react_1.useState)(defaultOpen);
111
+ (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open || defaultOpen, ref, moveMouseOutside: false }, () => {
101
112
  setOpen(false);
102
113
  });
103
114
  (0, react_1.useEffect)(() => {
@@ -111,7 +122,7 @@ function DropdownList({ options, value, onChange, placeholder, className, render
111
122
  var _a, _b, _c, _d;
112
123
  const maxLen = Math.max(...options.map((s) => renderF(s).length));
113
124
  const newStyle = {
114
- width: `calc(${maxLen}ch + 2rem)`,
125
+ width: defaultOpen ? '100%' : `calc(${maxLen}ch + 2rem)`,
115
126
  };
116
127
  const minPx = (0, dom_1.convertRemToPixels)(2 + maxLen / 2);
117
128
  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;
@@ -133,23 +144,21 @@ function DropdownList({ options, value, onChange, placeholder, className, render
133
144
  if (JSON.stringify(style) !== JSON.stringify(newStyle)) {
134
145
  setStyle(newStyle);
135
146
  }
136
- }, [open, options, renderF, style]);
147
+ }, [defaultOpen, open, options, renderF, style]);
137
148
  return (react_1.default.createElement(SBase, { className: className, ref: ref, title: placeholder, onClick: (e) => {
149
+ if (defaultOpen) {
150
+ return;
151
+ }
138
152
  e.stopPropagation();
139
153
  e.preventDefault();
140
154
  setOpen(!open);
141
155
  } },
142
- react_1.default.createElement(SItems, { open: open, style: style, shadow: shadow, maxHeight: maxHeight }, open &&
143
- options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: (e) => {
144
- if (s !== state) {
145
- onChange(s, i);
146
- }
156
+ react_1.default.createElement(DropItems, { "data-defaultopen": p.defaultOpen, "data-open": open, style: style, shadow: shadow, maxHeight: maxHeight }, open && react_1.default.createElement(List, Object.assign({}, p, { state: state }))),
157
+ children ||
158
+ (!defaultOpen && (react_1.default.createElement(IconStyled, { width: "2rem", height: "2rem", onClick: (e) => {
159
+ e.stopPropagation();
147
160
  e.preventDefault();
148
- } }, renderF(s))))),
149
- children || (react_1.default.createElement(Icon_1.Icon, { width: "2rem", height: "2rem", onClick: (e) => {
150
- e.stopPropagation();
151
- e.preventDefault();
152
- setOpen(!open);
153
- } }, Dots))));
161
+ setOpen(!open);
162
+ } }, Dots)))));
154
163
  }
155
164
  exports.DropdownList = DropdownList;
package/dist/ui/components/DropdownList/types.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /// <reference types="react" />
2
+ export interface IDropdownList<T> {
3
+ options: T[];
4
+ value?: T;
5
+ onChange: (v: T, index: number) => void;
6
+ placeholder?: string;
7
+ className?: string;
8
+ renderF: (v: T) => string;
9
+ children?: JSX.Element;
10
+ /**
11
+ * colour of dropdown shadow. default #555
12
+ */
13
+ shadow?: string;
14
+ /**
15
+ * max height of items list. default 50vh
16
+ */
17
+ maxHeight?: string;
18
+ /**
19
+ * if true, will show expanded. default false
20
+ */
21
+ defaultOpen?: boolean;
22
+ }
package/dist/ui/components/DropdownList/types.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/dist/ui/components/TextEdit/TextEdit.js CHANGED
@@ -139,9 +139,9 @@ const TextEdit = ({ defaultValue = '', defaultEditing, disableEdit = false, plac
139
139
  : ValueTextArea;
140
140
  return (react_1.default.createElement(ValueBoxEdit, Object.assign({}, common_2.noDrag, { className: className, "data-editing": "true",
141
141
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
142
- ref: ref, tabIndex: editing ? 0 : undefined, "data-nogrow": noGrow }, attributes),
142
+ ref: ref, tabIndex: -1, "data-nogrow": noGrow }, attributes),
143
143
  leftContent || null,
144
- react_1.default.createElement(Comp, { "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => {
144
+ react_1.default.createElement(Comp, { tabIndex: editing ? 0 : undefined, "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => {
145
145
  setValue(v.currentTarget.value);
146
146
  if (!allowUndo) {
147
147
  onSubmit(v.currentTarget.value, false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ag-common",
3
- "version": "0.0.233",
3
+ "version": "0.0.236",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Andrei Gec <@andreigec> (https://gec.dev/)",
@@ -17,7 +17,7 @@
17
17
  "dependencies": {
18
18
  "aws-cdk-lib": "2.x",
19
19
  "aws-sdk": "2.x",
20
- "axios": "0.26.x",
20
+ "axios": "0.x",
21
21
  "constructs": "10.x",
22
22
  "jsonwebtoken": "8.x",
23
23
  "jwks-rsa": "2.x",