diff options
Diffstat (limited to 'src')
24 files changed, 513 insertions, 462 deletions
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index a23c459..1c673fa 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -1,4 +1,3 @@ -import "./console.scss"; import { connect } from "react-redux"; import React from "react"; import Input from "./console/Input"; diff --git a/src/console/components/console.scss b/src/console/index.css index 2d548df..2d548df 100644 --- a/src/console/components/console.scss +++ b/src/console/index.css diff --git a/src/console/index.tsx b/src/console/index.tsx index e1a9dd3..228625e 100644 --- a/src/console/index.tsx +++ b/src/console/index.tsx @@ -5,6 +5,7 @@ import promise from "redux-promise"; import * as consoleActions from "./actions/console"; import { Provider } from "react-redux"; import Console from "./components/Console"; +import "./index.css"; import React from "react"; import ReactDOM from "react-dom"; diff --git a/src/settings/components/form/BlacklistForm.scss b/src/settings/components/form/BlacklistForm.scss deleted file mode 100644 index a230d0d..0000000 --- a/src/settings/components/form/BlacklistForm.scss +++ /dev/null @@ -1,9 +0,0 @@ -.form-blacklist-form { - &-row { - display: flex; - - .column-url { - flex: 1; - } - } -} diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx index 859cb9f..6fb9eca 100644 --- a/src/settings/components/form/BlacklistForm.tsx +++ b/src/settings/components/form/BlacklistForm.tsx @@ -1,9 +1,29 @@ -import "./BlacklistForm.scss"; +import styled from "styled-components"; import AddButton from "../ui/AddButton"; import DeleteButton from "../ui/DeleteButton"; import React from "react"; import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist"; +const Grid = styled.div``; + +const GridRow = styled.div` + display: flex; +`; + +const GridCell = styled.div<{ grow?: number }>` + &:nth-child(1) { + flex-grow: 1; + } + &:nth-child(2) { + flex-shrink: 1; + } +`; + +const Input = styled.input` + width: 100%; + box-sizing: border-box; +`; + interface Props { value: Blacklist; onChange: (value: Blacklist) => void; @@ -19,37 +39,46 @@ class BlacklistForm extends React.Component<Props> { render() { return ( - <div className="form-blacklist-form"> - {this.props.value.items.map((item, index) => { - if (item.partial) { - return null; - } - return ( - <div key={index} className="form-blacklist-form-row"> - <input - data-index={index} - type="text" - name="url" - className="column-url" - value={item.pattern} - onChange={this.bindValue.bind(this)} - onBlur={this.props.onBlur} - /> - <DeleteButton - data-index={index} - name="delete" - onClick={this.bindValue.bind(this)} - onBlur={this.props.onBlur} - /> - </div> - ); - })} + <> + <Grid role="list"> + {this.props.value.items.map((item, index) => { + if (item.partial) { + return null; + } + return ( + <GridRow role="listitem" key={index}> + <GridCell> + <Input + data-index={index} + type="text" + name="url" + aria-label="URL" + value={item.pattern} + placeholder="example.com/mail/*" + onChange={this.bindValue.bind(this)} + onBlur={this.props.onBlur} + /> + </GridCell> + <GridCell> + <DeleteButton + data-index={index} + name="delete" + onClick={this.bindValue.bind(this)} + onBlur={this.props.onBlur} + aria-label="Delete" + /> + </GridCell> + </GridRow> + ); + })} + </Grid> <AddButton name="add" + aria-label="Add" style={{ float: "right" }} onClick={this.bindValue.bind(this)} /> - </div> + </> ); } diff --git a/src/settings/components/form/KeymapsForm.scss b/src/settings/components/form/KeymapsForm.scss deleted file mode 100644 index 1a4e5cd..0000000 --- a/src/settings/components/form/KeymapsForm.scss +++ /dev/null @@ -1,11 +0,0 @@ -.form-keymaps-form { - column-count: 3; - - &-field-group { - margin-top: 24px; - } - - &-field-group:first-of-type { - margin-top: 24px; - } -} diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx index b9af0df..6582529 100644 --- a/src/settings/components/form/KeymapsForm.tsx +++ b/src/settings/components/form/KeymapsForm.tsx @@ -1,9 +1,21 @@ -import "./KeymapsForm.scss"; import React from "react"; -import Input from "../ui/Input"; +import styled from "styled-components"; +import Text from "../ui/Text"; import keymaps from "../../keymaps"; import { FormKeymaps } from "../../../shared/SettingData"; +const Grid = styled.div` + column-count: 3; +`; + +const FieldGroup = styled.div` + margin-top: 24px; + + &:first-of-type { + margin-top: 24px; + } +`; + interface Props { value: FormKeymaps; onChange: (e: FormKeymaps) => void; @@ -20,15 +32,14 @@ class KeymapsForm extends React.Component<Props> { render() { const values = this.props.value.toJSON(); return ( - <div className="form-keymaps-form"> + <Grid> {keymaps.fields.map((group, index) => { return ( - <div key={index} className="form-keymaps-form-field-group"> + <FieldGroup key={index}> {group.map(([name, label]) => { const value = values[name] || ""; return ( - <Input - type="text" + <Text id={name} name={name} key={name} @@ -39,10 +50,10 @@ class KeymapsForm extends React.Component<Props> { /> ); })} - </div> + </FieldGroup> ); })} - </div> + </Grid> ); } diff --git a/src/settings/components/form/PartialBlacklistForm.scss b/src/settings/components/form/PartialBlacklistForm.scss deleted file mode 100644 index caf6f93..0000000 --- a/src/settings/components/form/PartialBlacklistForm.scss +++ /dev/null @@ -1,28 +0,0 @@ -.form-partial-blacklist-form { - @mixin row-base { - display: flex; - - .column-url { - flex: 5; - min-width: 0; - } - .column-keys { - flex: 1; - min-width: 0; - } - .column-delete { - flex: 1; - min-width: 0; - } - } - - &-header { - @include row-base; - - font-weight: bold; - } - - &-row { - @include row-base; - } -} diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx index 95beee8..b2da2bb 100644 --- a/src/settings/components/form/PartialBlacklistForm.tsx +++ b/src/settings/components/form/PartialBlacklistForm.tsx @@ -1,9 +1,41 @@ -import "./PartialBlacklistForm.scss"; +import React from "react"; +import styled from "styled-components"; import AddButton from "../ui/AddButton"; import DeleteButton from "../ui/DeleteButton"; -import React from "react"; import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist"; +const Grid = styled.div``; + +const GridHeader = styled.div` + display: flex; + font-weight: bold; +`; + +const GridRow = styled.div` + display: flex; +`; + +const GridCell = styled.div<{ grow?: number }>` + &:nth-child(1) { + flex-grow: 5; + } + + &:nth-child(2) { + flex-shrink: 1; + min-width: 20%; + max-width: 20%; + } + + &:nth-child(3) { + flex-shrink: 1; + } +`; + +const Input = styled.input` + width: 100%; + box-sizing: border-box; +`; + interface Props { value: Blacklist; onChange: (value: Blacklist) => void; @@ -19,50 +51,62 @@ class PartialBlacklistForm extends React.Component<Props> { render() { return ( - <div className="form-partial-blacklist-form"> - <div className="form-partial-blacklist-form-header"> - <div className="column-url">URL</div> - <div className="column-keys">Keys</div> - </div> - {this.props.value.items.map((item, index) => { - if (!item.partial) { - return null; - } - return ( - <div key={index} className="form-partial-blacklist-form-row"> - <input - data-index={index} - type="text" - name="url" - className="column-url" - value={item.pattern} - onChange={this.bindValue.bind(this)} - onBlur={this.props.onBlur} - /> - <input - data-index={index} - type="text" - name="keys" - className="column-keys" - value={item.keys.join(",")} - onChange={this.bindValue.bind(this)} - onBlur={this.props.onBlur} - /> - <DeleteButton - data-index={index} - name="delete" - onClick={this.bindValue.bind(this)} - onBlur={this.props.onBlur} - /> - </div> - ); - })} + <> + <Grid role="list"> + <GridHeader> + <GridCell>URL</GridCell> + <GridCell>Keys</GridCell> + </GridHeader> + {this.props.value.items.map((item, index) => { + if (!item.partial) { + return null; + } + return ( + <GridRow key={index} role="listitem"> + <GridCell> + <Input + data-index={index} + type="text" + name="url" + aria-label="URL" + value={item.pattern} + placeholder="example.com/mail/*" + onChange={this.bindValue.bind(this)} + onBlur={this.props.onBlur} + /> + </GridCell> + <GridCell> + <Input + data-index={index} + type="text" + name="keys" + aria-label="Keys" + value={item.keys.join(",")} + placeholder="j,k,<C-d>,<C-u>" + onChange={this.bindValue.bind(this)} + onBlur={this.props.onBlur} + /> + </GridCell> + <GridCell> + <DeleteButton + data-index={index} + name="delete" + aria-label="Delete" + onClick={this.bindValue.bind(this)} + onBlur={this.props.onBlur} + /> + </GridCell> + </GridRow> + ); + })} + </Grid> <AddButton name="add" + aria-label="Add" style={{ float: "right" }} onClick={this.bindValue.bind(this)} /> - </div> + </> ); } diff --git a/src/settings/components/form/PropertiesForm.scss b/src/settings/components/form/PropertiesForm.scss deleted file mode 100644 index 7c9e167..0000000 --- a/src/settings/components/form/PropertiesForm.scss +++ /dev/null @@ -1,12 +0,0 @@ -.form-properties-form { - &-row { - .column-name { - display: inline-block; - min-width: 5rem; - font-weight: bold; - } - .column-input { - line-height: 2.2rem; - } - } -} diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx index aebd9b1..53ebf03 100644 --- a/src/settings/components/form/PropertiesForm.tsx +++ b/src/settings/components/form/PropertiesForm.tsx @@ -1,6 +1,20 @@ -import "./PropertiesForm.scss"; +import styled from "styled-components"; import React from "react"; +const Form = styled.div``; + +const Row = styled.div``; + +const Label = styled.label` + display: inline-block; + min-width: 5rem; + font-weight: bold; +`; + +const Input = styled.input` + line-height: 2.2rem; +`; + interface Props { types: { [key: string]: string }; value: { [key: string]: any }; @@ -21,7 +35,7 @@ class PropertiesForm extends React.Component<Props> { const values = this.props.value; return ( - <div className="form-properties-form"> + <Form> {Object.keys(types).map((name) => { const type = types[name]; let inputType = ""; @@ -42,23 +56,22 @@ class PropertiesForm extends React.Component<Props> { return null; } return ( - <div key={name} className="form-properties-form-row"> - <label> - <span className="column-name">{name}</span> - <input + <Row key={name}> + <Label> + <span>{name}</span> + <Input type={inputType} name={name} - className="column-input" value={values[name] ? values[name] : ""} onChange={onChange} onBlur={this.props.onBlur} checked={values[name]} /> - </label> - </div> + </Label> + </Row> ); })} - </div> + </Form> ); } diff --git a/src/settings/components/form/SearchForm.scss b/src/settings/components/form/SearchForm.scss deleted file mode 100644 index 26b2f44..0000000 --- a/src/settings/components/form/SearchForm.scss +++ /dev/null @@ -1,28 +0,0 @@ -.form-search-form { - @mixin row-base { - display: flex; - - .column-name { - flex: 1; - min-width: 0; - } - .column-url { - flex: 5; - min-width: 0; - } - .column-option { - text-align: right; - flex-basis: 5rem; - } - } - - &-header { - @include row-base; - - font-weight: bold; - } - - &-row { - @include row-base; - } -} diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx index a4d923d..4bf0e02 100644 --- a/src/settings/components/form/SearchForm.tsx +++ b/src/settings/components/form/SearchForm.tsx @@ -1,9 +1,42 @@ -import "./SearchForm.scss"; import React from "react"; +import styled from "styled-components"; import AddButton from "../ui/AddButton"; import DeleteButton from "../ui/DeleteButton"; import { FormSearch } from "../../../shared/SettingData"; +const Grid = styled.div``; + +const GridHeader = styled.div` + display: flex; + font-weight: bold; +`; + +const GridRow = styled.div` + display: flex; +`; + +const GridCell = styled.div<{ grow?: number }>` + &:nth-child(1) { + flex-grow: 0; + min-width: 10%; + max-width: 10%; + } + + &:nth-child(2) { + flex-grow: 2; + } + + &:nth-child(3) { + flex-grow: 0; + flex-shrink: 1; + } +`; + +const Input = styled.input` + width: 100%; + box-sizing: border-box; +`; + interface Props { value: FormSearch; onChange: (value: FormSearch) => void; @@ -20,57 +53,67 @@ class SearchForm extends React.Component<Props> { render() { const value = this.props.value.toJSON(); return ( - <div className="form-search-form"> - <div className="form-search-form-header"> - <div className="column-name">Name</div> - <div className="column-url">URL</div> - <div className="column-option">Default</div> - </div> - {value.engines.map((engine, index) => { - return ( - <div key={index} className="form-search-form-row"> - <input - data-index={index} - type="text" - name="name" - className="column-name" - value={engine[0]} - onChange={this.bindValue.bind(this)} - onBlur={this.props.onBlur} - /> - <input - data-index={index} - type="text" - name="url" - placeholder="http://example.com/?q={}" - className="column-url" - value={engine[1]} - onChange={this.bindValue.bind(this)} - onBlur={this.props.onBlur} - /> - <div className="column-option"> - <input - data-index={index} - type="radio" - name="default" - checked={value.default === engine[0]} - onChange={this.bindValue.bind(this)} - /> - <DeleteButton - data-index={index} - name="delete" - onClick={this.bindValue.bind(this)} - /> - </div> - </div> - ); - })} + <> + <Grid role="list"> + <GridHeader> + <GridCell>Name</GridCell> + <GridCell>URL</GridCell> + <GridCell>Default</GridCell> + </GridHeader> + {value.engines.map((engine, index) => { + return ( + <GridRow key={index} role="listitem"> + <GridCell> + <Input + data-index={index} + type="text" + name="name" + aria-label="Name" + value={engine[0]} + onChange={this.bindValue.bind(this)} + onBlur={this.props.onBlur} + /> + </GridCell> + <GridCell> + <Input + data-index={index} + type="text" + name="url" + aria-label="URL" + placeholder="http://example.com/?q={}" + value={engine[1]} + onChange={this.bindValue.bind(this)} + onBlur={this.props.onBlur} + /> + </GridCell> + <GridCell> + <input + data-index={index} + type="radio" + name="default" + aria-label="Default" + checked={value.default === engine[0]} + onChange={this.bindValue.bind(this)} + /> + a + <DeleteButton + data-index={index} + aria-label="Delete" + name="delete" + onClick={this.bindValue.bind(this)} + /> + </GridCell> + </GridRow> + ); + })} + </Grid> <AddButton name="add" + aria-label="Add" style={{ float: "right" }} onClick={this.bindValue.bind(this)} /> - </div> + </> ); } diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx index 9d71cac..2e2ff52 100644 --- a/src/settings/components/index.tsx +++ b/src/settings/components/index.tsx @@ -1,7 +1,8 @@ -import "./site.scss"; import React from "react"; import { connect } from "react-redux"; -import Input from "./ui/Input"; +import styled from "styled-components"; +import TextArea from "./ui/TextArea"; +import Radio from "./ui/Radio"; import SearchForm from "./form/SearchForm"; import KeymapsForm from "./form/KeymapsForm"; import BlacklistForm from "./form/BlacklistForm"; @@ -18,6 +19,28 @@ import { State as AppState } from "../reducers/setting"; import Properties from "../../shared/settings/Properties"; import Blacklist from "../../shared/settings/Blacklist"; +const Container = styled.form` + padding: 2px; + font-family: system-ui; +`; + +const Fieldset = styled.fieldset` + margin: 0; + padding: 0; + border: none; + margin-top: 1rem; + + &:first-of-type { + margin-top: 1rem; + } +`; + +const Legend = styled.legend` + font-size: 1.5rem; + padding: 0.5rem 0; + font-weight: bold; +`; + const DO_YOU_WANT_TO_CONTINUE = "Some settings in JSON can be lost when migrating. " + "Do you want to continue?"; @@ -40,47 +63,47 @@ class SettingsComponent extends React.Component<Props> { renderFormFields(form: FormSettings) { return ( <div> - <fieldset> - <legend>Keybindings</legend> + <Fieldset> + <Legend>Keybindings</Legend> <KeymapsForm value={form.keymaps} onChange={this.bindKeymapsForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> - <fieldset> - <legend>Search Engines</legend> + </Fieldset> + <Fieldset> + <Legend>Search Engines</Legend> <SearchForm value={form.search} onChange={this.bindSearchForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> - <fieldset> - <legend>Blacklist</legend> + </Fieldset> + <Fieldset> + <Legend>Blacklist</Legend> <BlacklistForm value={form.blacklist} onChange={this.bindBlacklistForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> - <fieldset> - <legend>Partial blacklist</legend> + </Fieldset> + <Fieldset> + <Legend>Partial blacklist</Legend> <PartialBlacklistForm value={form.blacklist} onChange={this.bindBlacklistForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> - <fieldset> - <legend>Properties</legend> + </Fieldset> + <Fieldset> + <Legend>Properties</Legend> <PropertiesForm types={Properties.types()} value={form.properties.toJSON()} onChange={this.bindPropertiesForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> + </Fieldset> </div> ); } @@ -88,8 +111,7 @@ class SettingsComponent extends React.Component<Props> { renderJsonFields(json: JSONTextSettings, error: string) { return ( <div> - <Input - type="textarea" + <TextArea name="json" label="Plain JSON" spellCheck={false} @@ -111,32 +133,28 @@ class SettingsComponent extends React.Component<Props> { fields = this.renderJsonFields(this.props.json!, this.props.error); } return ( - <div> + <Container> <h1>Configure Vim-Vixen</h1> - <form className="vimvixen-settings-form"> - <Input - type="radio" - id="setting-source-form" - name="source" - label="Use form" - checked={this.props.source === "form"} - value="form" - onValueChange={this.bindSource.bind(this)} - disabled={disabled} - /> + <Radio + id="setting-source-form" + name="source" + label="Use form" + checked={this.props.source === "form"} + value="form" + onValueChange={this.bindSource.bind(this)} + disabled={disabled} + /> - <Input - type="radio" - name="source" - label="Use plain JSON" - checked={this.props.source === "json"} - value="json" - onValueChange={this.bindSource.bind(this)} - disabled={disabled} - /> - {fields} - </form> - </div> + <Radio + name="source" + label="Use plain JSON" + checked={this.props.source === "json"} + value="json" + onValueChange={this.bindSource.bind(this)} + disabled={disabled} + /> + {fields} + </Container> ); } diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss deleted file mode 100644 index c0c4f9e..0000000 --- a/src/settings/components/site.scss +++ /dev/null @@ -1,27 +0,0 @@ -.vimvixen-settings-form { - padding: 2px; - - textarea[name=json] { - font-family: monospace; - width: 100%; - min-height: 64ex; - resize: vertical; - } - - fieldset { - margin: 0; - padding: 0; - border: none; - margin-top: 1rem; - - fieldset:first-of-type { - margin-top: 1rem; - } - - legend { - font-size: 1.5rem; - padding: .5rem 0; - font-weight: bold; - } - } -} diff --git a/src/settings/components/ui/AddButton.scss b/src/settings/components/ui/AddButton.scss deleted file mode 100644 index beb5688..0000000 --- a/src/settings/components/ui/AddButton.scss +++ /dev/null @@ -1,13 +0,0 @@ -.ui-add-button { - border: none; - padding: 4; - display: inline; - background: none; - font-weight: bold; - color: green; - cursor: pointer; - - &:hover { - color: darkgreen; - } -} diff --git a/src/settings/components/ui/AddButton.tsx b/src/settings/components/ui/AddButton.tsx index c15a732..8cf4300 100644 --- a/src/settings/components/ui/AddButton.tsx +++ b/src/settings/components/ui/AddButton.tsx @@ -1,19 +1,24 @@ -import "./AddButton.scss"; import React from "react"; +import styled from "styled-components"; -type Props = React.AllHTMLAttributes<HTMLInputElement>; +const Button = styled.input` + border: none; + padding: 4; + display: inline; + background: none; + font-weight: bold; + color: green; + cursor: pointer; -class AddButton extends React.Component<Props> { - render() { - return ( - <input - className="ui-add-button" - type="button" - value="✚" - {...this.props} - /> - ); + &:hover { + color: darkgreen; } -} +`; + +type Props = React.InputHTMLAttributes<HTMLInputElement>; + +const AddButton: React.FC<Props> = (props) => ( + <Button type="button" value="✚" {...props} /> +); export default AddButton; diff --git a/src/settings/components/ui/DeleteButton.scss b/src/settings/components/ui/DeleteButton.scss deleted file mode 100644 index 5932a72..0000000 --- a/src/settings/components/ui/DeleteButton.scss +++ /dev/null @@ -1,13 +0,0 @@ - -.ui-delete-button { - border: none; - padding: 4; - display: inline; - background: none; - color: red; - cursor: pointer; - - &:hover { - color: darkred; - } -} diff --git a/src/settings/components/ui/DeleteButton.tsx b/src/settings/components/ui/DeleteButton.tsx index df8976e..ce0183b 100644 --- a/src/settings/components/ui/DeleteButton.tsx +++ b/src/settings/components/ui/DeleteButton.tsx @@ -1,19 +1,23 @@ -import "./DeleteButton.scss"; import React from "react"; +import styled from "styled-components"; -type Props = React.AllHTMLAttributes<HTMLInputElement>; +const Button = styled.input` + border: none; + padding: 4; + display: inline; + background: none; + color: red; + cursor: pointer; -class DeleteButton extends React.Component<Props> { - render() { - return ( - <input - className="ui-delete-button" - type="button" - value="✖" - {...this.props} - /> - ); + &:hover { + color: darkred; } -} +`; + +type Props = React.InputHTMLAttributes<HTMLInputElement>; + +const DeleteButton: React.FC<Props> = (props) => ( + <Button type="button" value="✖" {...props} /> +); export default DeleteButton; diff --git a/src/settings/components/ui/Input.scss b/src/settings/components/ui/Input.scss deleted file mode 100644 index ad4daf8..0000000 --- a/src/settings/components/ui/Input.scss +++ /dev/null @@ -1,29 +0,0 @@ -.settings-ui-input { - page-break-inside: avoid; - - * { - page-break-inside: avoid; - } - - label { - font-weight: bold; - min-width: 14rem; - display: inline-block; - } - - input[type='text'] { - padding: 4px; - width: 8rem; - } - - input.input-crror, - textarea.input-error { - box-shadow: 0 0 2px red; - } - - &-error { - font-weight: bold; - color: red; - min-height: 1.5em; - } -} diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx deleted file mode 100644 index 0e24277..0000000 --- a/src/settings/components/ui/Input.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from "react"; -import "./Input.scss"; - -interface Props extends React.AllHTMLAttributes<HTMLElement> { - name: string; - type: string; - error?: string; - label: string; - value: string; - onValueChange?: (name: string, value: string) => void; - onBlur?: (e: React.FocusEvent<Element>) => void; -} - -class Input extends React.Component<Props> { - renderText(props: Props) { - const inputClassName = props.error ? "input-error" : ""; - const pp = { ...props }; - delete pp.onValueChange; - return ( - <div className="settings-ui-input"> - <label htmlFor={props.id}>{props.label}</label> - <input - className={inputClassName} - onChange={this.bindOnChange.bind(this)} - {...pp} - /> - </div> - ); - } - - renderRadio(props: Props) { - const inputClassName = props.error ? "input-error" : ""; - const pp = { ...props }; - delete pp.onValueChange; - return ( - <div className="settings-ui-input"> - <label> - <input - className={inputClassName} - onChange={this.bindOnChange.bind(this)} - {...pp} - /> - {props.label} - </label> - </div> - ); - } - - renderTextArea(props: Props) { - const inputClassName = props.error ? "input-error" : ""; - const pp = { ...props }; - delete pp.onValueChange; - return ( - <div className="settings-ui-input"> - <label htmlFor={props.id}>{props.label}</label> - <textarea - className={inputClassName} - onChange={this.bindOnChange.bind(this)} - {...pp} - /> - <p className="settings-ui-input-error">{this.props.error}</p> - </div> - ); - } - - render() { - const { type } = this.props; - - switch (this.props.type) { - case "text": - return this.renderText(this.props); - case "radio": - return this.renderRadio(this.props); - case "textarea": - return this.renderTextArea(this.props); - default: - console.warn(`Unsupported input type ${type}`); - } - return null; - } - - bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) { - if (this.props.onValueChange) { - this.props.onValueChange(e.target.name, e.target.value); - } - } -} - -export default Input; diff --git a/src/settings/components/ui/Radio.tsx b/src/settings/components/ui/Radio.tsx new file mode 100644 index 0000000..c0d4dd9 --- /dev/null +++ b/src/settings/components/ui/Radio.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import styled from "styled-components"; + +const Container = styled.div` + font-family: system-ui; +`; + +interface Props extends React.InputHTMLAttributes<HTMLInputElement> { + label: string; + onValueChange?: (name: string, value: string) => void; +} + +const Radio: React.FC<Props> = (props) => { + const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { + if (props.onValueChange) { + props.onValueChange(e.target.name, e.target.value); + } + }; + + const pp = { ...props }; + delete pp.onValueChange; + + return ( + <Container> + <label htmlFor={props.id}> + <input type="radio" onChange={onChange} {...pp} /> + {props.label} + </label> + </Container> + ); +}; + +export default Radio; diff --git a/src/settings/components/ui/Text.tsx b/src/settings/components/ui/Text.tsx new file mode 100644 index 0000000..700b08a --- /dev/null +++ b/src/settings/components/ui/Text.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import styled from "styled-components"; + +const Container = styled.div` + page-break-inside: avoid; +`; + +const Input = styled.input<{ hasError: boolean }>` + padding: 4px; + width: 8rem; + box-shadow: ${({ hasError }) => (hasError ? "0 0 2px red" : "none")}; +`; + +const Label = styled.label` + font-weight: bold; + min-width: 14rem; + display: inline-block; +`; + +interface Props extends React.HTMLAttributes<HTMLElement> { + name: string; + error?: string; + label: string; + value: string; + onValueChange?: (name: string, value: string) => void; +} + +const Text: React.FC<Props> = (props) => { + const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { + if (props.onValueChange) { + props.onValueChange(e.target.name, e.target.value); + } + }; + + const pp = { ...props }; + delete pp.onValueChange; + + return ( + <Container> + <Label> + {props.label} + <br /> + <Input + type="text" + hasError={props.error !== undefined} + onChange={onChange} + {...pp} + /> + </Label> + </Container> + ); +}; + +export default Text; diff --git a/src/settings/components/ui/TextArea.tsx b/src/settings/components/ui/TextArea.tsx new file mode 100644 index 0000000..9dcd5be --- /dev/null +++ b/src/settings/components/ui/TextArea.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import styled from "styled-components"; + +const Container = styled.div` + page-break-inside: avoid; +`; + +const Label = styled.label` + font-weight: bold; + min-width: 14rem; + display: inline-block; +`; + +const ErrorableTextArea = styled.textarea<{ hasError: boolean }>` + box-shadow: ${({ hasError }) => (hasError ? "0 0 2px red" : "none")}; + font-family: monospace; + font-family: monospace; + width: 100%; + min-height: 64ex; + resize: vertical; +`; + +const ErrorMessage = styled.p` + font-weight: bold; + color: red; + min-height: 1.5em; +`; + +interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { + error?: string; + label: string; + onValueChange?: (name: string, value: string) => void; +} + +const TextArea: React.FC<Props> = (props) => { + const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { + if (props.onValueChange) { + props.onValueChange(e.target.name, e.target.value); + } + }; + + const hasError = typeof props.error !== "undefined" && props.error !== ""; + const pp = { ...props }; + delete pp.onValueChange; + return ( + <Container> + <Label htmlFor={props.id}>{props.label}</Label> + <ErrorableTextArea hasError={hasError} onChange={onChange} {...pp} /> + {hasError ? ( + <ErrorMessage role="alert">{props.error}</ErrorMessage> + ) : null} + </Container> + ); +}; + +export default TextArea; |