@activecollab/components 1.0.387 → 1.0.389
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/cjs/components/EditableContent/EditableContent.js +2 -2
- package/dist/cjs/components/EditableContent/EditableContent.js.map +1 -1
- package/dist/cjs/components/EditableText/EditableText.js +1 -1
- package/dist/cjs/components/EditableText/EditableText.js.map +1 -1
- package/dist/esm/components/EditableContent/EditableContent.d.ts.map +1 -1
- package/dist/esm/components/EditableContent/EditableContent.js +2 -2
- package/dist/esm/components/EditableContent/EditableContent.js.map +1 -1
- package/dist/esm/components/EditableText/EditableText.js +1 -1
- package/dist/esm/components/EditableText/EditableText.js.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -40,7 +40,7 @@ var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
40
40
|
forwardedAs: "span",
|
|
41
41
|
weight: weight,
|
|
42
42
|
$disabled: disabled
|
|
43
|
-
}, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value),
|
|
43
|
+
}, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/_react.default.createElement(_Styles.StyledInput, _extends({}, inputProps, {
|
|
44
44
|
ref: handleRef,
|
|
45
45
|
forwardedAs: "input",
|
|
46
46
|
variant: variant,
|
|
@@ -49,7 +49,7 @@ var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
49
49
|
onBlur: handleBlur,
|
|
50
50
|
disabled: disabled,
|
|
51
51
|
"data-form-type": "other"
|
|
52
|
-
}))
|
|
52
|
+
})));
|
|
53
53
|
});
|
|
54
54
|
exports.EditableContent = EditableContent;
|
|
55
55
|
EditableContent.displayName = "EditableContent";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.js","names":["EditableContent","forwardRef","ref","className","variant","weight","disabled","inputProps","wrapRef","props","intInputRef","useRef","handleRef","useForkRef","handleBlur","useCallback","evt","current","scrollLeft","onBlur","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n >\n {inputProps?.value}\n </StyledSpan>\n
|
|
1
|
+
{"version":3,"file":"EditableContent.js","names":["EditableContent","forwardRef","ref","className","variant","weight","disabled","inputProps","wrapRef","props","intInputRef","useRef","handleRef","useForkRef","handleBlur","useCallback","evt","current","scrollLeft","onBlur","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n >\n {inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={handleRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n disabled={disabled}\n data-form-type=\"other\"\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAA8D;AAAA;AAAA;AAAA;AAAA;AAAA;AAevD,IAAMA,eAAe,gBAAG,IAAAC,iBAAU,EAKvC,gBAUEC,GAAG,EACA;EAAA,IATDC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,QAAQ;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,UAAU,QAAVA,UAAU;IACVC,OAAO,QAAPA,OAAO;IACJC,KAAK;EAIV,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAClD,IAAMC,SAAS,GAAG,IAAAC,iBAAU,EAACX,GAAG,EAAEQ,WAAW,CAAC;EAE9C,IAAMI,UAAU,GAAG,IAAAC,kBAAW,EAC5B,UAACC,GAAG,EAAK;IACP,IAAIN,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAEO,OAAO,EAAE;MACxBP,WAAW,CAACO,OAAO,CAACC,UAAU,GAAG,CAAC;IACpC;IACA,QAAOX,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEY,MAAM,gBAAe,KAAIZ,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEY,MAAM,CAACH,GAAG,CAAC;EACrE,CAAC,EACD,CAACT,UAAU,CAAC,CACb;EAED,oBACE,6BAAC,iBAAS;IAAC,SAAS,EAAEJ,SAAU;IAAC,GAAG,EAAEK;EAAQ,GAAKC,KAAK,gBACtD,6BAAC,kBAAU;IACT,OAAO,EAAEL,OAAQ;IACjB,WAAW,EAAC,MAAM;IAClB,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC;EAAS,GAEnBC,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEa,KAAK,CACP,eACb,6BAAC,mBAAW,eACNb,UAAU;IACd,GAAG,EAAEK,SAAU;IACf,WAAW,EAAC,OAAO;IACnB,OAAO,EAAER,OAAQ;IACjB,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEE,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEa,KAAM;IACzB,MAAM,EAAEN,UAAW;IACnB,QAAQ,EAAER,QAAS;IACnB,kBAAe;EAAO,GACtB,CACQ;AAEhB,CAAC,CACF;AAAC;AAEFN,eAAe,CAACqB,WAAW,GAAG,iBAAiB"}
|
|
@@ -75,7 +75,7 @@ var EditableText = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
75
75
|
setCurrentValue(e.target.value);
|
|
76
76
|
}, []);
|
|
77
77
|
return /*#__PURE__*/_react.default.createElement(_EditableContent.EditableContent, _extends({}, props, {
|
|
78
|
-
|
|
78
|
+
wrapRef: ref,
|
|
79
79
|
inputProps: _objectSpread(_objectSpread({}, inputProps), {}, {
|
|
80
80
|
value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
|
|
81
81
|
onBlur: handleBlur,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.js","names":["EditableText","forwardRef","ref","onSave","onCancel","value","inputProps","allowEmptyString","props","useState","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","useRef","useEffect","handleBlur","useCallback","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","classNames","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"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\";\nimport classNames from \"classnames\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\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 /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n { onSave, onCancel, value, inputProps, allowEmptyString, ...props },\n ref\n ) => {\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 !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n },\n [allowEmptyString, 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
|
|
1
|
+
{"version":3,"file":"EditableText.js","names":["EditableText","forwardRef","ref","onSave","onCancel","value","inputProps","allowEmptyString","props","useState","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","useRef","useEffect","handleBlur","useCallback","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","classNames","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"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\";\nimport classNames from \"classnames\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\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 /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n { onSave, onCancel, value, inputProps, allowEmptyString, ...props },\n ref\n ) => {\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 !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n },\n [allowEmptyString, 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 wrapRef={ref}\n inputProps={{\n ...inputProps,\n value: currentValue ?? \"\",\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: classNames(\"c-input\", inputProps?.className),\n }}\n />\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,GAAG,EAAuB,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGnD,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACjD,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,GAAG,EAAuB,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGnD,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACjD,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,yuJAsD3B,CAAC"}
|
|
@@ -30,7 +30,7 @@ export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
30
30
|
forwardedAs: "span",
|
|
31
31
|
weight: weight,
|
|
32
32
|
$disabled: disabled
|
|
33
|
-
}, inputProps == null ? void 0 : inputProps.value),
|
|
33
|
+
}, inputProps == null ? void 0 : inputProps.value), /*#__PURE__*/React.createElement(StyledInput, _extends({}, inputProps, {
|
|
34
34
|
ref: handleRef,
|
|
35
35
|
forwardedAs: "input",
|
|
36
36
|
variant: variant,
|
|
@@ -39,7 +39,7 @@ export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
39
39
|
onBlur: handleBlur,
|
|
40
40
|
disabled: disabled,
|
|
41
41
|
"data-form-type": "other"
|
|
42
|
-
}))
|
|
42
|
+
})));
|
|
43
43
|
});
|
|
44
44
|
EditableContent.displayName = "EditableContent";
|
|
45
45
|
//# sourceMappingURL=EditableContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.js","names":["React","forwardRef","useCallback","useRef","useForkRef","StyledDiv","StyledInput","StyledSpan","EditableContent","ref","className","variant","weight","disabled","inputProps","wrapRef","props","intInputRef","handleRef","handleBlur","evt","current","scrollLeft","onBlur","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n >\n {inputProps?.value}\n </StyledSpan>\n
|
|
1
|
+
{"version":3,"file":"EditableContent.js","names":["React","forwardRef","useCallback","useRef","useForkRef","StyledDiv","StyledInput","StyledSpan","EditableContent","ref","className","variant","weight","disabled","inputProps","wrapRef","props","intInputRef","handleRef","handleBlur","evt","current","scrollLeft","onBlur","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n /** Wrapper reference. */\n wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n wrapRef,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleBlur = useCallback(\n (evt) => {\n if (intInputRef?.current) {\n intInputRef.current.scrollLeft = 0;\n }\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n >\n {inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={handleRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n disabled={disabled}\n data-form-type=\"other\"\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAOC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,UAAU,QAAQ,aAAa;AAExC,SAASC,SAAS,EAAEC,WAAW,EAAEC,UAAU,QAAQ,UAAU;AAe7D,OAAO,IAAMC,eAAe,gBAAGP,UAAU,CAKvC,gBAUEQ,GAAG,EACA;EAAA,IATDC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,QAAQ;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,UAAU,QAAVA,UAAU;IACVC,OAAO,QAAPA,OAAO;IACJC,KAAK;EAIV,IAAMC,WAAW,GAAGd,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMe,SAAS,GAAGd,UAAU,CAACK,GAAG,EAAEQ,WAAW,CAAC;EAE9C,IAAME,UAAU,GAAGjB,WAAW,CAC5B,UAACkB,GAAG,EAAK;IACP,IAAIH,WAAW,YAAXA,WAAW,CAAEI,OAAO,EAAE;MACxBJ,WAAW,CAACI,OAAO,CAACC,UAAU,GAAG,CAAC;IACpC;IACA,QAAOR,UAAU,oBAAVA,UAAU,CAAES,MAAM,gBAAe,KAAIT,UAAU,oBAAVA,UAAU,CAAES,MAAM,CAACH,GAAG,CAAC;EACrE,CAAC,EACD,CAACN,UAAU,CAAC,CACb;EAED,oBACE,oBAAC,SAAS;IAAC,SAAS,EAAEJ,SAAU;IAAC,GAAG,EAAEK;EAAQ,GAAKC,KAAK,gBACtD,oBAAC,UAAU;IACT,OAAO,EAAEL,OAAQ;IACjB,WAAW,EAAC,MAAM;IAClB,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC;EAAS,GAEnBC,UAAU,oBAAVA,UAAU,CAAEU,KAAK,CACP,eACb,oBAAC,WAAW,eACNV,UAAU;IACd,GAAG,EAAEI,SAAU;IACf,WAAW,EAAC,OAAO;IACnB,OAAO,EAAEP,OAAQ;IACjB,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEE,UAAU,oBAAVA,UAAU,CAAEU,KAAM;IACzB,MAAM,EAAEL,UAAW;IACnB,QAAQ,EAAEN,QAAS;IACnB,kBAAe;EAAO,GACtB,CACQ;AAEhB,CAAC,CACF;AAEDL,eAAe,CAACiB,WAAW,GAAG,iBAAiB"}
|
|
@@ -53,7 +53,7 @@ export var EditableText = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
53
53
|
setCurrentValue(e.target.value);
|
|
54
54
|
}, []);
|
|
55
55
|
return /*#__PURE__*/React.createElement(EditableContent, _extends({}, props, {
|
|
56
|
-
|
|
56
|
+
wrapRef: ref,
|
|
57
57
|
inputProps: _extends({}, inputProps, {
|
|
58
58
|
value: currentValue != null ? currentValue : "",
|
|
59
59
|
onBlur: handleBlur,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","EditableContent","classNames","EditableText","ref","onSave","onCancel","value","inputProps","allowEmptyString","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","handleBlur","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"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\";\nimport classNames from \"classnames\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\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 /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n { onSave, onCancel, value, inputProps, allowEmptyString, ...props },\n ref\n ) => {\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 !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n },\n [allowEmptyString, 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
|
|
1
|
+
{"version":3,"file":"EditableText.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","EditableContent","classNames","EditableText","ref","onSave","onCancel","value","inputProps","allowEmptyString","props","currentValue","setCurrentValue","prevValue","setPrevValue","escapeRef","handleBlur","e","current","target","trim","length","handleKeyDown","key","blur","handleChange","onBlur","onKeyDown","onChange","type","className","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"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\";\nimport classNames from \"classnames\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\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 /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n { onSave, onCancel, value, inputProps, allowEmptyString, ...props },\n ref\n ) => {\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 !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n },\n [allowEmptyString, 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 wrapRef={ref}\n inputProps={{\n ...inputProps,\n value: currentValue ?? \"\",\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: classNames(\"c-input\", inputProps?.className),\n }}\n />\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -12479,7 +12479,7 @@
|
|
|
12479
12479
|
forwardedAs: "span",
|
|
12480
12480
|
weight: weight,
|
|
12481
12481
|
$disabled: disabled
|
|
12482
|
-
}, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value),
|
|
12482
|
+
}, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({}, inputProps, {
|
|
12483
12483
|
ref: handleRef,
|
|
12484
12484
|
forwardedAs: "input",
|
|
12485
12485
|
variant: variant,
|
|
@@ -12488,7 +12488,7 @@
|
|
|
12488
12488
|
onBlur: handleBlur,
|
|
12489
12489
|
disabled: disabled,
|
|
12490
12490
|
"data-form-type": "other"
|
|
12491
|
-
}))
|
|
12491
|
+
})));
|
|
12492
12492
|
});
|
|
12493
12493
|
EditableContent.displayName = "EditableContent";
|
|
12494
12494
|
|
|
@@ -16288,7 +16288,7 @@
|
|
|
16288
16288
|
setCurrentValue(e.target.value);
|
|
16289
16289
|
}, []);
|
|
16290
16290
|
return /*#__PURE__*/React__default["default"].createElement(EditableContent, _extends({}, props, {
|
|
16291
|
-
|
|
16291
|
+
wrapRef: ref,
|
|
16292
16292
|
inputProps: _objectSpread2(_objectSpread2({}, inputProps), {}, {
|
|
16293
16293
|
value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
|
|
16294
16294
|
onBlur: handleBlur,
|