Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "Roll v2 Keypad Onto Desktop Web (#645)" to unblock release while making focus changes #675

Merged
merged 2 commits into from
Aug 17, 2023
Merged

Revert "Roll v2 Keypad Onto Desktop Web (#645)" to unblock release while making focus changes #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26f0703
Revert "Roll v2 Keypad Onto Desktop Web (#645)"
nedredmond Aug 17, 2023
8a52f64
Create five-meals-wink.md
nedredmond Aug 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/five-meals-wink.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
9 changes: 0 additions & 9 deletions .changeset/great-pigs-deny.md
View file
Open in desktop

This file was deleted.

12 changes: 6 additions & 6 deletions packages/perseus-editor/src/widgets/expression-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ class ExpressionEditor extends React.Component<any, any> {

render(): React.ReactNode {
const answerOptions = this.props.answerForms
.map((obj: {form: any; simplify: any; value: any; key: number}) => {
.map((obj, index) => {
const expressionProps = {
// note we're using
// *this.props*.{times,functions,buttonSets} since each
Expand All @@ -112,22 +112,22 @@ class ExpressionEditor extends React.Component<any, any> {
simplify: obj.simplify,
value: obj.value,

onChange: (props) => this.updateForm(obj.key, props),
onChange: (props) => this.updateForm(index, props),
trackInteraction: () => {},

widgetId: this.props.widgetId + "-" + obj.key,
widgetId: this.props.widgetId + "-" + index,
} as const;

return lens(obj)
.merge([], {
draggable: true,
onChange: (props) => this.updateForm(obj.key, props),
onDelete: () => this.handleRemoveForm(obj.key),
onChange: (props) => this.updateForm(index, props),
onDelete: () => this.handleRemoveForm(index),
expressionProps: expressionProps,
})
.freeze();
})
.map((obj) => <AnswerOption key={obj.key} {...obj} />);
.map((obj, index) => <AnswerOption key={index} {...obj} />);

const sortable = (
<SortableArea
Expand Down
25 changes: 25 additions & 0 deletions packages/perseus-editor/src/widgets/interaction-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,15 @@ class PointEditor extends React.Component<PointEditorProps> {
<div className="perseus-widget-row">
Coordinate: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.coordX}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
onChange={this.change("coordX")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.coordY}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand Down Expand Up @@ -141,13 +143,15 @@ class LineEditor extends React.Component<LineEditorProps> {
<div className="perseus-widget-row">
Start: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.startX}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
onChange={this.change("startX")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.startY}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand All @@ -158,13 +162,15 @@ class LineEditor extends React.Component<LineEditorProps> {
<div className="perseus-widget-row">
End: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.endX}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
onChange={this.change("endX")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.endY}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand Down Expand Up @@ -254,12 +260,14 @@ class MovablePointEditor extends React.Component<MovablePointEditorProps> {
<div className="perseus-widget-row">
Start: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.startX}
onChange={this.change("startX")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.startY}
onChange={this.change("startY")}
Expand Down Expand Up @@ -332,12 +340,14 @@ class MovableLineEditor extends React.Component<MovableLineEditorProps> {
<div className="perseus-widget-row">
Start: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.startX}
onChange={this.change("startX")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.startY}
onChange={this.change("startY")}
Expand All @@ -347,12 +357,14 @@ class MovableLineEditor extends React.Component<MovableLineEditorProps> {
<div className="perseus-widget-row">
End: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.endX}
onChange={this.change("endX")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.endY}
onChange={this.change("endY")}
Expand Down Expand Up @@ -428,6 +440,7 @@ class FunctionEditor extends React.Component<FunctionEditorProps> {
<div className="perseus-widget-row">
<TeX>{this.props.funcName + "(x)="}</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.value}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand All @@ -437,13 +450,15 @@ class FunctionEditor extends React.Component<FunctionEditorProps> {
<div className="perseus-widget-row">
Range: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.rangeMin}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
onChange={this.change("rangeMin")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.rangeMax}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand Down Expand Up @@ -526,6 +541,7 @@ class ParametricEditor extends React.Component<ParametricEditorProps> {
<div className="perseus-widget-row">
<TeX>X(t) =</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.x}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand All @@ -535,6 +551,7 @@ class ParametricEditor extends React.Component<ParametricEditorProps> {
<div className="perseus-widget-row">
<TeX>Y(t) =</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.y}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand All @@ -544,13 +561,15 @@ class ParametricEditor extends React.Component<ParametricEditorProps> {
<div className="perseus-widget-row">
Range: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.rangeMin}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
onChange={this.change("rangeMin")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.rangeMax}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand Down Expand Up @@ -638,13 +657,15 @@ class LabelEditor extends React.Component<LabelEditorProps> {
<div className="perseus-widget-row">
Location: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.coordX}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
onChange={this.change("coordX")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.coordY}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand Down Expand Up @@ -705,13 +726,15 @@ class RectangleEditor extends React.Component<RectangleEditorProps> {
<div className="perseus-widget-row">
Bottom left: <TeX>\Large(</TeX>
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.coordX}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
onChange={this.change("coordX")}
/>
<TeX>,</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.coordY}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand All @@ -722,6 +745,7 @@ class RectangleEditor extends React.Component<RectangleEditorProps> {
<div className="perseus-widget-row">
Width:{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.width}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand All @@ -731,6 +755,7 @@ class RectangleEditor extends React.Component<RectangleEditorProps> {
<div className="perseus-widget-row">
Height:{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.height}
// @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
Expand Down
6 changes: 6 additions & 0 deletions packages/perseus-editor/src/widgets/interaction/constraint-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ class ConstraintEditor extends React.Component<Props> {
<div className="perseus-widget-row">
<TeX>x=</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.constraintFn}
onChange={this.change("constraintFn")}
Expand All @@ -88,6 +89,7 @@ class ConstraintEditor extends React.Component<Props> {
<div className="perseus-widget-row">
<TeX>y=</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.constraintFn}
onChange={this.change("constraintFn")}
Expand All @@ -100,12 +102,14 @@ class ConstraintEditor extends React.Component<Props> {
<div className="perseus-widget-row">
<TeX>x \in \Large[</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.constraintXMin}
onChange={this.change("constraintXMin")}
/>
<TeX>, </TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.constraintXMax}
onChange={this.change("constraintXMax")}
Expand All @@ -117,12 +121,14 @@ class ConstraintEditor extends React.Component<Props> {
<div className="perseus-widget-row">
<TeX>y \in \Large[</TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.constraintYMin}
onChange={this.change("constraintYMin")}
/>
<TeX>, </TeX>{" "}
<MathInput
buttonSets={[]}
buttonsVisible="never"
value={this.props.constraintYMax}
onChange={this.change("constraintYMax")}
Expand Down
20 changes: 4 additions & 16 deletions packages/perseus/src/components/__stories__/math-input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,7 @@ export default {
} as Story;

const defaultObject = {
keypadButtonSets: {
advancedRelations: true,
basicRelations: true,
divisionKey: true,
logarithms: true,
preAlgebra: true,
trigonometry: true,
},
buttonSets: ["basic"],
onChange: () => {},
} as const;

Expand All @@ -29,14 +22,9 @@ export const DefaultWithBasicButtonSet = (
): React.ReactElement => {
return <MathInput {...defaultObject} />;
};
export const DefaultWithAriaLabel = (args: StoryArgs): React.ReactElement => {
return <MathInput {...defaultObject} labelText="Sample label" />;
};

export const KeypadOpenByDefault = (args: StoryArgs): React.ReactElement => {
export const AlwaysVisibleButtonSet = (args: StoryArgs): React.ReactElement => {
return <MathInput {...defaultObject} buttonsVisible="always" />;
};

export const KeypadNeverVisible = (args: StoryArgs): React.ReactElement => {
return <MathInput {...defaultObject} buttonsVisible="never" />;
export const DefaultWithAriaLabel = (args: StoryArgs): React.ReactElement => {
return <MathInput {...defaultObject} labelText="Sample label" />;
};
Loading