share components begin

src/pages/share/Detail.tsx

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import './Detail.less';
+
+export class Detail extends Component {
+
+	render() {
+		return (
+			<div>
+
+			</div>
+		)
+	}
+}

src/pages/share/List.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { RouteComponentProps } from "react-router-dom";
+import { Pagination } from "antd";
+import TankComponent from "../../common/component/TankComponent";
+import Pager from "../../common/model/base/Pager";
+import Share from "../../common/model/share/Share";
+import ShareBar from "./widget/ShareBar";
+
+import "./List.less";
+
+interface IProps extends RouteComponentProps {}
+
+interface IState {}
+
+export class List extends TankComponent<IProps, IState> {
+  pager = new Pager<Share>(this, Share, Pager.MAX_PAGE_SIZE);
+
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.pager.enableHistory();
+    this.refresh();
+  }
+
+  refresh = () => {
+    this.pager.httpList();
+  };
+
+  changePage = (page: number) => {
+    this.pager.page = page - 1; // page的页数0基
+    this.pager.httpList();
+    this.updateUI();
+  };
+
+  render() {
+    const { pager } = this;
+
+    return (
+      <div className="page-share-list">
+        {pager.data.map((share) => (
+          <ShareBar share={share} onDeleteSuccess={this.refresh} />
+        ))}
+
+        <Pagination
+          className="mt10 pull-right"
+          onChange={this.changePage}
+          current={pager.page + 1}
+          total={pager.totalItems}
+          pageSize={pager.pageSize}
+          hideOnSinglePage
+        />
+      </div>
+    );
+  }
+}

src/pages/share/widget/ShareBar.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import { RouteComponentProps } from "react-router-dom";
+import {
+  InfoCircleOutlined,
+  DeleteOutlined,
+  SmallDashOutlined,
+} from "@ant-design/icons";
+import TankComponent from "../../../common/component/TankComponent";
+import SafeUtil from "../../../common/util/SafeUtil";
+import DateUtil from "../../../common/util/DateUtil";
+import Expanding from "../../widget/Expanding";
+
+interface IProps extends RouteComponentProps {
+  share: any;
+  onDeleteSuccess: () => any;
+}
+
+interface IState {}
+
+export default class ShareBar extends TankComponent<IProps, IState> {
+  // 小屏幕下操作栏
+  showMore = false;
+
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  showShare = () => {};
+
+  delShare = () => {};
+
+  toggleHandles = () => {
+    this.showMore = !this.showMore;
+    this.updateUI();
+  };
+
+  render() {
+    const { history, share } = this.props;
+    const { showMore } = this;
+    return (
+      <div className="widget-share-bar">
+        <div onClick={() => history.push(`/share/detail/${share.uuid}`)}>
+          <div className="media">
+            <div className="pull-left">
+              <div className="left-part">
+                <span className="basic-span">
+                  <img className="share-icon" src={share.getIcon()} />
+                </span>
+              </div>
+            </div>
+
+            {/*在大屏下的操作栏*/}
+            <div className="pull-right visible-pc">
+              <div className="right-part">
+                <span
+                  className="share-operation"
+                  onClick={(e) =>
+                    SafeUtil.stopPropagationWrap(e)(this.showShare())
+                  }
+                >
+                  <InfoCircleOutlined className="btn-action mr5" />
+                </span>
+                <span
+                  className="share-operation"
+                  onClick={(e) =>
+                    SafeUtil.stopPropagationWrap(e)(this.delShare())
+                  }
+                >
+                  <DeleteOutlined className="btn-action red" />
+                </span>
+
+                <span className="share-date">
+                  {DateUtil.simpleDateHourMinute(share.updateTime)}
+                </span>
+
+                <span className="share-date w110 text-center">
+                  {share.expireInfinity
+                    ? "永久有效"
+                    : DateUtil.simpleDateHourMinute(share.expireTime)}
+                </span>
+              </div>
+            </div>
+
+            {/*在小屏幕下的操作栏*/}
+            <div className="pull-right visible-mobile">
+              <span
+                className="more-btn"
+                onClick={(e) =>
+                  SafeUtil.stopPropagationWrap(e)(this.toggleHandles())
+                }
+              >
+                <SmallDashOutlined className="btn-action navy f18" />
+              </span>
+            </div>
+
+            <div className="media-body">
+              <div className="middle-part">
+                <span className="share-name">
+                  {share.name}
+                  {share.hasExpired() ? (
+                    <span className="text-danger">已过期</span>
+                  ) : null}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Expanding>
+          {showMore ? (
+            <div className="more-panel">
+              <div className="cell-btn">
+                <span>
+                  分享时间: {DateUtil.simpleDateHourMinute(share.createTime)}
+                </span>
+                <span>
+                  {share.expireInfinity
+                    ? "永久有效"
+                    : DateUtil.simpleDateHourMinute(share.expireTime)}
+                </span>
+              </div>
+
+              <div
+                className="cell-btn"
+                onClick={(e) =>
+                  SafeUtil.stopPropagationWrap(e)(this.showShare())
+                }
+              >
+                <InfoCircleOutlined className="btn-action mr5" />
+              </div>
+
+              <div
+                className="cell-btn"
+                onClick={(e) =>
+                  SafeUtil.stopPropagationWrap(e)(this.delShare())
+                }
+              >
+                <DeleteOutlined className="btn-action red" />
+              </div>
+            </div>
+          ) : null}
+        </Expanding>
+      </div>
+    );
+  }
+}

src/pages/share/widget/ShareDialogModal.tsx

@@ -0,0 +1,56 @@
+import React, { Component } from "react";
+import TankComponent from "../../../common/component/TankComponent";
+import Share from "../../../common/model/share/Share";
+import {Modal} from "antd";
+
+interface IProps {
+  share: Share,
+  showSuccessHint?: boolean,
+  onSuccess: () => any,
+  onClose: () => any
+}
+
+interface IState {}
+
+export class ShareDialogModal extends TankComponent<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  static open = (share: Share) => {
+      let modal = Modal.confirm({
+        title: "分享详情",
+        width: "50vw",
+        okCancel: false,
+        okButtonProps: {
+          className: "display-none"
+        },
+        content: (
+          <ShareDialogModal
+            share={share}
+            onSuccess={() => {
+              modal.destroy();
+            }}
+            onClose={() => {
+              modal.destroy();
+            }}
+          />
+        ),
+      })
+  };
+
+  render() {
+    const { share } = this.props;
+
+    return <div className="widget-share-dialog-panel">
+      <div className="share-block">
+        <div>
+          <img className="share-icon" src={share.getIcon()} />
+          <span className="name">{share.name}</span>
+        </div>
+      </div>
+
+    </div>;
+  }
+}