@servicetitan/dte-pdf-editor 1.58.0 → 1.59.0
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/display-conditions/condition-value-control.d.ts.map +1 -1
- package/dist/components/display-conditions/condition-value-control.js +27 -2
- package/dist/components/display-conditions/condition-value-control.js.map +1 -1
- package/package.json +1 -1
- package/src/components/display-conditions/condition-value-control.tsx +32 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"condition-value-control.d.ts","sourceRoot":"","sources":["../../../src/components/display-conditions/condition-value-control.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,0BAA0B;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC/B,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAqBD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,EAClC,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,GACb,EAAE,QAAQ,CAAC,0BAA0B,CAAC,
|
|
1
|
+
{"version":3,"file":"condition-value-control.d.ts","sourceRoot":"","sources":["../../../src/components/display-conditions/condition-value-control.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,0BAA0B;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC/B,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAqBD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,EAClC,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,GACb,EAAE,QAAQ,CAAC,0BAA0B,CAAC,2CAwJtC"}
|
|
@@ -31,7 +31,32 @@ const sanitizeNumericInput = (raw) => {
|
|
|
31
31
|
*/
|
|
32
32
|
export function ConditionValueControl({ fieldType, lookupSource, onChange, value, valueLabel, }) {
|
|
33
33
|
const { loadOptions, options, resolveOptions, status } = useLookupOptions(lookupSource);
|
|
34
|
-
const
|
|
34
|
+
const staticOptions = useMemo(() => options.map(toOption), [options]);
|
|
35
|
+
/*
|
|
36
|
+
* Fall back to the raw value (with its persisted label when available) so a saved
|
|
37
|
+
* key that the host omits from its list still shows on edit instead of vanishing.
|
|
38
|
+
*/
|
|
39
|
+
const staticSelected = useMemo(() => {
|
|
40
|
+
var _a;
|
|
41
|
+
if (!value) {
|
|
42
|
+
return null;
|
|
43
|
+
}
|
|
44
|
+
return ((_a = staticOptions.find(option => String(option.id) === value)) !== null && _a !== void 0 ? _a : {
|
|
45
|
+
id: value,
|
|
46
|
+
label: valueLabel !== null && valueLabel !== void 0 ? valueLabel : value,
|
|
47
|
+
});
|
|
48
|
+
}, [staticOptions, value, valueLabel]);
|
|
49
|
+
/*
|
|
50
|
+
* Ensure the saved value is present in the list so it is visible/selectable
|
|
51
|
+
* even when the host did not return it.
|
|
52
|
+
*/
|
|
53
|
+
const staticOptionsWithSelected = useMemo(() => {
|
|
54
|
+
if (staticSelected &&
|
|
55
|
+
!staticOptions.some(option => String(option.id) === String(staticSelected.id))) {
|
|
56
|
+
return [staticSelected, ...staticOptions];
|
|
57
|
+
}
|
|
58
|
+
return staticOptions;
|
|
59
|
+
}, [staticOptions, staticSelected]);
|
|
35
60
|
const [searchableSelected, setSearchableSelected] = useState(value ? { id: value, label: valueLabel !== null && valueLabel !== void 0 ? valueLabel : value } : null);
|
|
36
61
|
// Tracks the key we've already turned into a human-readable label so we don't re-resolve it.
|
|
37
62
|
const resolvedKeyRef = useRef(value && valueLabel ? value : null);
|
|
@@ -86,7 +111,7 @@ export function ConditionValueControl({ fieldType, lookupSource, onChange, value
|
|
|
86
111
|
return (_jsx(TextField, { label: "Value", flex: 1, disabled: true, value: "", placeholder: "", "aria-label": "Value" }));
|
|
87
112
|
}
|
|
88
113
|
if (status === 'static') {
|
|
89
|
-
return (_jsx(SelectFieldSync, { flex: 1, label: "Value", placeholder: "Search value...", options:
|
|
114
|
+
return (_jsx(SelectFieldSync, { flex: 1, label: "Value", placeholder: "Search value...", options: staticOptionsWithSelected, value: staticSelected, onSelectedOptionChange: option => onChange(option ? String(option.id) : '', option === null || option === void 0 ? void 0 : option.label) }));
|
|
90
115
|
}
|
|
91
116
|
if (status === 'searchable') {
|
|
92
117
|
return (_jsx(SelectField, { flex: 1, label: "Value", placeholder: "Type to search...", initialLoad: "open", loadOptions: handleLoadOptions, value: searchableSelected, onSelectedOptionChange: option => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"condition-value-control.js","sourceRoot":"","sources":["../../../src/components/display-conditions/condition-value-control.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAqB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAc/C,MAAM,QAAQ,GAAG,CAAC,MAAoB,EAAqB,EAAE,CAAC,CAAC;IAC3D,EAAE,EAAE,MAAM,CAAC,GAAG;IACd,KAAK,EAAE,MAAM,CAAC,KAAK;CACtB,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,CAAC,GAAW,EAAU,EAAE;IACjD,IAAI,KAAK,GAAG,GAAG,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IACzC,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAClC,IAAI,UAAU,EAAE,CAAC;QACb,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IACxB,CAAC;IACD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACpC,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;QAChB,KAAK,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;IAC9F,CAAC;IACD,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAClC,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,GACyB;IACnC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAExF,MAAM,
|
|
1
|
+
{"version":3,"file":"condition-value-control.js","sourceRoot":"","sources":["../../../src/components/display-conditions/condition-value-control.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -52,10 +52,37 @@ export function ConditionValueControl({
|
|
|
52
52
|
}: Readonly<ConditionValueControlProps>) {
|
|
53
53
|
const { loadOptions, options, resolveOptions, status } = useLookupOptions(lookupSource);
|
|
54
54
|
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
const staticOptions = useMemo<SelectFieldOption[]>(() => options.map(toOption), [options]);
|
|
56
|
+
|
|
57
|
+
/*
|
|
58
|
+
* Fall back to the raw value (with its persisted label when available) so a saved
|
|
59
|
+
* key that the host omits from its list still shows on edit instead of vanishing.
|
|
60
|
+
*/
|
|
61
|
+
const staticSelected = useMemo<SelectFieldOption | null>(() => {
|
|
62
|
+
if (!value) {
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
65
|
+
return (
|
|
66
|
+
staticOptions.find(option => String(option.id) === value) ?? {
|
|
67
|
+
id: value,
|
|
68
|
+
label: valueLabel ?? value,
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}, [staticOptions, value, valueLabel]);
|
|
72
|
+
|
|
73
|
+
/*
|
|
74
|
+
* Ensure the saved value is present in the list so it is visible/selectable
|
|
75
|
+
* even when the host did not return it.
|
|
76
|
+
*/
|
|
77
|
+
const staticOptionsWithSelected = useMemo<SelectFieldOption[]>(() => {
|
|
78
|
+
if (
|
|
79
|
+
staticSelected &&
|
|
80
|
+
!staticOptions.some(option => String(option.id) === String(staticSelected.id))
|
|
81
|
+
) {
|
|
82
|
+
return [staticSelected, ...staticOptions];
|
|
83
|
+
}
|
|
84
|
+
return staticOptions;
|
|
85
|
+
}, [staticOptions, staticSelected]);
|
|
59
86
|
|
|
60
87
|
const [searchableSelected, setSearchableSelected] = useState<SelectFieldOption | null>(
|
|
61
88
|
value ? { id: value, label: valueLabel ?? value } : null,
|
|
@@ -131,7 +158,7 @@ export function ConditionValueControl({
|
|
|
131
158
|
flex={1}
|
|
132
159
|
label="Value"
|
|
133
160
|
placeholder="Search value..."
|
|
134
|
-
options={
|
|
161
|
+
options={staticOptionsWithSelected}
|
|
135
162
|
value={staticSelected}
|
|
136
163
|
onSelectedOptionChange={option =>
|
|
137
164
|
onChange(option ? String(option.id) : '', option?.label)
|