Composer
Interfaces
ComposerProps
Extends
Omit<DialogProps,"defaultValue"|"scroll">
Properties
| Property | Type | Description | Overrides |
|---|---|---|---|
EditorProps? | Omit <EditorProps, "onFocus"> | Editor props Default {} | - |
defaultValue? | object | Initialization Data for the Composer, this is a hook to generate custom posts Default null | - |
defaultValue.addressing? | SCTagType[] | - | - |
defaultValue.audience? | string | - | - |
defaultValue.categories? | SCCategoryType[] | - | - |
defaultValue.event? | SCEventType | - | - |
defaultValue.group? | SCGroupType | - | - |
defaultValue.location? | string | - | - |
defaultValue.medias? | SCMediaType[] | - | - |
defaultValue.poll? | SCPollType | - | - |
defaultValue.text? | string | - | - |
defaultValue.title? | string | - | - |
feedObject? | SCFeedObjectType | SCFeedDiscussionType | SCFeedPostType | Feed object Default null | - |
feedObjectId? | number | Id of feed object Default null | - |
feedObjectType? | DISCUSSION | POST | STATUS | Type of feed object Default null | - |
feedType? | SCFeedTypologyType | The feed where the component is rendered Default SCFeedTypologyType.HOME | - |
mediaObjectTypes? | SCMediaObjectType[] | Media objects available Default File, Document, Link | - |
onClose? | (e: SyntheticEvent<Element, Event>) => void | Callback triggered on close click Default null | Omit.onClose |
onSuccess? | (res: any) => void | Callback triggered on success contribution creation Default null | - |
Functions
Composer()
Composer(
inProps):JSX.Element
API documentation for the Community-JS Composer component. Learn about the available props and the CSS API.
The Composer component contains the logic around the creation of Post and Discussion objects.
info
To prevent the editor toolbar and action botton bar being hidden underneath the Virtual Keyboard you need to set the interactive-widget=resizes-content on meta viewport.
This works on chrome for android.
For iOS devices there is a lack of support of this meta so we force the blur event when the user start dragging.
More information
Import
import {Composer} from '@selfcommunity/react-ui';
Component Name
The name SCComposer can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCComposer-root | Styles applied to the root element. |
| ios | .SCComposer-ios | Styles applied to the root element when the device is ios. |
| title | .SCComposer-title | Styles applied to the title element. |
| types | .SCComposer-types | Styles applied to the types element. |
| content | .SCComposer-content | Styles applied to the content. |
| attributes | .SCComposer-attributes | Styles applied to the attributes. |
| medias | .SCComposer-medias | Styles applied to the medias. |
| actions | .SCComposer-actions | Styles applied to the actions section. |
| layerTransitionRoot | .SCComposer-layer-transition-root | Styles applied to the overlay layers (eg. location). |
Parameters
| Parameter | Type | Description |
|---|---|---|
inProps | ComposerProps |
Returns
JSX.Element