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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user