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

package/lib/esm/shared/Media/Link/TriggerButton.js

@@ -0,0 +1,19 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { IconButton } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import { PREFIX } from './constants';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+const classes = {
+    triggerRoot: `${PREFIX}-trigger-root`
+};
+const Root = styled(IconButton, {
+    name: PREFIX,
+    slot: 'TriggerRoot'
+})(() => ({}));
+export default (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }),
+        React.createElement(Icon, null, "link")));
+};

package/lib/esm/shared/Media/Link/UrlTextField/index.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import React, { useEffect, useState } from 'react';
 import InputAdornment from '@mui/material/InputAdornment';
-import Icon from '@mui/material/Icon';
 import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
-import { http, Endpoints, formatHttpErrorCode } from '@selfcommunity/api-services';
+import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { isValidUrl } from '@selfcommunity/utils';
 import { MEDIA_TYPE_URL } from '../../../../constants/Media';
 import { FormattedMessage } from 'react-intl';
@@ -77,6 +76,6 @@ export default (props) => {
                 (urlError && (React.createElement(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
                 endAdornment: (React.createElement(InputAdornment, { position: "end" },
                     React.createElement(Fade, { in: urlError === null && url !== '' },
-                        React.createElement(IconButton, { size: "small", disabled: isCreating, type: "submit" }, isCreating ? React.createElement(CircularProgress, { color: "primary", size: 20 }) : React.createElement(Icon, null, "play_arrow")))))
+                        React.createElement(IconButton, { size: "small", disabled: isCreating, type: "submit" }, isCreating ? React.createElement(CircularProgress, { color: "primary", size: 20 }) : React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })))))
             } }))));
 };

package/lib/esm/shared/Media/Link/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCMediaLink";

package/lib/esm/shared/Media/Link/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCMediaLink';

package/lib/esm/shared/Media/Link/filter.d.ts

@@ -0,0 +1,3 @@
+import { SCMediaType } from '@selfcommunity/types/src/types';
+declare const _default: (media: SCMediaType) => boolean;
+export default _default;

package/lib/esm/shared/Media/Link/filter.js

@@ -0,0 +1,2 @@
+import { MEDIA_EMBED_SC_LINK_TYPE, MEDIA_TYPE_URL } from '../../../constants/Media';
+export default (media) => media.type === MEDIA_TYPE_URL && media.embed && media.embed.embed_type === MEDIA_EMBED_SC_LINK_TYPE;

package/lib/esm/shared/Media/Link/index.js

@@ -1,13 +1,14 @@
-import React from 'react';
+import DisplayComponent from './DisplayComponent';
+import TriggerButton from './TriggerButton';
+import LayerComponent from './LayerComponent';
 import PreviewComponent from './PreviewComponent';
-import EditButton from './EditButton';
-import EditComponent from './EditComponent';
-import { MEDIA_TYPE_URL, MEDIA_EMBED_SC_LINK_TYPE } from '../../../constants/Media';
+import filter from './filter';
 const Link = {
     name: 'link',
-    previewComponent: (props) => React.createElement(PreviewComponent, Object.assign({}, props)),
-    editButton: (props) => React.createElement(EditButton, Object.assign({}, props)),
-    editComponent: (props) => React.createElement(EditComponent, Object.assign({}, props)),
-    filter: (media) => media.type === MEDIA_TYPE_URL && media.embed && media.embed.embed_type === MEDIA_EMBED_SC_LINK_TYPE
+    displayComponent: DisplayComponent,
+    triggerButton: TriggerButton,
+    layerComponent: LayerComponent,
+    previewComponent: PreviewComponent,
+    filter
 };
 export default Link;

package/lib/esm/shared/Media/Share/DisplayComponent.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { SCMediaType } from '@selfcommunity/types/src/types';
+import { BoxProps } from '@mui/material';
+export interface DisplayComponentProps extends BoxProps {
+    /**
+     * Medias
+     */
+    medias: SCMediaType[];
+}
+declare const _default: ({ className, medias, ...rest }: DisplayComponentProps) => ReactElement;
+export default _default;

package/lib/esm/shared/Media/Share/DisplayComponent.js

@@ -0,0 +1,29 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import FeedObject from '../../../components/FeedObject';
+import { SCFeedObjectTemplateType } from '../../../types/feedObject';
+import { CacheStrategies } from '@selfcommunity/utils';
+import classNames from 'classnames';
+import filter from './filter';
+import { PREFIX } from './constants';
+const classes = {
+    displayRoot: `${PREFIX}-display-root`,
+    sharePreview: `${PREFIX}-share-preview`,
+    sharePlaceholder: `${PREFIX}-share-placeholder`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'DisplayRoot'
+})(({ theme }) => ({}));
+export default (_a) => {
+    var { className, medias = [] } = _a, rest = __rest(_a, ["className", "medias"]);
+    // MEMO
+    const _medias = useMemo(() => medias.filter(filter), [medias]);
+    if (_medias.length === 0) {
+        return null;
+    }
+    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest), _medias.map((media, i) => (React.createElement(Box, { className: classes.sharePreview, key: i },
+        React.createElement(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST }))))));
+};

package/lib/esm/shared/Media/Share/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCMediaShare";

package/lib/esm/shared/Media/Share/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCMediaShare';

package/lib/esm/shared/Media/Share/filter.d.ts

@@ -0,0 +1,3 @@
+import { SCMediaType } from '@selfcommunity/types/src/types';
+declare const _default: (media: SCMediaType) => boolean;
+export default _default;

package/lib/esm/shared/Media/Share/filter.js

@@ -0,0 +1,2 @@
+import { MEDIA_TYPE_SHARE } from '../../../constants/Media';
+export default (media) => media.type === MEDIA_TYPE_SHARE;

package/lib/esm/shared/Media/Share/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import PreviewComponent from './PreviewComponent';
-import { MEDIA_TYPE_SHARE } from '../../../constants/Media';
+import DisplayComponent from './DisplayComponent';
+import filter from './filter';
 const Share = {
     name: 'share',
-    previewComponent: (props) => React.createElement(PreviewComponent, Object.assign({}, props)),
-    editButton: null,
-    editComponent: null,
-    filter: (media) => media.type === MEDIA_TYPE_SHARE
+    displayComponent: DisplayComponent,
+    triggerButton: null,
+    layerComponent: null,
+    previewComponent: null,
+    filter
 };
 export default Share;

package/lib/esm/shared/Media/index.d.ts

@@ -1,7 +1,5 @@
-import Image from './Image';
-import Document from './Document';
+import File from './File';
 import Link from './Link';
-import Video from './Video';
 import Share from './Share';
 import { EditMediaProps } from './types';
-export { Image, Document, Link, Video, Share, EditMediaProps };
+export { File, Link, Share, EditMediaProps };

package/lib/esm/shared/Media/index.js

@@ -1,6 +1,4 @@
-import Image from './Image';
-import Document from './Document';
+import File from './File';
 import Link from './Link';
-import Video from './Video';
 import Share from './Share';
-export { Image, Document, Link, Video, Share };
+export { File, Link, Share };

package/lib/esm/types/composer.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { SCFeedPostType } from '@selfcommunity/types/src/types';
+export interface ComposerLayerType {
+    name: string;
+    Component: (props: any) => ReactElement;
+    ComponentProps: any;
+}
+export interface ComposerLayerProps {
+    onClose: () => void;
+    onSave: (value: any) => void;
+    defaultValue: any;
+}
+export declare type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
+    title?: string;
+};

package/lib/esm/types/composer.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/types/media.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 /**
  * Interface MediaObject
  */
@@ -10,19 +10,23 @@ export interface SCMediaObjectType {
     /**
      * The component used to display media
      */
-    previewComponent: React.ElementType;
+    displayComponent: (props: any) => ReactElement;
     /**
      * Hook for insert custom props to preview component
      */
-    previewProps?: any;
+    displayProps?: any;
     /**
      * The button used to trigger the action
      */
-    editButton: React.ElementType | null;
+    triggerButton: (props: any) => ReactElement;
+    /**
+     * The component used to preview the list of media of this type in the composer
+     */
+    previewComponent: (props: any) => ReactElement;
     /**
      * The component used to interact with the list of media of this type
      */
-    editComponent: React.ElementType | null;
+    layerComponent: (props: any) => ReactElement;
     /**
      * The function used to filter media objects for rendering purpose
      */