f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-31 12:58:11 +00:00
Code Wiki Activity

add color-selector component and colorings

Browse Source
This commit is contained in:
Charlie Humphreys
2023-07-17 00:46:55 -05:00
parent 46f413c656
commit 379f260de5
11 changed files with 236 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
shared/naturalcrit/codeEditor/helpers/widget-elements/image-selector/image-selector.jsx
View File

@@ -1,8 +1,7 @@
require('./image-selector.less');
const React = require('react');
const ReactDOMClient = require('react-dom/client');
const createClass = require('create-react-class');
const Modal = require('../modal/modal.jsx');
const { Modal, modalHelpers } = require('../modal/modal.jsx');
const { PATTERNS } = require('../constants.js');
const CodeMirror = require('../../../code-mirror.js');
const _ = require('lodash');
@@ -25,13 +24,7 @@ const ImageSelector = createClass({
},
componentDidMount : function() {
const el = document.createElement('div');
const root = ReactDOMClient.createRoot(el);
document.querySelector('body').append(el);
this.setState({
el,
modalRoot : root
});
modalHelpers.mount(this);
},
componentDidUpdate : function() {
@@ -39,7 +32,7 @@ const ImageSelector = createClass({
const { selected } = this.state;
const images = values.map((v, i)=>{
const className = selected === v ? 'selected' : '';
const className = String(selected) === String(v) ? 'selected' : '';
return <img key={i} className={className} src={preview(v)} alt={`${name} image ${v}`} onClick={()=>this.select(v)}/>;
});
@@ -51,7 +44,7 @@ const ImageSelector = createClass({
},
componentWillUnmount : function() {
this.state.el.remove();
modalHelpers.unmount(this);
},
save : function() {
@@ -75,9 +68,23 @@ const ImageSelector = createClass({
});
},
showModal : function() {
const { cm, field, n } = this.props;
const { text } = cm.lineInfo(n);
const pattern = PATTERNS.field[field.type](field.name);
const [fullmatch, _, current] = text.match(pattern);
if(!fullmatch) {
return;
}
this.setState({
selected : current
});
this.modalRef.current.setVisible(true);
},
render : function () {
return <React.Fragment>
<button onClick={()=>this.modalRef.current.setVisible(true)}>Select Image</button>
<button onClick={this.showModal}>Select Image</button>
</React.Fragment>;
}
});