mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-04 18:35:26 +00:00
adding widget output
This commit is contained in:
parent
5de1643800
commit
10cad70262
@ -6,8 +6,8 @@
|
||||
"parser": "babel-eslint",
|
||||
"extends": "airbnb",
|
||||
"rules": {
|
||||
"semi": [2, "never"],
|
||||
"no-underscore-dangle": 0
|
||||
"no-underscore-dangle": 0,
|
||||
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
|
||||
},
|
||||
"plugins": ["react"],
|
||||
"settings": {
|
||||
|
@ -32,6 +32,9 @@ The create-react-app of embeddable widgets.
|
||||
- [x] Widget as react app - index.html works (webpack, babel, react)
|
||||
- [ ] React widget (widget builder)
|
||||
- [ ] Webpack changed to output a library
|
||||
- [ ] Add tests
|
||||
- [ ] Add greenkeeper
|
||||
- [ ] Integrate eslint with webpack
|
||||
- [ ] Theming support
|
||||
- [ ] Obfuscation
|
||||
- [ ] Storyboard and docs
|
||||
|
91
package-lock.json
generated
91
package-lock.json
generated
@ -546,9 +546,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"are-we-there-yet": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
|
||||
"integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
|
||||
"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"delegates": "1.0.0",
|
||||
@ -5040,15 +5040,6 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.1"
|
||||
}
|
||||
},
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
@ -5059,6 +5050,15 @@
|
||||
"strip-ansi": "3.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.1"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
@ -5152,7 +5152,7 @@
|
||||
"signal-exit": "3.0.2",
|
||||
"string-width": "1.0.2",
|
||||
"strip-ansi": "3.0.1",
|
||||
"wide-align": "1.1.2"
|
||||
"wide-align": "1.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
@ -8222,7 +8222,7 @@
|
||||
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"are-we-there-yet": "1.1.4",
|
||||
"are-we-there-yet": "1.1.5",
|
||||
"console-control-strings": "1.1.0",
|
||||
"gauge": "2.7.4",
|
||||
"set-blocking": "2.0.0"
|
||||
@ -10838,15 +10838,6 @@
|
||||
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
|
||||
"dev": true
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.2"
|
||||
}
|
||||
},
|
||||
"string-template": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
|
||||
@ -10863,6 +10854,15 @@
|
||||
"strip-ansi": "4.0.0"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.2"
|
||||
}
|
||||
},
|
||||
"stringstream": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
|
||||
@ -12059,49 +12059,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"wide-align": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
|
||||
"integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
|
||||
"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"string-width": "1.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
|
||||
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
|
||||
"dev": true
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
|
||||
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"number-is-nan": "1.0.1"
|
||||
}
|
||||
},
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
|
||||
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"code-point-at": "1.1.0",
|
||||
"is-fullwidth-code-point": "1.0.0",
|
||||
"strip-ansi": "3.0.1"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
|
||||
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "2.1.1"
|
||||
}
|
||||
}
|
||||
"string-width": "2.1.1"
|
||||
}
|
||||
},
|
||||
"widest-line": {
|
||||
|
12
public/index.html
Normal file
12
public/index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Embeddable Widget</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="/embeddable-widget.js"></script>
|
||||
<script>
|
||||
EmbeddableWidget.render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
1
src/.tern-port
Normal file
1
src/.tern-port
Normal file
@ -0,0 +1 @@
|
||||
58305
|
25
src/index.js
25
src/index.js
@ -2,7 +2,24 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Widget from './widget';
|
||||
|
||||
ReactDOM.render(
|
||||
<Widget/>,
|
||||
document.getElementById('app')
|
||||
);
|
||||
export default class EmbeddableWidget {
|
||||
static render() {
|
||||
const component = <Widget />;
|
||||
|
||||
function doRender() {
|
||||
const containerEl = document.createElement('div');
|
||||
document.body.appendChild(containerEl);
|
||||
ReactDOM.render(
|
||||
component,
|
||||
containerEl,
|
||||
);
|
||||
}
|
||||
if (document.readyState === 'complete') {
|
||||
doRender();
|
||||
} else {
|
||||
window.addEventListener('load', () => {
|
||||
doRender();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Transition } from 'react-transition-group';
|
||||
import './widget.scss';
|
||||
|
||||
class Widget extends React.Component {
|
||||
class Widget extends Component {
|
||||
state = {
|
||||
opened: false,
|
||||
showDock: true,
|
||||
@ -11,7 +11,7 @@ class Widget extends React.Component {
|
||||
|
||||
handleToggleOpen = () => {
|
||||
this.setState((prev) => {
|
||||
let showDock = prev.showDock;
|
||||
let { showDock } = prev;
|
||||
if (!prev.opened) {
|
||||
showDock = false;
|
||||
}
|
||||
@ -36,16 +36,17 @@ class Widget extends React.Component {
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return "";
|
||||
return '';
|
||||
}
|
||||
|
||||
render() {
|
||||
let body = this.renderBody();
|
||||
const body = this.renderBody();
|
||||
|
||||
return (
|
||||
|
||||
<div className="docked-widget">
|
||||
<Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
|
||||
{(status) => (
|
||||
{status => (
|
||||
<div className={`widget widget-${status}`}>
|
||||
<div className="widget-header">
|
||||
<div className="widget-header-title">
|
||||
|
@ -10,14 +10,14 @@ module.exports = {
|
||||
// both options are optional
|
||||
filename: devMode ? '[name].css' : '[name].[hash].css',
|
||||
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
|
||||
})
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: ['babel-loader']
|
||||
use: ['babel-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
@ -25,23 +25,26 @@ module.exports = {
|
||||
// fallback to style-loader in development
|
||||
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
'sass-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['*', '.js', '.jsx']
|
||||
extensions: ['*', '.js', '.jsx'],
|
||||
},
|
||||
entry: [
|
||||
'./src/index.js'
|
||||
'./src/index.js',
|
||||
],
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
publicPath: '/',
|
||||
filename: 'bundle.js'
|
||||
filename: 'embeddable-widget.js',
|
||||
library: 'EmbeddableWidget',
|
||||
libraryExport: 'default',
|
||||
libraryTarget: 'window',
|
||||
},
|
||||
serve: {
|
||||
content: './dist'
|
||||
}
|
||||
content: ['./dist', './public'],
|
||||
},
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user