@activecollab/components 1.0.202 → 1.0.203

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.
@@ -59,6 +59,13 @@ var EditableText = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
59
59
  setPrevValue = _useState4[1];
60
60
 
61
61
  var escapeRef = (0, _react.useRef)(false);
62
+ (0, _react.useEffect)(function () {
63
+ if (currentValue !== value) {
64
+ setCurrentValue(value);
65
+ setPrevValue(value);
66
+ } // eslint-disable-next-line react-hooks/exhaustive-deps
67
+
68
+ }, [value]);
62
69
  var handleBlur = (0, _react.useCallback)(function (e) {
63
70
  if (escapeRef.current) {
64
71
  setCurrentValue(prevValue);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/EditableText/EditableText.tsx"],"names":["EditableText","ref","onSave","onCancel","value","inputProps","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","handleBlur","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","displayName"],"mappings":";;;;;;;;;AAAA;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,IAAMA,YAAY,gBAAG,uBAC1B,gBAAoDC,GAApD,EAA4D;AAAA,MAAzDC,MAAyD,QAAzDA,MAAyD;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAAvCC,KAAuC,QAAvCA,KAAuC;AAAA,MAAhCC,UAAgC,QAAhCA,UAAgC;AAAA,MAAjBC,KAAiB;;AAC1D,kBAAwC,qBAASF,KAAT,CAAxC;AAAA;AAAA,MAAOG,YAAP;AAAA,MAAqBC,eAArB;;AACA,mBAAkC,qBAASJ,KAAT,CAAlC;AAAA;AAAA,MAAOK,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAMC,SAAS,GAAG,mBAAO,KAAP,CAAlB;AAEA,MAAMC,UAAU,GAAG,wBACjB,UAACC,CAAD,EAAO;AACL,QAAIF,SAAS,CAACG,OAAd,EAAuB;AACrBN,MAAAA,eAAe,CAACC,SAAD,CAAf;AACAE,MAAAA,SAAS,CAACG,OAAV,GAAoB,KAApB;AACD,KAHD,MAGO;AACL,UACED,CAAC,CAACE,MAAF,CAASX,KAAT,CAAeY,IAAf,GAAsBC,MAAtB,GAA+B,CAA/B,IACAR,SAAS,KAAKI,CAAC,CAACE,MAAF,CAASX,KAFzB,EAGE;AACAM,QAAAA,YAAY,CAACG,CAAC,CAACE,MAAF,CAASX,KAAV,CAAZ;AACAI,QAAAA,eAAe,CAACK,CAAC,CAACE,MAAF,CAASX,KAAV,CAAf;AACA,eAAOF,MAAP,KAAkB,UAAlB,IAAgCA,MAAM,CAACW,CAAD,CAAtC;AACD,OAPD,MAOO;AACLL,QAAAA,eAAe,CAACC,SAAD,CAAf;AACD;AACF;AACF,GAjBgB,EAkBjB,CAACP,MAAD,EAASO,SAAT,CAlBiB,CAAnB;AAqBA,MAAMS,aAAa,GAAG,wBACpB,UAACL,CAAD,EAAO;AACL,QAAIA,CAAC,CAACM,GAAF,KAAU,OAAd,EAAuB;AACrBN,MAAAA,CAAC,CAACE,MAAF,CAASK,IAAT;AACD;;AACD,QAAIP,CAAC,CAACM,GAAF,KAAU,QAAd,EAAwB;AACtBR,MAAAA,SAAS,CAACG,OAAV,GAAoB,IAApB;AACAD,MAAAA,CAAC,CAACE,MAAF,CAASK,IAAT;AACA,aAAOjB,QAAP,KAAoB,UAApB,IAAkCA,QAAQ,EAA1C;AACD;AACF,GAVmB,EAWpB,CAACA,QAAD,CAXoB,CAAtB;AAcA,MAAMkB,YAAY,GAAG,wBAAY,UAACR,CAAD,EAAO;AACtCL,IAAAA,eAAe,CAACK,CAAC,CAACE,MAAF,CAASX,KAAV,CAAf;AACD,GAFoB,EAElB,EAFkB,CAArB;AAIA,sBACE,6BAAC,gCAAD,eACME,KADN;AAEE,IAAA,GAAG,EAAEL,GAFP;AAGE,IAAA,UAAU,kCACLI,UADK;AAERD,MAAAA,KAAK,EAAEG,YAFC;AAGRe,MAAAA,MAAM,EAAEV,UAHA;AAIRW,MAAAA,SAAS,EAAEL,aAJH;AAKRM,MAAAA,QAAQ,EAAEH,YALF;AAMRI,MAAAA,IAAI,EAAE,MANE;AAORC,MAAAA,SAAS,EAAE;AAPH;AAHZ,KADF;AAeD,CA5DyB,CAArB;;AA+DP1B,YAAY,CAAC2B,WAAb,GAA2B,cAA3B","sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value: string;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n ({ onSave, onCancel, value, inputProps, ...props }, ref) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n setCurrentValue(prevValue);\n }\n }\n },\n [onSave, prevValue]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n return (\n <EditableContent\n {...props}\n ref={ref}\n inputProps={{\n ...inputProps,\n value: currentValue,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: \"c-input\",\n }}\n />\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"file":"EditableText.js"}
1
+ {"version":3,"sources":["../../../../src/components/EditableText/EditableText.tsx"],"names":["EditableText","ref","onSave","onCancel","value","inputProps","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","handleBlur","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","displayName"],"mappings":";;;;;;;;;AAAA;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,IAAMA,YAAY,gBAAG,uBAC1B,gBAAoDC,GAApD,EAA4D;AAAA,MAAzDC,MAAyD,QAAzDA,MAAyD;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAAvCC,KAAuC,QAAvCA,KAAuC;AAAA,MAAhCC,UAAgC,QAAhCA,UAAgC;AAAA,MAAjBC,KAAiB;;AAC1D,kBAAwC,qBAASF,KAAT,CAAxC;AAAA;AAAA,MAAOG,YAAP;AAAA,MAAqBC,eAArB;;AACA,mBAAkC,qBAASJ,KAAT,CAAlC;AAAA;AAAA,MAAOK,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAMC,SAAS,GAAG,mBAAO,KAAP,CAAlB;AAEA,wBAAU,YAAM;AACd,QAAIJ,YAAY,KAAKH,KAArB,EAA4B;AAC1BI,MAAAA,eAAe,CAACJ,KAAD,CAAf;AACAM,MAAAA,YAAY,CAACN,KAAD,CAAZ;AACD,KAJa,CAKd;;AACD,GAND,EAMG,CAACA,KAAD,CANH;AAQA,MAAMQ,UAAU,GAAG,wBACjB,UAACC,CAAD,EAAO;AACL,QAAIF,SAAS,CAACG,OAAd,EAAuB;AACrBN,MAAAA,eAAe,CAACC,SAAD,CAAf;AACAE,MAAAA,SAAS,CAACG,OAAV,GAAoB,KAApB;AACD,KAHD,MAGO;AACL,UACED,CAAC,CAACE,MAAF,CAASX,KAAT,CAAeY,IAAf,GAAsBC,MAAtB,GAA+B,CAA/B,IACAR,SAAS,KAAKI,CAAC,CAACE,MAAF,CAASX,KAFzB,EAGE;AACAM,QAAAA,YAAY,CAACG,CAAC,CAACE,MAAF,CAASX,KAAV,CAAZ;AACAI,QAAAA,eAAe,CAACK,CAAC,CAACE,MAAF,CAASX,KAAV,CAAf;AACA,eAAOF,MAAP,KAAkB,UAAlB,IAAgCA,MAAM,CAACW,CAAD,CAAtC;AACD,OAPD,MAOO;AACLL,QAAAA,eAAe,CAACC,SAAD,CAAf;AACD;AACF;AACF,GAjBgB,EAkBjB,CAACP,MAAD,EAASO,SAAT,CAlBiB,CAAnB;AAqBA,MAAMS,aAAa,GAAG,wBACpB,UAACL,CAAD,EAAO;AACL,QAAIA,CAAC,CAACM,GAAF,KAAU,OAAd,EAAuB;AACrBN,MAAAA,CAAC,CAACE,MAAF,CAASK,IAAT;AACD;;AACD,QAAIP,CAAC,CAACM,GAAF,KAAU,QAAd,EAAwB;AACtBR,MAAAA,SAAS,CAACG,OAAV,GAAoB,IAApB;AACAD,MAAAA,CAAC,CAACE,MAAF,CAASK,IAAT;AACA,aAAOjB,QAAP,KAAoB,UAApB,IAAkCA,QAAQ,EAA1C;AACD;AACF,GAVmB,EAWpB,CAACA,QAAD,CAXoB,CAAtB;AAcA,MAAMkB,YAAY,GAAG,wBAAY,UAACR,CAAD,EAAO;AACtCL,IAAAA,eAAe,CAACK,CAAC,CAACE,MAAF,CAASX,KAAV,CAAf;AACD,GAFoB,EAElB,EAFkB,CAArB;AAIA,sBACE,6BAAC,gCAAD,eACME,KADN;AAEE,IAAA,GAAG,EAAEL,GAFP;AAGE,IAAA,UAAU,kCACLI,UADK;AAERD,MAAAA,KAAK,EAAEG,YAFC;AAGRe,MAAAA,MAAM,EAAEV,UAHA;AAIRW,MAAAA,SAAS,EAAEL,aAJH;AAKRM,MAAAA,QAAQ,EAAEH,YALF;AAMRI,MAAAA,IAAI,EAAE,MANE;AAORC,MAAAA,SAAS,EAAE;AAPH;AAHZ,KADF;AAeD,CApEyB,CAArB;;AAuEP1B,YAAY,CAAC2B,WAAb,GAA2B,cAA3B","sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value: string;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n ({ onSave, onCancel, value, inputProps, ...props }, ref) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n\n useEffect(() => {\n if (currentValue !== value) {\n setCurrentValue(value);\n setPrevValue(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n setCurrentValue(prevValue);\n }\n }\n },\n [onSave, prevValue]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n return (\n <EditableContent\n {...props}\n ref={ref}\n inputProps={{\n ...inputProps,\n value: currentValue,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: \"c-input\",\n }}\n />\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"file":"EditableText.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,wBAAwB,EACzB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IAErE,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,8FA6DxB,CAAC"}
1
+ {"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,wBAAwB,EACzB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IAErE,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,8FAqExB,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  var _excluded = ["onSave", "onCancel", "value", "inputProps"];
4
- import React, { forwardRef, useCallback, useRef, useState } from "react";
4
+ import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
5
5
  import { EditableContent } from "../EditableContent/EditableContent";
6
6
  export var EditableText = /*#__PURE__*/forwardRef(function (_ref, ref) {
7
7
  var onSave = _ref.onSave,
@@ -19,6 +19,13 @@ export var EditableText = /*#__PURE__*/forwardRef(function (_ref, ref) {
19
19
  setPrevValue = _useState2[1];
20
20
 
21
21
  var escapeRef = useRef(false);
22
+ useEffect(function () {
23
+ if (currentValue !== value) {
24
+ setCurrentValue(value);
25
+ setPrevValue(value);
26
+ } // eslint-disable-next-line react-hooks/exhaustive-deps
27
+
28
+ }, [value]);
22
29
  var handleBlur = useCallback(function (e) {
23
30
  if (escapeRef.current) {
24
31
  setCurrentValue(prevValue);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/EditableText/EditableText.tsx"],"names":["React","forwardRef","useCallback","useRef","useState","EditableContent","EditableText","ref","onSave","onCancel","value","inputProps","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","handleBlur","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAEEC,UAFF,EAGEC,WAHF,EAIEC,MAJF,EAKEC,QALF,QAMO,OANP;AAOA,SACEC,eADF,QAGO,oCAHP;AAcA,OAAO,IAAMC,YAAY,gBAAGL,UAAU,CACpC,gBAAoDM,GAApD,EAA4D;AAAA,MAAzDC,MAAyD,QAAzDA,MAAyD;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAAvCC,KAAuC,QAAvCA,KAAuC;AAAA,MAAhCC,UAAgC,QAAhCA,UAAgC;AAAA,MAAjBC,KAAiB;;AAC1D,kBAAwCR,QAAQ,CAACM,KAAD,CAAhD;AAAA,MAAOG,YAAP;AAAA,MAAqBC,eAArB;;AACA,mBAAkCV,QAAQ,CAACM,KAAD,CAA1C;AAAA,MAAOK,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAMC,SAAS,GAAGd,MAAM,CAAC,KAAD,CAAxB;AAEA,MAAMe,UAAU,GAAGhB,WAAW,CAC5B,UAACiB,CAAD,EAAO;AACL,QAAIF,SAAS,CAACG,OAAd,EAAuB;AACrBN,MAAAA,eAAe,CAACC,SAAD,CAAf;AACAE,MAAAA,SAAS,CAACG,OAAV,GAAoB,KAApB;AACD,KAHD,MAGO;AACL,UACED,CAAC,CAACE,MAAF,CAASX,KAAT,CAAeY,IAAf,GAAsBC,MAAtB,GAA+B,CAA/B,IACAR,SAAS,KAAKI,CAAC,CAACE,MAAF,CAASX,KAFzB,EAGE;AACAM,QAAAA,YAAY,CAACG,CAAC,CAACE,MAAF,CAASX,KAAV,CAAZ;AACAI,QAAAA,eAAe,CAACK,CAAC,CAACE,MAAF,CAASX,KAAV,CAAf;AACA,eAAOF,MAAP,KAAkB,UAAlB,IAAgCA,MAAM,CAACW,CAAD,CAAtC;AACD,OAPD,MAOO;AACLL,QAAAA,eAAe,CAACC,SAAD,CAAf;AACD;AACF;AACF,GAjB2B,EAkB5B,CAACP,MAAD,EAASO,SAAT,CAlB4B,CAA9B;AAqBA,MAAMS,aAAa,GAAGtB,WAAW,CAC/B,UAACiB,CAAD,EAAO;AACL,QAAIA,CAAC,CAACM,GAAF,KAAU,OAAd,EAAuB;AACrBN,MAAAA,CAAC,CAACE,MAAF,CAASK,IAAT;AACD;;AACD,QAAIP,CAAC,CAACM,GAAF,KAAU,QAAd,EAAwB;AACtBR,MAAAA,SAAS,CAACG,OAAV,GAAoB,IAApB;AACAD,MAAAA,CAAC,CAACE,MAAF,CAASK,IAAT;AACA,aAAOjB,QAAP,KAAoB,UAApB,IAAkCA,QAAQ,EAA1C;AACD;AACF,GAV8B,EAW/B,CAACA,QAAD,CAX+B,CAAjC;AAcA,MAAMkB,YAAY,GAAGzB,WAAW,CAAC,UAACiB,CAAD,EAAO;AACtCL,IAAAA,eAAe,CAACK,CAAC,CAACE,MAAF,CAASX,KAAV,CAAf;AACD,GAF+B,EAE7B,EAF6B,CAAhC;AAIA,sBACE,oBAAC,eAAD,eACME,KADN;AAEE,IAAA,GAAG,EAAEL,GAFP;AAGE,IAAA,UAAU,eACLI,UADK;AAERD,MAAAA,KAAK,EAAEG,YAFC;AAGRe,MAAAA,MAAM,EAAEV,UAHA;AAIRW,MAAAA,SAAS,EAAEL,aAJH;AAKRM,MAAAA,QAAQ,EAAEH,YALF;AAMRI,MAAAA,IAAI,EAAE,MANE;AAORC,MAAAA,SAAS,EAAE;AAPH;AAHZ,KADF;AAeD,CA5DmC,CAA/B;AA+DP1B,YAAY,CAAC2B,WAAb,GAA2B,cAA3B","sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value: string;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n ({ onSave, onCancel, value, inputProps, ...props }, ref) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n setCurrentValue(prevValue);\n }\n }\n },\n [onSave, prevValue]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n return (\n <EditableContent\n {...props}\n ref={ref}\n inputProps={{\n ...inputProps,\n value: currentValue,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: \"c-input\",\n }}\n />\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"file":"EditableText.js"}
1
+ {"version":3,"sources":["../../../../src/components/EditableText/EditableText.tsx"],"names":["React","forwardRef","useCallback","useEffect","useRef","useState","EditableContent","EditableText","ref","onSave","onCancel","value","inputProps","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","handleBlur","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","displayName"],"mappings":"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","sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value: string;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n ({ onSave, onCancel, value, inputProps, ...props }, ref) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n\n useEffect(() => {\n if (currentValue !== value) {\n setCurrentValue(value);\n setPrevValue(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n setCurrentValue(prevValue);\n }\n }\n },\n [onSave, prevValue]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\") {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n return (\n <EditableContent\n {...props}\n ref={ref}\n inputProps={{\n ...inputProps,\n value: currentValue,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: \"c-input\",\n }}\n />\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"file":"EditableText.js"}
package/dist/index.js CHANGED
@@ -12144,6 +12144,13 @@
12144
12144
  setPrevValue = _useState4[1];
12145
12145
 
12146
12146
  var escapeRef = React.useRef(false);
12147
+ React.useEffect(function () {
12148
+ if (currentValue !== value) {
12149
+ setCurrentValue(value);
12150
+ setPrevValue(value);
12151
+ } // eslint-disable-next-line react-hooks/exhaustive-deps
12152
+
12153
+ }, [value]);
12147
12154
  var handleBlur = React.useCallback(function (e) {
12148
12155
  if (escapeRef.current) {
12149
12156
  setCurrentValue(prevValue);