react-cosmos-ui 6.0.0-alpha.6 → 6.0.0-alpha.8
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.
|
@@ -1,18 +1,32 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import { useFocus } from '../../../hooks/useFocus.js';
|
|
3
3
|
import { blue, grey248, grey8 } from '../../../style/colors.js';
|
|
4
4
|
import { TextContainer, TextField, TextInputContainer, TextMirror, } from '../../inputs/shared.js';
|
|
5
5
|
import { Label, ValueDataContainer } from './shared.js';
|
|
6
6
|
export function StringValueInput({ id, name, data, onChange }) {
|
|
7
7
|
const { focused, onFocus, onBlur } = useFocus();
|
|
8
|
-
|
|
8
|
+
// The data state is duplicated locally to solve the jumping cursor bug
|
|
9
|
+
// that occurs in controlled React inputs that don't immediately re-render
|
|
10
|
+
// with the new input value on change (because they await for the parent to
|
|
11
|
+
// propagate the changed value back down).
|
|
12
|
+
// https://github.com/facebook/react/issues/955
|
|
13
|
+
// https://github.com/react-cosmos/react-cosmos/issues/1372
|
|
14
|
+
const [localData, setLocalData] = useState(data);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
if (!focused)
|
|
17
|
+
setLocalData(data);
|
|
18
|
+
}, [data, focused]);
|
|
19
|
+
const onInputChange = React.useCallback((e) => {
|
|
20
|
+
setLocalData(e.currentTarget.value);
|
|
21
|
+
onChange(e.currentTarget.value);
|
|
22
|
+
}, [onChange]);
|
|
9
23
|
// Mirror textarea behavior and add an extra row after user adds a new line
|
|
10
|
-
const mirrorText = focused ?
|
|
24
|
+
const mirrorText = focused ? localData.replace(/\n$/, `\n `) : localData;
|
|
11
25
|
return (React.createElement(React.Fragment, null,
|
|
12
26
|
React.createElement(Label, { title: name, htmlFor: id }, name),
|
|
13
27
|
React.createElement(ValueDataContainer, null,
|
|
14
28
|
React.createElement(TextInputContainer, { focused: focused, focusedBg: grey8, focusedBoxShadow: `0 0 0.5px 1px ${blue}` },
|
|
15
29
|
React.createElement(TextContainer, null,
|
|
16
|
-
React.createElement(TextMirror, { minWidth: 64, focused: focused },
|
|
17
|
-
React.createElement(TextField, { rows: 1, id: id, value:
|
|
30
|
+
React.createElement(TextMirror, { minWidth: 64, focused: focused }, localData.length > 0 || focused ? mirrorText : React.createElement("em", null, "empty")),
|
|
31
|
+
React.createElement(TextField, { rows: 1, id: id, value: localData, focused: focused, color: grey248, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur }))))));
|
|
18
32
|
}
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
white-space: pre;
|
|
178
178
|
overflow: hidden;
|
|
179
179
|
text-overflow: ellipsis;
|
|
180
|
-
`,ui=Number.MAX_SAFE_INTEGER||9007199254740991;function ci({id:t,value:n,minValue:r=-ui,maxValue:a=ui,styles:o,onChange:i}){const[l,u]=(0,e.useState)(String(n)),{focused:c,onFocus:s,onBlur:f}=ri();function d(e){return function(e){return e%1==0?e:Number(e.toFixed(6))}(function(e){return Math.max(r,Math.min(a,e))}(e))}function p(e,t){let r=parseFloat(l);isNaN(r)&&(r=n),i(d(r+e*t))}return(0,e.useEffect)((()=>{u(String(n))}),[n]),e.createElement(ai,{focused:c,focusedBg:o.focusedBg,focusedBoxShadow:o.focusedBoxShadow},e.createElement(oi,null,e.createElement(li,{minWidth:8,focused:c},l),e.createElement(ii,{rows:1,id:t,value:l,focused:c,color:o.focusedColor,onChange:function(e){const t=e.currentTarget.value;if(!t.match(/^(-?[0-9]*|(-?[0-9]+)?\.[0-9]*)$/))return;const r=parseFloat(t);if(isNaN(r))return u(t);const a=d(r);u(a===r?t:String(a)),a!==n&&i(a)},onFocus:s,onBlur:function(){f(),u(String(n))},onKeyDown:function(e){function t(){return e.metaKey?100:e.shiftKey?10:e.altKey?.1:1}switch(e.keyCode){case 38:return e.preventDefault(),p(t(),1);case 40:return e.preventDefault(),p(t(),-1)}}})))}function si({id:t,name:n,data:r,onChange:a}){return e.createElement(e.Fragment,null,e.createElement(Ko,{title:n,htmlFor:t},n),e.createElement(Xo,null,e.createElement(ci,{id:t,value:r,styles:{focusedColor:Da,focusedBg:Pa,focusedBoxShadow:`0 0 0.5px 1px ${Za}`},onChange:a})))}function fi({id:t,name:n,data:r,onChange:a}){const{focused:o,onFocus:i,onBlur:l}=ri(),u=e.useCallback((e=>a(e.currentTarget.value)),[a]),
|
|
180
|
+
`,ui=Number.MAX_SAFE_INTEGER||9007199254740991;function ci({id:t,value:n,minValue:r=-ui,maxValue:a=ui,styles:o,onChange:i}){const[l,u]=(0,e.useState)(String(n)),{focused:c,onFocus:s,onBlur:f}=ri();function d(e){return function(e){return e%1==0?e:Number(e.toFixed(6))}(function(e){return Math.max(r,Math.min(a,e))}(e))}function p(e,t){let r=parseFloat(l);isNaN(r)&&(r=n),i(d(r+e*t))}return(0,e.useEffect)((()=>{u(String(n))}),[n]),e.createElement(ai,{focused:c,focusedBg:o.focusedBg,focusedBoxShadow:o.focusedBoxShadow},e.createElement(oi,null,e.createElement(li,{minWidth:8,focused:c},l),e.createElement(ii,{rows:1,id:t,value:l,focused:c,color:o.focusedColor,onChange:function(e){const t=e.currentTarget.value;if(!t.match(/^(-?[0-9]*|(-?[0-9]+)?\.[0-9]*)$/))return;const r=parseFloat(t);if(isNaN(r))return u(t);const a=d(r);u(a===r?t:String(a)),a!==n&&i(a)},onFocus:s,onBlur:function(){f(),u(String(n))},onKeyDown:function(e){function t(){return e.metaKey?100:e.shiftKey?10:e.altKey?.1:1}switch(e.keyCode){case 38:return e.preventDefault(),p(t(),1);case 40:return e.preventDefault(),p(t(),-1)}}})))}function si({id:t,name:n,data:r,onChange:a}){return e.createElement(e.Fragment,null,e.createElement(Ko,{title:n,htmlFor:t},n),e.createElement(Xo,null,e.createElement(ci,{id:t,value:r,styles:{focusedColor:Da,focusedBg:Pa,focusedBoxShadow:`0 0 0.5px 1px ${Za}`},onChange:a})))}function fi({id:t,name:n,data:r,onChange:a}){const{focused:o,onFocus:i,onBlur:l}=ri(),[u,c]=(0,e.useState)(r);(0,e.useEffect)((()=>{o||c(r)}),[r,o]);const s=e.useCallback((e=>{c(e.currentTarget.value),a(e.currentTarget.value)}),[a]),f=o?u.replace(/\n$/,"\n "):u;return e.createElement(e.Fragment,null,e.createElement(Ko,{title:n,htmlFor:t},n),e.createElement(Xo,null,e.createElement(ai,{focused:o,focusedBg:Pa,focusedBoxShadow:`0 0 0.5px 1px ${Za}`},e.createElement(oi,null,e.createElement(li,{minWidth:64,focused:o},u.length>0||o?f:e.createElement("em",null,"empty")),e.createElement(ii,{rows:1,id:t,value:u,focused:o,color:Da,onChange:s,onFocus:i,onBlur:l})))))}function di({name:t}){return e.createElement(e.Fragment,null,e.createElement(Ko,{title:t,disabled:!0},t),e.createElement(Xo,null,e.createElement(Jo,null,e.createElement("em",null,"undefined"))))}function pi({name:t,data:n}){return e.createElement(e.Fragment,null,e.createElement(Ko,{title:t,disabled:!0},t),e.createElement(Xo,null,e.createElement(Jo,{title:n},function(e){return-1!==e.indexOf("\n")?`${e.split("\n")[0]}...`:e}(n))))}function hi({value:t,name:n,id:r,indentLevel:a,onChange:o}){return e.createElement(Qo,{slotProps:{id:r,name:n,value:t,indentLevel:a,onChange:o}},e.createElement(Ir,{indentLevel:a},e.createElement(Yo,null,function(t,n,r,a){if("unserializable"===r.type)return e.createElement(pi,{name:n,data:r.stringifiedData});if("string"==typeof r.data)return e.createElement(fi,{id:t,name:n,data:r.data,onChange:a});if("number"==typeof r.data)return e.createElement(si,{id:t,name:n,data:r.data,onChange:a});if("boolean"==typeof r.data)return e.createElement(ei,{id:t,name:n,data:r.data,onChange:a});if(null===r.data)return e.createElement(ni,{name:n});if(void 0===r.data)return e.createElement(di,{name:n});throw new Error(`Invalid primitive value: ${r.data}`)}(r,n,t,o))))}function mi({name:t,childNames:n,expanded:r,indentLevel:a,onToggle:o}){const i=0===n.length;return e.createElement(Ir,{indentLevel:a},e.createElement(gi,null,e.createElement(vi,{disabled:i,onClick:o},e.createElement(e.Fragment,null,!i&&e.createElement(yi,null,r?e.createElement(mo,null):e.createElement(ho,null)),e.createElement(bi,null,e.createElement(xi,{disabled:i},t),e.createElement(wi,null,function(e){return e.length>0?`{ ${e.join(", ")} }`:"{}"}(n)))))))}const gi=Te.div`
|
|
181
181
|
padding: 2px 0;
|
|
182
182
|
`,vi=Te.button`
|
|
183
183
|
display: flex;
|