ui book page footer navbar menu font

demo
taha12322 3 years ago
parent d4aa9d6e64
commit 16cac55ec0
  1. 1
      package.json
  2. 23
      public/index.html
  3. 38
      src/components/footer/MoveBtn.tsx
  4. 4
      src/components/footer/Wrapper.tsx
  5. 1
      src/components/nav/NavItem.tsx
  6. 32
      src/components/sideMenu/Wrapper.tsx
  7. 30
      src/containers/Footer.tsx
  8. 17
      src/containers/Header.tsx
  9. 62
      src/containers/Reader.tsx
  10. 151
      src/containers/commons/ContextMenu.tsx
  11. 82
      src/containers/menu/Note.tsx
  12. 76
      src/containers/menu/Option.tsx
  13. 4
      src/lib/hooks/useHighlight.ts
  14. 12
      src/slices/book.ts
  15. 7
      yarn.lock

@ -41,6 +41,7 @@
},
"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"epubjs": "^0.3.88",
"node-sass": "4.14.1",
"react-epub-viewer": "^0.1.7",

@ -2,30 +2,11 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React-Epub-Viewer Demo</title>
<title>Book reader</title>
<meta name="description" content="React-Epub-Viewer Demo Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
rel="icon"
sizes="24x24"
href="%PUBLIC_URL%/favicons/favicon_24x24.png"
/>
<link
rel="icon"
sizes="48x48"
href="%PUBLIC_URL%/favicons/favicon_48x48.png"
/>
<link
rel="icon"
sizes="96x96"
href="%PUBLIC_URL%/favicons/favicon_96x96.png"
/>
<link
rel="apple-touch-icon"
href="%PUBLIC_URL%/favicons/favicon_96x96.png"
/>
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/global.css" />
<style>
@font-face {
@ -42,7 +23,7 @@
font-family: "SansNum";
src: url(../fonts/IRANSansWebFaNum.woff);
}
body {
* , body {
font-family: Sans, Nazanin;
}
</style>

@ -1,46 +1,52 @@
import styled from 'styled-components'
import styled from "styled-components";
// icons
import { PrevIcon, NextIcon } from 'lib/svg'
import { PrevIcon, NextIcon } from "lib/svg";
// lib
import * as styles from 'lib/styles/styles'
import * as styles from "lib/styles/styles";
const MoveBtn = ({ type, onClick }: Props) => {
const Icon = type === "PREV"
? NextIcon
: PrevIcon;
const Icon = type === "PREV" ? NextIcon : PrevIcon;
const msg = type === "PREV"
? "이전 페이지"
: "다음 페이지";
const msg = type === "PREV" ? "이전 페이지" : "다음 페이지";
return (
<Container onClick={onClick} title={msg}>
<Content>
<Icon />
{window.innerWidth > 768 ? <Icon /> : <Icon style={{ opacity: "0" }} />}
</Content>
</Container>
);
}
};
const Container = styled.button`
min-width: 60px;
min-width: 160px;
height: 100%;
display: flex;
align-items: center;
padding-top: 5px;
justify-content: center;
cursor: pointer;
outline: none;
&:focus, &:hover {
filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%);
&:focus,
&:hover {
filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg)
brightness(113%) contrast(101%);
}
`;
const contentM = styled.div`
display: flex;
align-items: center;
justify-content: center;
transition: 0.1s ${styles.transition};
`;
const Content = styled.div`
display: flex;
align-items: center;
justify-content: center;
transition: .1s ${styles.transition};
transition: 0.1s ${styles.transition};
& > svg {
width: 18px;
@ -49,7 +55,7 @@ const Content = styled.div`
`;
interface Props {
type: "PREV" | "NEXT"
type: "PREV" | "NEXT";
onClick: () => void;
}

@ -7,7 +7,7 @@ const Wrapper = styled.div`
left: 0;
bottom: 0;
width: 100%;
height: 60px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
@ -15,3 +15,5 @@ const Wrapper = styled.div`
`;
export default Wrapper

@ -21,6 +21,7 @@ const Content = styled.button`
cursor: pointer;
background-color: ${palette.gray0};
outline: none;
direction: rtl;
& > span {
transition: .2s ${styles.transition};

@ -1,11 +1,11 @@
import React from 'react'
import styled from 'styled-components'
import React from "react";
import styled from "styled-components";
// components
import CloseBtn from 'components/sideMenu/CloseBtn'
import CloseBtn from "components/sideMenu/CloseBtn";
// lib
import * as styles from 'lib/styles/styles'
import zIndex from 'lib/styles/zIndex'
import palette from 'lib/styles/palette'
import * as styles from "lib/styles/styles";
import zIndex from "lib/styles/zIndex";
import palette from "lib/styles/palette";
const Wrapper = ({ title, show, onClose, children }: Props, ref: any) => {
return (
@ -16,10 +16,11 @@ const Wrapper = ({ title, show, onClose, children }: Props, ref: any) => {
</Header>
{children}
</Container>
)
}
);
};
const Container = styled.div`
direction: rtl;
display: flex;
flex-direction: column;
position: fixed;
@ -29,15 +30,15 @@ const Container = styled.div`
top: 0;
right: 0;
z-index: ${zIndex.menu};
box-shadow: -4px 0 8px 0 rgba(0,0,0,.16);
box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.16);
background-color: ${palette.white};
border-radius: 16px 0 0 16px;
transform: ${({ show }: { show: boolean }) => show
? `translateX(0px) scale(1)`
: `translateX(420px) scale(.9)`
};
transition: .4s ${styles.transition};
transform: ${({ show }: { show: boolean }) =>
show ? `translateX(0px) scale(1)` : `translateX(420px) scale(.9)`};
transition: 0.4s ${styles.transition};
overflow-y: auto;
text-align: right;
direction: rtl;
${styles.scrollbar(0)};
`;
@ -48,6 +49,7 @@ const Header = styled.div`
align-items: center;
justify-content: space-between;
padding-top: 4px;
direction: rtl;
& > span {
padding-left: 24px;
@ -63,4 +65,4 @@ interface Props {
children?: React.ReactNode;
}
export default React.forwardRef(Wrapper)
export default React.forwardRef(Wrapper);

@ -2,17 +2,30 @@
import Wrapper from "components/footer/Wrapper";
import Item from "components/footer/Item";
import MoveBtn from "components/footer/MoveBtn";
import styled from "styled-components";
const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => {
return (
<>
<Wrapper>
<MoveBtn type="NEXT" onClick={() => onPageMove("NEXT")} />
<Item text={`${nowPage} / ${totalPage}`} />
<MoveBtn type="PREV" onClick={() => onPageMove("PREV")} />
{/* <Item text={`${nowPage} / ${totalPage}`} /> */}
{window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
</Wrapper>
</>
);
};
const Button = styled.button`
width: 100%;
justify-content: center;
display: flex;
height: 35px;
padding: 2px 2rem;
color: #fff;
font-family: inherit;
background-color: rgb(0, 154, 168);
`;
interface Props {
title: string;
nowPage: number;
@ -21,3 +34,14 @@ interface Props {
}
export default Footer;
const WrapperBtn = styled.div`
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
`;

@ -28,7 +28,7 @@ const Header = ({
/>
</nav>
<nav>
<Button>خرید کتاب</Button>
{window.innerWidth > 768 ? <Button>خرید کتاب</Button> : null}
</nav>
<nav
style={{
@ -38,8 +38,9 @@ const Header = ({
}}
>
<Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>||</span>
<p style={{ margin: "0", color: "#fff" }}>نام کتاب </p>
<span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<p style={{ margin: "0", color: "#fff" }}>
</p>
<Logo />
<Img
src="/react-epub-viewer/images/menu.svg"
@ -58,17 +59,21 @@ const Header = ({
const Button = styled.button`
display: flex;
margin-top: 11px;
margin-top: 15px;
border-radius: 5px;
border: solid 2px #fff;
padding: 3px 2rem;
padding: 2px 2rem;
color: #fff;
font-family: inherit;
&:hover {
background-color: #fff;
color: rgb(0, 154, 168);
}
`;
const Img = styled.img`
width: 25px;
`;
interface Props {
title: String;

@ -2,6 +2,7 @@ import { useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Provider } from "react-redux";
import { ReactEpubViewer } from "react-epub-viewer";
import styled from "styled-components";
// containers
import Header from "containers/Header";
import Footer from "containers/Footer";
@ -13,6 +14,7 @@ import Snackbar from "containers/commons/Snackbar";
// components
import ViewerWrapper from "components/commons/ViewerWrapper";
import LoadingView from "LoadingView";
import BookInfo from "components/nav/BookInfo";
// slices
import store from "slices";
import { updateBook, updateCurrentPage, updateToc } from "slices/book";
@ -29,11 +31,13 @@ import Book, { BookStyle, BookOption } from "types/book";
import Page from "types/page";
import Toc from "types/toc";
import { title } from "node:process";
import ArrowBackIosRoundedIcon from "@material-ui/icons/ArrowBackIosRounded";
import ArrowForwardIosRoundedIcon from "@material-ui/icons/ArrowForwardIosRounded";
import MoveBtn from "components/footer/MoveBtn";
const Reader = ({ url, loadingView }: Props) => {
const dispatch = useDispatch();
const currentLocation = useSelector<RootState, Page>((state) => {
console.log({ state });
return state.book.currentLocation;
});
@ -59,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
});
const [navControl, onNavToggle] = useMenu(navRef, 300);
const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 5000);
const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
const {
selection,
@ -155,13 +159,13 @@ const Reader = ({ url, loadingView }: Props) => {
/** ContextMenu off */
const onContextmMenuRemove = () => setIsContextMenu(false);
console.log({ viewerRef });
const [settingicon, setsettingicon] = useState(false);
const changeiconsettinghandler = () => {
setsettingicon(!settingicon);
};
return (
<>
<ViewerWrapper>
@ -171,7 +175,35 @@ const Reader = ({ url, loadingView }: Props) => {
onOptionToggle={onOptionToggle}
onLearningToggle={onLearningToggle}
/>
<nav
style={{
display: "flex",
justifyContent: "center",
marginTop: "1rem",
}}
>
{window.innerWidth < 768 ? (
<button
style={{
opacity: "0",
position: "absolute",
left: "0",
width: "20%",
height: "85%",
top: "4rem",
zIndex: 10,
}}
onClick={() => onPageMove("NEXT")}
>
<ArrowBackIosRoundedIcon />
</button>
) : (
<button onClick={() => onPageMove("NEXT")}>
<ArrowBackIosRoundedIcon />
</button>
)}
<nav style={{ overflow: "hidden" }}>
<ReactEpubViewer
url={url}
viewerLayout={viewerLayout}
@ -184,6 +216,27 @@ const Reader = ({ url, loadingView }: Props) => {
loadingView={loadingView || <LoadingView />}
ref={viewerRef}
/>
</nav>
{window.innerWidth < 768 ? (
<button
style={{
opacity: "0",
position: "absolute",
right: "0",
width: "20%",
height: "85%",
top: "4rem",
}}
onClick={() => onPageMove("PREV")}
>
<ArrowForwardIosRoundedIcon />
</button>
) : (
<button onClick={() => onPageMove("PREV")}>
<ArrowForwardIosRoundedIcon />
</button>
)}
</nav>
<Footer
title={currentLocation.chapterName}
@ -230,7 +283,6 @@ const Reader = ({ url, loadingView }: Props) => {
onUpdateHighlight={onUpdateHighlight}
onContextmMenuRemove={onContextmMenuRemove}
/>
<Snackbar />
</>
);
@ -238,9 +290,11 @@ const Reader = ({ url, loadingView }: Props) => {
const ReaderWrapper = ({ url, loadingView }: Props) => {
return (
<>
<Provider store={store}>
<Reader url={url} loadingView={loadingView} />
</Provider>
</>
);
};

@ -1,18 +1,17 @@
import { useState, useEffect, useCallback, useRef } from 'react'
import { useSelector } from 'react-redux'
import { useState, useEffect, useCallback, useRef } from "react";
import { useSelector } from "react-redux";
// components
import Wrapper from 'components/contextMenu/Wrapper'
import ColorItem from 'components/contextMenu/ColorItem'
import Item from 'components/contextMenu/Item'
import Wrapper from "components/contextMenu/Wrapper";
import ColorItem from "components/contextMenu/ColorItem";
import Item from "components/contextMenu/Item";
// utils
import { getParagraphCfi } from 'lib/utils/commonUtil'
import { getParagraphCfi } from "lib/utils/commonUtil";
// slices
import { contextmenuWidth } from 'lib/styles/viewerLayout'
import { contextmenuWidth } from "lib/styles/viewerLayout";
// types
import { RootState } from 'slices'
import Highlight, { Color } from 'types/highlight'
import Selection from 'types/selection'
import { RootState } from "slices";
import Highlight, { Color } from "types/highlight";
import Selection from "types/selection";
const ContextMenu = ({
active,
@ -21,10 +20,14 @@ const ContextMenu = ({
onAddHighlight,
onRemoveHighlight,
onUpdateHighlight,
onContextmMenuRemove
onContextmMenuRemove,
}: Props) => {
const highlights = useSelector<RootState, Highlight[]>(state => state.book.highlights);
const colorList = useSelector<RootState, Color[]>(state => state.book.colorList);
const highlights = useSelector<RootState, Highlight[]>(
(state) => state.book.highlights
);
const colorList = useSelector<RootState, Color[]>(
(state) => state.book.colorList
);
const menuRef = useRef<HTMLDivElement | null>(null);
@ -37,16 +40,18 @@ const ContextMenu = ({
const [height, setHeight] = useState<number>(0);
const [y, setY] = useState<number>(selection.y);
const ColorList = colorList.map(
color => <ColorItem key={color.code}
const ColorList = colorList.map((color) => (
<ColorItem
key={color.code}
name={color.name}
color={color.code}
onClick={selection.update
onClick={
selection.update
? () => onUpdateHighlight(highlight, color.code)
: () => onAddHighlight(color.code)
} />
);
}
/>
));
/** Remove highlight */
const onRemoveHighlight_ = useCallback(() => {
@ -63,23 +68,28 @@ const ContextMenu = ({
* @param e Mouse Event
* @param e.path
*/
const onRemove = useCallback(({ path }: any) => {
const onRemove = useCallback(
({ path }: any) => {
if (!menuRef.current) return;
if ([...path].includes(menuRef.current)) return;
onContextmMenuRemove();
}, [menuRef, onContextmMenuRemove]);
},
[menuRef, onContextmMenuRemove]
);
/**
* Arrow event
* @param e Keyboard Event
* @param e.key
*/
const onKeyPress = useCallback(({ key }: any) => {
const onKeyPress = useCallback(
({ key }: any) => {
key && key === "ArrowLeft" && onContextmMenuRemove();
key && key === "ArrowRight" && onContextmMenuRemove();
}, [onContextmMenuRemove]);
},
[onContextmMenuRemove]
);
/** Check whether the menu button is visible */
useEffect(() => {
@ -88,7 +98,9 @@ const ContextMenu = ({
const paragraphCfi = getParagraphCfi(selection.cfiRange);
if (!paragraphCfi) return;
const filtered = highlights.filter(highlight => highlight.key === paragraphCfi + selection.cfiRange);
const filtered = highlights.filter(
(highlight) => highlight.key === paragraphCfi + selection.cfiRange
);
if (!filtered.length) return;
const highlight_ = filtered[0];
@ -99,49 +111,41 @@ const ContextMenu = ({
} else {
setIsEraseBtn(false);
}
}, [
active,
highlights,
selection.cfiRange,
selection.update
]);
}, [active, highlights, selection.cfiRange, selection.update]);
/** Register contextmenu events */
useEffect(() => {
if (!viewerRef.current) return;
const iframe = document.querySelector('iframe');
const node = iframe && iframe.contentWindow && iframe.contentWindow.document;
const scrolledTarget = viewerRef.current.querySelector('div');
const iframe = document.querySelector("iframe");
const node =
iframe && iframe.contentWindow && iframe.contentWindow.document;
const scrolledTarget = viewerRef.current.querySelector("div");
if (active) {
setDisplay(true);
scrolledTarget && scrolledTarget.addEventListener('scroll', onContextmMenuRemove);
node && node.addEventListener('mousedown', onRemove);
node && node.addEventListener('keyup', onKeyPress);
document.addEventListener('mousedown', onRemove);
document.addEventListener('keyup', onKeyPress);
scrolledTarget &&
scrolledTarget.addEventListener("scroll", onContextmMenuRemove);
node && node.addEventListener("mousedown", onRemove);
node && node.addEventListener("keyup", onKeyPress);
document.addEventListener("mousedown", onRemove);
document.addEventListener("keyup", onKeyPress);
} else {
setDisplay(false);
scrolledTarget && scrolledTarget.removeEventListener('scroll', onContextmMenuRemove);
node && node.removeEventListener('mousedown', onRemove);
node && node.removeEventListener('keyup', onKeyPress);
document.removeEventListener('mousedown', onRemove);
document.removeEventListener('keyup', onKeyPress);
};
scrolledTarget &&
scrolledTarget.removeEventListener("scroll", onContextmMenuRemove);
node && node.removeEventListener("mousedown", onRemove);
node && node.removeEventListener("keyup", onKeyPress);
document.removeEventListener("mousedown", onRemove);
document.removeEventListener("keyup", onKeyPress);
}
return () => {
node && node.removeEventListener('mousedown', onContextmMenuRemove);
node && node.removeEventListener('keyup', onKeyPress);
document.removeEventListener('keyup', onKeyPress);
}
}, [
viewerRef,
active,
onRemove,
onContextmMenuRemove,
onKeyPress
]);
node && node.removeEventListener("mousedown", onContextmMenuRemove);
node && node.removeEventListener("keyup", onKeyPress);
document.removeEventListener("keyup", onKeyPress);
};
}, [viewerRef, active, onRemove, onContextmMenuRemove, onKeyPress]);
/** Set modified contextmenu height & whether menu is reverse */
useEffect(() => {
@ -156,7 +160,7 @@ const ContextMenu = ({
const { innerHeight } = window;
if (selection.y + defaultHeight > innerHeight) {
y_ = selection.y - selection.height - (defaultHeight);
y_ = selection.y - selection.height - defaultHeight;
if (y_ < 0) {
setHeight(defaultHeight + y_ - 8);
y_ = 8;
@ -170,29 +174,28 @@ const ContextMenu = ({
}
setY(y_);
}, [
selection.y,
selection.height,
ColorList,
isEraseBtn,
setHeight
]);
}, [selection.y, selection.height, ColorList, isEraseBtn, setHeight]);
return (<>
{display && <Wrapper x={selection.x}
return (
<>
{display && (
<Wrapper
x={selection.x}
y={y}
width={contextmenuWidth}
height={height}
isReverse={isReverse}
ref={menuRef}>
ref={menuRef}
>
<div>
{ColorList}
{isEraseBtn && <Item text="Remove" onClick={onRemoveHighlight_} />}
{isEraseBtn && <Item text="حذف" onClick={onRemoveHighlight_} />}
</div>
</Wrapper>}
</>);
}
</Wrapper>
)}
</>
);
};
interface Props {
active: boolean;
@ -204,4 +207,4 @@ interface Props {
onContextmMenuRemove: () => void;
}
export default ContextMenu
export default ContextMenu;

@ -1,60 +1,60 @@
import React, { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
// containers
import Highlight from 'containers/menu/commons/Highlight'
import Highlight from "containers/menu/commons/Highlight";
// components
import Wrapper from 'components/sideMenu/Wrapper'
import LearningLayout from 'components/note/Layout'
import MenuEmpty from 'components/sideMenu/MenuEmpty'
import Wrapper from "components/sideMenu/Wrapper";
import LearningLayout from "components/note/Layout";
import MenuEmpty from "components/sideMenu/MenuEmpty";
// types
import { RootState } from 'slices'
import HighlightType from 'types/highlight'
import { MenuControl } from 'lib/hooks/useMenu'
import { RootState } from "slices";
import HighlightType from "types/highlight";
import { MenuControl } from "lib/hooks/useMenu";
const Note = ({
control,
onToggle,
onClickHighlight,
emitEvent,
viewerRef
}: Props, ref: any) => {
const highlights = useSelector<RootState, HighlightType[]>(state => state.book.highlights);
const Note = (
{ control, onToggle, onClickHighlight, emitEvent, viewerRef }: Props,
ref: any
) => {
const highlights = useSelector<RootState, HighlightType[]>(
(state) => state.book.highlights
);
const [highlightList, setHighlightList] = useState<any[]>([]);
/** Set highlight contents */
useEffect(() => {
const Items = highlights.map(h => <Highlight key={h.key}
const Items = highlights.map((h) => (
<Highlight
key={h.key}
highlight={h}
onClick={onClickHighlight}
emitEvent={emitEvent}
viewerRef={viewerRef} />
);
viewerRef={viewerRef}
/>
));
setHighlightList(Items);
}, [
viewerRef,
highlights,
onClickHighlight,
emitEvent,
setHighlightList
]);
}, [viewerRef, highlights, onClickHighlight, emitEvent, setHighlightList]);
return (<>
{control.display && <Wrapper title="نشانه گذار"
return (
<>
{control.display && (
<Wrapper
title="نشانه گذار"
show={control.open}
onClose={onToggle}
ref={ref} >
ref={ref}
>
<LearningLayout>
{highlightList.length > 0
? highlightList
: <MenuEmpty text="! نشانه ای موجود نیست " />
}
{highlightList.length > 0 ? (
highlightList
) : (
<MenuEmpty text="! نشانه ای موجود نیست " />
)}
</LearningLayout>
</Wrapper>}
</>);
}
</Wrapper>
)}
</>
);
};
interface Props {
control: MenuControl;
@ -64,4 +64,4 @@ interface Props {
viewerRef: any;
}
export default React.forwardRef(Note)
export default React.forwardRef(Note);

@ -139,8 +139,44 @@ const Option = (
onClose={onToggle}
ref={ref}
>
{/* <OptionLayout>
<ControlIconBtnWrapper title="View Direction">
<OptionLayout>
<Setting/>
</OptionLayout>
</Wrapper>
)}
</>
);
};
interface Props {
control: MenuControl;
bookStyle: BookStyle;
bookOption: BookOption;
bookFlow: BookFlow;
onToggle: () => void;
emitEvent: () => void;
onBookStyleChange: (bookStyle: BookStyle) => void;
onBookOptionChange: (bookOption: BookOption) => void;
}
type SliderType =
| "FontSize"
| "LineHeight"
| "MarginHorizontal"
| "MarginVertical";
type ViewType = {
active: boolean;
spread: boolean;
};
export default React.forwardRef(Option);
{/* <ControlIconBtnWrapper title="View Direction">
<ControlIconBtn
type="ScrollHorizontal"
alt="Horizontal View"
@ -213,38 +249,4 @@ const Option = (
defaultValue={marginVertical}
step={1}
onChange={(e) => onChangeSlider("MarginVertical", e)}
/>
</OptionLayout> */}
<Setting
id="t"
/>
</Wrapper>
)}
</>
);
};
interface Props {
control: MenuControl;
bookStyle: BookStyle;
bookOption: BookOption;
bookFlow: BookFlow;
onToggle: () => void;
emitEvent: () => void;
onBookStyleChange: (bookStyle: BookStyle) => void;
onBookOptionChange: (bookOption: BookOption) => void;
}
type SliderType =
| "FontSize"
| "LineHeight"
| "MarginHorizontal"
| "MarginVertical";
type ViewType = {
active: boolean;
spread: boolean;
};
export default React.forwardRef(Option);
/> */}

@ -84,7 +84,7 @@ const useHighlight = (
if (filtered.length > 0) {
dispatch(newSnackbar({
text: "There are already registered highlights in your selection.",
text: ".انتخاب شما از قبل نشانه گذاری شده است",
type: "WARNING"
}));
@ -193,7 +193,7 @@ const useHighlight = (
dispatch(popHighlight(key));
dispatch(newSnackbar({
text: "The highlight removed successful!",
text: " !نشانه گذاری شما با موفقیت حذف شد",
type: "INFO"
}));

@ -36,12 +36,12 @@ const initialCurrentLocation: Page = {
/** 초기 색상표 상태 */
const initialColorList: Color[] = [
{ name: 'Red', code: palette.red4 },
{ name: 'Orange', code: palette.orange4 },
{ name: 'Yellow', code: palette.yellow4 },
{ name: 'Green', code: palette.green4 },
{ name: 'Blue', code: palette.blue4 },
{ name: 'Purple', code: palette.purple4 }
{ name: 'قرمز', code: palette.red4 },
{ name: 'نارنجی', code: palette.orange4 },
{ name: 'زرد', code: palette.yellow4 },
{ name: 'سبز', code: palette.green4 },
{ name: 'آبی', code: palette.blue4 },
{ name: 'بنفش', code: palette.purple4 }
]
const initialState: BookState = {

@ -1650,6 +1650,13 @@
react-is "^16.8.0 || ^17.0.0"
react-transition-group "^4.4.0"
"@material-ui/icons@^4.11.2":
version "4.11.2"
resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/styles@^4.11.4":
version "4.11.4"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"

Loading…
Cancel
Save