iguazio.dashboard-react-controls 3.0.2 → 3.0.4
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/components/FormChipCell/FormChip/FormChip.d.ts +5 -1
- package/dist/components/FormChipCell/FormChip/FormChip.d.ts.map +1 -1
- package/dist/components/FormChipCell/FormChip/FormChip.mjs +50 -42
- package/dist/components/FormChipCell/FormChip/FormChip.mjs.map +1 -1
- package/dist/components/FormChipCell/FormChipCell.d.ts.map +1 -1
- package/dist/components/FormChipCell/FormChipCell.mjs +102 -99
- package/dist/components/FormChipCell/FormChipCell.mjs.map +1 -1
- package/dist/components/FormChipCell/FormChipCellView.d.ts +6 -1
- package/dist/components/FormChipCell/FormChipCellView.d.ts.map +1 -1
- package/dist/components/FormChipCell/FormChipCellView.mjs +104 -92
- package/dist/components/FormChipCell/FormChipCellView.mjs.map +1 -1
- package/dist/components/FormChipCell/NewChipForm/NewChipForm.d.ts +3 -1
- package/dist/components/FormChipCell/NewChipForm/NewChipForm.d.ts.map +1 -1
- package/dist/components/FormChipCell/NewChipForm/NewChipForm.mjs +126 -117
- package/dist/components/FormChipCell/NewChipForm/NewChipForm.mjs.map +1 -1
- package/dist/components/FormCombobox/FormCombobox.d.ts.map +1 -1
- package/dist/components/FormCombobox/FormCombobox.mjs +65 -65
- package/dist/components/FormCombobox/FormCombobox.mjs.map +1 -1
- package/dist/images/present-metrics-icon.svg +3 -0
- package/dist/index.css +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export default FormChip;
|
|
2
|
-
declare function FormChip({ chip, chipIndex, chipOptions, editConfig, handleEditChip, handleRemoveChip, handleToEditMode, isEditable, keyName, meta, setChipsSizes, setEditConfig, validationRules, valueName }: {
|
|
2
|
+
declare function FormChip({ chip, chipIndex, chipSizeIsRecalculated, setChipSizeIsRecalculated, chipOptions, editConfig, handleEditChip, handleRemoveChip, handleToEditMode, isEditable, keyName, meta, setChipsSizes, setEditConfig, validationRules, valueName }: {
|
|
3
3
|
chip: any;
|
|
4
4
|
chipIndex: any;
|
|
5
|
+
chipSizeIsRecalculated: any;
|
|
6
|
+
setChipSizeIsRecalculated: any;
|
|
5
7
|
chipOptions?: {
|
|
6
8
|
background: string;
|
|
7
9
|
boldValue: boolean;
|
|
@@ -26,6 +28,8 @@ declare namespace FormChip {
|
|
|
26
28
|
let displayName: string;
|
|
27
29
|
namespace propTypes {
|
|
28
30
|
export let chip: any;
|
|
31
|
+
export let chipSizeIsRecalculated: any;
|
|
32
|
+
export let setChipSizeIsRecalculated: any;
|
|
29
33
|
export let chipIndex: any;
|
|
30
34
|
export { CHIP_OPTIONS as chipOptions };
|
|
31
35
|
export let editConfig: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormChip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/FormChipCell/FormChip/FormChip.jsx"],"names":[],"mappings":";AAyBA;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"FormChip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/FormChipCell/FormChip/FormChip.jsx"],"names":[],"mappings":";AAyBA;;;;;;;;;;;;;;;;;;;;;;;;0BA2DC;;;;;;;;;;;;;;;;;;;;;;6BA/D4B,gBAAgB"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as p } from "react/jsx-runtime";
|
|
2
|
+
import v, { useLayoutEffect as F, forwardRef as T } from "react";
|
|
3
3
|
import e from "prop-types";
|
|
4
|
-
import
|
|
5
|
-
import { CHIP_OPTIONS as
|
|
4
|
+
import k from "../NewChipForm/NewChipForm.mjs";
|
|
5
|
+
import { CHIP_OPTIONS as w } from "../../../types.mjs";
|
|
6
6
|
/* empty css */
|
|
7
7
|
let i = ({
|
|
8
|
-
chip:
|
|
8
|
+
chip: f,
|
|
9
9
|
chipIndex: r,
|
|
10
|
-
|
|
10
|
+
chipSizeIsRecalculated: n,
|
|
11
|
+
setChipSizeIsRecalculated: c,
|
|
12
|
+
chipOptions: m = {
|
|
11
13
|
background: "purple",
|
|
12
14
|
boldValue: !1,
|
|
13
15
|
borderRadius: "primary",
|
|
@@ -15,50 +17,56 @@ let i = ({
|
|
|
15
17
|
density: "dense",
|
|
16
18
|
font: "purple"
|
|
17
19
|
},
|
|
18
|
-
editConfig:
|
|
19
|
-
handleEditChip:
|
|
20
|
-
handleRemoveChip:
|
|
21
|
-
handleToEditMode:
|
|
22
|
-
isEditable:
|
|
23
|
-
keyName:
|
|
24
|
-
meta:
|
|
25
|
-
setChipsSizes:
|
|
26
|
-
setEditConfig:
|
|
27
|
-
validationRules:
|
|
28
|
-
valueName:
|
|
29
|
-
},
|
|
30
|
-
const
|
|
31
|
-
return
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
20
|
+
editConfig: R,
|
|
21
|
+
handleEditChip: b,
|
|
22
|
+
handleRemoveChip: h,
|
|
23
|
+
handleToEditMode: C,
|
|
24
|
+
isEditable: q = !1,
|
|
25
|
+
keyName: s = "",
|
|
26
|
+
meta: g,
|
|
27
|
+
setChipsSizes: t,
|
|
28
|
+
setEditConfig: y,
|
|
29
|
+
validationRules: j = {},
|
|
30
|
+
valueName: E = ""
|
|
31
|
+
}, N) => {
|
|
32
|
+
const u = v.useRef();
|
|
33
|
+
return F(() => {
|
|
34
|
+
u.current && t && n && t((d) => {
|
|
35
|
+
var o, a, l;
|
|
36
|
+
return {
|
|
37
|
+
...d,
|
|
38
|
+
[r]: ((l = (a = (o = u.current) == null ? void 0 : o.getBoundingClientRect) == null ? void 0 : a.call(o)) == null ? void 0 : l.width) ?? 50
|
|
39
|
+
};
|
|
40
|
+
});
|
|
41
|
+
}, [r, n, t]), /* @__PURE__ */ p("div", { onClick: (d) => C(d, r, s), ref: u, children: /* @__PURE__ */ p(
|
|
42
|
+
k,
|
|
38
43
|
{
|
|
39
|
-
chip:
|
|
44
|
+
chip: f,
|
|
40
45
|
chipIndex: r,
|
|
41
|
-
chipOptions:
|
|
46
|
+
chipOptions: m,
|
|
42
47
|
className: "input-label-key",
|
|
43
|
-
editConfig:
|
|
44
|
-
handleRemoveChip:
|
|
45
|
-
isEditable:
|
|
46
|
-
keyName:
|
|
47
|
-
meta:
|
|
48
|
-
onChange:
|
|
49
|
-
ref:
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
editConfig: R,
|
|
49
|
+
handleRemoveChip: h,
|
|
50
|
+
isEditable: q,
|
|
51
|
+
keyName: s,
|
|
52
|
+
meta: g,
|
|
53
|
+
onChange: b,
|
|
54
|
+
ref: N,
|
|
55
|
+
setChipSizeIsRecalculated: c,
|
|
56
|
+
setEditConfig: y,
|
|
57
|
+
validationRules: j,
|
|
58
|
+
valueName: E
|
|
53
59
|
}
|
|
54
60
|
) });
|
|
55
61
|
};
|
|
56
|
-
i =
|
|
62
|
+
i = T(i);
|
|
57
63
|
i.displayName = "FormChip";
|
|
58
64
|
i.propTypes = {
|
|
59
65
|
chip: e.object.isRequired,
|
|
66
|
+
chipSizeIsRecalculated: e.bool.isRequired,
|
|
67
|
+
setChipSizeIsRecalculated: e.func.isRequired,
|
|
60
68
|
chipIndex: e.number.isRequired,
|
|
61
|
-
chipOptions:
|
|
69
|
+
chipOptions: w,
|
|
62
70
|
editConfig: e.object.isRequired,
|
|
63
71
|
handleEditChip: e.func.isRequired,
|
|
64
72
|
handleRemoveChip: e.func.isRequired,
|
|
@@ -71,8 +79,8 @@ i.propTypes = {
|
|
|
71
79
|
validationRules: e.object,
|
|
72
80
|
valueName: e.string
|
|
73
81
|
};
|
|
74
|
-
const
|
|
82
|
+
const L = i;
|
|
75
83
|
export {
|
|
76
|
-
|
|
84
|
+
L as default
|
|
77
85
|
};
|
|
78
86
|
//# sourceMappingURL=FormChip.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormChip.mjs","sources":["../../../../src/lib/components/FormChipCell/FormChip/FormChip.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useLayoutEffect, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\n\nimport NewChipForm from '../NewChipForm/NewChipForm'\n\nimport { CHIP_OPTIONS } from '../../../types'\n\nimport './formChip.scss'\n\nlet FormChip = (\n {\n chip,\n chipIndex,\n chipOptions = {\n background: 'purple',\n boldValue: false,\n borderRadius: 'primary',\n borderColor: 'transparent',\n density: 'dense',\n font: 'purple'\n },\n editConfig,\n handleEditChip,\n handleRemoveChip,\n handleToEditMode,\n isEditable = false,\n keyName = '',\n meta,\n setChipsSizes,\n setEditConfig,\n validationRules = {},\n valueName = ''\n },\n ref\n) => {\n const chipRef = React.useRef()\n
|
|
1
|
+
{"version":3,"file":"FormChip.mjs","sources":["../../../../src/lib/components/FormChipCell/FormChip/FormChip.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useLayoutEffect, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\n\nimport NewChipForm from '../NewChipForm/NewChipForm'\n\nimport { CHIP_OPTIONS } from '../../../types'\n\nimport './formChip.scss'\n\nlet FormChip = (\n {\n chip,\n chipIndex,\n chipSizeIsRecalculated,\n setChipSizeIsRecalculated,\n chipOptions = {\n background: 'purple',\n boldValue: false,\n borderRadius: 'primary',\n borderColor: 'transparent',\n density: 'dense',\n font: 'purple'\n },\n editConfig,\n handleEditChip,\n handleRemoveChip,\n handleToEditMode,\n isEditable = false,\n keyName = '',\n meta,\n setChipsSizes,\n setEditConfig,\n validationRules = {},\n valueName = ''\n },\n ref\n) => {\n const chipRef = React.useRef()\n useLayoutEffect(() => {\n if (chipRef.current && setChipsSizes && chipSizeIsRecalculated) {\n setChipsSizes(state => ({\n ...state,\n [chipIndex]: chipRef.current?.getBoundingClientRect?.()?.width ?? 50\n }))\n }\n }, [chipIndex, chipSizeIsRecalculated, setChipsSizes])\n\n return (\n <div onClick={event => handleToEditMode(event, chipIndex, keyName)} ref={chipRef}>\n <NewChipForm\n chip={chip}\n chipIndex={chipIndex}\n chipOptions={chipOptions}\n className=\"input-label-key\"\n editConfig={editConfig}\n handleRemoveChip={handleRemoveChip}\n isEditable={isEditable}\n keyName={keyName}\n meta={meta}\n onChange={handleEditChip}\n ref={ref}\n setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n setEditConfig={setEditConfig}\n validationRules={validationRules}\n valueName={valueName}\n />\n </div>\n )\n}\n\nFormChip = forwardRef(FormChip)\n\nFormChip.displayName = 'FormChip'\n\nFormChip.propTypes = {\n chip: PropTypes.object.isRequired,\n chipSizeIsRecalculated: PropTypes.bool.isRequired,\n setChipSizeIsRecalculated: PropTypes.func.isRequired,\n chipIndex: PropTypes.number.isRequired,\n chipOptions: CHIP_OPTIONS,\n editConfig: PropTypes.object.isRequired,\n handleEditChip: PropTypes.func.isRequired,\n handleRemoveChip: PropTypes.func.isRequired,\n handleToEditMode: PropTypes.func.isRequired,\n isEditable: PropTypes.bool,\n keyName: PropTypes.string,\n meta: PropTypes.object.isRequired,\n setChipsSizes: PropTypes.func.isRequired,\n setEditConfig: PropTypes.func.isRequired,\n validationRules: PropTypes.object,\n valueName: PropTypes.string\n}\n\nexport default FormChip\n"],"names":["FormChip","chip","chipIndex","chipSizeIsRecalculated","setChipSizeIsRecalculated","chipOptions","editConfig","handleEditChip","handleRemoveChip","handleToEditMode","isEditable","keyName","meta","setChipsSizes","setEditConfig","validationRules","valueName","ref","chipRef","React","useLayoutEffect","state","_c","_b","_a","jsx","event","NewChipForm","forwardRef","PropTypes","CHIP_OPTIONS","FormChip$1"],"mappings":";;;;;;AAyBA,IAAIA,IAAW,CACb;AAAA,EACE,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC;AAAA,EACnB,WAAAC,IAAY;AACd,GACAC,MACG;AACG,QAAAC,IAAUC,EAAM,OAAO;AAC7B,SAAAC,EAAgB,MAAM;AAChB,IAAAF,EAAQ,WAAWL,KAAiBV,KACtCU,EAAc,CAAUQ,MAAA;;AAAA;AAAA,QACtB,GAAGA;AAAA,QACH,CAACnB,CAAS,KAAGoB,KAAAC,KAAAC,IAAAN,EAAQ,YAAR,gBAAAM,EAAiB,0BAAjB,gBAAAD,EAAA,KAAAC,OAAA,gBAAAF,EAA4C,UAAS;AAAA,MAAA;AAAA,KAClE;AAAA,EAEH,GAAA,CAACpB,GAAWC,GAAwBU,CAAa,CAAC,GAGnD,gBAAAY,EAAC,OAAI,EAAA,SAAS,CAASC,MAAAjB,EAAiBiB,GAAOxB,GAAWS,CAAO,GAAG,KAAKO,GACvE,UAAA,gBAAAO;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,MAAA1B;AAAA,MACA,WAAAC;AAAA,MACA,aAAAG;AAAA,MACA,WAAU;AAAA,MACV,YAAAC;AAAA,MACA,kBAAAE;AAAA,MACA,YAAAE;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAUL;AAAA,MACV,KAAAU;AAAA,MACA,2BAAAb;AAAA,MACA,eAAAU;AAAA,MACA,iBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEAhB,IAAW4B,EAAW5B,CAAQ;AAE9BA,EAAS,cAAc;AAEvBA,EAAS,YAAY;AAAA,EACnB,MAAM6B,EAAU,OAAO;AAAA,EACvB,wBAAwBA,EAAU,KAAK;AAAA,EACvC,2BAA2BA,EAAU,KAAK;AAAA,EAC1C,WAAWA,EAAU,OAAO;AAAA,EAC5B,aAAaC;AAAA,EACb,YAAYD,EAAU,OAAO;AAAA,EAC7B,gBAAgBA,EAAU,KAAK;AAAA,EAC/B,kBAAkBA,EAAU,KAAK;AAAA,EACjC,kBAAkBA,EAAU,KAAK;AAAA,EACjC,YAAYA,EAAU;AAAA,EACtB,SAASA,EAAU;AAAA,EACnB,MAAMA,EAAU,OAAO;AAAA,EACvB,eAAeA,EAAU,KAAK;AAAA,EAC9B,eAAeA,EAAU,KAAK;AAAA,EAC9B,iBAAiBA,EAAU;AAAA,EAC3B,WAAWA,EAAU;AACvB;AAEA,MAAAE,IAAe/B;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormChipCell.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"names":[],"mappings":";AAiCA;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"FormChipCell.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"names":[],"mappings":";AAiCA;;;;;;;;;;;;;;;;;;;;;;gBAkWC;;;;;;;;;;;;;;;;;;;6BA5W4B,aAAa"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { CHIP_OPTIONS as
|
|
8
|
-
import { CLICK as
|
|
9
|
-
import { areArraysEqual as
|
|
10
|
-
import { checkPatternsValidity as
|
|
11
|
-
import { generateChipsList as
|
|
12
|
-
import { uniquenessError as
|
|
1
|
+
import { jsxs as ne, jsx as T } from "react/jsx-runtime";
|
|
2
|
+
import pe, { useState as k, useMemo as ce, useCallback as y } from "react";
|
|
3
|
+
import he, { get as F, set as O, isEmpty as D, isNil as ae } from "lodash";
|
|
4
|
+
import de from "classnames";
|
|
5
|
+
import u from "prop-types";
|
|
6
|
+
import fe from "./FormChipCellView.mjs";
|
|
7
|
+
import { CHIP_OPTIONS as me } from "../../types.mjs";
|
|
8
|
+
import { CLICK as Ce, TAB as H, TAB_SHIFT as U } from "../../constants.mjs";
|
|
9
|
+
import { areArraysEqual as Ie } from "../../utils/common.util.mjs";
|
|
10
|
+
import { checkPatternsValidity as ge } from "../../utils/validation.util.mjs";
|
|
11
|
+
import { generateChipsList as ye } from "../../utils/generateChipsList.util.mjs";
|
|
12
|
+
import { uniquenessError as z } from "./formChipCell.util.mjs";
|
|
13
13
|
import "../../hooks/index.mjs";
|
|
14
14
|
/* empty css */
|
|
15
|
-
import { useChipCell as
|
|
16
|
-
let
|
|
15
|
+
import { useChipCell as Fe } from "../../hooks/useChipCell.hook.mjs";
|
|
16
|
+
let R = ({
|
|
17
17
|
chipOptions: B = {
|
|
18
18
|
background: "purple",
|
|
19
19
|
boldValue: !1,
|
|
@@ -24,12 +24,12 @@ let V = ({
|
|
|
24
24
|
},
|
|
25
25
|
className: b = "",
|
|
26
26
|
delimiter: _ = null,
|
|
27
|
-
formState:
|
|
27
|
+
formState: n,
|
|
28
28
|
initialValues: q,
|
|
29
29
|
isEditable: m = !1,
|
|
30
|
-
label:
|
|
31
|
-
name:
|
|
32
|
-
onClick:
|
|
30
|
+
label: V = null,
|
|
31
|
+
name: o,
|
|
32
|
+
onClick: w = () => {
|
|
33
33
|
},
|
|
34
34
|
shortChips: $ = !1,
|
|
35
35
|
validationRules: v = {},
|
|
@@ -37,41 +37,41 @@ let V = ({
|
|
|
37
37
|
onExitEditModeCallback: d = null,
|
|
38
38
|
visibleChipsMaxLength: I = null
|
|
39
39
|
}) => {
|
|
40
|
-
const
|
|
41
|
-
chipsCellRef:
|
|
42
|
-
chipsWrapperRef:
|
|
43
|
-
handleShowElements:
|
|
44
|
-
hiddenChipsCounterRef:
|
|
45
|
-
hiddenChipsPopUpRef:
|
|
46
|
-
setChipsSizes:
|
|
40
|
+
const W = de("chips", b), [X, Y] = k(!1), {
|
|
41
|
+
chipsCellRef: A,
|
|
42
|
+
chipsWrapperRef: G,
|
|
43
|
+
handleShowElements: J,
|
|
44
|
+
hiddenChipsCounterRef: L,
|
|
45
|
+
hiddenChipsPopUpRef: Q,
|
|
46
|
+
setChipsSizes: Z,
|
|
47
47
|
setShowHiddenChips: K,
|
|
48
|
-
showChips:
|
|
48
|
+
showChips: S,
|
|
49
49
|
showHiddenChips: P,
|
|
50
50
|
visibleChipsCount: j
|
|
51
|
-
} =
|
|
51
|
+
} = Fe(m, I), [p, C] = k({
|
|
52
52
|
chipIndex: null,
|
|
53
53
|
isEdit: !1,
|
|
54
54
|
isKeyFocused: !1,
|
|
55
55
|
isValueFocused: !1,
|
|
56
56
|
isNewChip: !1
|
|
57
57
|
});
|
|
58
|
-
let
|
|
59
|
-
visibleChips: F(
|
|
58
|
+
let E = ce(() => m || I === "all" ? {
|
|
59
|
+
visibleChips: F(n.values, o),
|
|
60
60
|
hiddenChips: []
|
|
61
|
-
} :
|
|
62
|
-
F(
|
|
61
|
+
} : ye(
|
|
62
|
+
F(n.values, o),
|
|
63
63
|
I || j
|
|
64
|
-
), [I, m, j,
|
|
64
|
+
), [I, m, j, n.values, o]);
|
|
65
65
|
const N = y(
|
|
66
66
|
(e) => {
|
|
67
|
-
|
|
67
|
+
Ie(F(q, o), e, ["id"]) && O(n.initialValues, o, e), n.form.mutators.setFieldState(o, { modified: !0 }), n.form.mutators.setFieldState(o, { touched: !0 });
|
|
68
68
|
},
|
|
69
|
-
[q,
|
|
70
|
-
),
|
|
69
|
+
[q, o, n]
|
|
70
|
+
), M = y(
|
|
71
71
|
(e, i) => {
|
|
72
72
|
var t;
|
|
73
73
|
const r = ((t = i.value) == null ? void 0 : t.length) || 0;
|
|
74
|
-
!
|
|
74
|
+
!p.isEdit && !p.chipIndex && n.form.mutators.push(o, {
|
|
75
75
|
id: r + /* @__PURE__ */ new Date(),
|
|
76
76
|
key: "",
|
|
77
77
|
value: "",
|
|
@@ -85,31 +85,31 @@ let V = ({
|
|
|
85
85
|
}), e && e.preventDefault();
|
|
86
86
|
},
|
|
87
87
|
[
|
|
88
|
-
|
|
89
|
-
|
|
88
|
+
p.isEdit,
|
|
89
|
+
p.chipIndex,
|
|
90
90
|
P,
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
n.form.mutators,
|
|
92
|
+
o,
|
|
93
93
|
_,
|
|
94
94
|
K
|
|
95
95
|
]
|
|
96
96
|
), g = y(
|
|
97
97
|
(e, i, r, t = !1) => {
|
|
98
98
|
N(
|
|
99
|
-
|
|
99
|
+
he.chain(n).get(["values", o]).filter((s, l) => l !== r).value()
|
|
100
100
|
), i.remove(r), d && d(), e && !t && e.stopPropagation();
|
|
101
101
|
},
|
|
102
|
-
[N,
|
|
103
|
-
),
|
|
102
|
+
[N, n, o, d]
|
|
103
|
+
), ee = y(
|
|
104
104
|
(e, i, r, t) => {
|
|
105
|
-
const { key: s, value: l } = i.value[
|
|
106
|
-
r ===
|
|
105
|
+
const { key: s, value: l } = i.value[p.chipIndex], h = !!(s != null && s.trim() && (l != null && l.trim()));
|
|
106
|
+
r === Ce ? (h || g(e, i, p.chipIndex, t), C({
|
|
107
107
|
chipIndex: null,
|
|
108
108
|
isEdit: !1,
|
|
109
109
|
isKeyFocused: !1,
|
|
110
110
|
isValueFocused: !1,
|
|
111
111
|
isNewChip: !1
|
|
112
|
-
}), h && d && d()) : r ===
|
|
112
|
+
}), h && d && d()) : r === H ? (h || g(e, i, p.chipIndex), C((a) => {
|
|
113
113
|
const c = a.chipIndex + 1 > i.value.length - 1;
|
|
114
114
|
return h && c && d && d(), {
|
|
115
115
|
chipIndex: c ? null : a.chipIndex + 1,
|
|
@@ -118,7 +118,7 @@ let V = ({
|
|
|
118
118
|
isValueFocused: !1,
|
|
119
119
|
isNewChip: !1
|
|
120
120
|
};
|
|
121
|
-
})) : r ===
|
|
121
|
+
})) : r === U && (h || g(e, i, p.chipIndex), C((a) => {
|
|
122
122
|
const c = a.chipIndex === 0;
|
|
123
123
|
return h && c && d && d(), {
|
|
124
124
|
chipIndex: c ? null : a.chipIndex - 1,
|
|
@@ -127,17 +127,17 @@ let V = ({
|
|
|
127
127
|
isValueFocused: !c,
|
|
128
128
|
isNewChip: !1
|
|
129
129
|
};
|
|
130
|
-
})), N(F(
|
|
130
|
+
})), N(F(n.values, o)), (p.chipIndex > 0 && p.chipIndex < i.value.length - 1 || i.value.length > 1 && p.chipIndex === 0 && r !== U || i.value.length > 1 && p.chipIndex === i.value.length - 1 && r !== H) && e && e.preventDefault();
|
|
131
131
|
},
|
|
132
132
|
[
|
|
133
|
-
|
|
133
|
+
p.chipIndex,
|
|
134
134
|
N,
|
|
135
|
-
|
|
136
|
-
|
|
135
|
+
n.values,
|
|
136
|
+
o,
|
|
137
137
|
d,
|
|
138
138
|
g
|
|
139
139
|
]
|
|
140
|
-
),
|
|
140
|
+
), ie = y(
|
|
141
141
|
(e, i, r) => {
|
|
142
142
|
if (m) {
|
|
143
143
|
const { clientX: t, clientY: s } = e;
|
|
@@ -145,12 +145,12 @@ let V = ({
|
|
|
145
145
|
const h = (a, c, f) => {
|
|
146
146
|
if (f) {
|
|
147
147
|
const {
|
|
148
|
-
top:
|
|
149
|
-
left:
|
|
150
|
-
right:
|
|
151
|
-
bottom:
|
|
148
|
+
top: te,
|
|
149
|
+
left: re,
|
|
150
|
+
right: ue,
|
|
151
|
+
bottom: oe
|
|
152
152
|
} = f.getBoundingClientRect();
|
|
153
|
-
return !(a >
|
|
153
|
+
return !(a > ue || a < re || c > oe || c < te);
|
|
154
154
|
}
|
|
155
155
|
};
|
|
156
156
|
e.stopPropagation(), e.target.nodeName !== "INPUT" ? e.target.firstElementChild && (l = h(
|
|
@@ -165,22 +165,22 @@ let V = ({
|
|
|
165
165
|
isValueFocused: !l
|
|
166
166
|
}));
|
|
167
167
|
}
|
|
168
|
-
|
|
168
|
+
w && w();
|
|
169
169
|
},
|
|
170
|
-
[m,
|
|
171
|
-
),
|
|
170
|
+
[m, w]
|
|
171
|
+
), se = (e) => {
|
|
172
172
|
if (!e) return null;
|
|
173
173
|
let i = [];
|
|
174
174
|
const r = (t, s) => !e.some(({ key: l }, h) => t === l && h !== s);
|
|
175
|
-
return
|
|
176
|
-
const [s, l] =
|
|
175
|
+
return D(v) || (i = e.map((t) => {
|
|
176
|
+
const [s, l] = le(t);
|
|
177
177
|
return s && l ? { key: s, value: l } : s ? { key: s } : l ? { value: l } : null;
|
|
178
178
|
})), e.forEach((t, s) => {
|
|
179
|
-
r(t.key, s) || (F(i, [s, "key"], !1) ? i.at(s).key.push(
|
|
180
|
-
}),
|
|
181
|
-
},
|
|
179
|
+
r(t.key, s) || (F(i, [s, "key"], !1) ? i.at(s).key.push(z) : O(i, [s, "key"], [z]));
|
|
180
|
+
}), D(i) && x && (i = x(e)), i.every((t) => ae(t)) ? null : i;
|
|
181
|
+
}, le = ({ key: e, value: i, disabled: r }) => {
|
|
182
182
|
const t = (s, l) => {
|
|
183
|
-
const [h, a] =
|
|
183
|
+
const [h, a] = ge(
|
|
184
184
|
v[l].filter((f) => f.pattern),
|
|
185
185
|
s
|
|
186
186
|
);
|
|
@@ -188,52 +188,55 @@ let V = ({
|
|
|
188
188
|
};
|
|
189
189
|
return r ? [null, null] : [t(e, "key"), t(i, "value")];
|
|
190
190
|
};
|
|
191
|
-
return /* @__PURE__ */
|
|
192
|
-
|
|
193
|
-
/* @__PURE__ */ T("div", { className:
|
|
194
|
-
|
|
191
|
+
return /* @__PURE__ */ ne("div", { className: W, "data-testid": `${o}-chips`, children: [
|
|
192
|
+
V && /* @__PURE__ */ T("div", { className: "chips__label", children: V }),
|
|
193
|
+
/* @__PURE__ */ T("div", { className: V ? "chips__wrapper" : "", children: /* @__PURE__ */ T(
|
|
194
|
+
fe,
|
|
195
195
|
{
|
|
196
196
|
chipOptions: B,
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
197
|
+
chipSizeIsRecalculated: X,
|
|
198
|
+
chips: E,
|
|
199
|
+
editConfig: p,
|
|
200
|
+
formState: n,
|
|
201
|
+
handleAddNewChip: M,
|
|
202
|
+
handleEditChip: ee,
|
|
201
203
|
handleRemoveChip: g,
|
|
202
|
-
handleShowElements:
|
|
203
|
-
handleToEditMode:
|
|
204
|
+
handleShowElements: J,
|
|
205
|
+
handleToEditMode: ie,
|
|
204
206
|
isEditable: m,
|
|
205
|
-
name:
|
|
206
|
-
ref: { chipsCellRef:
|
|
207
|
-
|
|
207
|
+
name: o,
|
|
208
|
+
ref: { chipsCellRef: A, chipsWrapperRef: G, hiddenChipsCounterRef: L, hiddenChipsPopUpRef: Q },
|
|
209
|
+
setChipSizeIsRecalculated: Y,
|
|
210
|
+
setChipsSizes: Z,
|
|
208
211
|
setEditConfig: C,
|
|
209
212
|
shortChips: $,
|
|
210
|
-
showChips:
|
|
213
|
+
showChips: S,
|
|
211
214
|
showHiddenChips: P,
|
|
212
|
-
validateFields:
|
|
215
|
+
validateFields: se,
|
|
213
216
|
validationRules: v
|
|
214
217
|
}
|
|
215
218
|
) })
|
|
216
219
|
] });
|
|
217
220
|
};
|
|
218
|
-
|
|
219
|
-
chipOptions:
|
|
220
|
-
className:
|
|
221
|
-
delimiter:
|
|
222
|
-
formState:
|
|
223
|
-
initialValues:
|
|
224
|
-
isEditable:
|
|
225
|
-
label:
|
|
226
|
-
name:
|
|
227
|
-
onClick:
|
|
228
|
-
onExitEditModeCallback:
|
|
229
|
-
shortChips:
|
|
230
|
-
validationRules:
|
|
231
|
-
validator:
|
|
232
|
-
visibleChipsMaxLength:
|
|
221
|
+
R.propTypes = {
|
|
222
|
+
chipOptions: me,
|
|
223
|
+
className: u.string,
|
|
224
|
+
delimiter: u.oneOfType([u.string, u.element]),
|
|
225
|
+
formState: u.object.isRequired,
|
|
226
|
+
initialValues: u.object.isRequired,
|
|
227
|
+
isEditable: u.bool,
|
|
228
|
+
label: u.string,
|
|
229
|
+
name: u.string.isRequired,
|
|
230
|
+
onClick: u.func,
|
|
231
|
+
onExitEditModeCallback: u.func,
|
|
232
|
+
shortChips: u.bool,
|
|
233
|
+
validationRules: u.object,
|
|
234
|
+
validator: u.func,
|
|
235
|
+
visibleChipsMaxLength: u.oneOfType([u.string, u.number])
|
|
233
236
|
};
|
|
234
|
-
|
|
235
|
-
const
|
|
237
|
+
R = pe.memo(R);
|
|
238
|
+
const He = R;
|
|
236
239
|
export {
|
|
237
|
-
|
|
240
|
+
He as default
|
|
238
241
|
};
|
|
239
242
|
//# sourceMappingURL=FormChipCell.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormChipCell.mjs","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useCallback, useMemo } from 'react'\nimport lodash, { get, isEmpty, set, isNil } from 'lodash'\nimport classnames from 'classnames'\nimport PropTypes from 'prop-types'\n\nimport FormChipCellView from './FormChipCellView'\n\nimport { CHIP_OPTIONS } from '../../types'\nimport { CLICK, TAB, TAB_SHIFT } from '../../constants'\nimport { areArraysEqual } from '../../utils/common.util'\nimport { checkPatternsValidity } from '../../utils/validation.util'\nimport { generateChipsList } from '../../utils/generateChipsList.util'\nimport { uniquenessError } from './formChipCell.util'\nimport { useChipCell } from '../../hooks'\n\nimport './formChipCell.scss'\n\nlet FormChipCell = ({\n chipOptions = {\n background: 'purple',\n boldValue: false,\n borderRadius: 'primary',\n borderColor: 'transparent',\n density: 'dense',\n font: 'purple'\n },\n className = '',\n delimiter = null,\n formState,\n initialValues,\n isEditable = false,\n label = null,\n name,\n onClick = () => {},\n shortChips = false,\n validationRules = {},\n validator = null,\n onExitEditModeCallback = null,\n visibleChipsMaxLength = null\n}) => {\n const chipsClassName = classnames('chips', className)\n const {\n chipsCellRef,\n chipsWrapperRef,\n handleShowElements,\n hiddenChipsCounterRef,\n hiddenChipsPopUpRef,\n setChipsSizes,\n setShowHiddenChips,\n showChips,\n showHiddenChips,\n visibleChipsCount\n } = useChipCell(isEditable, visibleChipsMaxLength)\n\n const [editConfig, setEditConfig] = useState({\n chipIndex: null,\n isEdit: false,\n isKeyFocused: false,\n isValueFocused: false,\n isNewChip: false\n })\n\n let chips = useMemo(() => {\n return isEditable || visibleChipsMaxLength === 'all'\n ? {\n visibleChips: get(formState.values, name),\n hiddenChips: []\n }\n : generateChipsList(\n get(formState.values, name),\n visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount\n )\n }, [visibleChipsMaxLength, isEditable, visibleChipsCount, formState.values, name])\n\n const checkChipsList = useCallback(\n currentChipsList => {\n if (areArraysEqual(get(initialValues, name), currentChipsList, ['id'])) {\n set(formState.initialValues, name, currentChipsList)\n }\n\n formState.form.mutators.setFieldState(name, { modified: true })\n formState.form.mutators.setFieldState(name, { touched: true })\n },\n [initialValues, name, formState]\n )\n\n const handleAddNewChip = useCallback(\n (event, fields) => {\n const fieldsLength = fields.value?.length || 0\n\n if (!editConfig.isEdit && !editConfig.chipIndex) {\n formState.form.mutators.push(name, {\n id: fieldsLength + new Date(),\n key: '',\n value: '',\n delimiter: delimiter\n })\n }\n\n if (showHiddenChips) {\n setShowHiddenChips(false)\n }\n\n setEditConfig({\n chipIndex: fieldsLength,\n isEdit: true,\n isKeyFocused: true,\n isValueFocused: false,\n isNewChip: true\n })\n\n event && event.preventDefault()\n },\n [\n editConfig.isEdit,\n editConfig.chipIndex,\n showHiddenChips,\n formState.form.mutators,\n name,\n delimiter,\n setShowHiddenChips\n ]\n )\n\n const handleRemoveChip = useCallback(\n (event, fields, chipIndex, isOutsideClick = false) => {\n checkChipsList(\n lodash\n .chain(formState)\n .get(['values', name])\n .filter((_, index) => index !== chipIndex)\n .value()\n )\n fields.remove(chipIndex)\n onExitEditModeCallback && onExitEditModeCallback()\n event && !isOutsideClick && event.stopPropagation()\n },\n [checkChipsList, formState, name, onExitEditModeCallback]\n )\n\n const handleEditChip = useCallback(\n (event, fields, nameEvent, isOutsideClick) => {\n const { key, value } = fields.value[editConfig.chipIndex]\n const isChipNotEmpty = !!(key?.trim() && value?.trim())\n\n if (nameEvent === CLICK) {\n if (!isChipNotEmpty) {\n handleRemoveChip(event, fields, editConfig.chipIndex, isOutsideClick)\n }\n\n setEditConfig({\n chipIndex: null,\n isEdit: false,\n isKeyFocused: false,\n isValueFocused: false,\n isNewChip: false\n })\n isChipNotEmpty && onExitEditModeCallback && onExitEditModeCallback()\n } else if (nameEvent === TAB) {\n if (!isChipNotEmpty) {\n handleRemoveChip(event, fields, editConfig.chipIndex)\n }\n\n setEditConfig(prevState => {\n const lastChipSelected = prevState.chipIndex + 1 > fields.value.length - 1\n\n isChipNotEmpty && lastChipSelected && onExitEditModeCallback && onExitEditModeCallback()\n\n return {\n chipIndex: lastChipSelected ? null : prevState.chipIndex + 1,\n isEdit: !lastChipSelected,\n isKeyFocused: !lastChipSelected,\n isValueFocused: false,\n isNewChip: false\n }\n })\n } else if (nameEvent === TAB_SHIFT) {\n if (!isChipNotEmpty) {\n handleRemoveChip(event, fields, editConfig.chipIndex)\n }\n\n setEditConfig(prevState => {\n const firstChipIsSelected = prevState.chipIndex === 0\n\n isChipNotEmpty &&\n firstChipIsSelected &&\n onExitEditModeCallback &&\n onExitEditModeCallback()\n\n return {\n chipIndex: firstChipIsSelected ? null : prevState.chipIndex - 1,\n isEdit: !firstChipIsSelected,\n isKeyFocused: false,\n isValueFocused: !firstChipIsSelected,\n isNewChip: false\n }\n })\n }\n\n checkChipsList(get(formState.values, name))\n\n if (\n (editConfig.chipIndex > 0 && editConfig.chipIndex < fields.value.length - 1) ||\n (fields.value.length > 1 && editConfig.chipIndex === 0 && nameEvent !== TAB_SHIFT) ||\n (fields.value.length > 1 &&\n editConfig.chipIndex === fields.value.length - 1 &&\n nameEvent !== TAB)\n ) {\n event && event.preventDefault()\n }\n },\n [\n editConfig.chipIndex,\n checkChipsList,\n formState.values,\n name,\n onExitEditModeCallback,\n handleRemoveChip\n ]\n )\n\n const handleToEditMode = useCallback(\n (event, chipIndex, keyName) => {\n if (isEditable) {\n const { clientX: pointerCoordinateX, clientY: pointerCoordinateY } = event\n let isKeyClicked = false\n const isClickedInsideInputElement = (\n pointerCoordinateX,\n pointerCoordinateY,\n inputElement\n ) => {\n if (inputElement) {\n const {\n top: topPosition,\n left: leftPosition,\n right: rightPosition,\n bottom: bottomPosition\n } = inputElement.getBoundingClientRect()\n if (pointerCoordinateX > rightPosition || pointerCoordinateX < leftPosition)\n return false\n if (pointerCoordinateY > bottomPosition || pointerCoordinateY < topPosition)\n return false\n\n return true\n }\n }\n event.stopPropagation()\n\n if (event.target.nodeName !== 'INPUT') {\n if (event.target.firstElementChild) {\n isKeyClicked = isClickedInsideInputElement(\n pointerCoordinateX,\n pointerCoordinateY,\n event.target.firstElementChild\n )\n }\n } else {\n isKeyClicked = event.target.name === keyName\n }\n\n setEditConfig(preState => ({\n ...preState,\n chipIndex,\n isEdit: true,\n isKeyFocused: isKeyClicked,\n isValueFocused: !isKeyClicked\n }))\n }\n\n onClick && onClick()\n },\n [isEditable, onClick]\n )\n\n const validateFields = fieldsArray => {\n if (!fieldsArray) return null\n\n let errorData = []\n\n const uniquenessValidator = (newValue, idx) => {\n return !fieldsArray.some(({ key }, index) => {\n return newValue === key && index !== idx\n })\n }\n\n if (!isEmpty(validationRules)) {\n errorData = fieldsArray.map(chip => {\n const [keyValidation, valueValidation] = validateChip(chip)\n\n if (keyValidation && valueValidation) return { key: keyValidation, value: valueValidation }\n\n if (keyValidation) return { key: keyValidation }\n\n if (valueValidation) return { value: valueValidation }\n\n return null\n })\n }\n\n // uniqueness\n fieldsArray.forEach((chip, index) => {\n const isUnique = uniquenessValidator(chip.key, index)\n\n if (!isUnique) {\n if (get(errorData, [index, 'key'], false)) {\n errorData.at(index).key.push(uniquenessError)\n } else {\n set(errorData, [index, 'key'], [uniquenessError])\n }\n }\n })\n\n if (isEmpty(errorData) && validator) {\n errorData = validator(fieldsArray)\n }\n\n if (errorData.every(label => isNil(label))) {\n return null\n }\n\n return errorData\n }\n\n const validateChip = ({ key, value, disabled }) => {\n const validateField = (value, field) => {\n const [newRules, isValidField] = checkPatternsValidity(\n validationRules[field].filter(rule => rule.pattern),\n value\n )\n\n if (isValidField) return null\n\n const invalidRules = newRules.filter(rule => !rule.isValid)\n\n return invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n }\n\n return disabled ? [null, null] : [validateField(key, 'key'), validateField(value, 'value')]\n }\n\n return (\n <div className={chipsClassName} data-testid={`${name}-chips`}>\n {label && <div className=\"chips__label\">{label}</div>}\n <div className={label ? 'chips__wrapper' : ''}>\n <FormChipCellView\n chipOptions={chipOptions}\n chips={chips}\n editConfig={editConfig}\n handleAddNewChip={handleAddNewChip}\n handleEditChip={handleEditChip}\n handleRemoveChip={handleRemoveChip}\n handleShowElements={handleShowElements}\n handleToEditMode={handleToEditMode}\n isEditable={isEditable}\n name={name}\n ref={{ chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }}\n setChipsSizes={setChipsSizes}\n setEditConfig={setEditConfig}\n shortChips={shortChips}\n showChips={showChips}\n showHiddenChips={showHiddenChips}\n validateFields={validateFields}\n validationRules={validationRules}\n />\n </div>\n </div>\n )\n}\n\nFormChipCell.propTypes = {\n chipOptions: CHIP_OPTIONS,\n className: PropTypes.string,\n delimiter: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n formState: PropTypes.object.isRequired,\n initialValues: PropTypes.object.isRequired,\n isEditable: PropTypes.bool,\n label: PropTypes.string,\n name: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n onExitEditModeCallback: PropTypes.func,\n shortChips: PropTypes.bool,\n validationRules: PropTypes.object,\n validator: PropTypes.func,\n visibleChipsMaxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n}\n\nFormChipCell = React.memo(FormChipCell)\n\nexport default FormChipCell\n"],"names":["FormChipCell","chipOptions","className","delimiter","formState","initialValues","isEditable","label","name","onClick","shortChips","validationRules","validator","onExitEditModeCallback","visibleChipsMaxLength","chipsClassName","classnames","chipsCellRef","chipsWrapperRef","handleShowElements","hiddenChipsCounterRef","hiddenChipsPopUpRef","setChipsSizes","setShowHiddenChips","showChips","showHiddenChips","visibleChipsCount","useChipCell","editConfig","setEditConfig","useState","chips","useMemo","get","generateChipsList","checkChipsList","useCallback","currentChipsList","areArraysEqual","set","handleAddNewChip","event","fields","fieldsLength","_a","handleRemoveChip","chipIndex","isOutsideClick","lodash","_","index","handleEditChip","nameEvent","key","value","isChipNotEmpty","CLICK","TAB","prevState","lastChipSelected","TAB_SHIFT","firstChipIsSelected","handleToEditMode","keyName","pointerCoordinateX","pointerCoordinateY","isKeyClicked","isClickedInsideInputElement","inputElement","topPosition","leftPosition","rightPosition","bottomPosition","preState","validateFields","fieldsArray","errorData","uniquenessValidator","newValue","idx","isEmpty","chip","keyValidation","valueValidation","validateChip","uniquenessError","isNil","disabled","validateField","field","newRules","isValidField","checkPatternsValidity","rule","jsx","FormChipCellView","CHIP_OPTIONS","PropTypes","React","FormChipCell$1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormChipCell.mjs","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useCallback, useMemo } from 'react'\nimport lodash, { get, isEmpty, set, isNil } from 'lodash'\nimport classnames from 'classnames'\nimport PropTypes from 'prop-types'\n\nimport FormChipCellView from './FormChipCellView'\n\nimport { CHIP_OPTIONS } from '../../types'\nimport { CLICK, TAB, TAB_SHIFT } from '../../constants'\nimport { areArraysEqual } from '../../utils/common.util'\nimport { checkPatternsValidity } from '../../utils/validation.util'\nimport { generateChipsList } from '../../utils/generateChipsList.util'\nimport { uniquenessError } from './formChipCell.util'\nimport { useChipCell } from '../../hooks'\n\nimport './formChipCell.scss'\n\nlet FormChipCell = ({\n chipOptions = {\n background: 'purple',\n boldValue: false,\n borderRadius: 'primary',\n borderColor: 'transparent',\n density: 'dense',\n font: 'purple'\n },\n className = '',\n delimiter = null,\n formState,\n initialValues,\n isEditable = false,\n label = null,\n name,\n onClick = () => {},\n shortChips = false,\n validationRules = {},\n validator = null,\n onExitEditModeCallback = null,\n visibleChipsMaxLength = null\n}) => {\n const chipsClassName = classnames('chips', className)\n const [chipSizeIsRecalculated, setChipSizeIsRecalculated] = useState(false)\n const {\n chipsCellRef,\n chipsWrapperRef,\n handleShowElements,\n hiddenChipsCounterRef,\n hiddenChipsPopUpRef,\n setChipsSizes,\n setShowHiddenChips,\n showChips,\n showHiddenChips,\n visibleChipsCount\n } = useChipCell(isEditable, visibleChipsMaxLength)\n\n const [editConfig, setEditConfig] = useState({\n chipIndex: null,\n isEdit: false,\n isKeyFocused: false,\n isValueFocused: false,\n isNewChip: false\n })\n\n let chips = useMemo(() => {\n return isEditable || visibleChipsMaxLength === 'all'\n ? {\n visibleChips: get(formState.values, name),\n hiddenChips: []\n }\n : generateChipsList(\n get(formState.values, name),\n visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount\n )\n }, [visibleChipsMaxLength, isEditable, visibleChipsCount, formState.values, name])\n\n const checkChipsList = useCallback(\n currentChipsList => {\n if (areArraysEqual(get(initialValues, name), currentChipsList, ['id'])) {\n set(formState.initialValues, name, currentChipsList)\n }\n\n formState.form.mutators.setFieldState(name, { modified: true })\n formState.form.mutators.setFieldState(name, { touched: true })\n },\n [initialValues, name, formState]\n )\n\n const handleAddNewChip = useCallback(\n (event, fields) => {\n const fieldsLength = fields.value?.length || 0\n\n if (!editConfig.isEdit && !editConfig.chipIndex) {\n formState.form.mutators.push(name, {\n id: fieldsLength + new Date(),\n key: '',\n value: '',\n delimiter: delimiter\n })\n }\n\n if (showHiddenChips) {\n setShowHiddenChips(false)\n }\n\n setEditConfig({\n chipIndex: fieldsLength,\n isEdit: true,\n isKeyFocused: true,\n isValueFocused: false,\n isNewChip: true\n })\n\n event && event.preventDefault()\n },\n [\n editConfig.isEdit,\n editConfig.chipIndex,\n showHiddenChips,\n formState.form.mutators,\n name,\n delimiter,\n setShowHiddenChips\n ]\n )\n\n const handleRemoveChip = useCallback(\n (event, fields, chipIndex, isOutsideClick = false) => {\n checkChipsList(\n lodash\n .chain(formState)\n .get(['values', name])\n .filter((_, index) => index !== chipIndex)\n .value()\n )\n fields.remove(chipIndex)\n onExitEditModeCallback && onExitEditModeCallback()\n event && !isOutsideClick && event.stopPropagation()\n },\n [checkChipsList, formState, name, onExitEditModeCallback]\n )\n\n const handleEditChip = useCallback(\n (event, fields, nameEvent, isOutsideClick) => {\n const { key, value } = fields.value[editConfig.chipIndex]\n const isChipNotEmpty = !!(key?.trim() && value?.trim())\n\n if (nameEvent === CLICK) {\n if (!isChipNotEmpty) {\n handleRemoveChip(event, fields, editConfig.chipIndex, isOutsideClick)\n }\n\n setEditConfig({\n chipIndex: null,\n isEdit: false,\n isKeyFocused: false,\n isValueFocused: false,\n isNewChip: false\n })\n isChipNotEmpty && onExitEditModeCallback && onExitEditModeCallback()\n } else if (nameEvent === TAB) {\n if (!isChipNotEmpty) {\n handleRemoveChip(event, fields, editConfig.chipIndex)\n }\n\n setEditConfig(prevState => {\n const lastChipSelected = prevState.chipIndex + 1 > fields.value.length - 1\n\n isChipNotEmpty && lastChipSelected && onExitEditModeCallback && onExitEditModeCallback()\n\n return {\n chipIndex: lastChipSelected ? null : prevState.chipIndex + 1,\n isEdit: !lastChipSelected,\n isKeyFocused: !lastChipSelected,\n isValueFocused: false,\n isNewChip: false\n }\n })\n } else if (nameEvent === TAB_SHIFT) {\n if (!isChipNotEmpty) {\n handleRemoveChip(event, fields, editConfig.chipIndex)\n }\n\n setEditConfig(prevState => {\n const firstChipIsSelected = prevState.chipIndex === 0\n\n isChipNotEmpty &&\n firstChipIsSelected &&\n onExitEditModeCallback &&\n onExitEditModeCallback()\n\n return {\n chipIndex: firstChipIsSelected ? null : prevState.chipIndex - 1,\n isEdit: !firstChipIsSelected,\n isKeyFocused: false,\n isValueFocused: !firstChipIsSelected,\n isNewChip: false\n }\n })\n }\n\n checkChipsList(get(formState.values, name))\n\n if (\n (editConfig.chipIndex > 0 && editConfig.chipIndex < fields.value.length - 1) ||\n (fields.value.length > 1 && editConfig.chipIndex === 0 && nameEvent !== TAB_SHIFT) ||\n (fields.value.length > 1 &&\n editConfig.chipIndex === fields.value.length - 1 &&\n nameEvent !== TAB)\n ) {\n event && event.preventDefault()\n }\n },\n [\n editConfig.chipIndex,\n checkChipsList,\n formState.values,\n name,\n onExitEditModeCallback,\n handleRemoveChip\n ]\n )\n\n const handleToEditMode = useCallback(\n (event, chipIndex, keyName) => {\n if (isEditable) {\n const { clientX: pointerCoordinateX, clientY: pointerCoordinateY } = event\n let isKeyClicked = false\n const isClickedInsideInputElement = (\n pointerCoordinateX,\n pointerCoordinateY,\n inputElement\n ) => {\n if (inputElement) {\n const {\n top: topPosition,\n left: leftPosition,\n right: rightPosition,\n bottom: bottomPosition\n } = inputElement.getBoundingClientRect()\n if (pointerCoordinateX > rightPosition || pointerCoordinateX < leftPosition)\n return false\n if (pointerCoordinateY > bottomPosition || pointerCoordinateY < topPosition)\n return false\n\n return true\n }\n }\n event.stopPropagation()\n\n if (event.target.nodeName !== 'INPUT') {\n if (event.target.firstElementChild) {\n isKeyClicked = isClickedInsideInputElement(\n pointerCoordinateX,\n pointerCoordinateY,\n event.target.firstElementChild\n )\n }\n } else {\n isKeyClicked = event.target.name === keyName\n }\n\n setEditConfig(preState => ({\n ...preState,\n chipIndex,\n isEdit: true,\n isKeyFocused: isKeyClicked,\n isValueFocused: !isKeyClicked\n }))\n }\n\n onClick && onClick()\n },\n [isEditable, onClick]\n )\n\n const validateFields = fieldsArray => {\n if (!fieldsArray) return null\n\n let errorData = []\n\n const uniquenessValidator = (newValue, idx) => {\n return !fieldsArray.some(({ key }, index) => {\n return newValue === key && index !== idx\n })\n }\n\n if (!isEmpty(validationRules)) {\n errorData = fieldsArray.map(chip => {\n const [keyValidation, valueValidation] = validateChip(chip)\n\n if (keyValidation && valueValidation) return { key: keyValidation, value: valueValidation }\n\n if (keyValidation) return { key: keyValidation }\n\n if (valueValidation) return { value: valueValidation }\n\n return null\n })\n }\n\n // uniqueness\n fieldsArray.forEach((chip, index) => {\n const isUnique = uniquenessValidator(chip.key, index)\n\n if (!isUnique) {\n if (get(errorData, [index, 'key'], false)) {\n errorData.at(index).key.push(uniquenessError)\n } else {\n set(errorData, [index, 'key'], [uniquenessError])\n }\n }\n })\n\n if (isEmpty(errorData) && validator) {\n errorData = validator(fieldsArray)\n }\n\n if (errorData.every(label => isNil(label))) {\n return null\n }\n\n return errorData\n }\n\n const validateChip = ({ key, value, disabled }) => {\n const validateField = (value, field) => {\n const [newRules, isValidField] = checkPatternsValidity(\n validationRules[field].filter(rule => rule.pattern),\n value\n )\n\n if (isValidField) return null\n\n const invalidRules = newRules.filter(rule => !rule.isValid)\n\n return invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n }\n\n return disabled ? [null, null] : [validateField(key, 'key'), validateField(value, 'value')]\n }\n\n return (\n <div className={chipsClassName} data-testid={`${name}-chips`}>\n {label && <div className=\"chips__label\">{label}</div>}\n <div className={label ? 'chips__wrapper' : ''}>\n <FormChipCellView\n chipOptions={chipOptions}\n chipSizeIsRecalculated={chipSizeIsRecalculated}\n chips={chips}\n editConfig={editConfig}\n formState={formState}\n handleAddNewChip={handleAddNewChip}\n handleEditChip={handleEditChip}\n handleRemoveChip={handleRemoveChip}\n handleShowElements={handleShowElements}\n handleToEditMode={handleToEditMode}\n isEditable={isEditable}\n name={name}\n ref={{ chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }}\n setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n setChipsSizes={setChipsSizes}\n setEditConfig={setEditConfig}\n shortChips={shortChips}\n showChips={showChips}\n showHiddenChips={showHiddenChips}\n validateFields={validateFields}\n validationRules={validationRules}\n />\n </div>\n </div>\n )\n}\n\nFormChipCell.propTypes = {\n chipOptions: CHIP_OPTIONS,\n className: PropTypes.string,\n delimiter: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n formState: PropTypes.object.isRequired,\n initialValues: PropTypes.object.isRequired,\n isEditable: PropTypes.bool,\n label: PropTypes.string,\n name: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n onExitEditModeCallback: PropTypes.func,\n shortChips: PropTypes.bool,\n validationRules: PropTypes.object,\n validator: PropTypes.func,\n visibleChipsMaxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n}\n\nFormChipCell = React.memo(FormChipCell)\n\nexport default FormChipCell\n"],"names":["FormChipCell","chipOptions","className","delimiter","formState","initialValues","isEditable","label","name","onClick","shortChips","validationRules","validator","onExitEditModeCallback","visibleChipsMaxLength","chipsClassName","classnames","chipSizeIsRecalculated","setChipSizeIsRecalculated","useState","chipsCellRef","chipsWrapperRef","handleShowElements","hiddenChipsCounterRef","hiddenChipsPopUpRef","setChipsSizes","setShowHiddenChips","showChips","showHiddenChips","visibleChipsCount","useChipCell","editConfig","setEditConfig","chips","useMemo","get","generateChipsList","checkChipsList","useCallback","currentChipsList","areArraysEqual","set","handleAddNewChip","event","fields","fieldsLength","_a","handleRemoveChip","chipIndex","isOutsideClick","lodash","_","index","handleEditChip","nameEvent","key","value","isChipNotEmpty","CLICK","TAB","prevState","lastChipSelected","TAB_SHIFT","firstChipIsSelected","handleToEditMode","keyName","pointerCoordinateX","pointerCoordinateY","isKeyClicked","isClickedInsideInputElement","inputElement","topPosition","leftPosition","rightPosition","bottomPosition","preState","validateFields","fieldsArray","errorData","uniquenessValidator","newValue","idx","isEmpty","chip","keyValidation","valueValidation","validateChip","uniquenessError","isNil","disabled","validateField","field","newRules","isValidField","checkPatternsValidity","rule","jsx","FormChipCellView","CHIP_OPTIONS","PropTypes","React","FormChipCell$1"],"mappings":"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"}
|