summaryrefslogtreecommitdiff
path: root/frontend/common/form.component.js
diff options
context:
space:
mode:
authorJules Laplace <julescarbon@gmail.com>2020-09-26 14:56:02 +0200
committerJules Laplace <julescarbon@gmail.com>2020-09-26 14:56:02 +0200
commita17b76ac75f506f5da6fe8adf9c36632b60d4226 (patch)
treeabb0af0c4409b830dea2ef808c146223ee973933 /frontend/common/form.component.js
parent2231a6e1c05b07bb7ec5906716aedec93d02429c (diff)
refactor to use app-rooted js imports
Diffstat (limited to 'frontend/common/form.component.js')
-rw-r--r--frontend/common/form.component.js220
1 files changed, 0 insertions, 220 deletions
diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js
deleted file mode 100644
index f3775a2..0000000
--- a/frontend/common/form.component.js
+++ /dev/null
@@ -1,220 +0,0 @@
-import React, { Component } from 'react';
-import { courtesyS } from '../util'
-
-export const TextInput = props => (
- <label className={props.error ? 'error' : 'text'}>
- {props.title && <span>{props.title}</span>}
- <input
- type="text"
- required={props.required}
- onChange={props.onChange}
- name={props.name}
- value={props.data[props.name]}
- placeholder={props.placeholder}
- autoComplete={props.autoComplete}
- />
- </label>
-)
-
-export const LabelDescription = props => (
- <label className={'text description'}>
- <span>{props.title}</span>
- <span>{props.children}</span>
- </label>
-)
-
-export const NumberInput = props => (
- <label className={props.error ? 'error' : 'text'}>
- <span>{props.title}</span>
- <input
- type="number"
- required={props.required}
- onChange={props.onChange}
- name={props.name}
- value={props.data[props.name]}
- min={props.min}
- max={props.max}
- step={props.step || 1}
- />
- </label>
-)
-
-export const ColorInput = props => (
- <label className={props.error ? 'error color' : 'text color'}>
- <span>{props.title}</span>
- <input
- type="color"
- required={props.required}
- onChange={props.onChange}
- name={props.name}
- value={props.data[props.name]}
- />
- <input
- type="text"
- required={props.required}
- onChange={props.onChange}
- name={props.name}
- value={props.data[props.name]}
- />
- </label>
-)
-
-export const TextArea = props => (
- <label className={props.error ? 'textarea error' : 'textarea'}>
- {props.title && <span>{props.title}</span>}
- <textarea
- onChange={props.onChange}
- name={props.name}
- value={props.data[props.name]}
- />
- </label>
-)
-
-export const Checkbox = props => (
- <label className="checkbox">
- <input
- type="checkbox"
- name={props.name}
- value={1}
- checked={props.checked}
- onChange={(e) => props.onChange(props.name, e.target.checked)}
- />
- <span>{props.label}</span>
- </label>
-)
-
-export const Radio = props => {
- return (
- <label className="radio">
- <input
- type="radio"
- name={props.name}
- value={props.value}
- checked={props.value === props.currentValue}
- onChange={() => props.onChange(props.name, props.value)}
- />
- <span>{props.label}</span>
- </label>
- )
-}
-
-export class Select extends Component {
- state = {
- focused: false,
- }
-
- render() {
- const { name, selected, options, defaultOption, title, loading, onChange, className } = this.props
- if (loading) {
- return <label className='select'><div>Loading...</div></label>
- }
- const { focused } = this.state
- return (
- <label>
- {title && <span>{title}</span>}
- <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}>
- <div>{(options.find(opt => opt.name === selected) || {label: defaultOption}).label}</div>
- <select
- onFocus={() => this.setState({ focused: true })}
- onBlur={() => this.setState({ focused: false })}
- onChange={e => {
- onChange(name, e.target.value)
- // this.setState({ focused: false })
- }}
- value={selected || "__default__"}
- >
- {!selected && defaultOption && <option value="__default__">{defaultOption}</option>}
- {options.map((option, i) => (
- <option
- key={option.name}
- value={option.name}
- disabled={option.disabled}
- >{option.label}</option>
- ))}
- </select>
- </div>
- </label>
- )
- }
-}
-
-export class FileInputField extends Component {
- state = {
- count: 0,
- }
-
- handleChange(files) {
- const { multiple, onChange } = this.props
- if (!files) {
- this.setState({ count: 0 })
- } else {
- this.setState({ count: multiple ? files.length : 0 })
- }
- onChange(files)
- }
-
- render() {
- const { error, title, label, required, multiple, mime, name } = this.props
- return (
- <label className={error ? 'error' : 'text fileInput'}>
- <span>{title}</span>
- <div className="row">
- <button>
- {label || "Choose files"}
- <FileInput
- mime={mime}
- multiple={multiple}
- onChange={this.handleChange.bind(this)}
- />
- </button>
- {!!this.state.count && <span>{courtesyS(this.state.count, "file")}{" selected"}</span>}
- </div>
- </label>
- )
- }
-}
-
-export class FileInput extends Component {
- handleChange(e) {
- let { multiple, mime } = this.props
- if (!mime) {
- mime = "image/"
- }
- const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
- let i
- let file, selectedFiles = []
- for (i = 0; i < files.length; i++) {
- file = files[i]
- if (file && file.type.indexOf(mime) === 0) {
- if (multiple) {
- selectedFiles.push(file)
- } else {
- break
- }
- }
- }
- if (multiple && selectedFiles.length) {
- this.props.onChange(selectedFiles)
- } else if (!multiple && file) {
- this.props.onChange(file)
- } else {
- this.props.onChange()
- }
- }
-
- render() {
- return (
- <input type="file" multiple={!!this.props.multiple} onChange={this.handleChange.bind(this)} />
- )
- }
-}
-
-export const SubmitButton = (props) => (
- <label>
- <span></span>
- <button
- className={props.className ? "submit " + props.className : "submit"}
- onClick={props.onClick}
- >{props.title}</button>
- </label>
-)