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