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

Update the Expression widget to support the 'Show Your Work' hackathon project #1768

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
+115 −70
Draft

Update the Expression widget to support the 'Show Your Work' hackathon project #1768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b2149d3
Update the Expression widget to support the 'Show Your Work' hackatho…
kevinb-khan Oct 20, 2024
0b4334e
Feed 'disabled' prop through to MathInput
kevinb-khan Oct 20, 2024
2fb2147
Feed 'noBackground' prop through to MathInput
kevinb-khan Oct 20, 2024
d072b86
Add 'noWrapper' prop to Expression widget
kevinb-khan Oct 20, 2024
6da54c3
If props.disable is true, don't allow the input field to be focused
kevinb-khan Oct 25, 2024
ddfdda4
Merge remote-tracking branch 'origin/main' into expr-widget-hackathon
kevinb-khan Oct 25, 2024
520b449
add changeset file
kevinb-khan Oct 25, 2024
6b285b5
also prevent MathInput from gaining focus when disabled
kevinb-khan Oct 25, 2024
b8b9f9d
revert focus() method changes and use 'pointer-events: none' to disab…
kevinb-khan Oct 25, 2024
0f3349d
Merge remote-tracking branch 'origin/main' into expr-widget-hackathon
kevinb-khan Nov 1, 2024
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
5 changes: 5 additions & 0 deletions .changeset/chilly-singers-decide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus": patch
---

Add features to support show-your-work widget
157 changes: 90 additions & 67 deletions packages/perseus/src/components/math-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ type Props = {
* - `never` means that the keypad is **never shown**.
*/
buttonsVisible?: ButtonsVisibleType;
disabled?: boolean;
noBackground?: boolean;
onAnalyticsEvent: AnalyticsEventHandlerFn;
};

Expand Down Expand Up @@ -165,6 +167,13 @@ class InnerMathInput extends React.Component<InnerProps, State> {
input?.focus();
};

// TODO(kevinb): Port this to @khanacademy/math-input
setValue = (value: string) => {
const input = this.mathField();
input?.select();
input?.write(value);
};

mathField: () => MathFieldInterface | null = () => {
if (!this.__mathField && this.__mathFieldWrapperRef) {
const {locale} = this.context;
Expand Down Expand Up @@ -301,8 +310,10 @@ class InnerMathInput extends React.Component<InnerProps, State> {
<View
style={[
styles.outerWrapper,
!this.props.noBackground && styles.outerWrapperBackground,
this.state.focused && styles.wrapperFocused,
this.props.hasError && styles.wrapperError,
this.props.disabled && styles.disabled,
]}
>
<div
Expand Down Expand Up @@ -331,73 +342,80 @@ class InnerMathInput extends React.Component<InnerProps, State> {
onFocus={() => this.focus()}
onBlur={() => this.blur()}
/>
<Popover
rootBoundary="document"
opened={this.state.keypadOpen}
onClose={() => this.closeKeypad()}
dismissEnabled
aria-label={this.context.strings.mathInputTitle}
aria-describedby={`popover-content-${popoverContentUniqueId}`}
content={() => (
<>
<HeadingMedium
id={`popover-content-${popoverContentUniqueId}`}
style={a11y.srOnly}
>
{this.context.strings.mathInputDescription}
</HeadingMedium>
<PopoverContentCore
closeButtonVisible
style={styles.popoverContent}
>
<DesktopKeypad
onAnalyticsEvent={
this.props.onAnalyticsEvent
}
extraKeys={this.props.extraKeys}
onClickKey={this.handleKeypadPress}
cursorContext={this.state.cursorContext}
convertDotToTimes={
this.props.convertDotToTimes
{!this.props.disabled && (
<Popover
rootBoundary="document"
opened={this.state.keypadOpen}
onClose={() => this.closeKeypad()}
dismissEnabled
aria-label={this.context.strings.mathInputTitle}
aria-describedby={`popover-content-${popoverContentUniqueId}`}
content={() => (
<>
<HeadingMedium
id={`popover-content-${popoverContentUniqueId}`}
style={a11y.srOnly}
>
{
this.context.strings
.mathInputDescription
}
{...(this.props.keypadButtonSets ??
mapButtonSets(
this.props?.buttonSets,
))}
/>
</PopoverContentCore>
</>
)}
>
{this.props.buttonsVisible === "never" ? (
<MathInputIcon
hovered={false}
focused={false}
active={false}
/>
) : (
<Clickable
aria-label={
this.state.keypadOpen
? this.context.strings.closeKeypad
: this.context.strings.openKeypad
}
role="button"
onClick={() =>
this.state.keypadOpen
? this.closeKeypad()
: this.openKeypad()
}
>
{(props) => (
<MathInputIcon
active={this.state.keypadOpen}
{...props}
/>
)}
</Clickable>
)}
</Popover>
</HeadingMedium>
<PopoverContentCore
closeButtonVisible
style={styles.popoverContent}
>
<DesktopKeypad
onAnalyticsEvent={
this.props.onAnalyticsEvent
}
extraKeys={this.props.extraKeys}
onClickKey={this.handleKeypadPress}
cursorContext={
this.state.cursorContext
}
convertDotToTimes={
this.props.convertDotToTimes
}
{...(this.props.keypadButtonSets ??
mapButtonSets(
this.props?.buttonSets,
))}
/>
</PopoverContentCore>
</>
)}
>
{this.props.buttonsVisible === "never" ? (
<MathInputIcon
hovered={false}
focused={false}
active={false}
/>
) : (
<Clickable
aria-label={
this.state.keypadOpen
? this.context.strings.closeKeypad
: this.context.strings.openKeypad
}
role="button"
onClick={() =>
this.state.keypadOpen
? this.closeKeypad()
: this.openKeypad()
}
>
{(props) => (
<MathInputIcon
active={this.state.keypadOpen}
{...props}
/>
)}
</Clickable>
)}
</Popover>
)}
</div>
</View>
);
Expand Down Expand Up @@ -530,9 +548,11 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderColor: color.offBlack50,
borderRadius: 3,
background: color.white,
":hover": inputFocused,
},
outerWrapperBackground: {
background: color.white,
},
wrapperFocused: inputFocused,
wrapperError: {
borderColor: color.red,
Expand All @@ -546,6 +566,9 @@ const styles = StyleSheet.create({
paddingBottom: spacing.xxSmall_6,
maxWidth: "initial",
},
disabled: {
pointerEvents: "none",
},
});

export default MathInput;
23 changes: 20 additions & 3 deletions packages/perseus/src/widgets/expression/expression.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,9 @@ export type Props = ExternalProps &
visibleLabel: PerseusExpressionWidgetOptions["visibleLabel"];
ariaLabel: PerseusExpressionWidgetOptions["ariaLabel"];
value: string;
disabled?: boolean;
noBackground?: boolean;
noWrapper?: boolean;
};

export type ExpressionState = {
Expand Down Expand Up @@ -110,6 +113,7 @@ export class Expression

_textareaId = `expression_textarea_${Date.now()}`;
_isMounted = false;
_mathInput: React.MutableRefObject<null | MathInput> = React.createRef();

static getUserInputFromProps(props: Props): PerseusExpressionUserInput {
return normalizeTex(props.value);
Expand Down Expand Up @@ -275,6 +279,12 @@ export class Expression
};

setInputValue(path: FocusPath, newValue: string, cb: () => void) {
if (this._mathInput.current) {
const inputRef = this._mathInput.current.inputRef;
if (inputRef.current) {
inputRef.current.setValue(newValue);
}
}
this.props.onChange(
{
value: newValue,
Expand Down Expand Up @@ -329,7 +339,13 @@ export class Expression
const {ERROR_MESSAGE, ERROR_TITLE} = this.context.strings;

return (
<View className={css(styles.desktopLabelInputWrapper)}>
<View
className={
this.props.noWrapper
? undefined
: css(styles.desktopLabelInputWrapper)
}
>
{!!this.props.visibleLabel && (
<LabelSmall htmlFor={this._textareaId} tag="label">
{this.props.visibleLabel}
Expand Down Expand Up @@ -365,13 +381,14 @@ export class Expression
content={ERROR_MESSAGE}
>
<MathInput
// eslint-disable-next-line react/no-string-refs
ref="input"
ref={this._mathInput}
className={ApiClassNames.INTERACTIVE}
value={this.props.value}
onChange={this.changeAndTrack}
convertDotToTimes={this.props.times}
buttonSets={this.props.buttonSets}
disabled={this.props.disabled}
noBackground={this.props.noBackground}
onFocus={this._handleFocus}
onBlur={this._handleBlur}
hasError={this.state.showErrorStyle}
Expand Down
Loading