@selfcommunity/react-ui 0.7.0-alpha.335 → 0.7.0-alpha.337

package/lib/cjs/components/BottomNavigation/BottomNavigation.js

@@ -8,18 +8,19 @@ const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const types_1 = require("@selfcommunity/types");
 const utils_1 = require("@selfcommunity/utils");
+const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
 const PREFIX = 'SCBottomNavigation';
 const classes = {
     root: `${PREFIX}-root`,
     ios: `${PREFIX}-ios`,
-    action: `${PREFIX}-action`
+    action: `${PREFIX}-action`,
+    composer: `${PREFIX}-composer`,
 };
 const Root = (0, material_1.styled)(material_1.BottomNavigation, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
-const PREFERENCES = [react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED, react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY];
 /**
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
  *
@@ -58,22 +59,18 @@ function BottomNavigation(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // PREFERENCES
-    const scPreferences = (0, react_core_1.useSCPreferences)();
-    const preferences = (0, react_1.useMemo)(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
-        return _preferences;
-    }, [scPreferences.preferences]);
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
     // MEMO
-    const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [features]);
     const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // RENDER
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
         ? children
         : [
             react_1.default.createElement(material_1.BottomNavigationAction, { key: "home", className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: react_1.default.createElement(material_1.Icon, null, "home") }),
-            (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) &&
-                preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "explore", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "explore") })) : null,
+            (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "explore", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "explore") })) : null,
+            react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default }),
             scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "notifications", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                     react_1.default.createElement(material_1.Icon, null, "notifications_active")) })) : null,
             privateMessagingEnabled && scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "messages", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: 0, color: "secondary" },

package/lib/cjs/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') => void;
+}
+declare const _default: (props: AttributesProps) => JSX.Element;
+export default _default;

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const TagChip_1 = tslib_1.__importDefault(require("../../../shared/TagChip"));
+const constants_1 = require("../constants");
+const classes = {
+    root: `${constants_1.PREFIX}-attributes-root`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'AttributesRoot'
+})(() => ({}));
+exports.default = (props) => {
+    var _a, _b;
+    // PROPS
+    const { className = null, value = null, onChange = null, onClick = null } = props;
+    // HANDLERS
+    const handleDeleteCategory = (0, react_1.useCallback)((id) => () => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { categories: value.categories.filter((cat) => cat.id !== id) }));
+    }, [value, onChange]);
+    const handleClickCategory = (0, react_1.useCallback)(() => {
+        onClick && onClick('categories');
+    }, [onClick]);
+    const handleDeleteTag = (0, react_1.useCallback)((id) => () => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { addressing: value.addressing.filter((tag) => tag.id !== id) }));
+    }, [value, onChange]);
+    const handleClickTag = (0, react_1.useCallback)(() => {
+        onClick && onClick('addressing');
+    }, [onClick]);
+    return (react_1.default.createElement(Root, { className: (0, classnames_1.default)(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_1.default.createElement(material_1.Chip, { key: c.id, label: c.name, onDelete: handleDeleteCategory(c.id), icon: react_1.default.createElement(Icon_1.default, 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_1.default.createElement(TagChip_1.default, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: react_1.default.createElement(Icon_1.default, null, "label"), onClick: handleClickTag })))),
+        (value === null || value === void 0 ? void 0 : value.location) && (react_1.default.createElement(material_1.Chip, { icon: react_1.default.createElement(Icon_1.default, null, "add_location_alt"), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: () => null, onClick: () => null }))));
+};

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

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

package/lib/cjs/components/Composer/{Poll → Attributes}/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const Poll_1 = tslib_1.__importDefault(require("./Poll"));
-exports.default = Poll_1.default;
+const Attributes_1 = tslib_1.__importDefault(require("./Attributes"));
+exports.default = Attributes_1.default;

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

@@ -1,79 +1,72 @@
-import React, { SyntheticEvent } from 'react';
+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 = any, 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?: 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;
-        };
-        /**
-         * Initial view to render
-         * @default 'main'
-         */
-        view?: string;
-        /**
-         * Media objects available
-         * @default Image, Document, Link
-         */
-        mediaObjectTypes?: SCMediaObjectType[];
-        /**
-         * Editor props
-         * @default {toolbar: false}
-         */
-        EditorProps?: EditorProps;
-        /**
-         * 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 = any> = 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.
+ *
+ *
+ :::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
@@ -87,30 +80,14 @@ export declare const LOCATION_VIEW = "location";
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCComposer-root|Styles applied to the root element.|
- |writing|.SCComposer-writing|Styles applied to the root element when user is writing in the editor.|
+ |ios|.SCComposer-ios|Styles applied to the root element when the device is ios.|
  |title|.SCComposer-title|Styles applied to the title element.|
- |titleDense|.SCComposer-title-dense|Styles applied to the dense 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.|
- |mediaActions|.SCComposer-media-actions|Styles applied to the media actions section.|
- |filterActions|.SCComposer-filter-actions|Styles applied to the filter 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