Fix PR comments:
- change the onChange handler to return onChange rather than onBlur - Change the vega component to a checkbox - Create new IDs + check whether it works with multiple editors - Multiple line squiggle editors (noticed this was an issue) - Remove ace imports that are not used
This commit is contained in:
parent
427c5d5615
commit
e1295e4f0f
|
@ -1,10 +1,9 @@
|
|||
import _ from "lodash";
|
||||
import React, { FC } from "react";
|
||||
import AceEditor from "react-ace";
|
||||
|
||||
import "ace-builds/src-noconflict/mode-golang";
|
||||
import "ace-builds/src-noconflict/theme-github";
|
||||
import "ace-builds/src-noconflict/ext-language_tools";
|
||||
import "ace-builds/src-noconflict/keybinding-vim";
|
||||
|
||||
interface CodeEditorProps {
|
||||
value: string;
|
||||
|
@ -18,26 +17,30 @@ export let CodeEditor: FC<CodeEditorProps> = ({
|
|||
onChange,
|
||||
oneLine = false,
|
||||
width = 500,
|
||||
}: CodeEditorProps) => (
|
||||
<AceEditor
|
||||
value={value}
|
||||
mode="golang"
|
||||
theme="github"
|
||||
width={width + "px"}
|
||||
maxLines={oneLine ? 1 : 15}
|
||||
minLines={oneLine ? 1 : 15}
|
||||
showGutter={false}
|
||||
highlightActiveLine={false}
|
||||
showPrintMargin={false}
|
||||
onChange={onChange}
|
||||
name="UNIQUE_ID_OF_DIV"
|
||||
editorProps={{
|
||||
$blockScrolling: true,
|
||||
}}
|
||||
setOptions={{
|
||||
enableBasicAutocompletion: false,
|
||||
enableLiveAutocompletion: true,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}: CodeEditorProps) => {
|
||||
let lineCount = value.split("\n").length;
|
||||
let id = _.uniqueId();
|
||||
return (
|
||||
<AceEditor
|
||||
value={value}
|
||||
mode="golang"
|
||||
theme="github"
|
||||
width={width + "px"}
|
||||
minLines={oneLine ? lineCount : 15}
|
||||
maxLines={oneLine ? lineCount : 15}
|
||||
showGutter={false}
|
||||
highlightActiveLine={false}
|
||||
showPrintMargin={false}
|
||||
onChange={onChange}
|
||||
name={id}
|
||||
editorProps={{
|
||||
$blockScrolling: true,
|
||||
}}
|
||||
setOptions={{
|
||||
enableBasicAutocompletion: false,
|
||||
enableLiveAutocompletion: false,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export default CodeEditor;
|
||||
|
|
|
@ -66,7 +66,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
export function renderSquiggleEditor(props: SquiggleEditorProps) {
|
||||
export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
|
||||
let parent = document.createElement("div");
|
||||
ReactDOM.render(
|
||||
<SquiggleEditor
|
||||
|
|
|
@ -20,8 +20,8 @@ function FieldFloat(Props: FieldFloatProps) {
|
|||
<Input
|
||||
value={contents}
|
||||
className={Props.className ? Props.className : ""}
|
||||
onChange={(e) => setContents(e.target.value)}
|
||||
onBlur={() => {
|
||||
onChange={(e) => {
|
||||
setContents(e.target.value);
|
||||
let result = parseFloat(contents);
|
||||
if (_.isFinite(result)) {
|
||||
Props.onChange(result);
|
||||
|
@ -123,7 +123,7 @@ let SquigglePlayground: FC<Props> = (props) => {
|
|||
);
|
||||
};
|
||||
export default SquigglePlayground;
|
||||
export function renderSquigglePlayground(props: Props) {
|
||||
export function renderSquigglePlaygroundToDom(props: Props) {
|
||||
let parent = document.createElement("div");
|
||||
ReactDOM.render(<SquigglePlayground {...props} />, parent);
|
||||
return parent;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
export { SquiggleChart } from "./SquiggleChart";
|
||||
export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";
|
||||
export { SquiggleEditor, renderSquiggleEditorToDom } from "./SquiggleEditor";
|
||||
import SquigglePlayground, {
|
||||
renderSquigglePlayground,
|
||||
renderSquigglePlaygroundToDom,
|
||||
} from "./SquigglePlayground";
|
||||
export { SquigglePlayground, renderSquigglePlayground };
|
||||
export { SquigglePlayground, renderSquigglePlaygroundToDom };
|
||||
|
|
|
@ -16,21 +16,19 @@
|
|||
{
|
||||
"name": "xscale",
|
||||
"description": "The transform of the x scale",
|
||||
"value": 1.0,
|
||||
"value": false,
|
||||
"bind": {
|
||||
"input": "select",
|
||||
"options": [0.1, 1],
|
||||
"labels": ["log", "linear"]
|
||||
"input": "checkbox",
|
||||
"name": "log x scale"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "yscale",
|
||||
"description": "The transform of the y scale",
|
||||
"value": 1.0,
|
||||
"value": false,
|
||||
"bind": {
|
||||
"input": "select",
|
||||
"options": [0.1, 1],
|
||||
"labels": ["log", "linear"]
|
||||
"input": "checkbox",
|
||||
"name": "log y scale"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
@ -39,7 +37,7 @@
|
|||
{
|
||||
"name": "xscale",
|
||||
"type": "pow",
|
||||
"exponent": { "signal": "xscale" },
|
||||
"exponent": { "signal": "xscale ? 0.1 : 1" },
|
||||
"range": "width",
|
||||
"zero": false,
|
||||
"nice": false,
|
||||
|
@ -53,7 +51,7 @@
|
|||
{
|
||||
"name": "yscale",
|
||||
"type": "pow",
|
||||
"exponent": { "signal": "yscale" },
|
||||
"exponent": { "signal": "yscale ? 0.1 : 1" },
|
||||
"range": "height",
|
||||
"nice": true,
|
||||
"zero": true,
|
||||
|
|
|
@ -20,3 +20,16 @@ the distribution.
|
|||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
You can also name variables like so:
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Variables"
|
||||
args={{
|
||||
initialSquiggleString: "x = 2\nnormal(x,2)",
|
||||
}}
|
||||
>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
Loading…
Reference in New Issue
Block a user