@selfcommunity/react-ui 0.7.0-alpha.36 → 0.7.0-alpha.361

package/lib/esm/components/Composer/Attributes/Attributes.d.ts

@@ -0,0 +1,22 @@
+import { BoxProps } from '@mui/material';
+import { ComposerContentType } from '../../../types/composer';
+export interface AttributesProps extends Omit<BoxProps, 'value' | 'onChange' | 'onClick'> {
+    /**
+     * Value of the component
+     */
+    value?: Omit<ComposerContentType, 'title' | 'html'> | null;
+    /**
+     * Callback for change event on attributes object
+     * @param value
+     * @default empty object
+     */
+    onChange?: (value: Omit<ComposerContentType, 'title' | 'html'>) => void;
+    /**
+     * Callback for click event on single attribute
+     * @param value
+     * @default empty object
+     */
+    onClick?: (attribute: 'categories' | 'addressing' | 'location') => void;
+}
+declare const _default: (props: AttributesProps) => JSX.Element;
+export default _default;

package/lib/esm/components/Composer/Attributes/Attributes.js

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { Box, Chip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Icon from '@mui/material/Icon';
+import classNames from 'classnames';
+import TagChip from '../../../shared/TagChip';
+import { PREFIX } from '../constants';
+const classes = {
+    root: `${PREFIX}-attributes-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'AttributesRoot'
+})(() => ({}));
+export default (props) => {
+    var _a, _b;
+    // PROPS
+    const { className = null, value = null, onChange = null, onClick = null } = props;
+    // HANDLERS
+    const handleDeleteCategory = useCallback((id) => () => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { categories: value.categories.filter((cat) => cat.id !== id) }));
+    }, [value, onChange]);
+    const handleClickCategory = useCallback(() => {
+        onClick && onClick('categories');
+    }, [onClick]);
+    const handleDeleteTag = useCallback((id) => () => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { addressing: value.addressing.filter((tag) => tag.id !== id) }));
+    }, [value, onChange]);
+    const handleClickTag = useCallback(() => {
+        onClick && onClick('addressing');
+    }, [onClick]);
+    const handleDeleteLocation = useCallback(() => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { location: null }));
+    }, [value, onChange]);
+    const handleClickLocation = useCallback(() => {
+        onClick && onClick('location');
+    }, [onClick]);
+    return (React.createElement(Root, { className: classNames(classes.root, className) },
+        ((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            (value === null || value === void 0 ? void 0 : value.categories.map((c) => (React.createElement(Chip, { key: c.id, label: c.name, onDelete: handleDeleteCategory(c.id), icon: React.createElement(Icon, null, "category"), onClick: handleClickCategory })))),
+        ((_b = value === null || value === void 0 ? void 0 : value.addressing) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+            (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (React.createElement(TagChip, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: React.createElement(Icon, null, "label"), onClick: handleClickTag })))),
+        (value === null || value === void 0 ? void 0 : value.location) && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))));
+};

package/lib/esm/components/Composer/Attributes/index.d.ts

@@ -0,0 +1,3 @@
+import Attributes, { AttributesProps } from './Attributes';
+export default Attributes;
+export { AttributesProps };

package/lib/esm/components/Composer/Attributes/index.js

@@ -0,0 +1,2 @@
+import Attributes from './Attributes';
+export default Attributes;

package/lib/esm/components/Composer/Composer.d.ts

@@ -1,72 +1,73 @@
-import React, { SyntheticEvent } from 'react';
-import { SCFeedDiscussionType, SCFeedObjectTypologyType, SCFeedPostType, SCFeedStatusType, SCMediaType, SCPollType, SCCategoryType, SCTagType } from '@selfcommunity/types';
+import { SyntheticEvent } from 'react';
+import { SCCategoryType, SCContributionType, SCFeedDiscussionType, SCFeedPostType, SCFeedStatusType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
 import { DialogProps } from '@mui/material';
+import { EditorProps } from '../Editor';
 import { SCMediaObjectType } from '../../types/media';
-import { DistributiveOmit } from '@mui/types';
-import { OverrideProps } from '@mui/material/OverridableComponent';
-export interface ComposerTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & DistributiveOmit<DialogProps, 'defaultValue'> & {
-        /**
-         * Id of feed object
-         * @default null
-         */
-        feedObjectId?: number;
-        /**
-         * Type of feed object
-         * @default null
-         */
-        feedObjectType?: SCFeedObjectTypologyType;
-        /**
-         * Feed object
-         * @default null
-         */
-        feedObject?: SCFeedDiscussionType | SCFeedPostType | SCFeedStatusType | null;
-        /**
-         * Initialization Data for the Composer, this is a hook to generate custom posts
-         * @default null
-         */
-        defaultValue?: {
-            title?: string;
-            text?: string;
-            categories?: SCCategoryType[];
-            audience?: string;
-            addressing?: SCTagType[];
-            medias?: SCMediaType[];
-            poll?: SCPollType;
-            location?: string;
-        };
-        /**
-         * Initial view to render
-         * @default 'main'
-         */
-        view?: string;
-        /**
-         * Media objects available
-         * @default Image, Document, Link
-         */
-        mediaObjectTypes?: SCMediaObjectType[];
-        /**
-         * Callback triggered on success contribution creation
-         * @default null
-         */
-        onSuccess?: (res: any) => void;
-        /**
-         * Callback triggered on close click
-         * @default null
-         */
-        onClose?: (event: SyntheticEvent) => void;
+export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scroll'> {
+    /**
+     * Id of feed object
+     * @default null
+     */
+    feedObjectId?: number;
+    /**
+     * Type of feed object
+     * @default null
+     */
+    feedObjectType?: Exclude<SCContributionType, SCContributionType.COMMENT>;
+    /**
+     * Feed object
+     * @default null
+     */
+    feedObject?: SCFeedDiscussionType | SCFeedPostType | SCFeedStatusType | null;
+    /**
+     * Initialization Data for the Composer, this is a hook to generate custom posts
+     * @default null
+     */
+    defaultValue?: {
+        title?: string;
+        text?: string;
+        categories?: SCCategoryType[];
+        audience?: string;
+        addressing?: SCTagType[];
+        medias?: SCMediaType[];
+        poll?: SCPollType;
+        location?: string;
     };
-    defaultComponent: D;
+    /**
+     * Media objects available
+     * @default File, Document, Link
+     */
+    mediaObjectTypes?: SCMediaObjectType[];
+    /**
+     * Editor props
+     * @default {}
+     */
+    EditorProps?: Omit<EditorProps, 'onFocus'>;
+    /**
+     * Callback triggered on success contribution creation
+     * @default null
+     */
+    onSuccess?: (res: any) => void;
+    /**
+     * Callback triggered on close click
+     * @default null
+     */
+    onClose?: (event: SyntheticEvent) => void;
 }
-export declare type ComposerProps<D extends React.ElementType = ComposerTypeMap['defaultComponent'], P = {}> = OverrideProps<ComposerTypeMap<P, D>, D>;
-export declare const MAIN_VIEW = "main";
-export declare const AUDIENCE_VIEW = "audience";
-export declare const POLL_VIEW = "poll";
-export declare const LOCATION_VIEW = "location";
 /**
- > 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](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ * > 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](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_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](https://bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/)
+ :::
+
  #### Import
  ```jsx
  import {Composer} from '@selfcommunity/react-ui';
@@ -79,29 +80,16 @@ export declare const LOCATION_VIEW = "location";
  |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.|
- |avatar|.SCComposer-avatar|Styles applied to the avatar element.|
  |content|.SCComposer-content|Styles applied to the content.|
- |mediaContent|.SCComposer-mediaContent|Styles applied to the media content.|
- |audienceContent|.SCComposer-audienceContent|Styles applied to the audience content.|
- |locationContent|.SCComposer-locationContent|Styles applied to the location content.|
- |block|.SCComposer-block|Styles applied to the block element.|
- |editor|.SCComposer-editor|Styles applied to the editor element.|
- |divider|.SCComposer-divider|Styles applied to the divider element.|
+ |attributes|.SCComposer-attributes|Styles applied to the attributes.|
  |medias|.SCComposer-medias|Styles applied to the medias.|
- |location|.SCComposer-location|Styles applied to the location element.|
- |audience|.SCComposer-audience|Styles applied to the audience element.|
- |mediasActions|.SCComposer-mediasActions|Styles applied to the medias actions section.|
- |sortableMedia|.SCComposer-sortableMedia|Styles applied to the sortable media element.|
- |sortableMediaCover|.SCComposer-sortableMediaCover|Styles applied to the sortable media cover element.|
- |links|.SCComposer-links|Styles applied to the links element.|
  |actions|.SCComposer-actions|Styles applied to the actions section.|
- |actionInput|.SCComposer-actionInput|Styles applied to the action input element.|
- |badgeError|.SCComposer-badgeError|Styles applied to the badge error element.|
+ |layerTransitionRoot|.SCComposer-layer-transition-root|Styles applied to the overlay layers (eg. location).|
 
 
  * @param inProps
  */
 export default function Composer(inProps: ComposerProps): JSX.Element;
-//# sourceMappingURL=Composer.d.ts.map