react-intl#IntlShape TypeScript Examples

function getDisplayedName(entity: EntityInstance, intl: IntlShape): string {
  if (entity._instanceName != null) {
    return entity._instanceName;
  }

  if (entity.id != null && !isTempId(toIdString(entity.id))) {
    return toIdString(entity.id);
  }

  return intl.formatMessage({id: 'common.unsavedEntity'});
}

function restoreEntitesHandler(
  {restoreEntities}: RestoreData, 
  intl: IntlShape,
  onCompleteCallback?: () => Promise<any>
): void {

  if(restoreEntities === 0) {
    notifications.show({
      type: NotificationType.ERROR,
      description: intl.formatMessage({ id: "addons.DataTools.restoreEntitiesZeroResult" })
    });
    return;
  }

  notifications.show({
    type: NotificationType.SUCCESS,
    description: intl.formatMessage({ id: "addons.DataTools.restoreEntities" })
  });

  onCompleteCallback?.();
}

export function constructTitle(entityList: EntityInstance[], intl: IntlShape): string {
  let title = '';

  if (entityList.length > 0) {
    title += getDisplayedName(entityList[0], intl);
  }
  if (entityList.length > 1) {
    title += ', ';
    title += getDisplayedName(entityList[1], intl);
  }
  if (entityList.length > 2) {
    title += intl.formatMessage(
      {id: 'jmix.nestedEntityField.andXMore'},
      {quantity: entityList.length - 2}
    );
  }

  return title;
}

export function showDeleteEntityDialog(
  onConfirm: () => void,
  intl: IntlShape,
  entityInstance?: EntityInstance,
) {
  modals.open({
    content: intl.formatMessage(
      {id: "management.browser.delete.areYouSure"},
      {
        instanceName: entityInstance?._instanceName
          ?? entityInstance?.id
          ?? intl.formatMessage({id: 'common.unsavedEntity'})
      }
    ),
    okText: intl.formatMessage({id: "management.browser.delete.ok"}),
    cancelText: intl.formatMessage({id: "common.cancel"}),
    onOk: onConfirm
  });
}

/**
 * Adds "Validation error in child entity" message on a Composition field
 * if it isn't already there.
 *
 * @param fieldsPartial
 * @param path
 * @param intl
 */
function addChildEntityError(fieldsPartial: FieldData[], path: string, intl: IntlShape) {
  const childErrorMessage = intl.formatMessage({id: 'jmix.form.validation.childError'});

  const fieldName = path.split(/\.|\[/)[0];

  if (!fieldsPartial.some(f => f.name === fieldName)) {
    fieldsPartial.push({
      name: fieldName,
      errors: []
    })
  }

  const fieldIndex = fieldsPartial.findIndex(f => f.name === fieldName);

  if (fieldsPartial[fieldIndex].errors == null) {
    fieldsPartial[fieldIndex].errors = [];
  }

  if (!fieldsPartial[fieldIndex].errors!.some(e => e === childErrorMessage)) {
    fieldsPartial[fieldIndex].errors!.push(childErrorMessage);
  }
}

function constructTitle(entityList: EntityInstance[], intl: IntlShape): string {
  let title = '';

  if (entityList.length > 0) {
    title += getDisplayedName(entityList[0], intl);
  }
  if (entityList.length > 1) {
    title += ', ';
    title += getDisplayedName(entityList[1], intl);
  }
  if (entityList.length > 2) {
    title += intl.formatMessage(
      {id: 'jmix.nestedEntityField.andXMore'},
      {quantity: entityList.length - 2}
    );
  }

  return title;
}

function getDisplayedName(entity: EntityInstance, intl: IntlShape): string {
  if (entity._instanceName != null) {
    return entity._instanceName;
  }

  if (entity.id != null && !isTempId(toIdString(entity.id))) {
    return toIdString(entity.id);
  }

  return intl.formatMessage({id: 'common.unsavedEntity'});
}

export function getDefaultFilterFormItemProps(intl: IntlShape, name: string): FormItemProps {
  return {
    name,
    initialValue: null,
    rules: [
      {
        required: true,
        message: intl.formatMessage({id: 'jmix.dataTable.validation.requiredField'})
      }
    ]
  };
}

validationResultToFieldErrors = (
    invalidFieldRules: Map<string, BeanValidationRule[]>,
    entityName: string,
    intl: IntlShape,
    mainStore: MainStore
): Map<string, string[]> => {
    const result = new Map();

    invalidFieldRules.forEach((v, k) => {
        result.set(k, v.map(x => {
            const id = `antd.form.beanValidation.${x.name.toLowerCase()}`;
            const fieldName = mainStore?.messages?.[`${entityName}.${k}`];
            
            return intl.formatMessage({ id }, {
                ...x,
                name: fieldName
            });
        }))
    })

    return result;
}

useLocale = (): IntlShape & LocaleContextValueType => {
  const intl = useIntl();
  const localeContext = useContext(LocaleContext);

  if (localeContext === undefined) {
    throw new Error('LocaleContext is unavailable, make sure you are using LocaleContextController');
  }

  const locale = useMemo(
    () => ({
      ...intl,
      ...localeContext,
    }),
    [intl, localeContext],
  );

  return locale;
}

constructor(
    private registry: Registry<ITranslation>,
    private langGetter: () => string,
    private langSetter: (lang: string) => void,
    private intl: IntlShape,
  ) {}

intl: IntlShape = createIntl({ locale: "en", messages: {} }, intlCache)

export function reviewScoreTitle(intl: IntlShape, score: number): string {
  const message = intl.formatMessage(reviewScoreMessages[score + 3]);
  return `${message.charAt(0).toUpperCase()}${message.slice(1)} (${reviewScoreSymbols[score + 3]})`;
}

function renderMapperConsentBeatmapsetInput(intl: IntlShape) {
  return (
    consentBeatmapset: IMapperBeatmapsetConsent | null,
    renderRemoveButton: () => ReactNode,
  ) => (
    <div className='box'>
      <table>
        <tbody>
          <tr>
            <td>
              <label htmlFor='beatmapset_id'>
                <FormattedMessage
                  defaultMessage='Beatmapset ID'
                  description='[Mapper consents] Mapper consent editor option'
                />
              </label>
            </td>
            <td>
              <input
                name='beatmapset_id'
                required
                type='number'
                defaultValue={consentBeatmapset?.beatmapset_id}
              />
            </td>
          </tr>
          <tr>
            <td>
              <label htmlFor='consent'>
                <FormattedMessage
                  defaultMessage='Consent'
                  description='[Mapper consents] Mapper consent editor option'
                />
              </label>
            </td>
            <td>
              <select
                name='consent'
                required
                defaultValue={consentBeatmapset == null ? undefined : +consentBeatmapset.consent}
                key={
                  consentBeatmapset == null
                    ? undefined
                    : +consentBeatmapset.consent /* TODO: Workaround for https://github.com/facebook/react/issues/21025 */
                }
              >
                <option hidden value=''>
                  {intl.formatMessage(messages.selectConsent)}
                </option>
                {[true, false].map((consentValue) => (
                  <BoolView key={+consentValue} option value={consentValue} />
                ))}
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <label htmlFor='consent_reason'>
                <FormattedMessage
                  defaultMessage='Reason'
                  description='[Mapper consents] Mapper consent editor option'
                />
              </label>
            </td>
            <td>
              <textarea
                name='consent_reason'
                defaultValue={consentBeatmapset?.consent_reason ?? undefined}
                ref={autoHeightRef}
              />
            </td>
          </tr>
          <tr>
            <td>{renderRemoveButton()}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

function parseLabel(intl: IntlShape, locale?: Locale) {
    if (locale) {
        return locale.label ? intl.formatMessage({ id: locale.label }) : intl.formatDisplayName(locale.lang, { type: 'language' } );
    }
}

defaultAccountName = (accountability: AccountabilityContext, intl: IntlShape) => {
    const accountId = accountability.currentDerivedKey?.accountId || 0
    const number = accountability.currentDerivedKeyAccounts.length
    return intl.formatMessage(
        { id: 'ACCOUNT_GENERATED_NAME' },
        { accountId: accountId + 1, number: number + 1 }
    )
}

intl: IntlShape;

constructor(intl: IntlShape) {
    this.intl = intl;
  }

export function createAntdFormValidationMessages(intl: IntlShape) {
  return {
    default: intl.formatMessage({id: 'antd.form.validation.default'}),
    required: intl.formatMessage({id: 'antd.form.validation.required'}),
    enum: intl.formatMessage({id: 'antd.form.validation.enum'}),
    whitespace: intl.formatMessage({id: 'antd.form.validation.whitespace'}),
    date: {
      format: intl.formatMessage({id: 'antd.form.validation.date.format'}),
      parse: intl.formatMessage({id: 'antd.form.validation.date.parse'}),
      invalid: intl.formatMessage({id: 'antd.form.validation.date.invalid'}),
    },
    types: {
      string: intl.formatMessage({id: 'antd.form.validation.types.string'}),
      method: intl.formatMessage({id: 'antd.form.validation.types.method'}),
      array: intl.formatMessage({id: 'antd.form.validation.types.array'}),
      object: intl.formatMessage({id: 'antd.form.validation.types.object'}),
      number: intl.formatMessage({id: 'antd.form.validation.types.number'}),
      date: intl.formatMessage({id: 'antd.form.validation.types.date'}),
      boolean: intl.formatMessage({id: 'antd.form.validation.types.boolean'}),
      integer: intl.formatMessage({id: 'antd.form.validation.types.integer'}),
      float: intl.formatMessage({id: 'antd.form.validation.types.float'}),
      regexp: intl.formatMessage({id: 'antd.form.validation.types.regexp'}),
      email: intl.formatMessage({id: 'antd.form.validation.types.email'}),
      url: intl.formatMessage({id: 'antd.form.validation.types.url'}),
      hex: intl.formatMessage({id: 'antd.form.validation.types.hex'}),
    },
    string: {
      len: intl.formatMessage({id: 'antd.form.validation.string.len'}),
      min: intl.formatMessage({id: 'antd.form.validation.string.min'}),
      max: intl.formatMessage({id: 'antd.form.validation.string.max'}),
      range: intl.formatMessage({id: 'antd.form.validation.string.range'}),
    },
    number: {
      len: intl.formatMessage({id: 'antd.form.validation.number.len'}),
      min: intl.formatMessage({id: 'antd.form.validation.number.min'}),
      max: intl.formatMessage({id: 'antd.form.validation.number.max'}),
      range: intl.formatMessage({id: 'antd.form.validation.number.range'}),
    },
    array: {
      len: intl.formatMessage({id: 'antd.form.validation.array.len'}),
      min: intl.formatMessage({id: 'antd.form.validation.array.min'}),
      max: intl.formatMessage({id: 'antd.form.validation.array.max'}),
      range: intl.formatMessage({id: 'antd.form.validation.array.range'}),
    },
    pattern: {
      mismatch: intl.formatMessage({id: 'antd.form.validation.pattern.mismatch'}),
    },
  };
}

export function useDeleteBtnCallback<
  TEntity = unknown,
  TData extends Record<string, any> = Record<string, any>,
  TVariables extends HasId = HasId
>(
  intl: IntlShape,
  executeDeleteMutation: GraphQLMutationFn<TData, TVariables>,
  queryName: string,
  selectedEntityId?: string,
  items?: Array<EntityInstance<TEntity>>,
  entityList?: Array<EntityInstance<TEntity>>,
  onEntityListChange?: (entityList: Array<EntityInstance<TEntity>>) => void,
  onEntityDelete?: (onConfirm: () => void, entityInstance?: EntityInstance) => void
) {
  return useCallback(
    (_event?: React.MouseEvent, entityId: string | undefined = selectedEntityId) => {
      if (entityId != null && items != null) {
        const entityInstance = getEntityInstanceById(entityId, items);

        let onConfirm: () => void;

        if (entityList != null && onEntityListChange != null) {
          onConfirm = () => {
            onEntityListChange(
              entityList.filter(entity => entity.id !== entityId)
            );
          };
        } else {
          onConfirm = defaultOnConfirm(entityInstance as EntityInstance<TEntity, HasId>, executeDeleteMutation, queryName);
        }

        onEntityDelete ? onEntityDelete(onConfirm, entityInstance) : onConfirm();
      }
    },
    [
      selectedEntityId,
      items,
      entityList,
      onEntityListChange,
      executeDeleteMutation,
      queryName,
      intl,
    ]
  );
}

i18n: IntlShape | undefined

function restoreEntitesErrorHandler(errorMessage: string, intl: IntlShape) {
  notifications.show({
    type: NotificationType.ERROR,
    description: intl.formatMessage({ id: "addons.DataTools.restoreEntitiesError"}, {errorMessage})
  });
}