@selfcommunity/react-ui 0.7.0-alpha.357 → 0.7.0-alpha.358

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

@@ -16,7 +16,7 @@ export interface AttributesProps extends Omit<BoxProps, 'value' | 'onChange' | '
      * @param value
      * @default empty object
      */
-    onClick?: (attribute: 'categories' | 'addressing') => void;
+    onClick?: (attribute: 'categories' | 'addressing' | 'location') => void;
 }
 declare const _default: (props: AttributesProps) => JSX.Element;
 export default _default;

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

@@ -32,10 +32,16 @@ exports.default = (props) => {
     const handleClickTag = (0, react_1.useCallback)(() => {
         onClick && onClick('addressing');
     }, [onClick]);
+    const handleDeleteLocation = (0, react_1.useCallback)(() => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { location: null }));
+    }, [value, onChange]);
+    const handleClickLocation = (0, react_1.useCallback)(() => {
+        onClick && onClick('location');
+    }, [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 }))));
+        (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: handleDeleteLocation, onClick: handleClickLocation }))));
 };

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

@@ -342,8 +342,11 @@ function Composer(inProps) {
             case 'addressing':
                 handleAddAudienceLayer();
                 break;
+            case 'location':
+                handleAddLocationLayer();
+                break;
         }
-    }, [handleAddCategoryLayer, handleAddAudienceLayer]);
+    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer]);
     const handleSubmit = (0, react_1.useCallback)((event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -476,7 +479,7 @@ function Composer(inProps) {
                 react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
                     react_1.default.createElement(Icon_1.default, null, "category")),
                 react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting || !features.includes(types_1.SCFeatureName.TAGGING), onClick: handleAddAudienceLayer }, addressing === null || addressing.length === 0 ? react_1.default.createElement(Icon_1.default, null, "public") : react_1.default.createElement(Icon_1.default, null, "label")),
-                preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && (react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
+                preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
                     react_1.default.createElement(Icon_1.default, null, "add_location_alt"))))),
         layer && react_1.default.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },
             react_1.default.createElement(layer.Component, Object.assign({}, layer.ComponentProps)))));

package/lib/cjs/components/LocationAutocomplete/LocationAutocomplete.js

@@ -88,16 +88,22 @@ function LocationAutocomplete(inProps) {
     }, [value]);
     // Handlers
     const handleChange = (event, value) => {
-        setValue({ location: value.full_address, lat: value.lat, lon: value.lng });
+        setValue(value ? { location: value.full_address, lat: value.lat, lon: value.lng } : null);
         onChange && onChange(value);
     };
     const handleSearch = (event, _search) => {
         setSearch(_search);
     };
     // Render
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root, options: locations || [], 
+    const options = (0, react_1.useMemo)(() => {
+        if (!value || typeof value === 'string' || locations.find((loc) => value.lat === loc.lat && value.lon === loc.lng)) {
+            return locations;
+        }
+        return [...locations, { lat: value.lat, lng: value.lon, full_address: value.location }];
+    }, [value, locations]);
+    return (react_1.default.createElement(Root, Object.assign({ className: classes.root, options: options || [], 
         // @ts-ignore
-        getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.full_address) || (option === null || option === void 0 ? void 0 : option.location) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, filterSelectedOptions: true, value: value, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lon === option.lng, renderInput: (params) => {
+        getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.full_address) || (option === null || option === void 0 ? void 0 : option.location) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, value: value || null, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lon === option.lng, renderInput: (params) => {
             return (react_1.default.createElement(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
                         isLoading ? react_1.default.createElement(CircularProgress_1.default, { color: "inherit", size: 20 }) : null,
                         params.InputProps.endAdornment)) }) })));

package/lib/cjs/shared/Media/Link/PreviewComponent.js

@@ -10,9 +10,11 @@ const react_sortablejs_1 = require("react-sortablejs");
 const DisplayComponent_1 = tslib_1.__importDefault(require("./DisplayComponent"));
 const constants_1 = require("./constants");
 const filter_1 = tslib_1.__importDefault(require("./filter"));
+const Media_1 = require("../../../constants/Media");
 const classes = {
     previewRoot: `${constants_1.PREFIX}-preview-root`,
     media: `${constants_1.PREFIX}-media`,
+    video: `${constants_1.PREFIX}-media-video`,
     delete: `${constants_1.PREFIX}-delete`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
@@ -29,7 +31,7 @@ const PreviewComponent = react_1.default.forwardRef((props, ref) => {
         onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
     }, [onChange, value]);
     const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
-    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest), medias.length > 0 && (react_1.default.createElement(react_sortablejs_1.ReactSortable, { list: medias, setList: handleSort }, medias.map((media) => (react_1.default.createElement(material_1.Box, { key: media.id, className: classes.media },
+    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest), medias.length > 0 && (react_1.default.createElement(react_sortablejs_1.ReactSortable, { list: medias, setList: handleSort }, medias.map((media) => (react_1.default.createElement(material_1.Box, { key: media.id, className: (0, classnames_1.default)(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO }) },
         react_1.default.createElement(DisplayComponent_1.default, { medias: [media] }),
         react_1.default.createElement(material_1.IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
             react_1.default.createElement(Icon_1.default, null, "delete"))))))));

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

@@ -16,7 +16,7 @@ export interface AttributesProps extends Omit<BoxProps, 'value' | 'onChange' | '
      * @param value
      * @default empty object
      */
-    onClick?: (attribute: 'categories' | 'addressing') => void;
+    onClick?: (attribute: 'categories' | 'addressing' | 'location') => void;
 }
 declare const _default: (props: AttributesProps) => JSX.Element;
 export default _default;

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

@@ -29,10 +29,16 @@ export default (props) => {
     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: () => null, onClick: () => null }))));
+        (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/Composer.js

@@ -340,8 +340,11 @@ export default function Composer(inProps) {
             case 'addressing':
                 handleAddAudienceLayer();
                 break;
+            case 'location':
+                handleAddLocationLayer();
+                break;
         }
-    }, [handleAddCategoryLayer, handleAddAudienceLayer]);
+    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer]);
     const handleSubmit = useCallback((event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -474,7 +477,7 @@ export default function Composer(inProps) {
                 React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
                     React.createElement(Icon, null, "category")),
                 React.createElement(IconButton, { disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING), onClick: handleAddAudienceLayer }, addressing === null || addressing.length === 0 ? React.createElement(Icon, null, "public") : React.createElement(Icon, null, "label")),
-                preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
+                preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
                     React.createElement(Icon, null, "add_location_alt"))))),
         layer && React.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },
             React.createElement(layer.Component, Object.assign({}, layer.ComponentProps)))));

package/lib/esm/components/LocationAutocomplete/LocationAutocomplete.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import TextField from '@mui/material/TextField';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -86,16 +86,22 @@ export default function LocationAutocomplete(inProps) {
     }, [value]);
     // Handlers
     const handleChange = (event, value) => {
-        setValue({ location: value.full_address, lat: value.lat, lon: value.lng });
+        setValue(value ? { location: value.full_address, lat: value.lat, lon: value.lng } : null);
         onChange && onChange(value);
     };
     const handleSearch = (event, _search) => {
         setSearch(_search);
     };
     // Render
-    return (React.createElement(Root, Object.assign({ className: classes.root, options: locations || [], 
+    const options = useMemo(() => {
+        if (!value || typeof value === 'string' || locations.find((loc) => value.lat === loc.lat && value.lon === loc.lng)) {
+            return locations;
+        }
+        return [...locations, { lat: value.lat, lng: value.lon, full_address: value.location }];
+    }, [value, locations]);
+    return (React.createElement(Root, Object.assign({ className: classes.root, options: options || [], 
         // @ts-ignore
-        getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.full_address) || (option === null || option === void 0 ? void 0 : option.location) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, filterSelectedOptions: true, value: value, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: React.createElement(FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lon === option.lng, renderInput: (params) => {
+        getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.full_address) || (option === null || option === void 0 ? void 0 : option.location) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, value: value || null, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: React.createElement(FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lon === option.lng, renderInput: (params) => {
             return (React.createElement(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: (React.createElement(React.Fragment, null,
                         isLoading ? React.createElement(CircularProgress, { color: "inherit", size: 20 }) : null,
                         params.InputProps.endAdornment)) }) })));

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

@@ -8,9 +8,11 @@ import { ReactSortable } from 'react-sortablejs';
 import DisplayComponent from './DisplayComponent';
 import { PREFIX } from './constants';
 import filter from './filter';
+import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
 const classes = {
     previewRoot: `${PREFIX}-preview-root`,
     media: `${PREFIX}-media`,
+    video: `${PREFIX}-media-video`,
     delete: `${PREFIX}-delete`
 };
 const Root = styled(Box, {
@@ -27,7 +29,7 @@ const PreviewComponent = React.forwardRef((props, ref) => {
         onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
     }, [onChange, value]);
     const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
-    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest), medias.length > 0 && (React.createElement(ReactSortable, { list: medias, setList: handleSort }, medias.map((media) => (React.createElement(Box, { key: media.id, className: classes.media },
+    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest), medias.length > 0 && (React.createElement(ReactSortable, { list: medias, setList: handleSort }, medias.map((media) => (React.createElement(Box, { key: media.id, className: classNames(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === MEDIA_TYPE_VIDEO }) },
         React.createElement(DisplayComponent, { medias: [media] }),
         React.createElement(IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
             React.createElement(Icon, null, "delete"))))))));