Skip to content

Commit

Permalink
feat(Page Layout): UI and converting button
Browse files Browse the repository at this point in the history
  • Loading branch information
@turdiyev
turdiyev committed Apr 16, 2019
1 parent 858f70a commit 24ef039
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 49 deletions.
122 changes: 85 additions & 37 deletions src/components/EditorComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React, {useRef, useState, ReactNode} from 'react'
import React, { useRef, useState, ReactNode } from 'react'
import * as parseUtils from "../utils/parseUtils"
import styled from 'styled-components';
import CopyHTMLContentSVG from "./svg/CopyHTMLContentSVG"
import CopyTextContentSVG from "./svg/CopyTextContentSVG"
// import IconHandLeftArrowSVG from "./svg/IconHandLeftArrowSVG"
import IconHandRightArrowSVG from "./svg/IconHandRightArrowSVG"
import IconHandLeftArrowSVG from "./svg/IconHandLeftArrowSVG"
import IconTrashSVG from "./svg/IconTrashSVG"
import LatinEditorComponent from "./editor/LatinEditorComponent"
import CrylicEditorComponent from "./editor/CrylicEditorComponent"
import {MainConfigContext, ISettings} from "../containers/HomeContainer"
import { MainConfigContext, ISettings } from "../containers/HomeContainer"
import IconUnderlineSVG from "./svg/IconUnderlineSVG"
import {toast} from 'react-toastify';
import { toast } from 'react-toastify';
import { Button } from 'react-native';

interface IContentObject {
htmlContent: string,
Expand All @@ -36,6 +37,33 @@ const EditorWrap = styled.div`
}
}
&.page-layout{
position:relative;
margin:-17px 0 0;
.editable-box{
width:100% !important;
margin:0;
.editable{
height:auto;
min-height:460px;
font-size:25px;
margin:0 !important;
padding: 40px;
/*background:transparent;*/
box-shadow: none;
border:none;
}
}
.btn-page-convert{
position:fixed;
top:40%;
right: 0;
background:transparent;
color: #999;
text-align:center;
}
}
.editable-box{
width:50%;
margin:2px 2px 15px;
Expand All @@ -59,19 +87,19 @@ const EditorWrap = styled.div`
[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block;
color:#ccc;
color:#a5a5a5;
}
`;
export default function EditorComponent() {
const latinEditor: any = useRef<string>("");
const crylicEditor: any = useRef<string>("");
const [latinValue, setLatinValue] = useState<string>("")
const [crylicValue, setCrylicValue] = useState<string>("")
const [latinObj, setLatinObj] = useState<IContentObject>({htmlContent: "", textContent: ""})
const [crylicObj, setCrylicObj] = useState<IContentObject>({htmlContent: "", textContent: ""})
const [latinObj, setLatinObj] = useState<IContentObject>({ htmlContent: "", textContent: "" })
const [crylicObj, setCrylicObj] = useState<IContentObject>({ htmlContent: "", textContent: "" })

const changeCrylicData = (htmlContent: string) => {
crylicEditor.current.innerHTML = htmlContent;
if (crylicEditor.current) crylicEditor.current.innerHTML = htmlContent;
setCrylicValue(htmlContent)
setCrylicObj({
htmlContent,
Expand All @@ -80,7 +108,7 @@ export default function EditorComponent() {
}

const changeLatinData = (htmlContent: string) => {
latinEditor.current.innerHTML = htmlContent;
if (latinEditor.current) latinEditor.current.innerHTML = htmlContent;
setLatinValue(htmlContent)
setLatinObj({
htmlContent,
Expand Down Expand Up @@ -129,36 +157,56 @@ export default function EditorComponent() {
changeContentData("")
}

const editorArray: ReactNode[] = [
<LatinEditorComponent
changeCrylicData={changeCrylicData}
changeLatinData={changeLatinData}
trashListener={trashListener}
copyListener={copyListener}
latinObj={latinObj}
setLatinObj={setLatinObj}
latinValue={latinValue}
latinEditor={latinEditor}
/>,
<CrylicEditorComponent
changeCrylicData={changeCrylicData}
changeLatinData={changeLatinData}
trashListener={trashListener}
copyListener={copyListener}
crylicObj={crylicObj}
setCrylicObj={setCrylicObj}
crylicValue={crylicValue}
crylicEditor={crylicEditor}
/>
]
return (
<MainConfigContext.Consumer>
{(config: ISettings) => (
<EditorWrap className={config.verticalLayout ? 'vertical-layout' : ''}>
{config.latinFirst ? editorArray.shift() : editorArray.pop()}
{editorArray[0]}
</EditorWrap>
)}
{([config, setConfig]) => {

const editorArray: ReactNode[] = [
<LatinEditorComponent
changeCrylicData={changeCrylicData}
changeLatinData={changeLatinData}
trashListener={trashListener}
copyListener={copyListener}
latinObj={latinObj}
setLatinObj={setLatinObj}
latinValue={latinValue}
latinEditor={latinEditor}
/>,
<CrylicEditorComponent
changeCrylicData={changeCrylicData}
changeLatinData={changeLatinData}
trashListener={trashListener}
copyListener={copyListener}
crylicObj={crylicObj}
setCrylicObj={setCrylicObj}
crylicValue={crylicValue}
crylicEditor={crylicEditor}
/>]

const convertListener = (e: any) => {
if (crylicEditor.current) crylicEditor.current.focus();
if (latinEditor.current) latinEditor.current.focus();
setConfig({
...config,
visibleEditorIndex: Number(!config.visibleEditorIndex)
})
}
return config.pageLayout ? (
<EditorWrap className={'page-layout'}>
{config.visibleEditorIndex === 0 && editorArray[Number(!config.latinFirst)]}
{config.visibleEditorIndex === 1 && editorArray[Number(config.latinFirst)]}
{config.pageLayout && <button className="btn btn-page-convert" onClick={convertListener}>
<IconHandLeftArrowSVG size={48} color="#5983e8"/> <br/>
O'girish
</button>}
</EditorWrap>
) : (
<EditorWrap className={config.verticalLayout ? 'vertical-layout' : config.pageLayout ? 'page-layout' : ''}>
{editorArray[Number(!config.latinFirst)]}
{editorArray[Number(config.latinFirst)]}
</EditorWrap>
)
}}
</MainConfigContext.Consumer>
)
}
6 changes: 3 additions & 3 deletions src/components/svg/IconHandLeftArrowSVG.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ interface IProps {
export default function IconHandLeftArrowSVG({ title = "Krilchaga o'girish", size = 16, color = 'black' }: IProps) {
return (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 32 32">
<title>{title}</title>
<path fill={color} d="M13 30h5c1.654 0 3-1.346 3-3 0-0.535-0.14-1.037-0.387-1.472 0.833-0.534 1.387-1.467 1.387-2.528 0-0.768-0.29-1.469-0.766-2 0.476-0.531 0.766-1.232 0.766-2 0-0.35-0.060-0.687-0.171-1h7.171c1.654 0 3-1.346 3-3s-1.346-3-3-3h-12.334l2.932-5.501c0.262-0.454 0.401-0.973 0.401-1.499 0-1.654-1.346-3-3-3-0.824 0-1.592 0.327-2.163 0.922-0.007 0.008-0.015 0.015-0.022 0.023l-6.815 7.474v-1.419c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v20c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-1.382l4.553 2.276c0.139 0.069 0.292 0.106 0.447 0.106zM5 28c-0.552 0-1-0.448-1-1s0.448-1 1-1 1 0.448 1 1-0.448 1-1 1zM13.236 28l-5.236-2.618v-11.995l8.287-9.088c0.19-0.193 0.443-0.299 0.713-0.299 0.551 0 1 0.449 1 1 0 0.171-0.041 0.332-0.122 0.479-0.010 0.017-0.020 0.033-0.029 0.051l-3.732 7c-0.165 0.31-0.156 0.684 0.025 0.985s0.506 0.485 0.857 0.485h14c0.551 0 1 0.449 1 1s-0.449 1-1 1h-10c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.551 0 1 0.449 1 1s-0.449 1-1 1c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.551 0 1 0.449 1 1s-0.449 1-1 1h-1c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.551 0 1 0.449 1 1s-0.449 1-1 1h-4.764z"></path>
</svg>
<title>{title}</title>
<path fill={color} d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0s-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z"></path>
</svg>
)
}
17 changes: 17 additions & 0 deletions src/components/svg/IconPageLayoutViewSVG.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react'
interface IProps {
title?: string,
size?: number,
color?: string
}
export default function IconPageLayoutViewSVG({ title = "ALohida sahifa", size = 16, color = 'black' }: IProps) {
return (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 32 32">
<title>{title}</title>
<path fill={color} d="M28.681 7.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378 0-2.5 1.121-2.5 2.5v27c0 1.378 1.122 2.5 2.5 2.5h23c1.378 0 2.5-1.122 2.5-2.5v-19.5c0-0.448-0.137-1.23-1.319-2.841zM24.543 5.457c0.959 0.959 1.712 1.825 2.268 2.543h-4.811v-4.811c0.718 0.556 1.584 1.309 2.543 2.268zM28 29.5c0 0.271-0.229 0.5-0.5 0.5h-23c-0.271 0-0.5-0.229-0.5-0.5v-27c0-0.271 0.229-0.5 0.5-0.5 0 0 15.499-0 15.5 0v7c0 0.552 0.448 1 1 1h7v19.5z"></path>
<path fill={color} d="M23 26h-14c-0.552 0-1-0.448-1-1s0.448-1 1-1h14c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
<path fill={color} d="M23 22h-14c-0.552 0-1-0.448-1-1s0.448-1 1-1h14c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
<path fill={color} d="M23 18h-14c-0.552 0-1-0.448-1-1s0.448-1 1-1h14c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
</svg>
)
}
47 changes: 39 additions & 8 deletions src/containers/HomeContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import IconCircleCloseSVG from "../components/svg/IconCircleCloseSVG"
import IconTabSVG from "../components/svg/IconTabSVG"
import IconStatisticChartSVG from "../components/svg/IconStatisticChartSVG"
import IconVerticalViewSVG from "../components/svg/IconVerticalViewSVG"
import IconPageLayoutViewSVG from "../components/svg/IconPageLayoutViewSVG"
import posed from 'react-pose'
import styled from 'styled-components'
import Switch from "react-switch";
Expand Down Expand Up @@ -93,28 +94,33 @@ const SidebarNav = styled.nav`
export interface ISettings {
latinFirst: boolean,
verticalLayout: boolean,
statsEnable: boolean
pageLayout: boolean,
statsEnable: boolean,
visibleEditorIndex: 0 | 1
}

const initialConfig: ISettings = {
latinFirst: true,
verticalLayout: false,
statsEnable: false
pageLayout: false,
statsEnable: false,
visibleEditorIndex: 0
}
export const MainConfigContext = React.createContext<ISettings>(initialConfig);
export const MainConfigContext = React.createContext<[ISettings, any]>([initialConfig, null]);

export default function HomeContainer() {
const [sidebarVisible, setSidebarVisible] = useState<boolean>(false);
const [config, setConfig] = useLocalStorage<ISettings>("editor_config", initialConfig);

return (
<MainConfigContext.Provider value={config}>
<MainConfigContext.Provider value={[config, setConfig ]}>
<MainLayout settingsClickListener={(e: any) => setSidebarVisible(!sidebarVisible)}>

<EditorComponent

/>

<HomeSidebar >
<HomeSidebar>
<ConfigSidebar className="settings-sidebar" pose={sidebarVisible ? 'enter' : 'exit'}>
<header>
<h3><IconSettingsSVG color="#999" /> Sozlash</h3>
Expand All @@ -141,9 +147,13 @@ export default function HomeContainer() {
/>
</li>
<li>
<IconVerticalViewSVG size={24} /> <span>Vertical Joylashuv</span>
<IconVerticalViewSVG size={24} /> <span>Vertical Joylashuv</span>
<Switch
onChange={checked => setConfig({ ...config, verticalLayout: checked })}
onChange={checked => setConfig({
...config,
verticalLayout: checked,
pageLayout: false
})}
checked={config.verticalLayout}
onColor="#86d3ff"
onHandleColor="#2693e6"
Expand All @@ -156,6 +166,27 @@ export default function HomeContainer() {
width={32}
/>
</li>
<li>
<IconPageLayoutViewSVG size={24} /> <span>Alohida matn Joylashuvi</span>
<Switch
onChange={checked => setConfig({
...config,
pageLayout: checked,
verticalLayout: false,
visibleEditorIndex: 0,
})}
checked={config.pageLayout}
onColor="#86d3ff"
onHandleColor="#2693e6"
handleDiameter={20}
uncheckedIcon={false}
checkedIcon={false}
boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
height={15}
width={32}
/>
</li>
<li className="disabled">
<IconStatisticChartSVG size={24} color="#ccc" /> <span>Matn Statistikasi</span>
<Switch
Expand All @@ -176,7 +207,7 @@ export default function HomeContainer() {
<li>
<p className="feature-information">
Ba'zi imkoniyatlar ishlamaydi. Endi qo'shiladi.
</p>
</p>
</li>
</ul>
</SidebarNav>
Expand Down
4 changes: 3 additions & 1 deletion src/containers/layout/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ const Nav = styled.nav`
display:flex;
margin-bottom:15px;
line-height:40px;
position:relative;
z-index:3;
background: linear-gradient(120deg, #00e4d0, #5983e8);
transition: background 0.25s ease;
Expand Down Expand Up @@ -76,7 +78,7 @@ const ModalWrap = styled.div`
align-items: center;
justify-content: center;
display: flex;
.shade {
position: fixed;
background: rgba(0, 0, 0, 0.4);
Expand Down

0 comments on commit 24ef039

Please sign in to comment.