stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/MessageOverlay/MessageActions.tsx

@@ -1,243 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, ViewStyle } from 'react-native';
-import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
-import Animated, {
-  interpolate,
-  runOnJS,
-  useAnimatedGestureHandler,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-
-import {
-  MessageAction as MessageActionType,
-  MessageOverlayData,
-  useMessageOverlayContext,
-} from '../../contexts/messageOverlayContext/MessageOverlayContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { vw } from '../../utils/utils';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
-const styles = StyleSheet.create({
-  bottomBorder: {
-    borderBottomWidth: 1,
-  },
-  container: {
-    borderRadius: 16,
-    marginTop: 8,
-    maxWidth: 275,
-  },
-  row: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    minWidth: vw(65),
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-  },
-  titleStyle: {
-    paddingLeft: 20,
-  },
-});
-
-type MessageActionProps = MessageActionType & {
-  index: number;
-  length: number;
-};
-
-const MessageAction: React.FC<MessageActionProps> = (props) => {
-  const { action, icon, index, length, title, titleStyle } = props;
-
-  const {
-    theme: {
-      colors: { black, border },
-    },
-  } = useTheme();
-
-  const opacity = useSharedValue(1);
-
-  const onTap = useAnimatedGestureHandler<TapGestureHandlerStateChangeEvent>(
-    {
-      onEnd: () => {
-        runOnJS(action)();
-      },
-      onFinish: () => {
-        opacity.value = 1;
-      },
-      onStart: () => {
-        opacity.value = 0.2;
-      },
-    },
-    [action],
-  );
-
-  const animatedStyle = useAnimatedStyle<ViewStyle>(() => ({
-    opacity: opacity.value,
-  }));
-
-  return (
-    <TapGestureHandler onHandlerStateChange={onTap}>
-      <Animated.View
-        style={[
-          styles.row,
-          index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},
-          animatedStyle,
-        ]}
-      >
-        {icon}
-        <Text style={[styles.titleStyle, { color: black }, titleStyle]}>{title}</Text>
-      </Animated.View>
-    </TapGestureHandler>
-  );
-};
-
-const messageActionIsEqual = (prevProps: MessageActionProps, nextProps: MessageActionProps) =>
-  prevProps.length === nextProps.length;
-
-const MemoizedMessageAction = React.memo(
-  MessageAction,
-  messageActionIsEqual,
-) as typeof MessageAction;
-
-export type MessageActionsPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>, 'alignment' | 'messageActions'> & {
-  showScreen: Animated.SharedValue<number>;
-};
-const MessageActionsWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  props: MessageActionsPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-) => {
-  const { alignment, messageActions, showScreen } = props;
-
-  const {
-    theme: {
-      colors: { white_snow },
-    },
-  } = useTheme();
-
-  const height = useSharedValue(0);
-  const width = useSharedValue(0);
-
-  const showScreenStyle = useAnimatedStyle<ViewStyle>(
-    () => ({
-      transform: [
-        {
-          translateY: interpolate(showScreen.value, [0, 1], [-height.value / 2, 0]),
-        },
-        {
-          translateX: interpolate(
-            showScreen.value,
-            [0, 1],
-            [alignment === 'left' ? -width.value / 2 : width.value / 2, 0],
-          ),
-        },
-        {
-          scale: showScreen.value,
-        },
-      ],
-    }),
-    [alignment],
-  );
-
-  return (
-    <Animated.View
-      onLayout={({ nativeEvent: { layout } }) => {
-        width.value = layout.width;
-        height.value = layout.height;
-      }}
-      style={[styles.container, { backgroundColor: white_snow }, showScreenStyle]}
-    >
-      {messageActions?.map((messageAction, index) => (
-        <MemoizedMessageAction
-          key={messageAction.title}
-          {...{ ...messageAction, index, length: messageActions.length }}
-        />
-      ))}
-    </Animated.View>
-  );
-};
-
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: MessageActionsPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageActionsPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-) => {
-  const { alignment: prevAlignment, messageActions: prevMessageActions } = prevProps;
-  const { alignment: nextAlignment, messageActions: nextMessageActions } = nextProps;
-
-  const messageActionsEqual = prevMessageActions?.length === nextMessageActions?.length;
-  if (!messageActionsEqual) return false;
-
-  const alignmentEqual = prevAlignment === nextAlignment;
-  if (!alignmentEqual) return false;
-
-  return true;
-};
-
-const MemoizedMessageActions = React.memo(
-  MessageActionsWithContext,
-  areEqual,
-) as typeof MessageActionsWithContext;
-
-export type MessageActionsProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<Omit<MessageActionsPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'showScreen'>> &
-  Pick<MessageActionsPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'showScreen'>;
-
-/**
- * MessageActions - A high level component which implements all the logic required for MessageActions
- */
-export const MessageActions = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  props: MessageActionsProps<At, Ch, Co, Ev, Me, Re, Us>,
-) => {
-  const { data } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
-
-  const { alignment, messageActions } = data || {};
-
-  return <MemoizedMessageActions {...{ alignment, messageActions }} {...props} />;
-};

package/src/icons/Left.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { IconProps, RootPath, RootSvg } from './utils/base';
-
-export const Left: React.FC<IconProps> = (props) => (
-  <RootSvg {...props}>
-    <RootPath
-      d='M15.694 18.694a1.043 1.043 0 000-1.476L10.47 12l5.224-5.218a1.043 1.043 0 000-1.476 1.046 1.046 0 00-1.478 0l-5.91 5.904a1.04 1.04 0 00-.305.79 1.04 1.04 0 00.305.79l5.91 5.904c.408.408 1.07.408 1.478 0z'
-      {...props}
-    />
-  </RootSvg>
-);

package/src/icons/Right.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { IconProps, RootPath, RootSvg } from './utils/base';
-
-export const Right: React.FC<IconProps> = (props) => (
-  <RootSvg {...props}>
-    <RootPath
-      d='M8.306 18.694c.408.408 1.07.408 1.478 0l5.913-5.9A1.04 1.04 0 0016 11.97a1.04 1.04 0 00-.306-.761l-5.91-5.904a1.046 1.046 0 00-1.478 0 1.043 1.043 0 000 1.476l5.227 5.22-5.227 5.217a1.042 1.042 0 000 1.475z'
-      {...props}
-    />
-  </RootSvg>
-);

package/src/styleguideComponents/ArgumentsRenderer.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Styled, { JssInjectedProps } from 'react-styleguidist/lib/client/rsg-components/Styled';
-import Argument, { ArgumentProps } from 'react-styleguidist/lib/client/rsg-components/Argument';
-import Heading from 'react-styleguidist/lib/client/rsg-components/Heading';
-import * as Rsg from 'react-styleguidist/lib/typings';
-
-export const styles = ({ space }: Rsg.Theme) => ({
-  headingWrapper: {
-    marginBottom: space[0],
-  },
-  root: {
-    fontSize: 'inherit',
-    marginBottom: space[2],
-  },
-});
-
-interface ArgumentsProps extends JssInjectedProps {
-  args: ArgumentProps[];
-  classes: Record<string, string>;
-  heading?: boolean;
-}
-
-export const ArgumentsRenderer: React.FunctionComponent<ArgumentsProps> = ({
-  args,
-  classes,
-  heading,
-}) => {
-  if (args.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={classes.root}>
-      {heading && (
-        <div className={classes.headingWrapper}>
-          <Heading level={5}>Arguments</Heading>
-        </div>
-      )}
-      {args.map((arg) => (
-        <Argument key={arg.name} {...arg} block />
-      ))}
-    </div>
-  );
-};
-
-ArgumentsRenderer.propTypes = {
-  args: PropTypes.arrayOf(
-    PropTypes.shape({
-      description: PropTypes.string,
-      name: PropTypes.string.isRequired,
-      type: PropTypes.object,
-    }).isRequired,
-  ).isRequired,
-  classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-  heading: PropTypes.bool,
-};
-
-export default Styled<ArgumentsProps>(styles)(ArgumentsRenderer);

package/src/styleguideComponents/BottomSheet.tsx

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export const BottomSheet = () => <React.Fragment />;

package/src/styleguideComponents/JsDoc.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TagObject, TagProps } from 'react-docgen';
-import map from 'lodash/map';
-import Markdown from 'react-styleguidist/lib/client/rsg-components/Markdown';
-
-const plural = (array: TagObject[], caption: string) =>
-  array.length === 1 ? caption : `${caption}s`;
-const list = (array: TagObject[]) => array.map((item) => item.description).join(', ');
-const paragraphs = (array: TagObject[]) => array.map((item) => item.description).join('\n\n');
-
-const fields = {
-  author: (value: TagObject[]) => `${plural(value, 'Author')}: ${list(value)}`,
-  default: (value: TagObject[]) => `**Default**: ${value[0].default}`,
-  deprecated: (value: TagObject[]) => `**Deprecated:** ${value[0].description}`,
-  link: (value: TagObject[]) => paragraphs(value),
-  see: (value: TagObject[]) => paragraphs(value),
-  since: (value: TagObject[]) => `Since: ${value[0].description}`,
-  version: (value: TagObject[]) => `Version: ${value[0].description}`,
-};
-
-export function getMarkdown(props: TagProps) {
-  return map(fields, (format: (value: TagObject[]) => string, field: keyof TagProps) => {
-    const tag = props[field];
-    return tag && format(tag);
-  })
-    .filter(Boolean)
-    .join('\n\n');
-}
-
-export default function JsDoc(props: TagProps) {
-  const markdown = getMarkdown(props);
-  return markdown ? <Markdown text={markdown} /> : null;
-}
-
-JsDoc.propTypes = {
-  author: PropTypes.array,
-  deprecated: PropTypes.array,
-  link: PropTypes.array,
-  see: PropTypes.array,
-  since: PropTypes.array,
-  version: PropTypes.array,
-};

package/src/styleguideComponents/Markdown.tsx

@@ -1 +0,0 @@
-export default ({ children }) => children;

package/src/styleguideComponents/PathlineRenderer.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import copy from 'clipboard-copy';
-import { MdContentCopy } from 'react-icons/md';
-import Link from 'react-styleguidist/lib/client/rsg-components/Link';
-import ToolbarButton from 'react-styleguidist/lib/client/rsg-components/ToolbarButton';
-import Styled, { JssInjectedProps } from 'react-styleguidist/lib/client/rsg-components/Styled';
-import * as Rsg from 'react-styleguidist/lib/typings';
-
-export const styles = ({ color, fontFamily, fontSize, space }: Rsg.Theme) => ({
-  copyButton: {
-    marginLeft: space[0],
-  },
-  pathline: {
-    color: color.light,
-    fontFamily: fontFamily.monospace,
-    fontSize: fontSize.small,
-    wordBreak: 'break-all',
-  },
-});
-
-export const PathlineRenderer: React.FunctionComponent<JssInjectedProps> = ({
-  children,
-  classes,
-}) => (
-  <div className={classes.pathline}>
-    <Link
-      href={'https://github.com/GetStream/stream-chat-react-native/blob/master/' + children}
-      rel='noopener'
-      target='blank'
-    >
-      {children}
-    </Link>
-    <ToolbarButton
-      className={classes.copyButton}
-      onClick={() => children && copy(children.toString())}
-      small
-      title='Copy to clipboard'
-    >
-      <MdContentCopy />
-    </ToolbarButton>
-  </div>
-);
-
-export default Styled<JssInjectedProps>(styles)(PathlineRenderer);

package/src/styleguideComponents/PropsRenderer.tsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import Arguments from './ArgumentsRenderer';
-import Argument from 'react-styleguidist/lib/client/rsg-components/Argument';
-import JsDoc from './JsDoc';
-import Markdown from 'react-styleguidist/lib/client/rsg-components/Markdown';
-import Name from 'react-styleguidist/lib/client/rsg-components/Name';
-import Para from 'react-styleguidist/lib/client/rsg-components/Para';
-import renderTypeColumn from 'react-styleguidist/lib/client/rsg-components/Props/renderType';
-import renderExtra from 'react-styleguidist/lib/client/rsg-components/Props/renderExtra';
-import renderDefault from 'react-styleguidist/lib/client/rsg-components/Props/renderDefault';
-import { PropDescriptor } from 'react-styleguidist/lib/client/rsg-components/Props/util';
-
-function renderDescription(prop: PropDescriptor) {
-  const { description, tags = {} } = prop;
-  const extra = renderExtra(prop);
-  const args = [...(tags.arg || []), ...(tags.argument || []), ...(tags.param || [])];
-  const returnDocumentation = (tags.return && tags.return[0]) || (tags.returns && tags.returns[0]);
-
-  return (
-    <div>
-      {description && <Markdown text={description} />}
-      {extra && <Para>{extra}</Para>}
-      <JsDoc {...tags} />
-      {args.length > 0 && <Arguments args={args} heading />}
-      {returnDocumentation && <Argument {...{ ...returnDocumentation, name: '' }} returns />}
-    </div>
-  );
-}
-
-function renderName(prop: PropDescriptor) {
-  const { name, tags = {} } = prop;
-  return <Name deprecated={!!tags.deprecated}>{name}</Name>;
-}
-
-export function getRowKey(row: { name: string }) {
-  return row.name;
-}
-
-export const columns = [
-  {
-    caption: 'Prop name lol',
-    render: renderName,
-  },
-  {
-    caption: 'Type',
-    render: renderTypeColumn,
-  },
-  {
-    caption: 'Default',
-    render: renderDefault,
-  },
-  {
-    caption: 'Description',
-    render: renderDescription,
-  },
-];
-
-interface PropsProps {
-  props: PropDescriptor[];
-}
-
-const PropsRenderer: React.FC<PropsProps> = ({ props }) =>
-  props.map((r) => {
-    const isComponentProp = r.name[0].toUpperCase() === r.name[0];
-    const customType = r.tags.overrideType;
-
-    return (
-      <div key={r.name} style={styles.container}>
-        <h3>
-          <a
-            href={`#${r.name}`}
-            id={r.name}
-            style={{
-              backgroundColor: 'rgba(0, 0, 0, 0.06)',
-              color: '#1c1e21',
-              fontFamily: 'monospace',
-              fontSize: 21,
-              fontWeight: 700,
-              padding: 5,
-              paddingLeft: 10,
-              paddingRight: 10,
-              textDecoration: 'none',
-            }}
-          >
-            {r.name}
-          </a>
-        </h3>
-        {renderDescription(r)}
-
-        <table style={styles.table}>
-          <tr style={styles.tr}>
-            <th style={styles.th}>Type</th>
-            <th style={styles.th}>Required</th>
-          </tr>
-          <tr style={styles.tr}>
-            <td style={styles.td}>
-              {customType
-                ? customType[0].description
-                : isComponentProp
-                ? 'Component, element'
-                : r.type.name}
-            </td>
-            <td style={styles.td}>No</td>
-          </tr>
-        </table>
-        <hr style={{ marginTop: 20 }} />
-      </div>
-    );
-  });
-
-const styles = {
-  container: {
-    marginTop: 50,
-  },
-  table: {
-    border: '1px solid black',
-    borderCollapse: 'collapse',
-    width: '100%',
-  },
-  td: {
-    border: '1px solid black',
-    borderCollapse: 'collapse',
-    padding: 10,
-    textAlign: 'center',
-    width: '50%',
-  },
-  th: {
-    backgroundColor: 'rgba(0, 0, 0, 0.06)',
-    border: '1px solid black',
-    borderCollapse: 'collapse',
-    padding: 10,
-    textAlign: 'center',
-    width: '50%',
-  },
-  tr: {},
-};
-
-export default PropsRenderer;

package/src/styleguideComponents/Wrapper.tsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from '../contexts/themeContext/ThemeContext';
-
-const Wrapper: React.FC = ({ children }) => <ThemeProvider>{children}</ThemeProvider>;
-
-export default Wrapper;

package/src/styleguideComponents/register-react-native-web.js

@@ -1,13 +0,0 @@
-import { registerNativeHandlers } from '..';
-
-const NetInfo = {
-  addEventListener: () => {},
-  fetch: async () => {
-    await undefined;
-    return true;
-  },
-};
-registerNativeHandlers({
-  BlurView: () => null,
-  NetInfo,
-});

package/src/styleguideComponents/resolveAssetSource.js

@@ -1,2 +0,0 @@
-const resolveAssetSource = () => null;
-export { resolveAssetSource };