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:
Sam Nolan 2022-04-06 11:18:18 +10:00
parent 427c5d5615
commit e1295e4f0f
6 changed files with 55 additions and 41 deletions

View File

@ -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;

View File

@ -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

View File

@ -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;

View File

@ -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 };

View File

@ -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,

View File

@ -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>