[optimize] upgrade models, components & pages of Community & Acitivity

.eslintrc.json

@@ -21,7 +21,9 @@
         "prefer-const": "warn",
         "no-unused-vars": "warn",
         "@typescript-eslint/no-unused-vars": "warn",
+        "@typescript-eslint/no-explicit-any": "warn",
         "@typescript-eslint/no-unsafe-declaration-merging": "warn",
-        "@typescript-eslint/explicit-module-boundary-types": "off"
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/ban-ts-comment": "warn"
     }
 }

package.json

@@ -32,7 +32,7 @@
         "*.{html,md,css,less,js,ts,tsx,json}": "prettier --write"
     },
     "dependencies": {
-        "boot-cell": "^2.0.0-beta.7",
+        "boot-cell": "^2.0.0-beta.8",
         "browser-unhandled-rejection": "^1.0.2",
         "cell-router": "^3.0.0-rc.5",
         "classnames": "^2.5.1",

source/component/Feature.tsx

@@ -1,26 +1,28 @@
-import { WebCellElement, createCell } from 'web-cell';
+import { JsxChildren } from 'dom-renderer';
+import { FC } from 'web-cell';
 import classNames from 'classnames';
-import { Image } from 'boot-cell/source/Media/Image';
+import { Image } from 'boot-cell';
 
-import style from './Feature.less';
+import * as style from './Feature.module.less';
 
-export interface FeatureProps {
+export interface FeatureProps extends Record<'title' | 'summary', JsxChildren> {
     reverse?: boolean;
-    title: WebCellElement;
-    summary: WebCellElement;
     logo: string;
 }
 
-export function Feature({ reverse, title, summary, logo }: FeatureProps) {
-    return (
-        <div className="row">
-            <div className={classNames('col-md-8', reverse && 'order-md-2')}>
-                <h2 className={style.heading}>{title}</h2>
-                <p className="lead">{summary}</p>
-            </div>
-            <div className={classNames('col-md-4', reverse && 'order-md-1')}>
-                <Image fluid className="w-100" src={logo} />
-            </div>
+export const Feature: FC<FeatureProps> = ({
+    reverse,
+    title,
+    summary,
+    logo
+}) => (
+    <div className="row">
+        <div className={classNames('col-md-8', reverse && 'order-md-2')}>
+            <h2 className={style.heading}>{title}</h2>
+            <p className="lead">{summary}</p>
         </div>
-    );
-}
+        <div className={classNames('col-md-4', reverse && 'order-md-1')}>
+            <Image fluid className="w-100" src={logo} />
+        </div>
+    </div>
+);

source/component/MonthCalendar.tsx

@@ -0,0 +1,165 @@
+import { Badge, Button, ButtonProps, Table, TableProps } from 'boot-cell';
+import classNames from 'classnames';
+import { JsxChildren } from 'dom-renderer';
+import { computed, observable } from 'mobx';
+import { WebCell, attribute, component, observer } from 'web-cell';
+import {
+    Day,
+    TimeData,
+    changeMonth,
+    formatDate,
+    splitArray
+} from 'web-utility';
+
+// import { text2color } from './color';
+// import { OverlayBox } from './OverlayBox';
+
+export interface DateData {
+    date: TimeData;
+    content: JsxChildren;
+    link?: string;
+}
+
+export interface MonthCalendarProps
+    extends Omit<TableProps, 'variant' | 'onChange' | 'onSelect'>,
+        Pick<ButtonProps, 'variant'> {
+    locale?: Navigator['language'];
+    value?: DateData[];
+    onSelect?: (event: CustomEvent<DateData>) => any;
+    onChange?: (event: CustomEvent<Date>) => any;
+}
+
+export interface MonthCalendar extends WebCell<MonthCalendarProps> {}
+
+@component({ tagName: 'month-calendar' })
+@observer
+export class MonthCalendar
+    extends HTMLElement
+    implements WebCell<MonthCalendarProps>
+{
+    @attribute
+    @observable
+    accessor variant: MonthCalendarProps['variant'] = 'primary';
+
+    @attribute
+    @observable
+    accessor locale: Navigator['language'];
+
+    @observable
+    accessor value: DateData[] = [];
+
+    @computed
+    get weekFormatter() {
+        const { locale = globalThis.navigator?.language } = this;
+
+        return new Intl.DateTimeFormat(locale, { weekday: 'long' });
+    }
+
+    @observable
+    accessor currentDate = new Date();
+
+    @computed
+    get dateGrid() {
+        let startDate = new Date(this.currentDate);
+        startDate.setDate(1);
+        startDate = new Date(+startDate - startDate.getDay() * Day);
+
+        const dateList = Array.from(
+            new Array(42),
+            (_, index) => new Date(+startDate + index * Day)
+        );
+        return splitArray(dateList, 7);
+    }
+
+    changeMonth(delta: number) {
+        this.currentDate = changeMonth(this.currentDate, delta);
+
+        this.emit('change', this.currentDate);
+    }
+
+    renderDate = (date: Date) => {
+        const { value } = this,
+            dateText = formatDate(date, 'YYYY-MM-DD');
+        const list = value?.filter(
+            ({ date }) => formatDate(date, 'YYYY-MM-DD') === dateText
+        );
+
+        return (
+            <td
+                key={date + ''}
+                className={classNames({
+                    'opacity-50':
+                        date.getMonth() !== this.currentDate.getMonth(),
+                    'fw-bold': dateText === formatDate(new Date(), 'YYYY-MM-DD')
+                })}
+            >
+                <time className="d-block" dateTime={date.toJSON()}>
+                    {date.getDate()}
+                </time>
+
+                {list?.map(item =>
+                    typeof item.content === 'object' ? (
+                        item.content
+                    ) : (
+                        // <OverlayBox key={item.date + ''} title={item.content}>
+                        <Badge
+                            className="d-inline-block text-decoration-none w-100 text-truncate"
+                            // bg={text2color(item.content + '', ['light'])}
+                            href={item.link}
+                            onClick={() => this.emit('select', item)}
+                        >
+                            {item.content}
+                        </Badge>
+                        // </OverlayBox>
+                    )
+                )}
+            </td>
+        );
+    };
+
+    render() {
+        const { style, variant, weekFormatter, currentDate, dateGrid } = this;
+
+        return (
+            <Table style={{ tableLayout: 'fixed', ...style }}>
+                <caption>
+                    <div className="d-flex justify-content-between align-items-center">
+                        <Button
+                            variant={variant}
+                            onClick={() => this.changeMonth(-1)}
+                        >
+                            &lt;
+                        </Button>
+
+                        {formatDate(currentDate, 'YYYY-MM')}
+
+                        <Button
+                            variant={variant}
+                            onClick={() => this.changeMonth(1)}
+                        >
+                            &gt;
+                        </Button>
+                    </div>
+                </caption>
+                <thead>
+                    <tr>
+                        {dateGrid[0].map((date, index, { length }) => (
+                            <td
+                                key={index}
+                                className={`bg-${variant} text-white`}
+                                style={{ width: `calc(100% / ${length})` }}
+                            >
+                                {weekFormatter.format(date)}
+                            </td>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {dateGrid.map(days => (
+                        <tr key={days[0] + ''}>{days.map(this.renderDate)}</tr>
+                    ))}
+                </tbody>
+            </Table>
+        );
+    }
+}

source/component/SessionBox.tsx

@@ -1,24 +1,21 @@
-import { component, mixin, watch, createCell } from 'web-cell';
-import { observer } from 'mobx-web-cell';
-import { InputGroup } from 'boot-cell/source/Form/InputGroup';
-import { Field } from 'boot-cell/source/Form/Field';
-import { Button } from 'boot-cell/source/Form/Button';
+import { attribute, component, observer } from 'web-cell';
+import { observable } from 'mobx';
+import { InputGroup, FormControl, Button } from 'boot-cell';
 
 import { session } from '../model';
 
-@observer
 @component({
     tagName: 'session-box',
-    renderTarget: 'children'
+    mode: 'open'
 })
-export class SessionBox extends mixin() {
-    @watch
-    countDown = 0;
+@observer
+export class SessionBox extends HTMLElement {
+    @attribute
+    @observable
+    accessor countDown = 0;
 
     connectedCallback() {
         session.getProfile();
-
-        super.connectedCallback!();
     }
 
     handleSMSCode = () => {
@@ -46,20 +43,19 @@ export class SessionBox extends mixin() {
         );
     };
 
-    render() {
+    renderForm() {
         const { countDown } = this;
 
-        return session.user ? (
-            this.defaultSlot
-        ) : (
+        return (
             <form
+                // @ts-ignore
                 className="m-3 p-3 border rounded"
                 onSubmit={this.handleSignIn}
             >
                 <h2 className="text-center mb-3">参会者登录</h2>
 
                 <InputGroup size="lg" className="mb-3">
-                    <Field
+                    <FormControl
                         type="tel"
                         name="phone"
                         maxLength={11}
@@ -69,26 +65,43 @@ export class SessionBox extends mixin() {
                 </InputGroup>
 
                 <InputGroup size="lg" className="mb-3">
-                    <Field
+                    <FormControl
                         name="code"
                         required
                         placeholder="短信验证码"
                         autocomplete="off"
                     />
                     <Button
-                        outline
-                        color="secondary"
+                        variant="outline-secondary"
+                        // @ts-ignore
                         onClick={this.handleSMSCode}
                         disabled={!!countDown}
                     >
                         {countDown ? countDown + 's' : '获取'}
                     </Button>
                 </InputGroup>
 
-                <Button type="submit" color="primary" block size="lg">
+                <Button
+                    type="submit"
+                    variant="primary"
+                    className="d-block w-100"
+                    size="lg"
+                >
                     登录
                 </Button>
             </form>
         );
     }
+
+    render() {
+        return (
+            <>
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
+                />
+                {session.user ? <slot /> : this.renderForm()}
+            </>
+        );
+    }
 }

source/model/Activity.ts

@@ -1,24 +1,17 @@
 import { observable } from 'mobx';
-import { buildURLData } from 'web-utility/source/URL';
-import { Day, formatDate } from 'web-utility/source/date';
+import { buildURLData, Day, formatDate } from 'web-utility';
 
 import { DataItem, client } from './service';
 
-export interface Activity extends DataItem {
-    title: string;
-    start: string;
-    end: string;
-    address: string;
-    banner: string;
-    link: string;
-}
+export type Activity = DataItem &
+    Record<'title' | 'start' | 'end' | 'address' | 'banner' | 'link', string>;
 
 export class ActivityModel {
     @observable
-    loading = false;
+    accessor loading = false;
 
     @observable
-    list: Activity[] = [];
+    accessor list: Activity[] = [];
 
     async getDayList(date: Date) {
         this.loading = true;