ferns-ui 0.45.4 → 0.45.5
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/TapToEdit.js +17 -21
- package/dist/TapToEdit.js.map +1 -1
- package/package.json +1 -1
- package/src/TapToEdit.tsx +46 -29
package/dist/TapToEdit.js
CHANGED
|
@@ -18,6 +18,13 @@ import { Icon } from "./Icon";
|
|
|
18
18
|
// import {useOpenAPISpec} from "./OpenAPIContext";
|
|
19
19
|
import { Text } from "./Text";
|
|
20
20
|
import { Tooltip } from "./Tooltip";
|
|
21
|
+
const TapToEditTitle = ({ title, description, showDescriptionAsTooltip, onlyShowDescriptionWhileEditing, }) => {
|
|
22
|
+
return (React.createElement(Box, { flex: "grow", marginBottom: 2 },
|
|
23
|
+
React.createElement(Text, { weight: "bold" },
|
|
24
|
+
title,
|
|
25
|
+
":"),
|
|
26
|
+
Boolean(description && !showDescriptionAsTooltip && !onlyShowDescriptionWhileEditing) && (React.createElement(Text, { color: "gray", size: "sm" }, description))));
|
|
27
|
+
};
|
|
21
28
|
export function formatAddress(address, asString = false) {
|
|
22
29
|
var _a, _b, _c, _d;
|
|
23
30
|
let city = "";
|
|
@@ -45,17 +52,10 @@ export function formatAddress(address, asString = false) {
|
|
|
45
52
|
}
|
|
46
53
|
export const TapToEdit = (_a) => {
|
|
47
54
|
var _b;
|
|
48
|
-
var { value, setValue, placeholder, title, onSave, editable = true, isEditing = false, rowBoxProps, transform, fieldComponent, withConfirmation = false, confirmationText = "Are you sure you want to save your changes?", confirmationHeading = "Confirm", description: propsDescription,
|
|
49
|
-
// openApiModel,
|
|
50
|
-
// openApiField,
|
|
51
|
-
showDescriptionAsTooltip = false, onlyShowDescriptionWhileEditing = true } = _a, fieldProps = __rest(_a, ["value", "setValue", "placeholder", "title", "onSave", "editable", "isEditing", "rowBoxProps", "transform", "fieldComponent", "withConfirmation", "confirmationText", "confirmationHeading", "description", "showDescriptionAsTooltip", "onlyShowDescriptionWhileEditing"]);
|
|
55
|
+
var { value, setValue, placeholder, title, onSave, editable = true, isEditing = false, rowBoxProps, transform, fieldComponent, withConfirmation = false, confirmationText = "Are you sure you want to save your changes?", confirmationHeading = "Confirm", description: propsDescription, showDescriptionAsTooltip = false, onlyShowDescriptionWhileEditing = true } = _a, fieldProps = __rest(_a, ["value", "setValue", "placeholder", "title", "onSave", "editable", "isEditing", "rowBoxProps", "transform", "fieldComponent", "withConfirmation", "confirmationText", "confirmationHeading", "description", "showDescriptionAsTooltip", "onlyShowDescriptionWhileEditing"]);
|
|
52
56
|
const [editing, setEditing] = useState(false);
|
|
53
57
|
const [initialValue] = useState(value);
|
|
54
|
-
// const {getModelField} = useOpenAPISpec();
|
|
55
58
|
const description = propsDescription;
|
|
56
|
-
// if (!description && openApiModel && openApiField) {
|
|
57
|
-
// description = getModelField(openApiModel, openApiField)?.description;
|
|
58
|
-
// }
|
|
59
59
|
if (editable && !setValue) {
|
|
60
60
|
throw new Error("setValue is required if editable is true");
|
|
61
61
|
}
|
|
@@ -136,19 +136,15 @@ export const TapToEdit = (_a) => {
|
|
|
136
136
|
}
|
|
137
137
|
};
|
|
138
138
|
const isClickable = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "url" || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "address";
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
React.createElement(Box, { direction: "row", justifyContent: "start", marginLeft: 2 },
|
|
149
|
-
React.createElement(Box, { justifyContent: "start", onClick: isClickable ? openLink : undefined },
|
|
150
|
-
React.createElement(Text, { align: "right", underline: isClickable }, displayValue)),
|
|
151
|
-
editable && (React.createElement(Box, { marginLeft: 2, onClick: () => setEditing(true) },
|
|
139
|
+
// For textarea to display correctly, we place the title on its own line, then the text
|
|
140
|
+
// on the next line. This is because the textarea will take up the full width of the row.
|
|
141
|
+
return (React.createElement(Box, Object.assign({ alignItems: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "textarea" ? "start" : "center", direction: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "textarea" ? "column" : "row", justifyContent: "between", paddingX: 3, paddingY: 2, width: "100%" }, rowBoxProps),
|
|
142
|
+
showDescriptionAsTooltip ? (React.createElement(Tooltip, { idealDirection: "top", text: description },
|
|
143
|
+
React.createElement(TapToEditTitle, { description: description, onlyShowDescriptionWhileEditing: onlyShowDescriptionWhileEditing, showDescriptionAsTooltip: showDescriptionAsTooltip, title: title }))) : (React.createElement(TapToEditTitle, { description: description, onlyShowDescriptionWhileEditing: onlyShowDescriptionWhileEditing, showDescriptionAsTooltip: showDescriptionAsTooltip, title: title })),
|
|
144
|
+
React.createElement(Box, { direction: "row", flex: "grow", justifyContent: "end", marginLeft: 2 },
|
|
145
|
+
React.createElement(Box, { flex: "grow", justifyContent: "start", onClick: isClickable ? openLink : undefined },
|
|
146
|
+
React.createElement(Text, { align: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "textarea" ? "left" : "right", underline: isClickable }, displayValue)),
|
|
147
|
+
editable && (React.createElement(Box, { alignSelf: "end", marginLeft: 2, width: 16, onClick: () => setEditing(true) },
|
|
152
148
|
React.createElement(Icon, { color: "darkGray", name: "edit", prefix: "far", size: "md" }))))));
|
|
153
149
|
}
|
|
154
150
|
};
|
package/dist/TapToEdit.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAe,QAAQ,EAAC,MAAM,OAAO,CAAC;AACpD,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAErC,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,mDAAmD;AACnD,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,WAAW,EACX,wBAAwB,EACxB,+BAA+B,GAMhC,EAAgB,EAAE;IACjB,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,CAAC;QAC9B,oBAAC,IAAI,IAAC,MAAM,EAAC,MAAM;YAAE,KAAK;gBAAS;QAClC,OAAO,CAAC,WAAW,IAAI,CAAC,wBAAwB,IAAI,CAAC,+BAA+B,CAAC,IAAI,CACxF,oBAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,IACzB,WAAW,CACP,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,OAAY,EAAE,QAAQ,GAAG,KAAK;;IAC1D,IAAI,IAAI,GAAG,EAAE,CAAC;IACd,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EAAE,CAAC;QAClB,IAAI,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,KAAI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;IACrF,CAAC;IAED,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,CAAC;QACnB,KAAK,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,EAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC;IACtE,CAAC;IAED,MAAM,GAAG,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,KAAI,EAAE,CAAC;IAEnC,MAAM,UAAU,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,mCAAI,EAAE,CAAC;IAE7C,MAAM,UAAU,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,mCAAI,EAAE,CAAC;IAE7C,MAAM,cAAc,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,EAAE,CAAC;IAC/C,MAAM,cAAc,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,EAAE,CAAC;IAC/C,MAAM,gBAAgB,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,EAAE,CAAC;IACjD,MAAM,eAAe,GAAG,GAAG,UAAU,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EAAC,CAAC,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAExF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,yFAAyF;QACzF,OAAO,GAAG,cAAc,GACtB,cAAc,IAAI,CAAC,cAAc,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAClE,GAAG,cAAc,GAAG,cAAc,IAAI,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,gBAAgB,GACnF,gBAAgB,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAC/C,GAAG,eAAe,EAAE,CAAC;IACvB,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,cAAc,GACtB,cAAc,IAAI,CAAC,cAAc,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAClE,GAAG,cAAc,GAAG,cAAc,IAAI,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,gBAAgB,GACnF,gBAAgB,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAC/C,GAAG,eAAe,EAAE,CAAC;IACvB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAkBT,EAAgB,EAAE;;QAlBT,EACxB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,GAAG,6CAA6C,EAChE,mBAAmB,GAAG,SAAS,EAC/B,WAAW,EAAE,gBAAgB,EAC7B,wBAAwB,GAAG,KAAK,EAChC,+BAA+B,GAAG,IAAI,OAEvB,EADZ,UAAU,cAjBW,2QAkBzB,CADc;IAEb,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,WAAW,GAAuB,gBAAgB,CAAC;IAEzD,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,QAAQ,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,CAAC;QACvC,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAC,QAAQ;YACpB,cAAc,CAAC,CAAC,CAAC,CAChB,cAAc,CAAC,QAAe,CAAC,CAChC,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,kBACJ,UAAU,EAAE,WAAW,EACvB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IACd,UAAU,EACd,CACH;YACA,OAAO,IAAI,CAAC,SAAS,IAAI,CACxB,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK;gBAClB,oBAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,mBAAmB,EAAE,mBAAmB,EACxC,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,QACN,IAAI,EAAC,MAAM,EACX,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,KAAK,IAAmB,EAAE;wBACjC,IAAI,CAAC,MAAM,EAAE,CAAC;4BACZ,OAAO,CAAC,KAAK,CAAC,2CAA2C,CAAC,CAAC;wBAC7D,CAAC;6BAAM,CAAC;4BACN,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;wBACtB,CAAC;wBACD,UAAU,CAAC,KAAK,CAAC,CAAC;oBACpB,CAAC,GACD;gBACF,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC;oBAChB,oBAAC,MAAM,IACL,KAAK,EAAC,KAAK,EACX,MAAM,QACN,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAS,EAAE;4BAClB,IAAI,QAAQ,EAAE,CAAC;gCACb,QAAQ,CAAC,YAAY,CAAC,CAAC;4BACzB,CAAC;4BACD,UAAU,CAAC,KAAK,CAAC,CAAC;wBACpB,CAAC,GACD,CACE,CACF,CACP,CACG,CACP,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,IAAI,YAAY,GAAG,KAAK,CAAC;QACzB,uDAAuD;QACvD,IAAI,SAAS,EAAE,CAAC;YACd,YAAY,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,yDAAyD;YACzD,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,SAAS,EAAE,CAAC;gBACnC,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YACtC,CAAC;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,SAAS,EAAE,CAAC;gBAC1C,mFAAmF;gBACnF,kEAAkE;gBAClE,YAAY,GAAG,GAAG,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YAClF,CAAC;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,UAAU,EAAE,CAAC;gBAC3C,2EAA2E;gBAC3E,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;oBAC/C,KAAK,EAAE,UAAU;oBACjB,QAAQ,EAAE,KAAK;oBACf,qBAAqB,EAAE,CAAC,EAAE,wEAAwE;iBACnG,CAAC,CAAC;gBACH,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACzC,CAAC;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,aAAa,EAAE,CAAC;gBAC9C,MAAM;gBACN,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,KAAK,EAAE,CAAC;gBACtC,wDAAwD;gBACxD,IAAI,CAAC;oBACH,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;oBAC3B,YAAY,GAAG,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,mCAAI,KAAK,CAAC;gBACxC,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,iDAAiD;oBACjD,IAAI,KAAK,EAAE,CAAC;wBACV,OAAO,CAAC,KAAK,CAAC,gBAAgB,KAAK,EAAE,CAAC,CAAC;oBACzC,CAAC;oBACD,YAAY,GAAG,KAAK,CAAC;gBACvB,CAAC;YACH,CAAC;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,SAAS,EAAE,CAAC;gBAC1C,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;QAED,MAAM,QAAQ,GAAG,KAAK,IAAmB,EAAE;YACzC,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,KAAK,EAAE,CAAC;gBAC/B,MAAM,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAC/B,CAAC;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,SAAS,EAAE,CAAC;gBAC1C,MAAM,OAAO,CAAC,OAAO,CACnB,mDAAmD,kBAAkB,CACnE,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,CAC3B,EAAE,CACJ,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QACF,MAAM,WAAW,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,KAAK,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,SAAS,CAAC;QAEjF,uFAAuF;QACvF,yFAAyF;QACzF,OAAO,CACL,oBAAC,GAAG,kBACF,UAAU,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAChE,SAAS,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC7D,cAAc,EAAC,SAAS,EACxB,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,MAAM,IACR,WAAW;YAEd,wBAAwB,CAAC,CAAC,CAAC,CAC1B,oBAAC,OAAO,IAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAE,WAAW;gBAC7C,oBAAC,cAAc,IACb,WAAW,EAAE,WAAW,EACxB,+BAA+B,EAAE,+BAA+B,EAChE,wBAAwB,EAAE,wBAAwB,EAClD,KAAK,EAAE,KAAK,GACZ,CACM,CACX,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IACb,WAAW,EAAE,WAAW,EACxB,+BAA+B,EAAE,+BAA+B,EAChE,wBAAwB,EAAE,wBAAwB,EAClD,KAAK,EAAE,KAAK,GACZ,CACH;YACD,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,UAAU,EAAE,CAAC;gBACjE,oBAAC,GAAG,IAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBACjF,oBAAC,IAAI,IACH,KAAK,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACzD,SAAS,EAAE,WAAW,IAErB,YAAY,CACR,CACH;gBACL,QAAQ,IAAI,CACX,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAS,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;oBAClF,oBAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,GAAG,CACxD,CACP,CACG,CACF,CACP,CAAC;IACJ,CAAC;AACH,CAAC,CAAC"}
|
package/package.json
CHANGED
package/src/TapToEdit.tsx
CHANGED
|
@@ -10,6 +10,29 @@ import {Icon} from "./Icon";
|
|
|
10
10
|
import {Text} from "./Text";
|
|
11
11
|
import {Tooltip} from "./Tooltip";
|
|
12
12
|
|
|
13
|
+
const TapToEditTitle = ({
|
|
14
|
+
title,
|
|
15
|
+
description,
|
|
16
|
+
showDescriptionAsTooltip,
|
|
17
|
+
onlyShowDescriptionWhileEditing,
|
|
18
|
+
}: {
|
|
19
|
+
onlyShowDescriptionWhileEditing?: boolean;
|
|
20
|
+
showDescriptionAsTooltip?: boolean;
|
|
21
|
+
title: string;
|
|
22
|
+
description?: string;
|
|
23
|
+
}): ReactElement => {
|
|
24
|
+
return (
|
|
25
|
+
<Box flex="grow" marginBottom={2}>
|
|
26
|
+
<Text weight="bold">{title}:</Text>
|
|
27
|
+
{Boolean(description && !showDescriptionAsTooltip && !onlyShowDescriptionWhileEditing) && (
|
|
28
|
+
<Text color="gray" size="sm">
|
|
29
|
+
{description}
|
|
30
|
+
</Text>
|
|
31
|
+
)}
|
|
32
|
+
</Box>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
|
|
13
36
|
export function formatAddress(address: any, asString = false): string {
|
|
14
37
|
let city = "";
|
|
15
38
|
if (address?.city) {
|
|
@@ -63,20 +86,13 @@ export const TapToEdit = ({
|
|
|
63
86
|
confirmationText = "Are you sure you want to save your changes?",
|
|
64
87
|
confirmationHeading = "Confirm",
|
|
65
88
|
description: propsDescription,
|
|
66
|
-
// openApiModel,
|
|
67
|
-
// openApiField,
|
|
68
89
|
showDescriptionAsTooltip = false,
|
|
69
90
|
onlyShowDescriptionWhileEditing = true,
|
|
70
91
|
...fieldProps
|
|
71
92
|
}: TapToEditProps): ReactElement => {
|
|
72
93
|
const [editing, setEditing] = useState(false);
|
|
73
94
|
const [initialValue] = useState(value);
|
|
74
|
-
// const {getModelField} = useOpenAPISpec();
|
|
75
|
-
|
|
76
95
|
const description: string | undefined = propsDescription;
|
|
77
|
-
// if (!description && openApiModel && openApiField) {
|
|
78
|
-
// description = getModelField(openApiModel, openApiField)?.description;
|
|
79
|
-
// }
|
|
80
96
|
|
|
81
97
|
if (editable && !setValue) {
|
|
82
98
|
throw new Error("setValue is required if editable is true");
|
|
@@ -186,24 +202,12 @@ export const TapToEdit = ({
|
|
|
186
202
|
};
|
|
187
203
|
const isClickable = fieldProps?.type === "url" || fieldProps?.type === "address";
|
|
188
204
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
<Box flex="grow">
|
|
192
|
-
<Text weight="bold">{title}:</Text>
|
|
193
|
-
{Boolean(
|
|
194
|
-
description && !showDescriptionAsTooltip && !onlyShowDescriptionWhileEditing
|
|
195
|
-
) && (
|
|
196
|
-
<Text color="gray" size="sm">
|
|
197
|
-
{description}
|
|
198
|
-
</Text>
|
|
199
|
-
)}
|
|
200
|
-
</Box>
|
|
201
|
-
);
|
|
202
|
-
};
|
|
203
|
-
|
|
205
|
+
// For textarea to display correctly, we place the title on its own line, then the text
|
|
206
|
+
// on the next line. This is because the textarea will take up the full width of the row.
|
|
204
207
|
return (
|
|
205
208
|
<Box
|
|
206
|
-
|
|
209
|
+
alignItems={fieldProps?.type === "textarea" ? "start" : "center"}
|
|
210
|
+
direction={fieldProps?.type === "textarea" ? "column" : "row"}
|
|
207
211
|
justifyContent="between"
|
|
208
212
|
paddingX={3}
|
|
209
213
|
paddingY={2}
|
|
@@ -212,19 +216,32 @@ export const TapToEdit = ({
|
|
|
212
216
|
>
|
|
213
217
|
{showDescriptionAsTooltip ? (
|
|
214
218
|
<Tooltip idealDirection="top" text={description}>
|
|
215
|
-
|
|
219
|
+
<TapToEditTitle
|
|
220
|
+
description={description}
|
|
221
|
+
onlyShowDescriptionWhileEditing={onlyShowDescriptionWhileEditing}
|
|
222
|
+
showDescriptionAsTooltip={showDescriptionAsTooltip}
|
|
223
|
+
title={title}
|
|
224
|
+
/>
|
|
216
225
|
</Tooltip>
|
|
217
226
|
) : (
|
|
218
|
-
|
|
227
|
+
<TapToEditTitle
|
|
228
|
+
description={description}
|
|
229
|
+
onlyShowDescriptionWhileEditing={onlyShowDescriptionWhileEditing}
|
|
230
|
+
showDescriptionAsTooltip={showDescriptionAsTooltip}
|
|
231
|
+
title={title}
|
|
232
|
+
/>
|
|
219
233
|
)}
|
|
220
|
-
<Box direction="row" justifyContent="
|
|
221
|
-
<Box justifyContent="start" onClick={isClickable ? openLink : undefined}>
|
|
222
|
-
<Text
|
|
234
|
+
<Box direction="row" flex="grow" justifyContent="end" marginLeft={2}>
|
|
235
|
+
<Box flex="grow" justifyContent="start" onClick={isClickable ? openLink : undefined}>
|
|
236
|
+
<Text
|
|
237
|
+
align={fieldProps?.type === "textarea" ? "left" : "right"}
|
|
238
|
+
underline={isClickable}
|
|
239
|
+
>
|
|
223
240
|
{displayValue}
|
|
224
241
|
</Text>
|
|
225
242
|
</Box>
|
|
226
243
|
{editable && (
|
|
227
|
-
<Box marginLeft={2} onClick={(): void => setEditing(true)}>
|
|
244
|
+
<Box alignSelf="end" marginLeft={2} width={16} onClick={(): void => setEditing(true)}>
|
|
228
245
|
<Icon color="darkGray" name="edit" prefix="far" size="md" />
|
|
229
246
|
</Box>
|
|
230
247
|
)}
|