@webinex/chatify 2.0.0-alpha13 → 2.0.0-alpha14

package/src/ui/Chat/Members/ChatMembersPreview.tsx

@@ -1,25 +1,25 @@
-import { chatifyApi } from '../../../core';
-import { Tooltip } from 'antd';
-import { customize } from '../../customize';
-import { Avatar as AntdAvatar } from 'antd';
-import { Avatar } from '../../common/Avatar';
-import { useChatContext } from '../ChatContext';
-
-export const ChatMembersPreview = customize('ChatMembersPreview', () => {
-  const { id } = useChatContext();
-  const { data: chat } = chatifyApi.useGetChatQuery({ id });
-
-  if (!chat?.members) {
-    return null;
-  }
-
-  return (
-    <AntdAvatar.Group max={{ count: 5 }}>
-      {chat.members.map((x) => (
-        <Tooltip key={x.id} title={x.name}>
-          <Avatar account={x} />
-        </Tooltip>
-      ))}
-    </AntdAvatar.Group>
-  );
-});
+import { chatifyApi } from '../../../core';
+import { Tooltip } from 'antd';
+import { customize } from '../../customize';
+import { Avatar as AntdAvatar } from 'antd';
+import { Avatar } from '../../common/Avatar';
+import { useChatContext } from '../ChatContext';
+
+export const ChatMembersPreview = customize('ChatMembersPreview', () => {
+  const { id } = useChatContext();
+  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+
+  if (!chat?.members) {
+    return null;
+  }
+
+  return (
+    <AntdAvatar.Group max={{ count: 5 }}>
+      {chat.members.map((x) => (
+        <Tooltip key={x.id} title={x.name}>
+          <Avatar account={x} />
+        </Tooltip>
+      ))}
+    </AntdAvatar.Group>
+  );
+});

package/src/ui/Chat/Members/index.ts

@@ -1,13 +1,13 @@
-import { ChatMembersButton } from './ChatMembersButton';
-import { ChatMembersPanel } from './ChatMembersPanel';
-import { ChatMembersPreview } from './ChatMembersPreview';
-
-export * from './ChatMembersButton';
-export * from './ChatMembersPanel';
-export * from './ChatMembersPreview';
-
-export interface ChatMembersCustomizeValue {
-  ChatMembersButton?: typeof ChatMembersButton.Component | null;
-  ChatMembersPanel?: typeof ChatMembersPanel.Component | null;
-  ChatMembersPreview?: typeof ChatMembersPreview.Component | null;
-}
+import { ChatMembersButton } from './ChatMembersButton';
+import { ChatMembersPanel } from './ChatMembersPanel';
+import { ChatMembersPreview } from './ChatMembersPreview';
+
+export * from './ChatMembersButton';
+export * from './ChatMembersPanel';
+export * from './ChatMembersPreview';
+
+export interface ChatMembersCustomizeValue {
+  ChatMembersButton?: typeof ChatMembersButton.Component | null;
+  ChatMembersPanel?: typeof ChatMembersPanel.Component | null;
+  ChatMembersPreview?: typeof ChatMembersPreview.Component | null;
+}

package/src/ui/Chat/index.ts

@@ -1,6 +1,6 @@
-export * from './Members';
-export * from './ChatView';
-export * from './ChatContext';
-export * from './ChatEditableHeaderName';
-export * from './ChatHeaderActions';
-export * from './ChatPanel';
+export * from './Members';
+export * from './ChatView';
+export * from './ChatContext';
+export * from './ChatEditableHeaderName';
+export * from './ChatHeaderActions';
+export * from './ChatPanel';

package/src/ui/ChatGroup/AutoReply/AutoReplyButton.tsx

@@ -1,21 +1,21 @@
-import { Button } from 'antd';
-import { customize } from '../../customize';
-import { useChatGroupContext } from '../ChatGroupContext';
-import { useLocalizer } from '../../localizer';
-import { Icon } from '../../common/Icon';
-
-export const AutoReplyButton = customize('AutoReplyButton', () => {
-  const { toggleAutoReply } = useChatGroupContext();
-  const localizer = useLocalizer();
-  const titleText = localizer.autoReply.buttonTitle();
-
-  return (
-    <Button
-      className="wxchtf-add-btn-settings"
-      onClick={toggleAutoReply}
-      icon={<Icon type="settings" />}
-      title={titleText}
-      aria-label={titleText}
-    />
-  );
-});
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { useLocalizer } from '../../localizer';
+import { Icon } from '../../common/Icon';
+
+export const AutoReplyButton = customize('AutoReplyButton', () => {
+  const { toggleAutoReply } = useChatGroupContext();
+  const localizer = useLocalizer();
+  const titleText = localizer.autoReply.buttonTitle();
+
+  return (
+    <Button
+      className="wxchtf-add-btn-settings"
+      onClick={toggleAutoReply}
+      icon={<Icon type="settings" />}
+      title={titleText}
+      aria-label={titleText}
+    />
+  );
+});

package/src/ui/ChatGroup/AutoReply/AutoReplyForm.tsx

@@ -1,50 +1,50 @@
-import { Button, Form } from 'antd';
-import { Dayjs } from 'dayjs';
-import { customize } from '../../customize';
-import { useLocalizer } from '../../localizer';
-import { AutoReplyPeriodInput } from './AutoReplyPeriodInput';
-import { AutoReplyTextInput } from './AutoReplyTextInput';
-import { useEffect } from 'react';
-
-export interface AutoReplyFormValue {
-  period: [Dayjs, Dayjs];
-  text: string;
-}
-
-export interface AutoReplyFormProps {
-  value: AutoReplyFormValue;
-  onSubmit: (value: AutoReplyFormValue) => void;
-  busy?: boolean;
-}
-
-export const AUTO_REPLY_FORM_INITIAL_VALUE: AutoReplyFormValue = {
-  period: [] as unknown as [Dayjs, Dayjs],
-  text: '',
-};
-
-export const AutoReplyForm = customize('AutoReplyForm', (props: AutoReplyFormProps) => {
-  const { value, busy = false, onSubmit } = props;
-  const localizer = useLocalizer();
-
-  const [form] = Form.useForm<AutoReplyFormValue>();
-
-  useEffect(() => {
-    form.setFieldsValue(value);
-  }, [value, form]);
-
-  return (
-    <Form<AutoReplyFormValue>
-      form={form}
-      layout="vertical"
-      onFinish={onSubmit}
-      disabled={busy}
-      initialValues={value}
-    >
-      <AutoReplyPeriodInput name="period" />
-      <AutoReplyTextInput name="text" />
-      <Button loading={busy} type="primary" block htmlType="submit">
-        {localizer.autoReply.submitBtn()}
-      </Button>
-    </Form>
-  );
-});
+import { Button, Form } from 'antd';
+import { Dayjs } from 'dayjs';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { AutoReplyPeriodInput } from './AutoReplyPeriodInput';
+import { AutoReplyTextInput } from './AutoReplyTextInput';
+import { useEffect } from 'react';
+
+export interface AutoReplyFormValue {
+  period: [Dayjs, Dayjs];
+  text: string;
+}
+
+export interface AutoReplyFormProps {
+  value: AutoReplyFormValue;
+  onSubmit: (value: AutoReplyFormValue) => void;
+  busy?: boolean;
+}
+
+export const AUTO_REPLY_FORM_INITIAL_VALUE: AutoReplyFormValue = {
+  period: [] as unknown as [Dayjs, Dayjs],
+  text: '',
+};
+
+export const AutoReplyForm = customize('AutoReplyForm', (props: AutoReplyFormProps) => {
+  const { value, busy = false, onSubmit } = props;
+  const localizer = useLocalizer();
+
+  const [form] = Form.useForm<AutoReplyFormValue>();
+
+  useEffect(() => {
+    form.setFieldsValue(value);
+  }, [value, form]);
+
+  return (
+    <Form<AutoReplyFormValue>
+      form={form}
+      layout="vertical"
+      onFinish={onSubmit}
+      disabled={busy}
+      initialValues={value}
+    >
+      <AutoReplyPeriodInput name="period" />
+      <AutoReplyTextInput name="text" />
+      <Button loading={busy} type="primary" block htmlType="submit">
+        {localizer.autoReply.submitBtn()}
+      </Button>
+    </Form>
+  );
+});

package/src/ui/ChatGroup/AutoReply/AutoReplyPanel.tsx

@@ -1,94 +1,94 @@
-import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
-import { Button } from 'antd';
-import { customize } from '../../customize';
-import { useLocalizer } from '../../localizer';
-import { useChatGroupContext } from '../ChatGroupContext';
-import { Icon } from '../../common/Icon';
-import { AutoReply } from '../../../core';
-import { chatifyApi } from '../../../core';
-import { AUTO_REPLY_FORM_INITIAL_VALUE, AutoReplyForm, AutoReplyFormValue } from './AutoReplyForm';
-
-function mapToFormValue(autoReply?: AutoReply | null): AutoReplyFormValue {
-  if (!autoReply) {
-    return AUTO_REPLY_FORM_INITIAL_VALUE;
-  }
-
-  return {
-    period: [dayjs(autoReply.period.start), dayjs(autoReply.period.end)],
-    text: autoReply.text,
-  };
-}
-
-function useValue() {
-  const { data: me } = chatifyApi.useGeCurrentUserAccountQuery();
-
-  const value = useMemo<AutoReplyFormValue>(() => {
-    return mapToFormValue(me?.autoReply);
-  }, [me]);
-
-  return value;
-}
-
-function useAutoReplyActions() {
-  const meId = chatifyApi.settings.me();
-  const [updateAccount, { isLoading }] = chatifyApi.useUpdateAccountMutation();
-
-  const onSubmit = useCallback(
-    (value: AutoReplyFormValue) =>
-      updateAccount({
-        id: meId,
-        autoReply: {
-          hasValue: true,
-          value: {
-            text: value.text,
-            period: {
-              start: value.period[0].toISOString(),
-              end: value.period[1].toISOString(),
-            },
-          },
-        },
-      }).unwrap(),
-    [updateAccount, meId],
-  );
-
-  const onClear = useCallback(
-    () =>
-      updateAccount({
-        id: meId,
-        autoReply: {
-          hasValue: true,
-          value: null,
-        },
-      }).unwrap(),
-    [updateAccount, meId],
-  );
-
-  return [onSubmit, isLoading, onClear] as const;
-}
-
-export const AutoReplyPanel = customize('AutoReplyPanel', () => {
-  const localizer = useLocalizer();
-  const { toggleAutoReply } = useChatGroupContext();
-  const value = useValue();
-  const [onSubmit, submitting, onClear] = useAutoReplyActions();
-
-  return (
-    <div className="wxchtf-auto-reply-panel">
-      <Button
-        onClick={toggleAutoReply}
-        className="wxchtf-auto-reply-panel-close"
-        type="link"
-        icon={<Icon type="close" />}
-      />
-      <div className="wxchtf-auto-reply-panel-header">
-        <h3>{localizer.autoReply.title()}</h3>
-        <Button type="link" onClick={onClear} disabled={submitting} className="wxchtf-auto-reply-panel-clear">
-          {localizer.autoReply.clearBtn()}
-        </Button>
-      </div>
-
-      <AutoReplyForm value={value} busy={submitting ?? false} onSubmit={onSubmit} />
-    </div>
-  );
-});
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { Icon } from '../../common/Icon';
+import { AutoReply } from '../../../core';
+import { chatifyApi } from '../../../core';
+import { AUTO_REPLY_FORM_INITIAL_VALUE, AutoReplyForm, AutoReplyFormValue } from './AutoReplyForm';
+
+function mapToFormValue(autoReply?: AutoReply | null): AutoReplyFormValue {
+  if (!autoReply) {
+    return AUTO_REPLY_FORM_INITIAL_VALUE;
+  }
+
+  return {
+    period: [dayjs(autoReply.period.start), dayjs(autoReply.period.end)],
+    text: autoReply.text,
+  };
+}
+
+function useValue() {
+  const { data: me } = chatifyApi.useGeCurrentUserAccountQuery();
+
+  const value = useMemo<AutoReplyFormValue>(() => {
+    return mapToFormValue(me?.autoReply);
+  }, [me]);
+
+  return value;
+}
+
+function useAutoReplyActions() {
+  const meId = chatifyApi.settings.me();
+  const [updateAccount, { isLoading }] = chatifyApi.useUpdateAccountMutation();
+
+  const onSubmit = useCallback(
+    (value: AutoReplyFormValue) =>
+      updateAccount({
+        id: meId,
+        autoReply: {
+          hasValue: true,
+          value: {
+            text: value.text,
+            period: {
+              start: value.period[0].toISOString(),
+              end: value.period[1].toISOString(),
+            },
+          },
+        },
+      }).unwrap(),
+    [updateAccount, meId],
+  );
+
+  const onClear = useCallback(
+    () =>
+      updateAccount({
+        id: meId,
+        autoReply: {
+          hasValue: true,
+          value: null,
+        },
+      }).unwrap(),
+    [updateAccount, meId],
+  );
+
+  return [onSubmit, isLoading, onClear] as const;
+}
+
+export const AutoReplyPanel = customize('AutoReplyPanel', () => {
+  const localizer = useLocalizer();
+  const { toggleAutoReply } = useChatGroupContext();
+  const value = useValue();
+  const [onSubmit, submitting, onClear] = useAutoReplyActions();
+
+  return (
+    <div className="wxchtf-auto-reply-panel">
+      <Button
+        onClick={toggleAutoReply}
+        className="wxchtf-auto-reply-panel-close"
+        type="link"
+        icon={<Icon type="close" />}
+      />
+      <div className="wxchtf-auto-reply-panel-header">
+        <h3>{localizer.autoReply.title()}</h3>
+        <Button type="link" onClick={onClear} disabled={submitting} className="wxchtf-auto-reply-panel-clear">
+          {localizer.autoReply.clearBtn()}
+        </Button>
+      </div>
+
+      <AutoReplyForm value={value} busy={submitting ?? false} onSubmit={onSubmit} />
+    </div>
+  );
+});

package/src/ui/ChatGroup/AutoReply/AutoReplyPeriodInput.tsx

@@ -1,22 +1,22 @@
-import { DatePicker, Form } from 'antd';
-import { customize } from '../../customize';
-import { useLocalizer } from '../../localizer';
-
-export interface AutoReplyPeriodInputProps {
-  name: string;
-}
-
-export const AutoReplyPeriodInput = customize('AutoReplyPeriodInput', (props: AutoReplyPeriodInputProps) => {
-  const { name } = props;
-  const localizer = useLocalizer();
-
-  return (
-    <Form.Item
-      label={localizer.autoReply.period.label()}
-      name={name}
-      rules={[{ required: true, message: localizer.autoReply.period.required() }]}
-    >
-      <DatePicker.RangePicker format={localizer.autoReply.period.format()} />
-    </Form.Item>
-  );
-});
+import { DatePicker, Form } from 'antd';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+
+export interface AutoReplyPeriodInputProps {
+  name: string;
+}
+
+export const AutoReplyPeriodInput = customize('AutoReplyPeriodInput', (props: AutoReplyPeriodInputProps) => {
+  const { name } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <Form.Item
+      label={localizer.autoReply.period.label()}
+      name={name}
+      rules={[{ required: true, message: localizer.autoReply.period.required() }]}
+    >
+      <DatePicker.RangePicker format={localizer.autoReply.period.format()} />
+    </Form.Item>
+  );
+});

package/src/ui/ChatGroup/AutoReply/AutoReplyTextInput.tsx

@@ -1,22 +1,22 @@
-import { Form, Input } from 'antd';
-import { customize } from '../../customize';
-import { useLocalizer } from '../../localizer';
-
-export interface AutoReplyTextInputProps {
-  name: string;
-}
-
-export const AutoReplyTextInput = customize('AutoReplyTextInput', (props: AutoReplyTextInputProps) => {
-  const { name } = props;
-  const localizer = useLocalizer();
-
-  return (
-    <Form.Item
-      label={localizer.autoReply.text.label()}
-      name={name}
-      rules={[{ required: true, message: localizer.autoReply.text.required() }]}
-    >
-      <Input.TextArea rows={4} />
-    </Form.Item>
-  );
-});
+import { Form, Input } from 'antd';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+
+export interface AutoReplyTextInputProps {
+  name: string;
+}
+
+export const AutoReplyTextInput = customize('AutoReplyTextInput', (props: AutoReplyTextInputProps) => {
+  const { name } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <Form.Item
+      label={localizer.autoReply.text.label()}
+      name={name}
+      rules={[{ required: true, message: localizer.autoReply.text.required() }]}
+    >
+      <Input.TextArea rows={4} />
+    </Form.Item>
+  );
+});

package/src/ui/ChatGroup/AutoReply/index.ts

@@ -1,19 +1,19 @@
-import { AutoReplyButton } from './AutoReplyButton';
-import { AutoReplyForm } from './AutoReplyForm';
-import { AutoReplyPanel } from './AutoReplyPanel';
-import { AutoReplyPeriodInput } from './AutoReplyPeriodInput';
-import { AutoReplyTextInput } from './AutoReplyTextInput';
-
-export * from './AutoReplyButton';
-export * from './AutoReplyForm';
-export * from './AutoReplyPanel';
-export * from './AutoReplyPeriodInput';
-export * from './AutoReplyTextInput';
-
-export interface AutoReplyCustomizeValue {
-  AutoReplyButton?: typeof AutoReplyButton.Component | null;
-  AutoReplyForm?: typeof AutoReplyForm.Component | null;
-  AutoReplyPanel?: typeof AutoReplyPanel.Component | null;
-  AutoReplyPeriodInput?: typeof AutoReplyPeriodInput.Component | null;
-  AutoReplyTextInput?: typeof AutoReplyTextInput.Component | null;
-}
+import { AutoReplyButton } from './AutoReplyButton';
+import { AutoReplyForm } from './AutoReplyForm';
+import { AutoReplyPanel } from './AutoReplyPanel';
+import { AutoReplyPeriodInput } from './AutoReplyPeriodInput';
+import { AutoReplyTextInput } from './AutoReplyTextInput';
+
+export * from './AutoReplyButton';
+export * from './AutoReplyForm';
+export * from './AutoReplyPanel';
+export * from './AutoReplyPeriodInput';
+export * from './AutoReplyTextInput';
+
+export interface AutoReplyCustomizeValue {
+  AutoReplyButton?: typeof AutoReplyButton.Component | null;
+  AutoReplyForm?: typeof AutoReplyForm.Component | null;
+  AutoReplyPanel?: typeof AutoReplyPanel.Component | null;
+  AutoReplyPeriodInput?: typeof AutoReplyPeriodInput.Component | null;
+  AutoReplyTextInput?: typeof AutoReplyTextInput.Component | null;
+}