How to use the jsonforms-core.rankWith function in jsonforms-core

registerStartupRenderer,
  resolveData,
  resolveSchema,
  toDataPathSegments,
  uiTypeIs,
  update
} from 'jsonforms-core';
import {connect} from 'react-redux';
import {SyntheticEvent} from "react";

/**
 * Default tester for a master-detail layout.
 * @type {RankedTester}
 */
export const treeMasterDetailTester: RankedTester =
  rankWith(
    2,
    and(
      uiTypeIs('MasterDetailLayout'),
      uischema => {
        const control = uischema as MasterDetailLayout;
        if (control.scope === undefined || control.scope === null) {
          return false;
        }

        return !(control.scope.$ref === undefined || control.scope.$ref === null);
      }
    ));

const isNotTuple = (schema: JsonSchema) => !Array.isArray(schema.items);

export interface TreeMasterDetailState extends ControlState {

className={classNames.input}
          id={id}
          hidden={!visible}
          disabled={!enabled}
          autoFocus={uischema.options && uischema.options.focus}
        />
        <label data-error="{errors}">
          {label}
        </label>
      
    );
  }
}

export default registerStartupRenderer(
  rankWith(1, isMultiLineControl),
  connect(mapStateToControlProps)(MaterializedTextareaControl)
);

id={id}
               hidden={!visible}
               disabled={!enabled}
               autoFocus={uischema.options && uischema.options.focus}
        />
        <label data-error="{errors}"> this.handleChange(!this.state.value)}&gt;
          {label}
        </label>
      
    );
  }
}

export default registerStartupRenderer(
  rankWith(2, isBooleanControl),
  connect(mapStateToControlProps)(MaterializedBooleanControl)
);

className={classNames.input}
               id={id}
               hidden={!visible}
               disabled={!enabled}
               autoFocus={uischema.options && uischema.options.focus}
        />
        <label data-error="{errors}">
          {label}
        </label>
      
    );
  }
}

export default registerStartupRenderer(
  rankWith(2, isControl),
  connect(mapStateToControlProps)(MaterializedTextControl)
);

className={classNames.input}
               id={id}
               hidden={!visible}
               disabled={!enabled}
               autoFocus={uischema.options && uischema.options.focus}
        />
        <label data-error="{errors}">
          {label}
        </label>
      
    );
  }
}

export default registerStartupRenderer(
  rankWith(2, isDateControl),
  connect(mapStateToControlProps)(DateControl)
);

);
                })
            )
          }
        
        <label data-error="{errors}">
          {label}
        </label>
      
    );
  }
}

export default registerStartupRenderer(
  rankWith(2, isEnumControl),
  connect(mapStateToControlProps)(MaterializedEnumControl)
);

path={path}
            />
          )
      )
    }
  
);

const isCategorization = (category: Category | Categorization): category is Categorization =>
  category.type === 'Categorization';

/**
 * Default tester for a categorization.
 * @type {RankedTester}
 */
export const categorizationTester: RankedTester = rankWith(
        1,
        and(
            uiTypeIs('Categorization'),
            uischema => {
              const hasCategory = (element: Categorization): boolean => {
                if (_.isEmpty(element.elements)) {
                  return false;
                }

                return element.elements
                    .map(elem => isCategorization(elem) ?
                        hasCategory(elem) :
                        elem.type === 'Category'
                    )
                    .reduce((prev, curr) => prev && curr, true);
              };

className={classNames.input}
               id={id}
               hidden={!visible}
               disabled={!enabled}
               autoFocus={uischema.options && uischema.options.focus}
        />
        <label data-error="{errors}">
          {label}
        </label>
      
    );
  }
}

export default registerStartupRenderer(
  rankWith(2, isIntegerControl),
  connect(mapStateToControlProps)(MaterializedIntegerControl)
);

className={classNames.input}
               id={id}
               hidden={!visible}
               disabled={!enabled}
               autoFocus={uischema.options && uischema.options.focus}
        />
        <label data-error="{errors}">
          {label}
        </label>
      
    );
  }
}

export default registerStartupRenderer(
  rankWith(2, isNumberControl),
  connect(mapStateToControlProps)(NumberControl)
);