import { Localized } from "@fluent/react/compat" ; import React , { FunctionComponent , Suspense } from "react" ; import { Field } from "react-final-form" ; import { graphql } from "react-relay" ; import { MarkdownEditor } from "coral-framework/components/loadables" ; import { parseEmptyAsNull } from "coral-framework/lib/form" ; import { FormFieldDescription , Spinner } from "coral-ui/components/v2" ; import ConfigBox from "../../ConfigBox" ; import Header from "../../Header" ; import ValidationMessage from "../../ValidationMessage" ; graphql `
  fragment ClosedStreamMessageConfig_formValues on Settings {
    closeCommenting {
      message
    }
  }
` ; interface Props { disabled : boolean ; } const ClosedStreamMessageConfig = ( { disabled } ) => ( < ConfigBox title = { < Localized id = "configure-general-closedStreamMessage-title" > < Header htmlFor = "configure-general-closedStreamMessage-content" > Closed comment stream message < /Header> < /Localized>}> < Localized id = "configure-general-closedStreamMessage-explanation" strong = { < strong / > } > < FormFieldDescription > Write a message to appear after a story is closed for commenting . < /FormFieldDescription> < /Localized> < Field name = "closeCommenting.message" parse = { parseEmptyAsNull } > { ( { input , meta } ) => ( < > < Suspense fallback = { < Spinner / > } > < MarkdownEditor { ... input } id = "configure-general-closedStreamMessage-content" / > < /Suspense> < ValidationMessage meta = { meta } fullWidth / > < />)} < /Field> < /ConfigBox>); export default ClosedStreamMessageConfig ;