diff --git a/react/components/Conditions/index.tsx b/react/components/Conditions/index.tsx index 2078e96ee..aa9851ee3 100755 --- a/react/components/Conditions/index.tsx +++ b/react/components/Conditions/index.tsx @@ -10,6 +10,7 @@ import Statement from '../Statement/index' import { Labels, Operator } from './typings' import { DEFAULT_LABELS, MEDIUM_ICON_SIZE } from './constants' import { SubjectOptions } from '../Statement/Atoms/SubjectAtom' +import { StatementProp } from '../Statement/typings' type Props = { canDelete?: boolean @@ -21,16 +22,11 @@ type Props = { operator: Operator options: SubjectOptions hideOperator?: boolean - statements: Array<{ - subject: string - verb: string - object?: unknown - error?: string - }> + statements: StatementProp[] subjectPlaceholder: string } -const Conditions: React.FC = ({ +const Conditions = ({ canDelete, statements, options, @@ -42,8 +38,8 @@ const Conditions: React.FC = ({ operator, onChangeOperator, onChangeStatements, -}) => { - const objectIsEmpty = object => { +}: Props) => { + const objectIsEmpty = (object: unknown) => { if (object === undefined) return true if (object === null) return true if (object === '') return true @@ -73,7 +69,7 @@ const Conditions: React.FC = ({ onChangeStatements([...statements, emptyStatement]) } - const handleRemoveStatement = index => { + const handleRemoveStatement = (index: number) => { const updatedStatements = statements .slice(0, index) .concat(statements.slice(index + 1)) @@ -81,7 +77,10 @@ const Conditions: React.FC = ({ onChangeStatements(updatedStatements) } - const handleUpdatestatement = (newStatement, statementIndex) => { + const handleUpdatestatement = ( + newStatement: StatementProp, + statementIndex: number + ) => { const newStatements = statements.map((statement, idx) => idx === statementIndex ? newStatement : statement ) @@ -95,8 +94,10 @@ const Conditions: React.FC = ({ onChangeOperator(operator)} + labels={labels as Labels} + onChangeOperator={(newOperator: Operator) => + onChangeOperator(newOperator) + } /> )} @@ -136,6 +137,17 @@ const Conditions: React.FC = ({ {} ) + const handleKeyDown = ({ + key, + }: React.KeyboardEvent) => { + const SPACE = ' ' + const ENTER = 'Enter' + + if (key === SPACE || key === ENTER) { + handleRemoveStatement(statementIndex) + } + } + const statementContent = [
= ({ canDelete && (!isFullWidth ? (
handleRemoveStatement(statementIndex)} @@ -167,7 +182,7 @@ const Conditions: React.FC = ({ icon={} onClick={() => handleRemoveStatement(statementIndex)} > - {labels.delete ?? DEFAULT_LABELS.delete} + {labels?.delete ?? DEFAULT_LABELS.delete}
)), @@ -192,8 +207,8 @@ const Conditions: React.FC = ({ )} @@ -213,7 +228,7 @@ const Conditions: React.FC = ({ disabled={!canAddNewCondition()} onClick={handleAddNewCondition} > - {labels.addNewCondition ?? DEFAULT_LABELS.addNewCondition} + {labels?.addNewCondition ?? DEFAULT_LABELS.addNewCondition}
diff --git a/react/components/Statement/index.tsx b/react/components/Statement/index.tsx index 0e03e0382..78197dcd6 100644 --- a/react/components/Statement/index.tsx +++ b/react/components/Statement/index.tsx @@ -1,38 +1,45 @@ import React from 'react' import SubjectAtom, { SubjectOptions } from './Atoms/SubjectAtom' -import VerbAtom from './Atoms/VerbAtom' +import VerbAtom, { VerbOption } from './Atoms/VerbAtom' import ObjectAtom from './Atoms/ObjectAtom' +import { StatementProp } from './typings' -type Props = { +type StatementProps = { isFullWidth?: boolean isRtl?: boolean omitSubject?: boolean omitVerbs?: boolean - onChangeStatement: (statement: Props['statement']) => void + onChangeStatement: (statement: StatementProp) => void options: SubjectOptions - statement?: { - subject: string - verb: string - object?: unknown - error?: string - } + statement?: StatementProp subjectPlaceholder: string } -const Statement: React.FC = ({ +const NoopComponent = () => <> + +const Statement: React.FC = ({ isFullWidth = false, isRtl, omitSubject, omitVerbs, onChangeStatement, options, - statement = { subject: '', verb: '', object: null, error: null }, + statement = { subject: '', verb: '', object: null }, subjectPlaceholder, }) => { - const verbOptions = - statement.subject && - options[statement.subject].verbs.find(verb => verb.value === statement.verb) + let verbOptions: VerbOption = { + label: '', + value: '', + object: NoopComponent, + } + const searchedVerbOption = options[statement.subject].verbs.find( + verb => verb.value === statement.verb + ) + if (statement.subject && searchedVerbOption) { + verbOptions = searchedVerbOption + } + const statementAtoms = [ !omitSubject && ( = ({ ...statement, subject, verb: options[subject].verbs[0].value, - object: null, - error: null, } onChangeStatement(newStatement) }} @@ -62,8 +67,8 @@ const Statement: React.FC = ({ const newStatement = { ...statement, verb, - object: null, - error: null, + object: undefined, + error: undefined, } onChangeStatement(newStatement) }} @@ -76,7 +81,7 @@ const Statement: React.FC = ({ disabled={!statement.verb} error={statement.error} object={statement.object} - onChange={(object, error = null) => { + onChange={(object, error) => { const newStatement = { ...statement, object, diff --git a/react/components/Statement/typings.d.ts b/react/components/Statement/typings.d.ts index b7cd84839..3a2a38c7e 100644 --- a/react/components/Statement/typings.d.ts +++ b/react/components/Statement/typings.d.ts @@ -16,3 +16,10 @@ export type SelectedOption = { group: SelectOptionGroup['label'] option: SelectOption } + +export interface StatementProp { + subject: string + verb: string + object?: unknown + error?: string +} \ No newline at end of file