diff options
Diffstat (limited to 'frontend/src/components/Inputs')
| -rw-r--r-- | frontend/src/components/Inputs/Code.js | 54 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/Dropdown.js | 120 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/Password.js | 14 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/Text.js | 25 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/index.js | 6 |
5 files changed, 219 insertions, 0 deletions
diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js new file mode 100644 index 0000000..adb1536 --- /dev/null +++ b/frontend/src/components/Inputs/Code.js @@ -0,0 +1,54 @@ +import React from "react"; +import styled from 'styled-components' +import CharLimit from "../decorators/CharLimit"; +import Editor from 'react-simple-code-editor'; +import {Highlighter} from "../renderers/Code"; +import {CodeLike, Hover} from "../Common/mixins"; + +const Wrapper = styled.div` + position: relative; +` +const EditorWrapper = styled(Editor)` + overflow: visible !important; + + & > * { + padding: 0 !important; + width: 100%; + } + + & pre, & code, & > textarea { + ${CodeLike} + min-height: 40vh; + } + + & pre { + z-index: -1 !important; + } + + & > textarea { + ${Hover} + padding: 0.6em !important; + outline: none !important; + } +` + +export const Code = ({content, id, readOnly, setContentCallback, ...props}) => { + return ( + <Wrapper> + <EditorWrapper + name="content" + readOnly={readOnly} + placeholder="Paste your text here" + value={content} + id={id} + required + highlight={code => <Highlighter theme="atom">{code}</Highlighter> } + onValueChange={code => setContentCallback(code)} + padding={15} + /> + <CharLimit + content={content} + maxLength={props.maxLength} /> + </Wrapper> + ); +}
\ No newline at end of file diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js new file mode 100644 index 0000000..9fde6ed --- /dev/null +++ b/frontend/src/components/Inputs/Dropdown.js @@ -0,0 +1,120 @@ +import Dropdown from "react-dropdown"; +import React from "react"; +import styled from 'styled-components'; +import {LANGS, THEMES} from "../renderers/Code"; +import {Labelled} from "../decorators/Labelled"; +import {Border, DropShadow, InputLike, Rounded} from "../Common/mixins"; + +const StyledDropdown = styled(Dropdown)` + ${Border} + ${Rounded} + ${DropShadow} + ${InputLike} + cursor: pointer; + + & .Dropdown-root { + cursor: pointer; + + &:hover, &.is-open { + opacity: 1; + } + } + + & .Dropdown-placeholder { + width: 5.5em; + } + + & .Dropdown-menu { + border-top: 1px solid ${p => p.theme.colors.text}; + margin-top: 0.5em; + bottom: auto; + } + + & .Dropdown-option { + margin-top: 0.5em; + transition: all 0.5s cubic-bezier(.25,.8,.25,1); + + &:hover { + font-weight: 700; + opacity: 0.4; + } + } +` + +const GenericDropdown = (props) => { + function _onSelect(option) { + props.onChange({ + target: { + name: props.label, + value: option.label + } + }); + } + + return ( + <Labelled + label={props.label} + id={props.id} + value={props.value}> + <StyledDropdown + options={props.options} + onChange={_onSelect} + value={props.value} + placeholder={props.placeholder} + id={props.id} /> + </Labelled> + ); +} + +export const Expiry = (props) => { + const options = [ + '5 years', + '1 year', + '1 month', + '1 week', + '1 day', + '1 hour', + '10 min', + ]; + + return ( + <GenericDropdown + {...props} + options={options} + placeholder='1 week' + label='expiry' + /> + ); +} + +export const Language = (props) => { + const options = Object.entries(LANGS).map((key, _) => ({ + 'value': key[1], + 'label': key[0] + })) + + return ( + <GenericDropdown + {...props} + options={options} + placeholder='detect' + label='language' + /> + ); +} + +export const Theme = (props) => { + const options = Object.entries(THEMES).map((key) => ({ + 'value': key[1], + 'label': key[0] + })) + + return ( + <GenericDropdown + {...props} + options={options} + placeholder='atom' + label='theme' + /> + ); +}
\ No newline at end of file diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js new file mode 100644 index 0000000..099aae4 --- /dev/null +++ b/frontend/src/components/Inputs/Password.js @@ -0,0 +1,14 @@ +import React from "react"; +import {Labelled} from "../decorators/Labelled"; +import {Input} from "../Common/Input"; + +export const Password = (props) => <Labelled label="password"> + <Input + name="pass" + placeholder={props.placeholder ?? "add password"} + type="password" + autoComplete="off" + onChange={props.onChange} + value={props.value} + id={props.id} /> +</Labelled>
\ No newline at end of file diff --git a/frontend/src/components/Inputs/Text.js b/frontend/src/components/Inputs/Text.js new file mode 100644 index 0000000..600e653 --- /dev/null +++ b/frontend/src/components/Inputs/Text.js @@ -0,0 +1,25 @@ +import CharLimit from "../decorators/CharLimit"; +import React from "react"; +import {Labelled} from "../decorators/Labelled"; +import {Input} from "../Common/Input"; + +export const Text = React.forwardRef(({label, id, readOnly, onChange, value, maxLength, autoFocus}, ref) => { + return ( + <Labelled label={label} value={value}> + <Input + ref={ref} + name={label} + readOnly={readOnly} + placeholder="Title" + id={id} + type="text" + autoFocus={autoFocus} + autoComplete="off" + onChange={onChange} + value={value} /> + <CharLimit + content={value} + maxLength={maxLength} /> + </Labelled> + ); +})
\ No newline at end of file diff --git a/frontend/src/components/Inputs/index.js b/frontend/src/components/Inputs/index.js new file mode 100644 index 0000000..b16deb3 --- /dev/null +++ b/frontend/src/components/Inputs/index.js @@ -0,0 +1,6 @@ +import {Code} from './Code'; +import {Expiry, Language, Theme} from "./Dropdown"; +import {Password} from "./Password"; +import {Text} from "./Text"; + +export {Code, Expiry, Language, Theme, Password, Text};
\ No newline at end of file |