mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-27 20:23:08 +00:00
update widgets - add hints component and adjust autocomplete logic
This commit is contained in:
Charlie Humphreys
@@ -1,151 +1,140 @@
|
||||
require('./field.less');
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const createClass = require('create-react-class');
|
||||
const _ = require('lodash');
|
||||
const { UNITS } = require('../constants');
|
||||
const { NUMBER_PATTERN, HINT_TYPE } = require('../constants');
|
||||
|
||||
const DEFAULT_WIDTH = '30px';
|
||||
|
||||
const STYLE_FN = (value)=>({
|
||||
width : `calc(${value?.length ?? 0}ch + ${value?.length ? `${DEFAULT_WIDTH} / 2` : DEFAULT_WIDTH})`
|
||||
});
|
||||
|
||||
const Field = createClass({
|
||||
hintsRef : React.createRef(),
|
||||
activeHintRef : React.createRef(),
|
||||
fieldRef : {},
|
||||
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
field : {},
|
||||
n : 0,
|
||||
value : '',
|
||||
hints : [],
|
||||
onChange : ()=>{}
|
||||
field : {},
|
||||
n : 0,
|
||||
value : '',
|
||||
setHints : ()=>{},
|
||||
onChange : ()=>{},
|
||||
getStyleHints : ()=>{}
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
value : '',
|
||||
focused : false,
|
||||
activeHint : null
|
||||
value : '',
|
||||
style : STYLE_FN(),
|
||||
id : ''
|
||||
};
|
||||
},
|
||||
|
||||
componentDidUpdate : function({ hints }) {
|
||||
componentDidUpdate : function(_, { value }) {
|
||||
if(this.state.value !== this.props.value) {
|
||||
this.setState({
|
||||
value : this.props.value
|
||||
});
|
||||
}
|
||||
|
||||
const hintsLength = this.props.hints.length;
|
||||
if(hintsLength - 1 < this.state.activeHint && hintsLength !== hints.length) {
|
||||
this.setState({
|
||||
activeHint : hintsLength === 0 ? 0 : hintsLength - 1
|
||||
value : this.props.value,
|
||||
style : STYLE_FN(this.props.value),
|
||||
id : `${this.props.field?.name}-${this.props.n}`
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(this.hintsRef.current && this.activeHintRef.current) {
|
||||
const offset = this.activeHintRef.current.offsetTop;
|
||||
const scrollTop = this.hintsRef.current.scrollTop;
|
||||
if(scrollTop + 50 < offset || scrollTop + 50 > offset) {
|
||||
this.hintsRef.current.scrollTo({
|
||||
top : offset - 50,
|
||||
behavior : 'smooth'
|
||||
});
|
||||
}
|
||||
if(this.state.value !== value) {
|
||||
this.props.setHints(this, this.props.getStyleHints(this.props.field, this.state.value));
|
||||
}
|
||||
},
|
||||
|
||||
componentDidMount : function() {
|
||||
const id = `${this.props.field?.name}-${this.props.n}`;
|
||||
this.setState({
|
||||
value : this.props.value
|
||||
value : this.props.value,
|
||||
style : STYLE_FN(this.props.value),
|
||||
id
|
||||
});
|
||||
this.fieldRef[id] = React.createRef();
|
||||
},
|
||||
|
||||
componentWillUnmount : function() {
|
||||
this.fieldRef = undefined;
|
||||
this.fieldRef = {};
|
||||
},
|
||||
|
||||
change : function(e) {
|
||||
this.props.onChange(e);
|
||||
this.setState({
|
||||
value : e.target.value
|
||||
value : e.target.value,
|
||||
style : STYLE_FN(e.target.value)
|
||||
});
|
||||
},
|
||||
|
||||
setFocus : function({ type }) {
|
||||
if(type === 'focus') {
|
||||
this.setState({ focused: true, activeHint: this.props.hints.length > 0 ? 0 : null });
|
||||
} else if(type === 'blur'){
|
||||
this.setState({ focused: false, activeHint: null });
|
||||
}
|
||||
setFocus : function(e) {
|
||||
const { type } = e;
|
||||
this.props.setHints(this, type === 'focus' ? this.props.getStyleHints(this.props.field, this.state.value) : []);
|
||||
},
|
||||
|
||||
hintSelected : function(h, e) {
|
||||
let value;
|
||||
if(h.type === HINT_TYPE.VALUE) {
|
||||
value = h.hint;
|
||||
} else if(h.type === HINT_TYPE.NUMBER_SUFFIX) {
|
||||
const match = this.state.value.match(NUMBER_PATTERN);
|
||||
let suffix = match?.at(4) ?? '';
|
||||
for (const char of h.hint) {
|
||||
if(suffix.at(0) === char) {
|
||||
suffix = suffix.slice(1);
|
||||
}
|
||||
}
|
||||
value = `${match?.at(1) ?? ''}${match?.at(2) ?? ''}${h.hint}${suffix}`;
|
||||
}
|
||||
this.change({
|
||||
target : {
|
||||
value
|
||||
}
|
||||
});
|
||||
},
|
||||
keyDown : function(e) {
|
||||
const { code } = e;
|
||||
const { value, activeHint } = this.state;
|
||||
const { field, hints } = this.props;
|
||||
const numberPattern = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})(.*)`);
|
||||
const match = value.match(numberPattern);
|
||||
const { field, value } = this.props;
|
||||
const match = value.match(NUMBER_PATTERN);
|
||||
if(code === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
if(match) {
|
||||
if(match && match[3]) {
|
||||
e.preventDefault();
|
||||
this.change({
|
||||
target : {
|
||||
value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3]}${match.at(4) ?? ''}`
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1
|
||||
});
|
||||
}
|
||||
} else if(code === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
if(match) {
|
||||
if(match && match[3]) {
|
||||
e.preventDefault();
|
||||
this.change({
|
||||
target : {
|
||||
value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3]}${match.at(4) ?? ''}`
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
activeHint : activeHint === 0 ? hints.length - 1 : activeHint - 1
|
||||
});
|
||||
}
|
||||
} else if(code === 'Enter') {
|
||||
e.preventDefault();
|
||||
if(!match) {
|
||||
this.change({
|
||||
target : {
|
||||
value : hints[activeHint]
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
activeHint : 0
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
render : function() {
|
||||
const { value, id } = this.state;
|
||||
const { field } = this.props;
|
||||
|
||||
render : function(){
|
||||
const { focused, value, activeHint } = this.state;
|
||||
const { field, n } = this.props;
|
||||
const hints = this.props.hints
|
||||
.filter((h)=>h!==value)
|
||||
.map((h, i)=>{
|
||||
if(activeHint === i) {
|
||||
return <div key={i} className={'hint active'} onClick={()=>this.change({ target: { value: h } })} ref={this.activeHintRef}>{h}</div>;
|
||||
} else {
|
||||
return <div key={i} className={'hint'} onClick={()=>this.change({ target: { value: h } })}>{h}</div>;
|
||||
}
|
||||
});
|
||||
|
||||
const id = `${field.name}-${n}`;
|
||||
return <React.Fragment>
|
||||
<div className='widget-field'>
|
||||
<label htmlFor={id}>{_.startCase(field.name)}:</label>
|
||||
<input id={id} type='text' value={value} step={field.increment || 1} onChange={this.change} onFocus={this.setFocus} onBlur={this.setFocus} onKeyDown={this.keyDown}/>
|
||||
{focused ?
|
||||
<div className='hints' ref={this.hintsRef}>
|
||||
{hints}
|
||||
</div> :
|
||||
null
|
||||
}
|
||||
|
||||
<input id={id} type='text' value={value}
|
||||
step={field.increment || 1}
|
||||
style={this.state.style}
|
||||
ref={this.fieldRef[id]}
|
||||
onChange={this.change}
|
||||
onFocus={this.setFocus}
|
||||
onBlur={this.setFocus}
|
||||
onKeyDown={this.keyDown}/>
|
||||
</div>
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
.widget-field {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
background-color: #22d4f6;
|
||||
border-radius: 10px;
|
||||
padding: 4px 2px;
|
||||
|
||||
>label {
|
||||
display: inherit;
|
||||
display: inline;
|
||||
width: 50px;
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
>input {
|
||||
|
||||
background-color: #22d4f6;
|
||||
border: none;
|
||||
}
|
||||
|
||||
>.hints {
|
||||
position: relative;
|
||||
left: 50px;
|
||||
left: 30px;
|
||||
max-height: 100px;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
|
||||
Reference in New Issue
Block a user