+ {/*
*/}
{
constructor(props: SidebarProps) {
super(props);
this.state = {
index: 0,
hoverIndex: -1,
+ hoverShelfIndex: -1,
+ isCollpaseShelf: false,
+ isOpenDelete: false,
+ shelfIndex: 0,
isCollapsed:
StorageUtil.getReaderConfig("isCollapsed") === "yes" || false,
};
@@ -35,6 +40,9 @@ class Sidebar extends React.Component {
handleHover = (index: number) => {
this.setState({ hoverIndex: index });
};
+ handleShelfHover = (index: number) => {
+ this.setState({ hoverShelfIndex: index });
+ };
handleCollapse = (isCollapsed: boolean) => {
this.setState({ isCollapsed });
this.props.handleCollapse(isCollapsed);
@@ -43,6 +51,20 @@ class Sidebar extends React.Component {
handleJump = (url: string) => {
openExternalUrl(url);
};
+ handleDeleteShelf = () => {
+ if (this.state.shelfIndex < 1) return;
+ let shelfTitles = Object.keys(ShelfUtil.getShelf());
+ //获取当前书架名
+ let currentShelfTitle = shelfTitles[this.state.shelfIndex];
+ ShelfUtil.removeShelf(currentShelfTitle);
+ this.setState({ shelfIndex: 0 }, () => {
+ this.props.handleShelfIndex(0);
+ this.props.handleMode("shelf");
+ });
+ };
+ handleDeletePopup = (isOpenDelete: boolean) => {
+ this.setState({ isOpenDelete });
+ };
render() {
const renderSideMenu = () => {
return sideMenu.map((item, index) => {
@@ -50,7 +72,7 @@ class Sidebar extends React.Component {
{
}}
style={this.props.isCollapsed ? { width: 40, marginLeft: 15 } : {}}
>
- {this.state.index === index ? (
+ {this.state.index === index && this.props.mode !== "shelf" ? (
) : null}
- {this.state.hoverIndex === index ? (
+ {this.state.hoverIndex === index && this.props.mode !== "shelf" ? (
) : null}
{
>
@@ -111,36 +133,162 @@ class Sidebar extends React.Component {
);
});
};
- return (
- {
+ this.props.handleShelfIndex(index);
+ if (index > 0) {
+ this.props.handleMode("shelf");
+ } else {
+ this.props.handleMode("home");
+ }
+ this.setState({ index: -1 });
+ }}
+ onMouseEnter={() => {
+ this.handleShelfHover(index);
+ }}
+ onMouseLeave={() => {
+ this.handleShelfHover(-1);
+ }}
+ style={
+ index === 0
+ ? { display: "none" }
+ : this.props.isCollapsed
+ ? { width: 40, marginLeft: 15 }
+ : {}
+ }
+ >
+ {this.props.shelfIndex === index ? (
+
+ ) : null}
+ {this.state.hoverShelfIndex === index ? (
+
+ ) : null}
+
+ );
+ });
+ };
+ const deletePopupProps = {
+ mode: "shelf",
+ name: Object.keys(ShelfUtil.getShelf())[this.state.shelfIndex],
+ title: "Delete this shelf",
+ description: "This action will clear and remove this shelf",
+ handleDeletePopup: this.handleDeletePopup,
+ handleDeleteOpearion: this.handleDeleteShelf,
+ };
+ return (
+ <>
+ {" "}
+ {
mode: string;
isCollapsed: boolean;
+ shelfIndex: number;
+
handleMode: (mode: string) => void;
handleSearch: (isSearch: boolean) => void;
handleCollapse: (isCollapsed: boolean) => void;
@@ -15,5 +17,9 @@ export interface SidebarProps extends RouteComponentProps {
export interface SidebarState {
index: number;
hoverIndex: number;
+ hoverShelfIndex: number;
isCollapsed: boolean;
+ isCollpaseShelf: boolean;
+ shelfIndex: number;
+ isOpenDelete: boolean;
}
diff --git a/src/containers/sidebar/sidebar.css b/src/containers/sidebar/sidebar.css
index ccc1c94f..3c60b3d7 100644
--- a/src/containers/sidebar/sidebar.css
+++ b/src/containers/sidebar/sidebar.css
@@ -14,8 +14,22 @@
position: relative;
top: 85px;
width: 210px;
- height: 100%;
- overflow: hidden;
+ height: calc(100% - 100px);
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+.side-menu-container-parent:hover::-webkit-scrollbar-thumb,
+.side-menu-container-parent:active::-webkit-scrollbar-thumb,
+.side-menu-container-parent:focus::-webkit-scrollbar-thumb {
+ display: block;
+ width: 1px;
+}
+.side-menu-container-parent::-webkit-scrollbar-thumb {
+ display: none;
+}
+.side-menu-container-parent::-webkit-scrollbar {
+ width: 2px;
+ height: 0.5rem;
}
.sidebar-list {
margin-right: 5px;
@@ -42,8 +56,13 @@
.side-menu-container {
/* overflow: hidden; */
width: 100%;
- height: 100%;
- overflow-y: scroll;
+ padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
+ box-sizing: content-box;
+ position: relative;
+}
+.side-shelf-container {
+ /* overflow: hidden; */
+ width: 100%;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box;
position: relative;
@@ -51,7 +70,7 @@
.side-menu-icon {
/* float: left; */
- font-size: 17px;
+ font-size: 22px;
margin: 9px 12px 7px 18px;
display: flex;
justify-content: center;
@@ -68,7 +87,7 @@
text-overflow: ellipsis;
white-space: nowrap;
margin-left: -20px;
- margin-bottom: 10px;
+ margin-bottom: 3px;
position: relative;
bottom: 1px;
overflow: hidden;
@@ -99,7 +118,27 @@
white-space: nowrap;
overflow-x: hidden;
}
-
+.side-shelf-title {
+ font-size: 17px;
+ font-weight: 600;
+ margin-bottom: 10px;
+ margin-top: 10px;
+ display: inline-block;
+}
+.side-shelf-title-container {
+ width: 70%;
+ margin-left: 10%;
+ border-bottom: 1px solid #ccc;
+}
+.side-shelf-title-icon {
+ margin-top: 13px;
+ float: right;
+ font-weight: 500;
+ font-size: 14px;
+ transform-origin: center center;
+ transition: transform 0.1s ease;
+ cursor: pointer;
+}
.side-menu-selector-container {
width: 100%;
height: 39px;
- 
{
- this.handleJump("https://koodo.960960.xyz");
- }}
- style={this.state.isCollapsed ? { display: "none" } : {}}
- className="logo"
- />
-
+ return shelfTitle.map((item, index) => {
+ return (
+ {
- this.handleCollapse(!this.state.isCollapsed);
- }}
- >
-
-
+ const renderSideShelf = () => {
+ let shelfList = ShelfUtil.getShelf();
+ let shelfTitle = Object.keys(shelfList);
-
-
- - {renderSideMenu()}
+
+
+
+
+
+
+ {this.props.t(item)}
+
+
+ {
+ this.handleJump("https://koodo.960960.xyz");
+ }}
+ style={this.state.isCollapsed ? { display: "none" } : {}}
+ className="logo"
+ />
+
{" "}
+ {this.state.isOpenDelete && {
+ this.handleCollapse(!this.state.isCollapsed);
+ }}
+ >
+
+
+
+
+
+ - {renderSideMenu()}
+
+
+ {!this.state.isCollpaseShelf && (
+ 我的书架
+ {
+ this.setState({
+ isCollpaseShelf: !this.state.isCollpaseShelf,
+ });
+ }}
+ style={
+ this.state.isCollpaseShelf
+ ? { transform: "rotate(-90deg)" }
+ : {}
+ }
+ >
+ - {renderSideShelf()}