Page MenuHomeSealhub
Files F970303

D625.id2358.diff
No OneTemporary
Actions

D625.id2358.diff
View Options

diff --git a/admin-panel/body-page-editor/element-editor.jsx b/admin-panel/body-page-editor/element-editor.jsx
--- a/admin-panel/body-page-editor/element-editor.jsx
+++ b/admin-panel/body-page-editor/element-editor.jsx
@@ -13,17 +13,19 @@
let propsControls = components_map[componentName].propsControls();
for (const prop in propsControls) {
- let formControlName = propsControls[prop];
-
+ let { control: formControlName, label } = propsControls[prop];
controls.push(
- formControls[formControlName]({
- name: prop,
- key: prop,
- value: componentProps[prop] || '',
- onChange: newValue => {
- onChange({ ...componentProps, [prop]: newValue });
- },
- })
+ <label>
+ {label}:
+ {formControls[formControlName]({
+ name: prop,
+ key: prop,
+ value: componentProps[prop] || '',
+ onChange: newValue => {
+ onChange({ ...componentProps, [prop]: newValue });
+ },
+ })}
+ </label>
);
}
diff --git a/admin-panel/form-controls/form-controls.jsx b/admin-panel/form-controls/form-controls.jsx
--- a/admin-panel/form-controls/form-controls.jsx
+++ b/admin-panel/form-controls/form-controls.jsx
@@ -1,13 +1,14 @@
const date = require('./date.jsx');
const text = require('./text.jsx');
const textarea = require('./textarea.jsx');
-// const bodyPageEditor = require('../body-page-editor/body-page-editor.jsx');
+const image = require('./image.jsx');
module.exports = {};
module.exports.text = text;
module.exports.date = date;
module.exports.slug = text;
module.exports.textarea = textarea;
+module.exports.image = image;
module.exports[
'array-of-objects'
] = require('../body-page-editor/body-page-editor.jsx');
diff --git a/admin-panel/form-controls/image.jsx b/admin-panel/form-controls/image.jsx
new file mode 100644
--- /dev/null
+++ b/admin-panel/form-controls/image.jsx
@@ -0,0 +1,38 @@
+const React = require('react');
+const { useState } = React;
+
+module.exports = function date(props) {
+ const [imagePreviewUrl, setImagePreviewUrl] = useState(null);
+ const [imageFile, setImageFile] = useState(null);
+
+ return (
+ <div>
+ <input
+ id={props.name}
+ name={props.name}
+ onChange={function onChange(e) {
+ const reader = new FileReader();
+ const file = e.target.files[0];
+ reader.onloadend = () => {
+ setImageFile(file);
+ setImagePreviewUrl(reader.result);
+ };
+ reader.readAsDataURL(file);
+ return props.onChange(e.target.value);
+ }}
+ required={props.required}
+ accept={'image/*'}
+ type={'file'}
+ value={props.value}
+ />
+ <img
+ src={imagePreviewUrl}
+ style={{
+ height: '100px',
+ width: '100px',
+ objectFit: 'contain',
+ }}
+ />
+ </div>
+ );
+};
diff --git a/admin-panel/index.jsx b/admin-panel/index.jsx
--- a/admin-panel/index.jsx
+++ b/admin-panel/index.jsx
@@ -6,35 +6,78 @@
import Collections from './collections/collections.jsx';
import useCollections from './collections/use-collections.js';
+class ErrorBoundary extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { hasError: false, error: null };
+ }
+
+ static getDerivedStateFromError(error) {
+ return { hasError: true, error: error };
+ }
+
+ componentDidCatch(error, info) {
+ console.error(error, info);
+ }
+
+ render() {
+ if (this.state.hasError) {
+ // You can render any custom fallback UI
+ return (
+ <div>
+ <h1>Something went wrong.</h1>
+ <code>
+ <pre>
+ <strong>{this.state.error.message}</strong>
+ {'\n'}
+ {this.state.error.stack}
+ </pre>
+ </code>
+ </div>
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
function AppRouter() {
const collections = useCollections();
return (
- <HashRouter basename="/#">
- <div>
- <Link to="/">
- <h1>Sealpage</h1>
- </Link>
- <nav>
- <ul>
- {collections.map(collection => (
- <li key={collection.name}>
- <Link to={`/collections/${collection.name}`}>
- {collection.name}
- </Link>
- </li>
- ))}
- </ul>
- <Link to={'/body-page-editor'}>BodyPageEditor</Link>
- </nav>
-
- <hr />
- <Route path="/" exact component={() => <h2>Admin panel</h2>} />
- <Route path="/collections" component={Collections} />
-
- {/* it's only for mockup testing */}
- {/* <Route path="/body-page-editor" component={BodyPageEditor} /> */}
- </div>
- </HashRouter>
+ <ErrorBoundary>
+ <HashRouter basename="/#">
+ <div>
+ <Link to="/">
+ <h1>Sealpage</h1>
+ </Link>
+ <nav>
+ <ul>
+ {collections.map(collection => (
+ <li key={collection.name}>
+ <Link
+ to={`/collections/${collection.name}`}
+ >
+ {collection.name}
+ </Link>
+ </li>
+ ))}
+ </ul>
+ <Link to={'/body-page-editor'}>BodyPageEditor</Link>
+ </nav>
+
+ <hr />
+ <Route
+ path="/"
+ exact
+ component={() => <h2>Admin panel</h2>}
+ />
+ <Route path="/collections" component={Collections} />
+
+ {/* it's only for mockup testing */}
+ {/* <Route path="/body-page-editor" component={BodyPageEditor} /> */}
+ </div>
+ </HashRouter>
+ </ErrorBoundary>
);
}
diff --git a/components/download-file-button/download-file-button.js b/components/download-file-button/download-file-button.js
--- a/components/download-file-button/download-file-button.js
+++ b/components/download-file-button/download-file-button.js
@@ -28,7 +28,7 @@
/* eslint-enable indent */
}
static propsControls() {
- return { text: 'text' };
+ return { text: { control: 'text', label: 'Button text' } };
}
}
diff --git a/components/markdown/markdown.html.js b/components/markdown/markdown.html.js
--- a/components/markdown/markdown.html.js
+++ b/components/markdown/markdown.html.js
@@ -7,7 +7,9 @@
}
static propsControls() {
- return { markdown_source: 'textarea' };
+ return {
+ markdown_source: { label: 'Markdown source', control: 'textarea' },
+ };
}
}
diff --git a/components/navbar/navbar.html.js b/components/navbar/navbar.html.js
--- a/components/navbar/navbar.html.js
+++ b/components/navbar/navbar.html.js
@@ -7,7 +7,9 @@
`;
}
static propsControls() {
- return { title: 'text' };
+ return {
+ title: { label: 'Title', control: 'text' },
+ };
}
}
diff --git a/components/responsive-image/responsive-image.js b/components/responsive-image/responsive-image.js
--- a/components/responsive-image/responsive-image.js
+++ b/components/responsive-image/responsive-image.js
@@ -71,7 +71,7 @@
`;
}
static propsControls() {
- return {};
+ return { source_image: { control: 'image', label: 'Source image' } };
}
}

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 23, 11:40 (16 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
548346
Default Alt Text
D625.id2358.diff (6 KB)

Event Timeline