\n
\n );\n}\nexport default Header;\n\nconst style: { [key: string]: React.CSSProperties } = {\n root: {\n backgroundColor: 'rgba(174,196,255,0.22)',\n height: 76,\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n paddingLeft: '8%',\n paddingRight: '8%',\n },\n logo: {\n display: 'flex',\n fontSize: 30,\n alignItems: 'center'\n },\n logolink: {\n color: 'black',\n textDecoration: 'none',\n },\n linkGroup: {\n display: 'flex',\n width: 500,\n alignItems: 'center',\n justifyContent: 'space-between',\n listStyleType: 'none',\n },\n link: {\n display: 'flex',\n fontSize: 26,\n color: 'black',\n textDecoration: 'none',\n // marginRight: 30\n }\n};","import React from 'react';\n\ntype ContentProps = {\n children: any,\n}\nexport function Content(props: ContentProps) {\n return (\n SAFT-GO
\n {width > 850 ?\n - \n {menu.map((e, i) => (\n
{e.title} \n ))}\n
\n \n setOpen(!open)} color={open ? 'white': 'black'}/>\n
\n }\n \n {props.children}\n
\n )\n}","export const EQUIL_ENDPOINT = \"/api/equil\";\nexport const DATA_ENDPOINT = \"/api/datas\";\nexport const SEARCH_ENDPOINT = \"/api/search\";\nexport const FLASHES_ENDPOINT = \"/api/flashes\";\n// client_id & secret deprecated\n// export const GITHUB_MARKDOWN_ENDPOINT = 'https://api.github.com/markdown?client_id=a64b2351101664c50a0c&client_secret=8c90116485321b0cc23d45b1b3101658d1c41e56';\nexport const GITHUB_MARKDOWN_ENDPOINT = 'https://api.github.com/markdown';","import React, { useState } from 'react';\nimport { Slider } from '@material-ui/core';\n\ntype ContinuosSliderProps = {\n val: number,\n min?: number,\n max?: number,\n onChange?: (val: number) => void\n}\n\nexport default function ContinuosSlider({ val, min, max, onChange }: ContinuosSliderProps) {\n const [value, setValue] = useState\n onChangeContent && onChangeContent(event.target.value)}\n placeholder=\"Search Components\"\n InputProps={{\n startAdornment: (\n \n \n )\n }}\n style={{ flex: 1, width: '100%', marginTop: 10, marginBottom: 10}}\n />\n
\n )\n}","import React from 'react';\nimport { Component } from '../routes/Home';\nimport SearchHeader from './SearchHeader';\nimport { SEARCH_ENDPOINT } from '../_lib/endpoint';\n\ntype ComponentSelectorProps = {\n components: Component[],\n onClickContent: (idx: number) => void,\n calcButton: React.ReactElement\n};\ntype State = {\n searchingName: string,\n searchingLists: any[],\n}\nexport default class ComponentSelector extends React.Component\n {listComponents}\n
\n \n {\n this.setState({searchingName});\n searchingName.length >=2 && this.callSearch(searchingName);\n }}\n />\n
\n )\n }\n}","import React from 'react';\nimport { FormControlLabel, Checkbox, TextField } from '@material-ui/core';\n\ntype FormControlConditionProps = {\n valueDef: string,\n placeholder?: string,\n onChangeValue?: (e: number | undefined) => void,\n onError?: (err: string) => void,\n onCheckConst?: (check: boolean) => void,\n};\ntype State = {\n const: boolean,\n val: string | null,\n hasErr?: boolean,\n};\nclass FormControlCondition extends React.Component- \n {this.props.components.map((component,i ) => (\n (component.name.toLowerCase().indexOf(this.state.searchingName.toLowerCase()) > -1) ?
- this.props.onClickContent(i)}>\n {component.name}\n : \n ))}\n
\n {\n const nextConst = !this.state.const;\n this.setState({ const: nextConst });\n this.props.onCheckConst && this.props.onCheckConst(nextConst);\n }}\n value={this.props.valueDef}\n />\n }\n label={this.props.valueDef}\n />\n
\n )\n }\n}\n\nexport default FormControlCondition;","import React from 'react';\nimport { Circle, Group, Text } from 'react-konva';\n\ntype PointProps = {\n setHover: (state: boolean) => void,\n fill: string,\n x: number,\n y: number,\n hover: boolean,\n info: number[],\n};\nexport default function Point({ setHover, fill, x, y, info, hover }: PointProps) {\n return (\n \n {\n const valStr = e.target.value;\n if (valStr.length === 0) {\n this.setState({ val: null, hasErr: false });\n this.props.onChangeValue && this.props.onChangeValue(undefined)\n return\n }\n if (this.isNumber(valStr)) {\n const val = parseFloat(valStr);\n this.setState({ val: valStr, hasErr: false });\n this.props.onChangeValue && this.props.onChangeValue(val);\n } else {\n this.setState({ hasErr: true });\n this.props.onError && this.props.onError('숫자를 입력해야합니다.');\n }\n }}\n />\n
\n \n {waiting && this.setState({ error: '' })} />\n
\n );\n }\n}\nconst styles: { [key: string]: React.CSSProperties } = {\n calculateButton: {\n width: '100%', height: 40, backgroundColor: \"#FECF58\", borderRadius: 10, fontSize: 17, border: 'none'\n },\n saveButton: {\n marginTop: 10, width: '100%', height: 40, backgroundColor: \"#ABCDEF\", borderRadius: 10, fontSize: 17, border: 'none',\n }\n}\n// const mobileStyles: { [key: string]: React.CSSProperties } = {\n\n// }\n\nexport default Home;","import React from 'react';\n\ntype lp = {\n lang: string,\n onClick: (lang: string) => void,\n}\nexport function LangSelector({ lang, onClick }: lp) {\n return (\n \n );\n}\n\nconst styles: { [key: string]: React.CSSProperties } = {\n font: {\n marginTop: 10,\n fontWeight: \"bold\",\n }\n};","import React from 'react';\nimport { Content } from '../../components/Content';\nimport './index.css';\nimport './github.css';\nimport ReactHtmlParser from 'react-html-parser';\nimport { GITHUB_MARKDOWN_ENDPOINT } from '../../_lib/endpoint';\nimport { LinearProgress } from '@material-ui/core';\nimport { LangSelector } from './LangSelector';\n\ntype State = {\n markdown?: string,\n loading: boolean,\n lang: string,\n}\nclass Document extends React.Component<{}, State> {\n state: State = { lang: 'ko', loading: true };\n changeLang = (lang: string) => {\n this.setState({ lang, loading: true });\n this.loadMD(lang);\n }\n loadMD = async (lang: string) => {\n let path: string;\n if (lang === 'ko') {\n path = '/Readme.md';\n } else {\n path = '/Readme_eng.md';\n }\n const res = await fetch(path);\n const markdownRaw = await res.text();\n const githubRes = await fetch(GITHUB_MARKDOWN_ENDPOINT, {\n method: 'POST',\n body: JSON.stringify({ text: markdownRaw })\n })\n const markdown = await githubRes.text();\n this.setState({ markdown, loading: false });\n }\n componentDidMount = () => {\n this.loadMD('ko');\n }\n render() {\n const { markdown, loading } = this.state;\n return (\n <>\n {loading && - \n {this.state.selectedComponents && this.state.selectedComponents.map((comp, i) => (\n
- \n
this.cancleComponent(i)} />\n \n ))}\n
\n
\n {/* \n \n this.setState({ fetchP })} onError={(error) => this.setState({ error })} onCheckConst={(constP) => this.setState({ constP })} />\n this.setState({ fetchT })} onError={(error) => this.setState({ error })} onCheckConst={(constT) => this.setState({ constT })} />\n \n\n {\n let newComponents = [...this.state.components];\n // switching value\n newComponents[i].selected = newComponents[i].selected ? false : true;\n this.setState({ components: newComponents });\n }}\n calcButton={\n }\n />\n \n\n {/* exp data input */}\n
\n \n \n \n {/* label */}\n { }} fill=\"purple\" x={e.x} y={e.y} info={[]} />\n )\n }\n \n \n \n this.setExpData(e.target.value)} />}\n \n
\n \n \n this.setState({ showcl: !this.state.showcl })} value=\"Show connected line\" />}\n label=\"Binodal curve\"\n />\n this.setState({ showtie: !this.state.showtie })} value=\"Show tieline\" />}\n label=\"Tieline\"\n />\n this.setState({ showexp: !this.state.showexp })} value=\"Show exp data\" />}\n label=\"Exp data\"\n />\n \n
\n \n
\n {this.state.showexp && \n {P && mode && mode === \"BUBLP\" ?\n
\n \n P : {P.toFixed(3)} atm \n this.setState({ P })} min={this.state.min} max={this.state.max} />\n
\n : T && mode === \"BUBLT\" ?\n \n T : {T.toFixed(3)} K \n this.setState({ T })} min={this.state.min} max={this.state.max} />\n
\n : <>\n }\n \n
\n \n \n 극성 필터 \n this.onDStatusChange(e)}>\n \n \n \n \n \n \n 회합성 필터 \n this.onTStatusChange(e)}>\n \n \n \n \n \n
\n );\n }\n}\nexport default Database;","import React from 'react';\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\nimport Header from './components/Header';\nimport Home from './routes/Home';\nimport Document from './routes/Documents';\nimport Database from './routes/Database';\n\ntype State = {\n width: number,\n height: number,\n};\nclass App extends React.Component<{}, State> {\n state: State = {\n width: 0,\n height: 0,\n }\n componentDidMount = () => {\n this.updateWindowDimensions();\n window.addEventListener('resize', this.updateWindowDimensions);\n }\n\n componentWillUnmount = () => {\n window.removeEventListener('resize', this.updateWindowDimensions);\n }\n\n updateWindowDimensions = () => {\n this.setState({ width: window.innerWidth, height: window.innerHeight });\n }\n\n render() {\n return (\n