ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: change .js file to .ts

Browse Source
This commit is contained in:
HD
2022-06-17 00:32:05 +08:00
parent 9c57fabeba
commit 3260347844
8 changed files with 208 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/MarkdownStyleOverride.js
-117
View File
@@ -1,117 +0,0 @@
// import React from 'react'
import { createGlobalStyle } from "styled-components";
const MarkdownOverrides = createGlobalStyle`
[class^='toastui-editor-']{
.toastui-editor-md-container{
border-bottom: none;
.toastui-editor-md-preview{
padding-right: 0;
padding-left: 8px;
}
.toastui-editor-md-splitter{
background-color:#D0D5DD ;
}
.ProseMirror{
height: 100%;
}
}
*{
margin: 0 ;
padding: 0;
}
.ProseMirror,p,.toastui-editor.md-mode {
margin:0 ;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #475467;
margin-bottom: 16px;
word-break: break-all;
}
a{
background-color: transparent;
}
pre{
width: 100%;
width: -webkit-fill-available;
}
blockquote {
border-left:none;
display: flex;
margin-top:0;
margin-bottom: 10px;
padding: 0;
padding: 16px;
color: #98a2b3;
opacity: 0.8;
box-shadow: inset 2px 0px 0px #a8b0bd;
display: flex;
align-items: center;
> p{
padding-right: 10px ;
font-weight: 400;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
> blockquote{
padding: 14px;
}
}
img{
cursor: pointer;
max-width:300px;
display: block;
}
ul {
white-space: nowrap;
margin-top:0;
margin-bottom:10px;
/* display: flex;
flex-direction:column;
margin-left: 20px; */
> li:before{
margin-top: 8px;
margin-left: -14px;
background-color: #475467;
}
/* list-style-type: disc; */
}
ul,
ol {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #475467;
/* list-style-position: inside; */
}
h1,
h2,
h3,[class*='heading']{
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
margin: 0;
border-bottom: none;
font-weight: 700;
color: #475467;
}
h1,[class*='heading1'] {
margin-top: 0 !important;
font-size: 24px;
line-height: 32px;
}
h2,[class*='heading2'] {
font-size: 20px;
line-height: 30px;
}
h3,[class*='heading3'] {
font-size: 16px;
line-height: 24px;
}
}
`;
export default MarkdownOverrides;
src/common/component/MarkdownStyleOverride.ts
+133
View File
@@ -0,0 +1,133 @@
import { createGlobalStyle } from 'styled-components';
const MarkdownOverrides = createGlobalStyle`
[class^='toastui-editor-'] {
.toastui-editor-md-container {
border-bottom: none;
.toastui-editor-md-preview {
padding-right: 0;
padding-left: 8px;
}
.toastui-editor-md-splitter {
background-color: #D0D5DD;
}
.ProseMirror {
height: 100%;
}
}
* {
margin: 0;
padding: 0;
}
.ProseMirror, p, .toastui-editor.md-mode {
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #475467;
margin: 0 0 16px;
word-break: break-all;
}
a {
background-color: transparent;
}
pre {
width: 100%;
width: -webkit-fill-available;
}
blockquote {
border-left: none;
display: flex;
margin-top: 0;
margin-bottom: 10px;
padding: 0;
padding: 16px;
color: #98a2b3;
opacity: 0.8;
box-shadow: inset 2px 0px 0px #a8b0bd;
align-items: center;
> p {
padding-right: 10px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
> blockquote {
padding: 14px;
}
}
img {
cursor: pointer;
max-width: 300px;
display: block;
}
ul {
white-space: nowrap;
margin-top: 0;
margin-bottom: 10px;
/* display: flex;
flex-direction:column;
margin-left: 20px; */
> li:before {
margin-top: 8px;
margin-left: -14px;
background-color: #475467;
}
/* list-style-type: disc; */
}
ul,
ol {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #475467;
/* list-style-position: inside; */
}
h1,
h2,
h3, [class*='heading'] {
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
margin: 0;
border-bottom: none;
font-weight: 700;
color: #475467;
}
h1, [class*='heading1'] {
margin-top: 0 !important;
font-size: 24px;
line-height: 32px;
}
h2, [class*='heading2'] {
font-size: 20px;
line-height: 30px;
}
h3, [class*='heading3'] {
font-size: 16px;
line-height: 24px;
}
}
`;
export default MarkdownOverrides;
src/common/component/NewVersion.js → src/common/component/NewVersion.tsx
+13 -4
View File
@@ -1,6 +1,8 @@
// import React from 'react'
import { FC } from "react";
import toast from "react-hot-toast";
import styled from "styled-components";
import Button from "./styled/Button";
const Styled = styled.span`
display: flex;
align-items: center;
@@ -15,8 +17,13 @@ const Styled = styled.span`
display: flex;
}
`;
import Button from "./styled/Button";
export default function NewVersion({ id, handleUpdate }) {
interface Props {
id: string;
handleUpdate: () => void;
}
const Index: FC<Props> = ({ id, handleUpdate }) => {
return (
<Styled>
<strong>New Version</strong> Available
@@ -30,4 +37,6 @@ export default function NewVersion({ id, handleUpdate }) {
</div>
</Styled>
);
}
};
export default Index;
src/common/component/TippyDefault.js → src/common/component/TippyDefault.ts
View File
src/index.js
-41
View File
@@ -1,41 +0,0 @@
// import React from 'react';
import ReactDOM from "react-dom/client";
import toast, { Toaster } from "react-hot-toast";
import { Reset } from "styled-reset";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import "./assets/base.css";
import "animate.css";
import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
import TippyDefault from "./common/component/TippyDefault";
import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride";
import ReduxRoutes from "./routes";
import NewVersion from "./common/component/NewVersion";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<>
<Reset />
<Toaster />
<TippyDefault />
<DndProvider backend={HTML5Backend}>
<ReduxRoutes />
</DndProvider>
<MarkdownStyleOverride />
</>
);
serviceWorkerRegistration.register({
// onSuccess: () => {
// toast.success("Service Worker Installed");
// },
onUpdate: (reg) => {
const handleUpdate = () => {
reg.unregister().then(() => {
window.location.reload();
});
};
toast((t) => <NewVersion id={t.id} handleUpdate={handleUpdate} />, {
duration: Infinity,
position: "top-right"
});
}
});
src/index.tsx
+45
View File
@@ -0,0 +1,45 @@
import ReactDOM from 'react-dom/client';
import toast, { Toaster } from 'react-hot-toast';
import { Reset } from 'styled-reset';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import './assets/base.css';
import 'animate.css';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import TippyDefault from './common/component/TippyDefault';
import MarkdownStyleOverride from './common/component/MarkdownStyleOverride';
import ReduxRoutes from './routes';
import NewVersion from './common/component/NewVersion';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<>
<Reset/>
<Toaster/>
<TippyDefault/>
<DndProvider backend={HTML5Backend}>
<ReduxRoutes/>
</DndProvider>
<MarkdownStyleOverride/>
</>
);
serviceWorkerRegistration.register({
// onSuccess: () => {
// toast.success("Service Worker Installed");
// },
onUpdate: (reg) => {
const handleUpdate = () => {
reg.unregister().then(() => {
window.location.reload();
});
};
toast((t) => <NewVersion id={t.id} handleUpdate={handleUpdate}/>, {
duration: Infinity,
position: 'top-right'
});
}
});
src/service-worker.js → src/service-worker.ts
+3 -2
View File
@@ -15,7 +15,7 @@ import { StaleWhileRevalidate } from "workbox-strategies";
clientsClaim();
// Precache all of the assets generated by your build process.
// Precache all the assets generated by your build process.
// Their URLs are injected into the manifest variable below.
// This variable must be present somewhere in your service worker file,
// even if you decide not to use precaching. See https://cra.link/PWA
@@ -50,7 +50,8 @@ registerRoute(
// precache, in this case same-origin .png requests like those from in public/
registerRoute(
// Add in any other file extensions or routing criteria as needed.
({ url }) => url.origin === self.location.origin && url.pathname.endsWith(".png"), // Customize this strategy as needed, e.g., by changing to CacheFirst.
// Customize this strategy as needed, e.g., by changing to CacheFirst.
({ url }) => url.origin === self.location.origin && url.pathname.endsWith(".png"),
new StaleWhileRevalidate({
cacheName: "images",
plugins: [
src/serviceWorkerRegistration.js → src/serviceWorkerRegistration.ts
+14 -9
View File
@@ -10,15 +10,20 @@
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://cra.link/PWA
interface Config {
onUpdate?: (registration: ServiceWorkerRegistration) => void;
onSuccess?: (registration: ServiceWorkerRegistration) => void;
}
const isLocalhost = Boolean(
window.location.hostname === "localhost" ||
// [::1] is the IPv6 localhost address.
window.location.hostname === "[::1]" ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
// [::1] is the IPv6 localhost address.
window.location.hostname === "[::1]" ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
);
export function register(config) {
export function register(config: Config) {
if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
@@ -41,7 +46,7 @@ export function register(config) {
navigator.serviceWorker.ready.then(() => {
console.log(
"This web app is being served cache-first by a service " +
"worker. To learn more, visit https://cra.link/PWA"
"worker. To learn more, visit https://cra.link/PWA"
);
});
} else {
@@ -52,7 +57,7 @@ export function register(config) {
}
}
function registerValidSW(swUrl, config) {
function registerValidSW(swUrl: string, config: Config) {
if (!navigator.serviceWorker) return;
navigator.serviceWorker
.register(swUrl)
@@ -70,7 +75,7 @@ function registerValidSW(swUrl, config) {
// content until all client tabs are closed.
console.log(
"New content is available and will be used when all " +
"tabs for this page are closed. See https://cra.link/PWA."
"tabs for this page are closed. See https://cra.link/PWA."
);
// Execute callback
@@ -97,7 +102,7 @@ function registerValidSW(swUrl, config) {
});
}
function checkValidServiceWorker(swUrl, config) {
function checkValidServiceWorker(swUrl: string, config: Config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { "Service-Worker": "script" }