Change components to return result rather than environment
This commit is contained in:
parent
dfd2f83c9d
commit
86e3d5865e
2
packages/components/.prettierignore
Normal file
2
packages/components/.prettierignore
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
dist/
|
||||||
|
storybook-static
|
|
@ -131,7 +131,7 @@ export interface SquiggleChartProps {
|
||||||
/** variables declared before this expression */
|
/** variables declared before this expression */
|
||||||
environment?: unknown;
|
environment?: unknown;
|
||||||
/** When the environment changes */
|
/** When the environment changes */
|
||||||
onEnvChange?(env: unknown): void;
|
onChange?(expr: squiggleExpression): void;
|
||||||
/** CSS width of the element */
|
/** CSS width of the element */
|
||||||
width?: number;
|
width?: number;
|
||||||
height?: number;
|
height?: number;
|
||||||
|
@ -141,8 +141,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||||
squiggleString = "",
|
squiggleString = "",
|
||||||
sampleCount = 1000,
|
sampleCount = 1000,
|
||||||
outputXYPoints = 1000,
|
outputXYPoints = 1000,
|
||||||
environment = [],
|
onChange = () => {},
|
||||||
onEnvChange = () => {},
|
|
||||||
height = 60,
|
height = 60,
|
||||||
width = NaN,
|
width = NaN,
|
||||||
}: SquiggleChartProps) => {
|
}: SquiggleChartProps) => {
|
||||||
|
@ -158,8 +157,8 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||||
let expressionResult = run(squiggleString, samplingInputs);
|
let expressionResult = run(squiggleString, samplingInputs);
|
||||||
let internal: JSX.Element;
|
let internal: JSX.Element;
|
||||||
if (expressionResult.tag === "Ok") {
|
if (expressionResult.tag === "Ok") {
|
||||||
onEnvChange(environment);
|
|
||||||
let expression = expressionResult.value;
|
let expression = expressionResult.value;
|
||||||
|
onChange(expression);
|
||||||
internal = (
|
internal = (
|
||||||
<SquiggleItem expression={expression} width={_width} height={height} />
|
<SquiggleItem expression={expression} width={_width} height={height} />
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom";
|
||||||
import { SquiggleChart } from "./SquiggleChart";
|
import { SquiggleChart } from "./SquiggleChart";
|
||||||
import { CodeEditor } from "./CodeEditor";
|
import { CodeEditor } from "./CodeEditor";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
import type { squiggleExpression } from "@quri/squiggle-lang";
|
||||||
|
|
||||||
export interface SquiggleEditorProps {
|
export interface SquiggleEditorProps {
|
||||||
/** The input string for squiggle */
|
/** The input string for squiggle */
|
||||||
|
@ -22,7 +23,7 @@ export interface SquiggleEditorProps {
|
||||||
/** The environment, other variables that were already declared */
|
/** The environment, other variables that were already declared */
|
||||||
environment?: unknown;
|
environment?: unknown;
|
||||||
/** when the environment changes. Used again for notebook magic*/
|
/** when the environment changes. Used again for notebook magic*/
|
||||||
onEnvChange?(env: unknown): void;
|
onChange?(expr: squiggleExpression): void;
|
||||||
/** The width of the element */
|
/** The width of the element */
|
||||||
width: number;
|
width: number;
|
||||||
}
|
}
|
||||||
|
@ -43,7 +44,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
||||||
diagramStart,
|
diagramStart,
|
||||||
diagramStop,
|
diagramStop,
|
||||||
diagramCount,
|
diagramCount,
|
||||||
onEnvChange,
|
onChange,
|
||||||
environment,
|
environment,
|
||||||
}: SquiggleEditorProps) => {
|
}: SquiggleEditorProps) => {
|
||||||
let [expression, setExpression] = React.useState(initialSquiggleString);
|
let [expression, setExpression] = React.useState(initialSquiggleString);
|
||||||
|
@ -69,7 +70,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
||||||
diagramStop={diagramStop}
|
diagramStop={diagramStop}
|
||||||
diagramCount={diagramCount}
|
diagramCount={diagramCount}
|
||||||
environment={environment}
|
environment={environment}
|
||||||
onEnvChange={onEnvChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -80,7 +81,7 @@ export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<SquiggleEditor
|
<SquiggleEditor
|
||||||
{...props}
|
{...props}
|
||||||
onEnvChange={(env) => {
|
onChange={(expr) => {
|
||||||
// Typescript complains on two levels here.
|
// Typescript complains on two levels here.
|
||||||
// - Div elements don't have a value property
|
// - Div elements don't have a value property
|
||||||
// - Even if it did (like it was an input element), it would have to
|
// - Even if it did (like it was an input element), it would have to
|
||||||
|
@ -96,10 +97,10 @@ export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
|
||||||
// viewof env = cell('normal(0,1)')
|
// viewof env = cell('normal(0,1)')
|
||||||
// to work
|
// to work
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
parent.value = env;
|
parent.value = expr;
|
||||||
|
|
||||||
parent.dispatchEvent(new CustomEvent("input"));
|
parent.dispatchEvent(new CustomEvent("input"));
|
||||||
if (props.onEnvChange) props.onEnvChange(env);
|
if (props.onChange) props.onChange(expr);
|
||||||
}}
|
}}
|
||||||
/>,
|
/>,
|
||||||
parent
|
parent
|
||||||
|
|
Loading…
Reference in New Issue
Block a user