setIsChangingType( true ) }
@@ -443,13 +489,13 @@ export default function FieldActionsMenu( {
{ dependentRollups.length === 1
? __(
- 'This will also delete 1 rollup that depends on it:',
+ 'This also deletes 1 rollup that uses it:',
'cortext'
)
: sprintf(
/* translators: %d: number of dependent rollup fields */
__(
- 'This will also delete %d rollups that depend on it:',
+ 'This also deletes %d rollups that use it:',
'cortext'
),
dependentRollups.length
@@ -459,6 +505,26 @@ export default function FieldActionsMenu( {
.join( ', ' ) }
) : null }
+ { dependentFormulas.length > 0 ? (
+
+ { dependentFormulas.length === 1
+ ? __(
+ 'This also deletes 1 formula that uses it:',
+ 'cortext'
+ )
+ : sprintf(
+ /* translators: %d: number of dependent formula fields */
+ __(
+ 'This also deletes %d formulas that use it:',
+ 'cortext'
+ ),
+ dependentFormulas.length
+ ) }{ ' ' }
+ { dependentFormulas
+ .map( ( candidate ) => candidate.label )
+ .join( ', ' ) }
+
+ ) : null }
) : null }
{ isEditingOptions && supportsOptions ? (
@@ -481,6 +547,38 @@ export default function FieldActionsMenu( {
/>
) : null }
+ { isEditingFormula && supportsFormula ? (
+ setIsEditingFormula( false ) }
+ focusOnMount="firstElement"
+ className="cortext-formula-popover-host"
+ >
+
+ setIsEditingFormula( false ) }
+ onError={ setFormulaError }
+ onSubmit={ async ( expression ) => {
+ setFormulaError( '' );
+ await updateFormula.run( recordId, expression );
+ setIsEditingFormula( false );
+ onRowsChanged?.();
+ } }
+ />
+
+
+ ) : null }
{ isEditingSettings ? (
', '<', '>=', '<=' ];
+const AUTOCOMPLETE_CONTROL_KEYS = new Set( [
+ 'ArrowDown',
+ 'ArrowUp',
+ 'Enter',
+ 'Tab',
+ 'Escape',
+] );
+const FUNCTIONS = [
+ 'concat()',
+ 'length()',
+ 'upper()',
+ 'lower()',
+ 'contains()',
+ 'if()',
+ 'now()',
+ 'dateBetween()',
+ 'formatDate()',
+];
+
+const FUNCTION_COMPLETIONS = [
+ {
+ label: 'field',
+ signature: 'field("Name")',
+ insertText: 'field("")',
+ caretOffset: 'field("'.length,
+ type: 'field',
+ description: __( 'Use a value from this row.', 'cortext' ),
+ },
+ {
+ label: 'prop',
+ signature: 'prop("Name")',
+ insertText: 'prop("")',
+ caretOffset: 'prop("'.length,
+ type: 'alias',
+ description: __( 'Works the same as field().', 'cortext' ),
+ },
+ {
+ label: 'concat',
+ signature: 'concat(value, ...)',
+ insertText: 'concat()',
+ caretOffset: 'concat('.length,
+ type: 'text',
+ description: __( 'Join values.', 'cortext' ),
+ },
+ {
+ label: 'length',
+ signature: 'length(text)',
+ insertText: 'length()',
+ caretOffset: 'length('.length,
+ type: 'number',
+ description: __( 'Count characters.', 'cortext' ),
+ },
+ {
+ label: 'upper',
+ signature: 'upper(text)',
+ insertText: 'upper()',
+ caretOffset: 'upper('.length,
+ type: 'text',
+ description: __( 'Make text uppercase.', 'cortext' ),
+ },
+ {
+ label: 'lower',
+ signature: 'lower(text)',
+ insertText: 'lower()',
+ caretOffset: 'lower('.length,
+ type: 'text',
+ description: __( 'Make text lowercase.', 'cortext' ),
+ },
+ {
+ label: 'contains',
+ signature: 'contains(text, search)',
+ insertText: 'contains(, )',
+ caretOffset: 'contains('.length,
+ type: 'checkbox',
+ description: __( 'Check whether text contains a match.', 'cortext' ),
+ },
+ {
+ label: 'if',
+ signature: 'if(condition, then, else)',
+ insertText: 'if(, , )',
+ caretOffset: 'if('.length,
+ type: 'same type',
+ description: __( 'Choose one of two values.', 'cortext' ),
+ },
+ {
+ label: 'now',
+ signature: 'now()',
+ insertText: 'now()',
+ caretOffset: 'now()'.length,
+ type: 'datetime',
+ description: __( 'Current date and time.', 'cortext' ),
+ },
+ {
+ label: 'dateBetween',
+ signature: 'dateBetween(a, b, "days")',
+ insertText: 'dateBetween(, , "days")',
+ caretOffset: 'dateBetween('.length,
+ type: 'number',
+ description: __( 'Difference between two dates.', 'cortext' ),
+ },
+ {
+ label: 'formatDate',
+ signature: 'formatDate(date, format)',
+ insertText: 'formatDate(, "YYYY-MM-DD")',
+ caretOffset: 'formatDate('.length,
+ type: 'text',
+ description: __( 'Format a date as text.', 'cortext' ),
+ },
+];
+
+const HIGHLIGHT_FUNCTIONS = new Set( [
+ 'field',
+ 'prop',
+ 'concat',
+ 'length',
+ 'upper',
+ 'lower',
+ 'contains',
+ 'if',
+ 'now',
+ 'datebetween',
+ 'formatdate',
+] );
+
+function isNameStart( char ) {
+ return /[A-Za-z_]/.test( char );
+}
+
+function isNamePart( char ) {
+ return /[A-Za-z0-9_]/.test( char );
+}
+
+function formulaTokens( value ) {
+ const tokens = [];
+ let index = 0;
+
+ while ( index < value.length ) {
+ const char = value[ index ];
+ const next = value[ index + 1 ] ?? '';
+
+ if ( /\s/.test( char ) ) {
+ const start = index;
+ while ( index < value.length && /\s/.test( value[ index ] ) ) {
+ index += 1;
+ }
+ tokens.push( { text: value.slice( start, index ), type: 'plain' } );
+ continue;
+ }
+
+ if ( char === '"' ) {
+ const start = index;
+ index += 1;
+ while ( index < value.length ) {
+ if ( value[ index ] === '\\' ) {
+ index += 2;
+ continue;
+ }
+ if ( value[ index ] === '"' ) {
+ index += 1;
+ break;
+ }
+ index += 1;
+ }
+ tokens.push( {
+ text: value.slice( start, index ),
+ type: /(?:field|prop)\s*\(\s*$/i.test( value.slice( 0, start ) )
+ ? 'field'
+ : 'string',
+ } );
+ continue;
+ }
+
+ if ( /\d/.test( char ) || ( char === '.' && /\d/.test( next ) ) ) {
+ const start = index;
+ let hasDot = false;
+ while ( index < value.length ) {
+ const current = value[ index ];
+ if ( current === '.' ) {
+ if ( hasDot ) {
+ break;
+ }
+ hasDot = true;
+ index += 1;
+ continue;
+ }
+ if ( ! /\d/.test( current ) ) {
+ break;
+ }
+ index += 1;
+ }
+ tokens.push( {
+ text: value.slice( start, index ),
+ type: 'number',
+ } );
+ continue;
+ }
+
+ if ( isNameStart( char ) ) {
+ const start = index;
+ index += 1;
+ while ( index < value.length && isNamePart( value[ index ] ) ) {
+ index += 1;
+ }
+ const text = value.slice( start, index );
+ const lower = text.toLowerCase();
+ let lookahead = index;
+ while ( /\s/.test( value[ lookahead ] ?? '' ) ) {
+ lookahead += 1;
+ }
+ const isFunction =
+ value[ lookahead ] === '(' && HIGHLIGHT_FUNCTIONS.has( lower );
+ let type = 'unknown';
+ if ( lower === 'true' || lower === 'false' ) {
+ type = 'boolean';
+ } else if ( isFunction ) {
+ type = 'function';
+ }
+ tokens.push( { text, type } );
+ continue;
+ }
+
+ const two = char + next;
+ if ( [ '==', '!=', '>=', '<=' ].includes( two ) ) {
+ tokens.push( { text: two, type: 'operator' } );
+ index += 2;
+ continue;
+ }
+
+ if ( [ '+', '-', '*', '/', '=', '>', '<' ].includes( char ) ) {
+ tokens.push( { text: char, type: 'operator' } );
+ index += 1;
+ continue;
+ }
+
+ if ( [ '(', ')', ',' ].includes( char ) ) {
+ tokens.push( { text: char, type: 'punctuation' } );
+ index += 1;
+ continue;
+ }
+
+ tokens.push( { text: char, type: 'unknown' } );
+ index += 1;
+ }
+
+ if ( value.endsWith( '\n' ) ) {
+ tokens.push( { text: ' ', type: 'plain' } );
+ }
+
+ return tokens;
+}
+
+function isInsideString( value, caret ) {
+ let inString = false;
+ for ( let index = 0; index < caret; index += 1 ) {
+ const char = value[ index ];
+ if ( char === '\\' ) {
+ index += 1;
+ continue;
+ }
+ if ( char === '"' ) {
+ inString = ! inString;
+ }
+ }
+ return inString;
+}
+
+function formulaAutocomplete( value, caret ) {
+ const before = value.slice( 0, caret );
+ const fieldMatch = before.match( /(?:field|prop)\s*\(\s*"([^"]*)$/i );
+ if ( fieldMatch ) {
+ return {
+ kind: 'field',
+ start: caret - fieldMatch[ 1 ].length,
+ end: caret,
+ query: fieldMatch[ 1 ],
+ };
+ }
+
+ if ( isInsideString( value, caret ) ) {
+ return null;
+ }
+
+ const functionMatch = before.match(
+ /(^|[^A-Za-z0-9_])([A-Za-z_][A-Za-z0-9_]*)$/
+ );
+ if ( ! functionMatch ) {
+ return null;
+ }
+
+ return {
+ kind: 'function',
+ start: caret - functionMatch[ 2 ].length,
+ end: caret,
+ query: functionMatch[ 2 ],
+ };
+}
+
+function escapePropName( name ) {
+ return name.replaceAll( '\\', '\\\\' ).replaceAll( '"', '\\"' );
+}
+
+function uniqueProperties( fields, excludeRecordId ) {
+ const options = [ ...SYSTEM_FIELDS ];
+ const seen = new Set( options.map( ( option ) => option.label ) );
+ fields.forEach( ( field ) => {
+ if (
+ field.recordId === excludeRecordId ||
+ ! field.label ||
+ UNSUPPORTED_FIELD_REF_TYPES.has( field.cortextType )
+ ) {
+ return;
+ }
+ if ( seen.has( field.label ) ) {
+ return;
+ }
+ seen.add( field.label );
+ options.push( {
+ label: field.label,
+ type: field.formulaResultType ?? field.cortextType ?? 'text',
+ } );
+ } );
+ return options;
+}
+
+export default function FormulaConfig( {
+ initialExpression = '',
+ isBusy = false,
+ onBack,
+ onError,
+ onSubmit,
+ errorMessage = '',
+ submitLabel = __( 'Create formula', 'cortext' ),
+ backLabel = __( 'Back', 'cortext' ),
+ excludeRecordId,
+} ) {
+ const textareaRef = useRef( null );
+ const editorId = useRef(
+ `cortext-formula-expression-${ Math.random()
+ .toString( 36 )
+ .slice( 2 ) }`
+ );
+ const { fields } = useCollectionFieldsContext();
+ const [ expression, setExpression ] = useState( initialExpression );
+ const [ activeMatch, setActiveMatch ] = useState( null );
+ const [ activeIndex, setActiveIndex ] = useState( 0 );
+ const [ editorScroll, setEditorScroll ] = useState( {
+ left: 0,
+ top: 0,
+ } );
+ const [ isReferenceOpen, setIsReferenceOpen ] = useState( false );
+
+ const properties = useMemo(
+ () => uniqueProperties( fields, excludeRecordId ),
+ [ fields, excludeRecordId ]
+ );
+ const highlightedTokens = useMemo(
+ () => formulaTokens( expression ),
+ [ expression ]
+ );
+ const suggestions = useMemo( () => {
+ if ( ! activeMatch ) {
+ return [];
+ }
+ const needle = activeMatch.query.toLowerCase();
+ if ( activeMatch.kind === 'function' ) {
+ return FUNCTION_COMPLETIONS.filter( ( completion ) =>
+ `${ completion.label } ${ completion.signature }`
+ .toLowerCase()
+ .includes( needle )
+ )
+ .slice( 0, 8 )
+ .map( ( completion ) => ( {
+ ...completion,
+ kind: 'function',
+ } ) );
+ }
+ return properties
+ .filter( ( property ) =>
+ property.label.toLowerCase().includes( needle )
+ )
+ .slice( 0, 8 )
+ .map( ( property ) => ( {
+ ...property,
+ kind: 'field',
+ } ) );
+ }, [ activeMatch, properties ] );
+
+ const syncAutocomplete = ( nextValue, nextCaret ) => {
+ const match = formulaAutocomplete( nextValue, nextCaret );
+ setActiveMatch( match );
+ setActiveIndex( 0 );
+ };
+
+ const selectSuggestion = ( suggestion ) => {
+ if ( ! activeMatch || ! suggestion ) {
+ return;
+ }
+
+ let insertText;
+ let nextCaret;
+ if ( suggestion.kind === 'function' ) {
+ insertText = suggestion.insertText;
+ nextCaret = activeMatch.start + suggestion.caretOffset;
+ } else {
+ const escaped = escapePropName( suggestion.label );
+ const hasClosingSuffix = expression
+ .slice( activeMatch.end )
+ .startsWith( '")' );
+ const suffix = hasClosingSuffix ? '' : '")';
+ insertText = escaped + suffix;
+ nextCaret =
+ activeMatch.start +
+ escaped.length +
+ ( hasClosingSuffix ? 2 : suffix.length );
+ }
+
+ const next =
+ expression.slice( 0, activeMatch.start ) +
+ insertText +
+ expression.slice( activeMatch.end );
+ setExpression( next );
+ syncAutocomplete( next, nextCaret );
+ window.requestAnimationFrame( () => {
+ textareaRef.current?.setSelectionRange( nextCaret, nextCaret );
+ textareaRef.current?.focus();
+ } );
+ };
+
+ const submit = async () => {
+ if ( isBusy ) {
+ return;
+ }
+ if ( ! expression.trim() ) {
+ onError?.( __( 'Enter a formula.', 'cortext' ) );
+ return;
+ }
+ try {
+ await onSubmit( expression.trim() );
+ } catch ( apiError ) {
+ onError?.(
+ apiError?.message ||
+ __( "We couldn't save the formula.", 'cortext' )
+ );
+ }
+ };
+
+ return (
+
+ { errorMessage ? (
+
+ { errorMessage }
+
+ ) : null }
+
+
+
+
+
+
+
+
+ { highlightedTokens.map( ( token, index ) => (
+
+ { token.text }
+
+ ) ) }
+
+
+