@selfcommunity/react-ui 0.9.0-alpha.9 → 0.9.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/lib/cjs/assets/onBoarding/android.d.ts +1 -1
  2. package/lib/cjs/assets/onBoarding/android.js +1 -1
  3. package/lib/cjs/components/EventHeader/EventHeader.js +5 -40
  4. package/lib/cjs/components/EventMembersWidget/TabContentComponent.js +1 -1
  5. package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.d.ts +2 -2
  6. package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.js +14 -16
  7. package/lib/cjs/components/Events/Events.js +3 -5
  8. package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +35 -2
  9. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +1 -1
  10. package/lib/cjs/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
  11. package/lib/cjs/components/OnBoardingWidget/ActionsButton.js +84 -0
  12. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +44 -19
  13. package/lib/cjs/components/OnBoardingWidget/Steps/App/App.js +2 -1
  14. package/lib/cjs/components/UserProfileEdit/Section/PublicInfo.js +2 -1
  15. package/lib/cjs/shared/CopyTextArea/index.d.ts +10 -0
  16. package/lib/cjs/shared/CopyTextArea/index.js +71 -0
  17. package/lib/cjs/shared/EventActionsMenu/index.js +11 -15
  18. package/lib/cjs/utils/events.d.ts +2 -0
  19. package/lib/cjs/utils/events.js +10 -0
  20. package/lib/esm/assets/onBoarding/android.d.ts +1 -1
  21. package/lib/esm/assets/onBoarding/android.js +1 -1
  22. package/lib/esm/components/EventHeader/EventHeader.js +6 -41
  23. package/lib/esm/components/EventMembersWidget/TabContentComponent.js +1 -1
  24. package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.d.ts +2 -2
  25. package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js +16 -18
  26. package/lib/esm/components/Events/Events.js +3 -5
  27. package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +38 -5
  28. package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +1 -1
  29. package/lib/esm/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
  30. package/lib/esm/components/OnBoardingWidget/ActionsButton.js +81 -0
  31. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +46 -21
  32. package/lib/esm/components/OnBoardingWidget/Steps/App/App.js +2 -1
  33. package/lib/esm/components/UserProfileEdit/Section/PublicInfo.js +2 -1
  34. package/lib/esm/shared/CopyTextArea/index.d.ts +10 -0
  35. package/lib/esm/shared/CopyTextArea/index.js +68 -0
  36. package/lib/esm/shared/EventActionsMenu/index.js +11 -15
  37. package/lib/esm/utils/events.d.ts +2 -0
  38. package/lib/esm/utils/events.js +6 -0
  39. package/lib/umd/react-ui.js +1 -1
  40. package/package.json +7 -7
@@ -18,6 +18,7 @@ const classes = {
18
18
  summary: `${PREFIX}-app-summary`,
19
19
  step: `${PREFIX}-app-step`,
20
20
  image: `${PREFIX}-app-image`,
21
+ imageAndroid: `${PREFIX}-app-image-android`,
21
22
  action: `${PREFIX}-app-action`,
22
23
  button: `${PREFIX}-app-button`
23
24
  };
@@ -53,7 +54,7 @@ export default function App(inProps) {
53
54
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
54
55
  // @ts-ignore
55
56
  b: (...chunks) => _jsx("strong", { children: chunks })
56
- } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
57
+ } }) })), _jsx(CardMedia, { className: classes.imageAndroid, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
57
58
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
58
59
  // @ts-ignore
59
60
  icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
@@ -152,6 +152,7 @@ export default function PublicInfo(props) {
152
152
  }
153
153
  };
154
154
  let content = null;
155
+ console.log(metadataDefinitions);
155
156
  switch (field) {
156
157
  case SCUserProfileFields.USERNAME:
157
158
  component.element = UsernameTextField;
@@ -220,7 +221,7 @@ export default function PublicInfo(props) {
220
221
  return null;
221
222
  default:
222
223
  if (metadataDefinitions && metadataDefinitions[field]) {
223
- return (_jsx(MetadataField, Object.assign({ id: field, className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && _jsx(FormattedMessage, { id: `ui.userInfo.metadata.error.${_error}`, defaultMessage: `ui.userInfo.metadata.error.${_error}` }), metadata: metadataDefinitions[field] }, props), field));
224
+ return (_jsx(MetadataField, Object.assign({ id: field, className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving || (user[field] && 'editable' in metadataDefinitions[field] && !metadataDefinitions[field].editable), error: Boolean(_error), helperText: _error && _jsx(FormattedMessage, { id: `ui.userInfo.metadata.error.${_error}`, defaultMessage: `ui.userInfo.metadata.error.${_error}` }), metadata: metadataDefinitions[field] }, props), field));
224
225
  }
225
226
  break;
226
227
  }
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { BaseTextFieldProps } from '@mui/material/TextField/TextField';
3
+ export interface CopyTextFieldProps extends BaseTextFieldProps {
4
+ className?: string;
5
+ onChange: (value: string) => void;
6
+ onCopy: (value: string) => void;
7
+ value: string;
8
+ label?: string | React.ReactElement;
9
+ }
10
+ export default function CopyTextField(inProps: CopyTextFieldProps): JSX.Element;
@@ -0,0 +1,68 @@
1
+ import { __rest } from "tslib";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { useRef, useState } from 'react';
4
+ import { styled } from '@mui/material/styles';
5
+ import { Icon, IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
6
+ import { useThemeProps } from '@mui/system';
7
+ import { FormattedMessage } from 'react-intl';
8
+ import classNames from 'classnames';
9
+ const PREFIX = 'SCCopyTextField';
10
+ const classes = {
11
+ root: `${PREFIX}-root`,
12
+ btnCopy: `${PREFIX}-btn-copy`
13
+ };
14
+ const Root = styled(TextField, {
15
+ name: PREFIX,
16
+ slot: 'Root',
17
+ overridesResolver: (props, styles) => styles.root
18
+ })(({ theme }) => ({
19
+ [`& .${classes.btnCopy}`]: {
20
+ color: theme.palette.secondary.main
21
+ }
22
+ }));
23
+ export default function CopyTextField(inProps) {
24
+ // PROPS
25
+ const props = useThemeProps({
26
+ props: inProps,
27
+ name: PREFIX
28
+ });
29
+ const { className, label, onCopy, onChange } = props, rest = __rest(props, ["className", "label", "onCopy", "onChange"]);
30
+ // STATE
31
+ const [value, setValue] = useState('https://www.google.com');
32
+ const [openConfirm, setOpenConfirm] = useState(false);
33
+ // REF
34
+ const timeout = useRef(null);
35
+ // HANDLERS
36
+ const handleChange = (event) => {
37
+ setValue(event.target.value);
38
+ onChange && onChange(event.target.value);
39
+ };
40
+ const handleCopy = (value) => {
41
+ navigator.clipboard.writeText(value).then(function () {
42
+ /* clipboard successfully set */
43
+ hanldeCopySuccess();
44
+ }, function () {
45
+ /* clipboard write failed */
46
+ console.log('Failed to opy text!');
47
+ });
48
+ };
49
+ const hanldeCopySuccess = () => {
50
+ setOpenConfirm(true);
51
+ if (timeout) {
52
+ clearTimeout(timeout.current);
53
+ timeout.current = null;
54
+ }
55
+ timeout.current = setTimeout(() => {
56
+ setOpenConfirm(false);
57
+ onCopy && onCopy(value);
58
+ }, 1500);
59
+ };
60
+ const button = (_jsx(IconButton, Object.assign({ "aria-label": "Copy text", edge: "end", onClick: () => handleCopy(value), className: classes.btnCopy }, { children: _jsx(Icon, { children: "insert_link" }) })));
61
+ // RENDER
62
+ return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), label: label ? label : _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }), margin: "normal", variant: "outlined", disabled: true, fullWidth: true, value: value, multiline: true, onChange: handleChange, InputProps: {
63
+ disableUnderline: true,
64
+ endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: openConfirm ? (_jsx(Tooltip, Object.assign({ open: openConfirm, PopperProps: { open: true }, title: _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textCopied", defaultMessage: "ui.shared.copyTextField.textCopied" }) }, { children: button }))) : (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.shared.copyTextField.textToCopy", defaultMessage: "ui.shared.copyTextField.textToCopy" }) }, { children: button }))) })))
65
+ }, InputLabelProps: {
66
+ shrink: true
67
+ } }, rest)));
68
+ }
@@ -1,21 +1,22 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { useMemo, useState } from 'react';
4
- import { styled } from '@mui/material/styles';
5
3
  import { Divider, IconButton, List, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
6
- import { FormattedMessage } from 'react-intl';
7
4
  import Icon from '@mui/material/Icon';
8
- import classNames from 'classnames';
5
+ import { styled } from '@mui/material/styles';
9
6
  import { useThemeProps } from '@mui/system';
10
- import { SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
11
- import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
12
7
  import { EventService } from '@selfcommunity/api-services';
13
- import { ADD_EVENT_TO_CALENDAR, CANCEL_EVENT, GET_EVENT_LINK } from '../../constants/EventActionsMenu';
8
+ import { SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
14
9
  import { copyTextToClipboard } from '@selfcommunity/utils';
10
+ import classNames from 'classnames';
15
11
  import { enqueueSnackbar } from 'notistack';
16
12
  import PubSub from 'pubsub-js';
17
- import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
13
+ import { useMemo, useState } from 'react';
14
+ import { FormattedMessage } from 'react-intl';
18
15
  import EventForm from '../../components/EventForm';
16
+ import { ADD_EVENT_TO_CALENDAR, CANCEL_EVENT, GET_EVENT_LINK } from '../../constants/EventActionsMenu';
17
+ import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
18
+ import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
19
+ import { checkEventFinished } from '../../utils/events';
19
20
  const PREFIX = 'SCEventActionsMenu';
20
21
  const classes = {
21
22
  root: `${PREFIX}-root`,
@@ -82,12 +83,7 @@ export default function EventActionsMenu(inProps) {
82
83
  const scUserContext = useSCUser();
83
84
  const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
84
85
  const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
85
- const isEventFinished = useMemo(() => {
86
- if (scEvent && !scEvent.running) {
87
- return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
88
- }
89
- return false;
90
- }, [scEvent]);
86
+ const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
91
87
  // HANDLERS
92
88
  const handleOpen = (event) => {
93
89
  setAnchorEl(event.currentTarget);
@@ -153,7 +149,7 @@ export default function EventActionsMenu(inProps) {
153
149
  const renderList = () => {
154
150
  return [
155
151
  _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GET_EVENT_LINK) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.link", defaultMessage: "ui.shared.eventActionsMenu.item.link" })] }), "link"),
156
- _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(ADD_EVENT_TO_CALENDAR) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar"),
152
+ !isEventFinished && (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(ADD_EVENT_TO_CALENDAR) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar")),
157
153
  isEventAdmin &&
158
154
  !isEventFinished && [
159
155
  _jsx(Divider, {}, "divider"),
@@ -0,0 +1,2 @@
1
+ import { SCEventType } from '@selfcommunity/types';
2
+ export declare function checkEventFinished(event: SCEventType | null): boolean;
@@ -0,0 +1,6 @@
1
+ export function checkEventFinished(event) {
2
+ if (event && !event.running) {
3
+ return new Date().getTime() > new Date(event.end_date || event.start_date).getTime();
4
+ }
5
+ return false;
6
+ }