Remove 10 more
This commit is contained in:
Romaric Mourgues
@@ -1,46 +0,0 @@
|
|||||||
/* eslint-disable react/prop-types */
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
|
|
||||||
import Input from './input.jsx';
|
|
||||||
import Icon from '@components/icon/icon.jsx';
|
|
||||||
import './inputs.scss';
|
|
||||||
|
|
||||||
export default class InputEnter extends Component {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
var parentClassName = '';
|
|
||||||
|
|
||||||
if (this.props.big) {
|
|
||||||
parentClassName += ' big ';
|
|
||||||
}
|
|
||||||
if (this.props.medium) {
|
|
||||||
parentClassName += ' medium ';
|
|
||||||
}
|
|
||||||
if (this.props.small) {
|
|
||||||
parentClassName += ' small ';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
parentClassName.indexOf('medium') === parentClassName.indexOf('small') &&
|
|
||||||
parentClassName.indexOf('big') === parentClassName.indexOf('small') &&
|
|
||||||
parentClassName.indexOf('big') < 0
|
|
||||||
) {
|
|
||||||
parentClassName += ' medium';
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={'input_icon input_enter ' + parentClassName}>
|
|
||||||
<Input
|
|
||||||
onEchap={this.props.onEchap}
|
|
||||||
onEnter={this.props.onEnter}
|
|
||||||
autoFocus={this.props.autoFocus}
|
|
||||||
onKeyDown={this.props.onKeyDown}
|
|
||||||
{...this.props}
|
|
||||||
/>
|
|
||||||
<Icon type={'enter'} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
/* eslint-disable react/prop-types */
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
|
|
||||||
import Input from './input.jsx';
|
|
||||||
import Icon from '@components/icon/icon.jsx';
|
|
||||||
import './inputs.scss';
|
|
||||||
|
|
||||||
export default class InputIcon extends Component {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
var parentClassName = '';
|
|
||||||
|
|
||||||
if (this.props.big) {
|
|
||||||
parentClassName += ' big ';
|
|
||||||
}
|
|
||||||
if (this.props.medium) {
|
|
||||||
parentClassName += ' medium ';
|
|
||||||
}
|
|
||||||
if (this.props.small) {
|
|
||||||
parentClassName += ' small ';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
parentClassName.indexOf('medium') === parentClassName.indexOf('small') &&
|
|
||||||
parentClassName.indexOf('big') === parentClassName.indexOf('small') &&
|
|
||||||
parentClassName.indexOf('big') < 0
|
|
||||||
) {
|
|
||||||
parentClassName += ' medium';
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={'input_icon ' + parentClassName}>
|
|
||||||
<Icon type={this.props.icon} />
|
|
||||||
<Input
|
|
||||||
onEchap={this.props.onEchap}
|
|
||||||
onEnter={this.props.onEnter}
|
|
||||||
autoFocus={this.props.autoFocus}
|
|
||||||
onKeyDown={this.props.onKeyDown}
|
|
||||||
ref={this.refInput}
|
|
||||||
{...this.props}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Switch } from 'antd';
|
|
||||||
|
|
||||||
import './inputs.scss';
|
|
||||||
|
|
||||||
export default (props: {
|
|
||||||
big?: boolean;
|
|
||||||
medium?: boolean;
|
|
||||||
small?: boolean;
|
|
||||||
loading?: boolean;
|
|
||||||
className?: string;
|
|
||||||
label?: string;
|
|
||||||
checked?: boolean;
|
|
||||||
disabled?: boolean;
|
|
||||||
onChange: (value: boolean) => void;
|
|
||||||
}) => {
|
|
||||||
const renderSwitch = () => {
|
|
||||||
let className = props.className || '';
|
|
||||||
|
|
||||||
if (props.big) {
|
|
||||||
className += ' big ';
|
|
||||||
}
|
|
||||||
if (props.medium) {
|
|
||||||
className += ' medium ';
|
|
||||||
}
|
|
||||||
if (props.small) {
|
|
||||||
className += ' small ';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
className.indexOf('medium') === className.indexOf('small') &&
|
|
||||||
className.indexOf('big') === className.indexOf('small') &&
|
|
||||||
className.indexOf('big') < 0
|
|
||||||
) {
|
|
||||||
className += ' medium';
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Switch
|
|
||||||
checked={props.checked}
|
|
||||||
onChange={(value: boolean) => {
|
|
||||||
props.onChange(value);
|
|
||||||
}}
|
|
||||||
className={className}
|
|
||||||
loading={props.loading}
|
|
||||||
disabled={props.disabled}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
let parentClassName = '';
|
|
||||||
|
|
||||||
if (props.big) {
|
|
||||||
parentClassName += ' big ';
|
|
||||||
}
|
|
||||||
if (props.medium) {
|
|
||||||
parentClassName += ' medium ';
|
|
||||||
}
|
|
||||||
if (props.small) {
|
|
||||||
parentClassName += ' small ';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
parentClassName.indexOf('medium') === parentClassName.indexOf('small') &&
|
|
||||||
parentClassName.indexOf('big') === parentClassName.indexOf('small') &&
|
|
||||||
parentClassName.indexOf('big') < 0
|
|
||||||
) {
|
|
||||||
parentClassName += ' medium';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.label) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
'switch_with_label ' + (props.disabled ? 'disabled' : '') + ' ' + parentClassName
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{renderSwitch()}
|
|
||||||
<div className="label">{props.label}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return renderSwitch();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,262 +0,0 @@
|
|||||||
/* eslint-disable react/jsx-key */
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import AutoComplete from 'components/auto-complete/auto-complete';
|
|
||||||
import Icon from '@components/icon/icon.jsx';
|
|
||||||
import Languages from '@features/global/services/languages-service';
|
|
||||||
import './picker.scss';
|
|
||||||
|
|
||||||
export default class Picker extends React.Component {
|
|
||||||
/*
|
|
||||||
placeholder : string,
|
|
||||||
search : Array of search function,
|
|
||||||
renderItem(item) : how to render item
|
|
||||||
renderItemChoosen(item) : how to add item in input
|
|
||||||
renderItemSimply(item) : what user will type on input and what we have to replace
|
|
||||||
onChangeSuggested(list)
|
|
||||||
onChange(list) :
|
|
||||||
canCreate
|
|
||||||
onCreate
|
|
||||||
disableNavigationKey :
|
|
||||||
*/
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
currentSelected: props.value || [],
|
|
||||||
inputValue: '',
|
|
||||||
currentList: [],
|
|
||||||
selected: [],
|
|
||||||
};
|
|
||||||
this.alreadyBackspace = false;
|
|
||||||
}
|
|
||||||
componentWillUnmount() {
|
|
||||||
document.removeEventListener('click', this.outsideClickListener);
|
|
||||||
}
|
|
||||||
componentDidMount() {
|
|
||||||
if (!this.props.inline) {
|
|
||||||
this.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
var element = this.container;
|
|
||||||
this.outsideClickListener = event => {
|
|
||||||
if (!element.contains(event.target) && document.contains(event.target)) {
|
|
||||||
this.setState({ focused: false });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.outsideClickListener = this.outsideClickListener.bind(this);
|
|
||||||
document.addEventListener('click', this.outsideClickListener);
|
|
||||||
}
|
|
||||||
UNSAFE_componentWillUpdate(nextProps, nextState) {
|
|
||||||
if (nextProps.value != this.props.value) {
|
|
||||||
nextState.currentSelected = nextProps.value;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
onSelect(item) {
|
|
||||||
this.alreadyBackspace = true;
|
|
||||||
if (item && (item.id === undefined || item.id < 0) && item.front_id === undefined) {
|
|
||||||
this.onCreate(item.textSearched);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var newList = this.state.currentSelected;
|
|
||||||
for (var i = 0; i < newList.length; i++) {
|
|
||||||
if (newList[i].id == item.id) {
|
|
||||||
this.setState({ inputValue: '' });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
newList.push(item);
|
|
||||||
this.setState({ currentSelected: newList });
|
|
||||||
this.setState({ inputValue: '' });
|
|
||||||
if (this.props.onChange) {
|
|
||||||
this.props.onChange(newList);
|
|
||||||
}
|
|
||||||
this.focus();
|
|
||||||
}
|
|
||||||
onRemove(item) {
|
|
||||||
var newList = this.state.currentSelected;
|
|
||||||
var index = newList.indexOf(item);
|
|
||||||
if (index >= 0) {
|
|
||||||
newList.splice(index, 1);
|
|
||||||
this.setState({ currentSelected: newList });
|
|
||||||
if (this.props.onChange) {
|
|
||||||
this.props.onChange(newList);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.focus();
|
|
||||||
}
|
|
||||||
onBackspace() {
|
|
||||||
if (this.alreadyBackspace) {
|
|
||||||
// if already typed on backspace once
|
|
||||||
var newList = this.state.currentSelected;
|
|
||||||
newList.splice(newList.length - 1, 1);
|
|
||||||
this.setState({ currentSelected: newList });
|
|
||||||
} else {
|
|
||||||
this.alreadyBackspace = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onCreate(text) {
|
|
||||||
if (this.props.onCreate) {
|
|
||||||
var item = this.props.onCreate(text, item => {
|
|
||||||
this.onSelect(item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
focus() {
|
|
||||||
if (this.autocomplete_node) {
|
|
||||||
this.autocomplete_node.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
var that = this;
|
|
||||||
var objects = [
|
|
||||||
<div className="picker">
|
|
||||||
<div className={'pickerInput ' + (this.props.readOnly ? 'readOnly ' : '')}>
|
|
||||||
{this.state.currentSelected.map(item => {
|
|
||||||
return this.props.renderItemChoosen(item);
|
|
||||||
})}
|
|
||||||
{!this.props.readOnly && (
|
|
||||||
<AutoComplete
|
|
||||||
search={[
|
|
||||||
(text, cb) => {
|
|
||||||
text = this.state.inputValue;
|
|
||||||
this.props.search(text, list => {
|
|
||||||
if (that.props.canCreate && text.length > 0) {
|
|
||||||
list.push({ id: -1, autocomplete_id: list.length, textSearched: text });
|
|
||||||
}
|
|
||||||
cb(list);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
renderItemChoosen={[
|
|
||||||
item => {
|
|
||||||
if (item.id < 0 && this.props.canCreate) {
|
|
||||||
return item.textSearched;
|
|
||||||
} else {
|
|
||||||
return this.props.renderItemSimply(item);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
max={[this.props.max || 10]}
|
|
||||||
renderItem={[() => {}]}
|
|
||||||
regexHooked={[/(.*)/]}
|
|
||||||
placeholder={
|
|
||||||
this.state.currentSelected.length
|
|
||||||
? ''
|
|
||||||
: this.props.placeholder ||
|
|
||||||
Languages.t('scenes.apps.drive.left.search', [], 'Search')
|
|
||||||
}
|
|
||||||
onChange={evt => {
|
|
||||||
this.alreadyBackspace = false;
|
|
||||||
this.setState({ inputValue: evt.target.value });
|
|
||||||
}}
|
|
||||||
onSelect={item => {
|
|
||||||
this.onSelect(item);
|
|
||||||
}}
|
|
||||||
value={this.state.inputValue}
|
|
||||||
onChangeCurrentList={(list, selected) => {
|
|
||||||
this.setState({ currentList: list, selected: selected });
|
|
||||||
if (this.props.onChangeSuggested) {
|
|
||||||
this.props.onChangeSuggested(list);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
hideResult={true}
|
|
||||||
onBackspace={() => {
|
|
||||||
this.onBackspace();
|
|
||||||
}}
|
|
||||||
disableNavigationKey={this.props.disableNavigationKey}
|
|
||||||
showResultsOnInit={true}
|
|
||||||
onHide={() => this.setState({ focused: false })}
|
|
||||||
ref={node => {
|
|
||||||
this.autocomplete_node = node;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
];
|
|
||||||
|
|
||||||
if (!this.props.readOnly) {
|
|
||||||
if (!this.props.inline) {
|
|
||||||
objects.push(<div className="menu-text">{!!this.props.title && this.props.title}</div>);
|
|
||||||
}
|
|
||||||
|
|
||||||
var results = [];
|
|
||||||
|
|
||||||
if (this.state.currentList.length > 0) {
|
|
||||||
results = this.state.currentList.map((item, index) => {
|
|
||||||
if (item.id < 0) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={'create'}
|
|
||||||
className={
|
|
||||||
'menu ' +
|
|
||||||
(!this.props.disableNavigationKey && item.autocomplete_id == this.state.selected
|
|
||||||
? 'is_selected'
|
|
||||||
: '')
|
|
||||||
}
|
|
||||||
onClick={evt => {
|
|
||||||
evt.stopPropagation();
|
|
||||||
evt.preventDefault();
|
|
||||||
this.onSelect(item);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="text">
|
|
||||||
<Icon type="plus" />
|
|
||||||
Create {this.props.renderItem(item.textSearched)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={item.id}
|
|
||||||
className={
|
|
||||||
'menu ' +
|
|
||||||
(!this.props.disableNavigationKey && item.autocomplete_id == this.state.selected
|
|
||||||
? 'is_selected'
|
|
||||||
: '')
|
|
||||||
}
|
|
||||||
onClick={evt => {
|
|
||||||
evt.stopPropagation();
|
|
||||||
evt.preventDefault();
|
|
||||||
this.onSelect(item);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="text">{this.props.renderItem(item)}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (this.props.inline) {
|
|
||||||
results = (
|
|
||||||
<div className={'dropmenu inline ' + (this.state.focused ? 'fade_in ' : '')}>
|
|
||||||
{results}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
objects = objects.concat(results);
|
|
||||||
}
|
|
||||||
|
|
||||||
objects = (
|
|
||||||
<div
|
|
||||||
onClick={() => {
|
|
||||||
this.focus();
|
|
||||||
this.setState({ focused: true });
|
|
||||||
}}
|
|
||||||
ref={node => (this.container = node)}
|
|
||||||
className={
|
|
||||||
'picker_container ' +
|
|
||||||
(this.props.readOnly ? 'readOnly ' : '') +
|
|
||||||
(this.props.inline ? 'inline ' : '') +
|
|
||||||
(this.state.focused ? 'focused ' : '') +
|
|
||||||
this.props.className
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{objects}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return objects;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
.picker_container {
|
|
||||||
position: relative;
|
|
||||||
border-radius: var(--border-radius-large);
|
|
||||||
&.inline {
|
|
||||||
transition: box-shadow 0.2s;
|
|
||||||
|
|
||||||
.dropmenu {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.focused {
|
|
||||||
&.readOnly {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.autocomplete {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
.dropmenu {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker {
|
|
||||||
.pickerInput {
|
|
||||||
border-radius: var(--border-radius-base);
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
background: #f2f2f2;
|
|
||||||
|
|
||||||
&.readOnly {
|
|
||||||
margin: 0;
|
|
||||||
display: inline;
|
|
||||||
padding: 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.autocomplete {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 50px;
|
|
||||||
position: unset;
|
|
||||||
input {
|
|
||||||
background: inherit;
|
|
||||||
margin-top: 0px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
rm .table {
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: var(--border-radius-base);
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border: 1px solid var(--grey-background);
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
&.unfocused {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
opacity: 0.5;
|
|
||||||
|
|
||||||
.tr .item .line {
|
|
||||||
pointer-events: none;
|
|
||||||
border-radius: var(--border-radius-large);
|
|
||||||
height: 16px;
|
|
||||||
margin-top: 8px;
|
|
||||||
width: 200px;
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-name: placeHolderShimmer;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
background-repeat: repeat !important;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
to right,
|
|
||||||
var(--grey-light) 0px,
|
|
||||||
#f2f2f2 120px,
|
|
||||||
var(--grey-light) 234px
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerTable {
|
|
||||||
background: var(--grey-background);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
display: flex;
|
|
||||||
padding: 8px;
|
|
||||||
border-bottom: 1px solid var(--grey-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerTable {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 32px;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-top: 1px solid var(--grey-background);
|
|
||||||
border-bottom: 1px solid var(--grey-background);
|
|
||||||
}
|
|
||||||
.contentTable {
|
|
||||||
.tr {
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid var(--grey-background);
|
|
||||||
padding: 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--grey-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
position: relative;
|
|
||||||
min-height: 32px;
|
|
||||||
|
|
||||||
& > .absolute_position {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fix_text_padding_medium {
|
|
||||||
padding: 8px 0;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-complete-width {
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,243 +0,0 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
||||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import Languages from '@features/global/services/languages-service';
|
|
||||||
import Button from 'components/buttons/button.jsx';
|
|
||||||
import InputIcon from 'components/inputs/input-icon.jsx';
|
|
||||||
import './table.scss';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
column?: any;
|
|
||||||
noHeader: boolean;
|
|
||||||
onAdd: () => void;
|
|
||||||
onRequestMore: (refresh: boolean) => Promise<any[]>;
|
|
||||||
onSearch: (query: string, maxResults: number, callback: (res: any[]) => void) => Promise<any[]>;
|
|
||||||
updatedData: (data: any) => any;
|
|
||||||
addText?: string;
|
|
||||||
resultsPerPage?: number;
|
|
||||||
unFocused: boolean;
|
|
||||||
};
|
|
||||||
type State = {
|
|
||||||
data: null | any[];
|
|
||||||
searchResults: any[];
|
|
||||||
loading: boolean;
|
|
||||||
has_more: boolean;
|
|
||||||
page: number;
|
|
||||||
searching: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class Table extends Component<Props, State> {
|
|
||||||
searchFieldValue = '';
|
|
||||||
searchRunning = false;
|
|
||||||
searchRunningTimeout: number | null = null;
|
|
||||||
|
|
||||||
constructor(props: Props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
data: null,
|
|
||||||
searchResults: [],
|
|
||||||
loading: true,
|
|
||||||
has_more: true,
|
|
||||||
page: 0,
|
|
||||||
searching: false,
|
|
||||||
};
|
|
||||||
Languages.addListener(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
Languages.removeListener(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
if (this.state.data === null) {
|
|
||||||
this.requestMore(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
search() {
|
|
||||||
if (this.searchFieldValue?.length <= 2) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (this.searchRunning) {
|
|
||||||
clearTimeout(this.searchRunningTimeout as number);
|
|
||||||
this.searchRunningTimeout = window.setTimeout(() => {
|
|
||||||
this.search();
|
|
||||||
}, 1000);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
loading: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.searchRunning = true;
|
|
||||||
this.props.onSearch(this.searchFieldValue, 10, (data: any[]) => {
|
|
||||||
this.searchRunning = false;
|
|
||||||
this.setState({
|
|
||||||
loading: false,
|
|
||||||
searchResults: data,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
renderItem(col: any, item: any) {
|
|
||||||
if (col.render) {
|
|
||||||
return col.render(item);
|
|
||||||
} else {
|
|
||||||
return <div className="">{col.dataIndex ? item[col.dataIndex] : ''}</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
requestMore(refresh = false) {
|
|
||||||
this.setState({ loading: true });
|
|
||||||
this.props.onRequestMore(refresh).then(res => {
|
|
||||||
const hasMore = res.length !== (this.state.data || []).length;
|
|
||||||
this.setState({ loading: false, data: res, has_more: hasMore });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setPosition() {
|
|
||||||
if (!!this.props.onSearch && !this.props.onAdd) return 'flex-end';
|
|
||||||
else return 'space-between';
|
|
||||||
}
|
|
||||||
|
|
||||||
nextPage() {
|
|
||||||
this.setState({ page: this.state.page + 1 });
|
|
||||||
if (this.getPageData().length < (this.state.page + 1) * this.getResultsPerPage()) {
|
|
||||||
this.requestMore();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getPageData() {
|
|
||||||
const from = this.state.page * this.getResultsPerPage();
|
|
||||||
return (this.state.data || []).slice(0, from + this.getResultsPerPage());
|
|
||||||
}
|
|
||||||
|
|
||||||
getResultsPerPage(): number {
|
|
||||||
return this.props.resultsPerPage || 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let page_data = this.state.searching ? this.state.searchResults : this.getPageData();
|
|
||||||
page_data = page_data
|
|
||||||
.map(data => {
|
|
||||||
data = this.props.updatedData ? this.props.updatedData(data) : data;
|
|
||||||
if (!data) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
})
|
|
||||||
.filter(i => i);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
className="small-y-margin full-width"
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: this.setPosition(),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{this.props.onAdd && (
|
|
||||||
<Button
|
|
||||||
className="medium"
|
|
||||||
value={this.props.addText || 'Add'}
|
|
||||||
onClick={this.props.onAdd}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!!this.props.onSearch && (
|
|
||||||
<div>
|
|
||||||
<InputIcon
|
|
||||||
icon="search"
|
|
||||||
small
|
|
||||||
placeholder={Languages.t('components.listmanager.filter', [], 'Search')}
|
|
||||||
onChange={(event: any) => {
|
|
||||||
const q = event.target.value;
|
|
||||||
this.searchFieldValue = q;
|
|
||||||
this.setState({ searching: q.length > 0 });
|
|
||||||
this.search();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
'table ' +
|
|
||||||
(this.props.unFocused ? 'unfocused ' : '') +
|
|
||||||
(this.state.loading ? 'loading ' : '')
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{!this.props.noHeader && (
|
|
||||||
<div className="headerTable">
|
|
||||||
{this.props.column.map((col: any, i: number) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className="headerItem"
|
|
||||||
style={{
|
|
||||||
width: col.width || 'inherit',
|
|
||||||
flex: col.width ? 'inherit' : '1',
|
|
||||||
textAlign: (col.titleStyle || {}).textAlign,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{col.title}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="contentTable">
|
|
||||||
{(page_data || []).length === 0 && !this.state.loading && (
|
|
||||||
<div className="tr" style={{ justifyContent: 'center', display: 'flex' }}>
|
|
||||||
<div className="item" style={{ lineHeight: '32px' }}>
|
|
||||||
{Languages.t('components.user_picker.modal_no_result')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(page_data || []).length === 0 &&
|
|
||||||
!!this.state.loading &&
|
|
||||||
Array(this.state.searching ? 1 : this.getResultsPerPage()).map((_, i: number) => {
|
|
||||||
return (
|
|
||||||
<div key={i} className="tr">
|
|
||||||
<div className="item">
|
|
||||||
<div className="line"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{(page_data || []).map((data: any, i: number) => {
|
|
||||||
return (
|
|
||||||
<div key={i} className="tr">
|
|
||||||
{this.props.column.map((col: any, j: number) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={j}
|
|
||||||
className="item"
|
|
||||||
style={{ width: col.width || 'inherit', flex: col.width ? 'inherit' : '1' }}
|
|
||||||
>
|
|
||||||
{this.renderItem(col, data)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{!this.state.searching &&
|
|
||||||
!!this.state.has_more &&
|
|
||||||
page_data.length >= this.getResultsPerPage() && (
|
|
||||||
<div className="footerTable">
|
|
||||||
<a href="#" onClick={() => this.nextPage()}>
|
|
||||||
{Languages.t('components.searchpopup.load_more', [], 'Load more results')}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
-98
@@ -1,98 +0,0 @@
|
|||||||
import SecuredConnection from './SecuredConnection.js';
|
|
||||||
/** MultipleSecuredConnections
|
|
||||||
* Manage multiple secured connections as one (multiple publish and centralized event manager)
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default class MultipleSecuredConnections {
|
|
||||||
constructor(callback, options) {
|
|
||||||
if (!options) {
|
|
||||||
options = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
//Options :
|
|
||||||
this.disableDuplicates = options.disableDuplicates !== false;
|
|
||||||
|
|
||||||
this.secured_connections = {};
|
|
||||||
this.callback = callback;
|
|
||||||
|
|
||||||
this.removing_secured_connections_timeouts = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
publish(data) {
|
|
||||||
Object.keys(this.secured_connections).forEach(secured_connection_key => {
|
|
||||||
var secured_connection = this.secured_connections[secured_connection_key];
|
|
||||||
secured_connection.publish(data, () => {});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
event(route, event, data) {
|
|
||||||
//Disable duplicates
|
|
||||||
var string = JSON.stringify(data);
|
|
||||||
if (
|
|
||||||
string === this.last_event &&
|
|
||||||
this.disableDuplicates &&
|
|
||||||
!(event === 'close' || event === 'open' || event === 'init')
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.last_event = string;
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
data = {};
|
|
||||||
}
|
|
||||||
data._route = route;
|
|
||||||
if (this.callback) this.callback(event, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
addConnection(route, option, http_options, key) {
|
|
||||||
if (this.secured_connections[route]) {
|
|
||||||
this.secured_connections[route].removing = false;
|
|
||||||
if (this.removing_secured_connections_timeouts[route]) {
|
|
||||||
clearTimeout(this.removing_secured_connections_timeouts[route]);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.secured_connections[route]) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.secured_connections[route] = new SecuredConnection(
|
|
||||||
route,
|
|
||||||
option,
|
|
||||||
(event, data) => {
|
|
||||||
this.event(route, event, data);
|
|
||||||
},
|
|
||||||
http_options,
|
|
||||||
key,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
removeConnection(route) {
|
|
||||||
if (!this.secured_connections[route] || this.secured_connections[route].removing) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.removing_secured_connections_timeouts[route]) {
|
|
||||||
clearTimeout(this.removing_secured_connections_timeouts[route]);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.secured_connections[route].removing = true;
|
|
||||||
this.removing_secured_connections_timeouts[route] = setTimeout(() => {
|
|
||||||
if (this.secured_connections[route]) {
|
|
||||||
this.secured_connections[route].close();
|
|
||||||
delete this.secured_connections[route];
|
|
||||||
}
|
|
||||||
}, 10000);
|
|
||||||
}
|
|
||||||
|
|
||||||
getRoutes() {
|
|
||||||
return Object.keys(this.secured_connections);
|
|
||||||
}
|
|
||||||
|
|
||||||
closeAll() {
|
|
||||||
Object.keys(this.secured_connections).foEach(route => {
|
|
||||||
this.removeConnection(route);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,265 +0,0 @@
|
|||||||
import Api from '@features/global/framework/api-service';
|
|
||||||
import ws from '@deprecated/websocket/websocket.js';
|
|
||||||
import CryptoJS from 'crypto-js';
|
|
||||||
import sha256 from 'crypto-js/sha256';
|
|
||||||
/** SecuredConnection
|
|
||||||
* Create websockets encrypted connection
|
|
||||||
*/
|
|
||||||
import Globals from '@features/global/services/globals-tdrive-app-service';
|
|
||||||
|
|
||||||
export default class SecuredConnection {
|
|
||||||
constructor(route, options, callback, http_options, collectionId) {
|
|
||||||
this.ready = false;
|
|
||||||
this.collectionId = collectionId;
|
|
||||||
|
|
||||||
this.route = route;
|
|
||||||
this.options = options;
|
|
||||||
|
|
||||||
this.callback = callback;
|
|
||||||
|
|
||||||
//Room idea
|
|
||||||
this.websocket_id = '';
|
|
||||||
|
|
||||||
//Store keys
|
|
||||||
this.keys = [];
|
|
||||||
this.keys_by_version = {};
|
|
||||||
this.publish_buffer = [];
|
|
||||||
this.http_options = http_options;
|
|
||||||
|
|
||||||
this.init(http_options);
|
|
||||||
|
|
||||||
Globals.window.CryptoAES = CryptoJS.AES;
|
|
||||||
}
|
|
||||||
|
|
||||||
init(http_options) {
|
|
||||||
this.ready = false;
|
|
||||||
|
|
||||||
this.options.get_options = http_options;
|
|
||||||
|
|
||||||
var data = {
|
|
||||||
collection_id: this.route,
|
|
||||||
options: this.options,
|
|
||||||
_grouped: true,
|
|
||||||
};
|
|
||||||
Api.GroupedQueryApiPost('/ajax/core/collections/init', data, res => {
|
|
||||||
var did_get = false;
|
|
||||||
|
|
||||||
if (res.data) {
|
|
||||||
var data = res.data;
|
|
||||||
this.ready = true;
|
|
||||||
this.websocket_id = data.room_id;
|
|
||||||
this.receiveNewKey(data.key, data.key_version, false);
|
|
||||||
this.open();
|
|
||||||
|
|
||||||
if (data.get) {
|
|
||||||
this.callback('get', { collectionId: this.collectionId, data: data.get });
|
|
||||||
did_get = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!did_get) {
|
|
||||||
this.callback('init', {});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
open() {
|
|
||||||
var websocket_id = this.websocket_id;
|
|
||||||
ws.subscribe(
|
|
||||||
'collections/' + websocket_id,
|
|
||||||
(uri, obj) => {
|
|
||||||
this.receiveEvent(obj);
|
|
||||||
},
|
|
||||||
websocket_id,
|
|
||||||
);
|
|
||||||
ws.onReconnect(websocket_id, () => {
|
|
||||||
this.close();
|
|
||||||
this.init();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.callback('open', {});
|
|
||||||
this.publish();
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
var websocket_id = this.websocket_id;
|
|
||||||
ws.offReconnect(websocket_id);
|
|
||||||
ws.unsubscribe(
|
|
||||||
'collections/' + websocket_id,
|
|
||||||
(uri, obj) => {
|
|
||||||
this.receiveEvent(obj);
|
|
||||||
},
|
|
||||||
websocket_id,
|
|
||||||
);
|
|
||||||
|
|
||||||
this.callback('close', {});
|
|
||||||
}
|
|
||||||
|
|
||||||
publish(data, callback) {
|
|
||||||
if (!data) {
|
|
||||||
//Read buffer
|
|
||||||
|
|
||||||
var publish_buffer = JSON.parse(JSON.stringify(this.publish_buffer));
|
|
||||||
this.publish_buffer = [];
|
|
||||||
|
|
||||||
publish_buffer.forEach(item => {
|
|
||||||
this.publish(item, callback);
|
|
||||||
});
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.ready) {
|
|
||||||
this.publish_buffer.push(data);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var websocket_id = this.websocket_id;
|
|
||||||
var encrypted = this.encrypt(data);
|
|
||||||
ws.publish('collections/' + websocket_id, encrypted);
|
|
||||||
|
|
||||||
if (callback) {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
receiveEvent(event) {
|
|
||||||
if (event.encrypted) {
|
|
||||||
event = this.decrypt(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.new_key) {
|
|
||||||
this.receiveNewKey(event.new_key, event.key_version, true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!event) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.callback('event', event);
|
|
||||||
}
|
|
||||||
|
|
||||||
//Receive new key as addon for previous key or as replacing key (sent by php server)
|
|
||||||
receiveNewKey(key, version, asAddon) {
|
|
||||||
if (asAddon) {
|
|
||||||
var lastKey = this.keys[this.keys.length - 1];
|
|
||||||
key = sha256(lastKey.key + key).toString(); //Mix keys
|
|
||||||
}
|
|
||||||
|
|
||||||
this.keys.push({
|
|
||||||
key: key,
|
|
||||||
version: version,
|
|
||||||
});
|
|
||||||
this.keys_by_version[version] = key;
|
|
||||||
|
|
||||||
this.prepareEncryptKey();
|
|
||||||
}
|
|
||||||
|
|
||||||
prepareEncryptKey() {
|
|
||||||
var lastKey = this.keys[this.keys.length - 1];
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (this.prepared_key_original !== lastKey) {
|
|
||||||
this.prepared_key_salt = CryptoJS.lib.WordArray.random(256);
|
|
||||||
this.prepared_key_original = lastKey;
|
|
||||||
this.prepared_key = CryptoJS.PBKDF2(lastKey.key, this.prepared_key_salt, {
|
|
||||||
hasher: CryptoJS.algo.SHA512,
|
|
||||||
keySize: 64 / 8,
|
|
||||||
iterations: 9,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.prepared_key;
|
|
||||||
}
|
|
||||||
|
|
||||||
encrypt(data) {
|
|
||||||
var lastKey = this.keys[this.keys.length - 1];
|
|
||||||
var prepared_key = this.prepareEncryptKey();
|
|
||||||
if (!prepared_key) {
|
|
||||||
prepared_key = '';
|
|
||||||
}
|
|
||||||
var iv = CryptoJS.lib.WordArray.random(16);
|
|
||||||
|
|
||||||
var encrypted = CryptoJS.AES.encrypt(JSON.stringify(data), prepared_key, { iv: iv });
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-redeclare
|
|
||||||
var data = {
|
|
||||||
encrypted: CryptoJS.enc.Base64.stringify(encrypted.ciphertext),
|
|
||||||
iv: CryptoJS.enc.Hex.stringify(iv),
|
|
||||||
salt: CryptoJS.enc.Hex.stringify(this.prepared_key_salt),
|
|
||||||
key_version: lastKey.version,
|
|
||||||
};
|
|
||||||
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
decrypt(data) {
|
|
||||||
if (!data.key_version) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
let res = '';
|
|
||||||
let str = '';
|
|
||||||
try {
|
|
||||||
if (data.public) {
|
|
||||||
return typeof data.public === 'string' ? JSON.parse(data.public) : data.public;
|
|
||||||
}
|
|
||||||
|
|
||||||
var encrypted_data = data.encrypted;
|
|
||||||
|
|
||||||
var key = this.keys_by_version[data.key_version];
|
|
||||||
|
|
||||||
if (!key) {
|
|
||||||
if (
|
|
||||||
this.getKeyTimestamp(key) > this.getKeyTimestamp(this.keys[this.keys.length - 1].version)
|
|
||||||
) {
|
|
||||||
//We have a old key, we have to update and request the message again
|
|
||||||
this.init(this.http_options);
|
|
||||||
//TODO reask lost message after init
|
|
||||||
} else {
|
|
||||||
//We have only newer keys, ask everybody to update
|
|
||||||
//TODO ws.publish('collections/' + websocket_id, encrypted);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var salt = CryptoJS.enc.Hex.parse(data.salt);
|
|
||||||
var prepared_key = CryptoJS.PBKDF2(key, salt, {
|
|
||||||
hasher: CryptoJS.algo.SHA512,
|
|
||||||
keySize: 64 / 8,
|
|
||||||
iterations: 9,
|
|
||||||
});
|
|
||||||
|
|
||||||
var iv = CryptoJS.enc.Hex.parse(data.iv);
|
|
||||||
var bytes = CryptoJS.AES.decrypt(encrypted_data, prepared_key, { iv: iv });
|
|
||||||
str = bytes.toString(CryptoJS.enc.Utf8);
|
|
||||||
|
|
||||||
if (str) {
|
|
||||||
res = JSON.parse(str);
|
|
||||||
} else {
|
|
||||||
res = '';
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Unable to read encrypted websocket event', str, err.message);
|
|
||||||
}
|
|
||||||
|
|
||||||
return res;
|
|
||||||
}
|
|
||||||
|
|
||||||
getKeyTimestamp(key) {
|
|
||||||
try {
|
|
||||||
if (typeof key !== 'string') {
|
|
||||||
if (key !== undefined) {
|
|
||||||
console.log('wrong websocket key format: ', key);
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
return parseInt((key || '').split('-')[1]);
|
|
||||||
} catch (e) {
|
|
||||||
console.log(key, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,184 +0,0 @@
|
|||||||
import Number from '@features/global/utils/Numbers';
|
|
||||||
import Observable from '@deprecated/CollectionsV1/observable.js';
|
|
||||||
import LoginService from '@features/auth/login-service';
|
|
||||||
import Logger from '@features/global/framework/logger-service';
|
|
||||||
import Globals from '@features/global/services/globals-tdrive-app-service';
|
|
||||||
import WebSocket from '../../features/global/types/websocket-types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Keeps old PHP websocket working doing the bridge with the new implementation
|
|
||||||
*/
|
|
||||||
class DeprecatedWebsocket extends Observable {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.logger = Logger.getLogger('Websocket');
|
|
||||||
this.setObservableName('websockets');
|
|
||||||
|
|
||||||
this.ws = null;
|
|
||||||
this.connection = null;
|
|
||||||
this.afterError = false;
|
|
||||||
this.lastData = 1;
|
|
||||||
this.testNetwork = false;
|
|
||||||
|
|
||||||
this.connected = true;
|
|
||||||
this.subscribed = {};
|
|
||||||
this.subscribedKey = {};
|
|
||||||
this.disconnectListeners = {};
|
|
||||||
|
|
||||||
this.alive_connected = true;
|
|
||||||
|
|
||||||
this.firstTime = true;
|
|
||||||
this.last_reconnect_call = new Date();
|
|
||||||
this.last_reconnect_call_if_needed = new Date();
|
|
||||||
|
|
||||||
window.websocketsManager = this;
|
|
||||||
|
|
||||||
this.window_focus = true;
|
|
||||||
this.window_last_blur = new Date();
|
|
||||||
this.deconnectionBlurTimeout = setTimeout(() => {}, 0);
|
|
||||||
Globals.window.addEventListener('focus', () => {
|
|
||||||
this.reconnectIfNeeded(60);
|
|
||||||
clearTimeout(this.deconnectionBlurTimeout);
|
|
||||||
this.didFocusedLastMinute = true;
|
|
||||||
this.window_focus = true;
|
|
||||||
this.window_last_blur = new Date();
|
|
||||||
if (this.ws == null || new Date().getTime() - this.window_last_blur.getTime() > 30000) {
|
|
||||||
this.alive_connected = false;
|
|
||||||
this.alive();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Globals.window.addEventListener('blur', () => {
|
|
||||||
this.window_focus = false;
|
|
||||||
this.window_last_blur = new Date();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.alive.bind(this);
|
|
||||||
this.message.bind(this);
|
|
||||||
this.updateConnected.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
//Send I'm alive !
|
|
||||||
alive() {
|
|
||||||
var nw = new Date().getTime();
|
|
||||||
if (!this.lastAlive || nw - this.lastAlive > 60000) {
|
|
||||||
// Wait at least 60 seconds
|
|
||||||
this.lastAlive = nw;
|
|
||||||
this.alive_timeout = setTimeout(() => {
|
|
||||||
this.alive_connected = false;
|
|
||||||
}, 5100);
|
|
||||||
this.reconnectIfNeeded();
|
|
||||||
clearTimeout(this.alive_timeout);
|
|
||||||
this.alive_connected = true;
|
|
||||||
this.didFocusedLastMinute = Globals.isReactNative || Globals.window.document.hasFocus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Receive server message
|
|
||||||
message(unid, route, data) {
|
|
||||||
route = (route || '').split('previous::').pop();
|
|
||||||
if (unid !== this.subscribedKey[route]) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.subscribed[route]) {
|
|
||||||
this.subscribed[route].forEach(c => {
|
|
||||||
try {
|
|
||||||
c.callback(route, data);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.unsubscribe(route);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Subscribe to channel
|
|
||||||
subscribe(route, callback, key) {
|
|
||||||
this.logger.debug(`Subscribe to ${route}`);
|
|
||||||
route = (route || '').split('previous::').pop();
|
|
||||||
if (!key) {
|
|
||||||
key = callback.name;
|
|
||||||
}
|
|
||||||
if (!this.subscribed[route]) {
|
|
||||||
this.subscribed[route] = [];
|
|
||||||
}
|
|
||||||
this.subscribed[route].push({ name: key, callback: callback });
|
|
||||||
if (this.subscribed[route].length === 1) {
|
|
||||||
const unid = Number.unid();
|
|
||||||
this.subscribedKey[route] = unid;
|
|
||||||
WebSocket.get().join('previous::' + route, '', '', (type, data) => {
|
|
||||||
if (type === 'realtime:event') {
|
|
||||||
this.message(unid, data.name, data.data);
|
|
||||||
}
|
|
||||||
if (type === 'connected') {
|
|
||||||
this.updateConnected(true);
|
|
||||||
}
|
|
||||||
if (type === 'disconnected') {
|
|
||||||
this.updateConnected(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Unsubscribe from channel
|
|
||||||
unsubscribe(route, callback, key) {
|
|
||||||
this.logger.debug(`Unsubscribe from ${route}`);
|
|
||||||
route = (route || '').split('previous::').pop();
|
|
||||||
if (!key && callback) {
|
|
||||||
key = callback.name;
|
|
||||||
}
|
|
||||||
if (!key) {
|
|
||||||
key = 'default';
|
|
||||||
}
|
|
||||||
if (!this.subscribed[route]) {
|
|
||||||
this.subscribed[route] = [];
|
|
||||||
}
|
|
||||||
var remaining = [];
|
|
||||||
this.subscribed[route].forEach(c => {
|
|
||||||
if (c.name !== key) {
|
|
||||||
remaining.push(c);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.subscribed[route] = remaining;
|
|
||||||
if (this.subscribed[route].length === 0) {
|
|
||||||
WebSocket.get().leave('previous::' + route, '');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
publish(route, value) {
|
|
||||||
this.logger.debug(`Publish to ${route}`);
|
|
||||||
WebSocket.get().send('previous::' + route, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
reconnectIfNeeded(seconds = 30) {
|
|
||||||
if (new Date().getTime() - this.last_reconnect_call_if_needed.getTime() > seconds * 1000) {
|
|
||||||
//30 seconds
|
|
||||||
if (LoginService.currentUserId) {
|
|
||||||
LoginService.updateUser();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.last_reconnect_call_if_needed = new Date();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onReconnect(id, callback) {
|
|
||||||
this.disconnectListeners[id] = callback;
|
|
||||||
}
|
|
||||||
|
|
||||||
offReconnect(id) {
|
|
||||||
delete this.disconnectListeners[id];
|
|
||||||
}
|
|
||||||
|
|
||||||
updateConnected(state) {
|
|
||||||
if (state !== this.connected) {
|
|
||||||
this.connected = state;
|
|
||||||
this.notify();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
isConnected() {
|
|
||||||
return this.connected;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default new DeprecatedWebsocket();
|
|
||||||
Reference in New Issue
Block a user