Clean frontend files
This commit is contained in:
Romaric Mourgues
@@ -2,7 +2,7 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Input from './input.jsx';
|
||||
import Icon from 'app/components/icon/icon.jsx';
|
||||
import Icon from '@components/icon/icon.jsx';
|
||||
import './inputs.scss';
|
||||
|
||||
export default class InputEnter extends Component {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Input from './input.jsx';
|
||||
import Icon from 'app/components/icon/icon.jsx';
|
||||
import Icon from '@components/icon/icon.jsx';
|
||||
import './inputs.scss';
|
||||
|
||||
export default class InputIcon extends Component {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Languages from 'app/features/global/services/languages-service';
|
||||
import Languages from '@features/global/services/languages-service';
|
||||
import './input-with-button.scss';
|
||||
import Icon from 'app/components/icon/icon.jsx';
|
||||
import Icon from '@components/icon/icon.jsx';
|
||||
import Input from './input.jsx';
|
||||
|
||||
export default class InputWithButton extends Component {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import MenusManager from 'app/components/menus/menus-manager.jsx';
|
||||
import MenusManager from '@components/menus/menus-manager.jsx';
|
||||
import ColorPicker from 'components/color-picker/color-picker.jsx';
|
||||
import Input from 'components/inputs/input.jsx';
|
||||
import './inputs.scss';
|
||||
|
||||
@@ -1,203 +0,0 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import React from 'react';
|
||||
import { Input, Col, Row } from 'antd';
|
||||
|
||||
import Emojione from 'components/emojione/emojione';
|
||||
import MenusManager from 'app/components/menus/menus-manager.jsx';
|
||||
import EmojiPicker from 'components/emoji-picker/emoji-picker.jsx';
|
||||
|
||||
import './inputs.scss';
|
||||
|
||||
type PropsType = { [key: string]: any };
|
||||
type StateType = { [key: string]: any };
|
||||
|
||||
export default class InputWithIcon extends React.Component<PropsType, StateType> {
|
||||
outsideClickListener: (event: any) => void = () => undefined;
|
||||
input: any;
|
||||
emojiPickerIsOpen: any;
|
||||
emojipicker_dom: any;
|
||||
allChanEmojies = [
|
||||
':8ball:',
|
||||
':dart:',
|
||||
':joystick:',
|
||||
':video_game:',
|
||||
':bar_chart:',
|
||||
':crystal_ball:',
|
||||
':speech_balloon:',
|
||||
':bulb:',
|
||||
':deciduous_tree:',
|
||||
':palm_tree:',
|
||||
':earth_americas:',
|
||||
':open_file_folder:',
|
||||
':penguin:',
|
||||
':seedling:',
|
||||
':sailboat:',
|
||||
':fire_engine:',
|
||||
':scroll:',
|
||||
':newspaper:',
|
||||
':factory:',
|
||||
':package:',
|
||||
':mailbox:',
|
||||
':moneybag:',
|
||||
':smiley_cat:',
|
||||
':sunglasses:',
|
||||
];
|
||||
emoji_dom: any;
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.randomizeEmojies();
|
||||
}
|
||||
|
||||
randomizeEmojies() {
|
||||
this.allChanEmojies.sort((a, b) => {
|
||||
if (b === this.props.value[0]) {
|
||||
return -1;
|
||||
}
|
||||
if (a === this.props.value[0]) {
|
||||
return 1;
|
||||
}
|
||||
return Math.floor(Math.random() * 3) - 1;
|
||||
});
|
||||
}
|
||||
|
||||
outsideMenuListener() {
|
||||
this.closeEmojiPicker();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('click', this.outsideClickListener);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.focusOnDidMount && this.input) {
|
||||
this.input.focus();
|
||||
}
|
||||
|
||||
this.outsideClickListener = event => {
|
||||
if (
|
||||
this.emojiPickerIsOpen &&
|
||||
this.emojipicker_dom &&
|
||||
!this.emojipicker_dom.contains(event.target) &&
|
||||
document.contains(event.target)
|
||||
) {
|
||||
this.outsideMenuListener();
|
||||
}
|
||||
};
|
||||
|
||||
this.outsideClickListener = this.outsideClickListener.bind(this);
|
||||
document.addEventListener('click', this.outsideClickListener);
|
||||
}
|
||||
|
||||
closeEmojiPicker() {
|
||||
if (!this.emojiPickerIsOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.menu_level !== undefined) {
|
||||
MenusManager.closeSubMenu(this.props.menu_level);
|
||||
} else {
|
||||
MenusManager.closeMenu();
|
||||
}
|
||||
|
||||
this.emojiPickerIsOpen = false;
|
||||
}
|
||||
|
||||
openEmojiPicker() {
|
||||
if (this.emojiPickerIsOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
let preferedEmojis = [this.props.value[0]];
|
||||
if (this.props.preferedEmoji) {
|
||||
preferedEmojis = this.props.preferedEmoji;
|
||||
} else {
|
||||
this.randomizeEmojies();
|
||||
for (let i = 0; i < 5; i++) {
|
||||
preferedEmojis[i + 1] = this.allChanEmojies[i];
|
||||
}
|
||||
}
|
||||
|
||||
const menu = [
|
||||
{
|
||||
type: 'react-element',
|
||||
className: 'menu-cancel-margin',
|
||||
reactElement: () => {
|
||||
return (
|
||||
<EmojiPicker
|
||||
refDom={(node: any) => (this.emojipicker_dom = node)}
|
||||
onChange={(emoji: any) => this.selectEmoji(emoji)}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
const elementRect = (window as any).getBoundingClientRect(this.emoji_dom);
|
||||
elementRect.x = elementRect.x || elementRect.left;
|
||||
elementRect.y = elementRect.y || elementRect.top;
|
||||
if (this.props.menu_level !== undefined) {
|
||||
MenusManager.openSubMenu(menu, elementRect, this.props.menu_level, 'bottom');
|
||||
} else {
|
||||
MenusManager.openMenu(menu, elementRect, 'bottom', {});
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.emojiPickerIsOpen = true;
|
||||
}, 200);
|
||||
}
|
||||
selectEmoji(emoji: any) {
|
||||
this.closeEmojiPicker();
|
||||
const value = [emoji.native, this.props.value[1]];
|
||||
this.onChange(value);
|
||||
}
|
||||
onChange(value: any) {
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(value);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let icon = this.props.value[0];
|
||||
if (!this.props.value[0]) {
|
||||
this.onChange([this.allChanEmojies[0], this.props.value[1]]);
|
||||
icon = this.allChanEmojies[0];
|
||||
}
|
||||
return (
|
||||
<Input.Group size="small">
|
||||
<Row wrap={false} align="middle" gutter={[8, 0]}>
|
||||
<Col flex="none">
|
||||
<div
|
||||
className="emoji"
|
||||
ref={node => (this.emoji_dom = node)}
|
||||
onClick={() => {
|
||||
this.openEmojiPicker();
|
||||
}}
|
||||
>
|
||||
<Emojione type={icon} size={24} />
|
||||
</div>
|
||||
</Col>
|
||||
<Col flex="auto">
|
||||
{(!this.props.children && (
|
||||
<Input
|
||||
size={'large'}
|
||||
style={{ paddingLeft: 15 }}
|
||||
autoFocus
|
||||
ref={obj => {
|
||||
this.input = obj;
|
||||
if (this.props.inputRef) this.props.inputRef(obj);
|
||||
}}
|
||||
type="text"
|
||||
placeholder={this.props.placeholder}
|
||||
value={this.props.value[1]}
|
||||
onPressEnter={this.props.onEnter}
|
||||
onChange={evt => {
|
||||
if (this.onChange) this.onChange([this.props.value[0], evt.target.value]);
|
||||
}}
|
||||
/>
|
||||
)) ||
|
||||
this.props.children}
|
||||
</Col>
|
||||
</Row>
|
||||
</Input.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
.group-container {
|
||||
.ant-btn-icon-only {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color: var(--grey-background);
|
||||
border-radius: var(--border-radius-base) 0px 0px var(--border-radius-base);
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-background);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select {
|
||||
max-width: 120px;
|
||||
|
||||
.ant-select-selector {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ant-select-selector,
|
||||
.border-radius-left {
|
||||
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.group-divider {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
background-color: var(--black-alpha-70);
|
||||
opacity: 0.28;
|
||||
}
|
||||
|
||||
.ant-btn .small-margin-left {
|
||||
color: var(--grey-dark);
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
|
||||
}
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Input, Col, Row, Select, Typography, Button, Divider, Tooltip } from 'antd';
|
||||
import { ChannelType } from 'app/features/channels/types/channel';
|
||||
import { List, X } from 'react-feather';
|
||||
import Languages from 'app/features/global/services/languages-service';
|
||||
import './input-with-select.scss';
|
||||
|
||||
type PropsType = {
|
||||
channel: ChannelType | undefined;
|
||||
onChange: (array: string[]) => void;
|
||||
groups: string[];
|
||||
};
|
||||
|
||||
const { Group } = Input;
|
||||
const { Option } = Select;
|
||||
const InputWithSelect = ({ groups, channel, onChange }: PropsType): JSX.Element => {
|
||||
const [group, setGroup] = useState<string>(channel?.channel_group || '');
|
||||
const [channelName, setChannelName] = useState<string>(channel?.name || '');
|
||||
const [searchedGroup, setSearchedGroup] = useState<string>('');
|
||||
const [displaySelector, setDisplaySelector] = useState<boolean>(
|
||||
channel?.channel_group ? true : false,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
onChange([group || '', channelName]);
|
||||
});
|
||||
|
||||
return (
|
||||
<Group className="group-container">
|
||||
<Row style={{ flexWrap: 'nowrap' }}>
|
||||
{!displaySelector && (
|
||||
<Col>
|
||||
<Tooltip
|
||||
placement="top"
|
||||
title={Languages.t('components.inputs.input_with_select.button.tooltip')}
|
||||
>
|
||||
<Button
|
||||
type="default"
|
||||
onClick={() => setDisplaySelector(!displaySelector)}
|
||||
icon={<List size={14} className="small-margin-left" />}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
)}
|
||||
{displaySelector && (
|
||||
<Col>
|
||||
<Select
|
||||
onBlur={() => ((group || '').length === 0 ? setDisplaySelector(false) : undefined)}
|
||||
notFoundContent={
|
||||
<span className="info" style={{ color: 'var(--grey-dark)' }}>
|
||||
{Languages.t('components.inputs.input_with_select.select.no_sections')}
|
||||
</span>
|
||||
}
|
||||
dropdownMatchSelectWidth={false}
|
||||
className={displaySelector ? 'border-radius-left' : ''}
|
||||
allowClear
|
||||
clearIcon={<X size={14} color="var(--grey-dark)" />}
|
||||
onClear={() => {
|
||||
setDisplaySelector(false);
|
||||
setGroup('');
|
||||
}}
|
||||
size={'large'}
|
||||
defaultValue={group || undefined}
|
||||
showSearch
|
||||
autoFocus={displaySelector}
|
||||
placeholder={Languages.t('components.inputs.input_with_select.select.placeholder')}
|
||||
onChange={(value: string) => setGroup(value)}
|
||||
onSearch={(value: string) => setSearchedGroup(value)}
|
||||
searchValue={searchedGroup.substr(0, 20)}
|
||||
>
|
||||
{searchedGroup.length > 0 && group !== searchedGroup && (
|
||||
<Option value={searchedGroup}>
|
||||
{Languages.t('general.create')}{' '}
|
||||
<Typography.Text strong>{searchedGroup}</Typography.Text>
|
||||
</Option>
|
||||
)}
|
||||
{groups.map((group: string, index: number) => {
|
||||
return (
|
||||
<Option key={index} value={group}>
|
||||
{group}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</Col>
|
||||
)}
|
||||
<Col>
|
||||
<Divider type="vertical" className="group-divider" />
|
||||
</Col>
|
||||
<Col flex="auto">
|
||||
<Input
|
||||
autoFocus={!displaySelector}
|
||||
size={'large'}
|
||||
maxLength={30}
|
||||
placeholder={Languages.t('components.inputs.input_with_select.input.placeholder')}
|
||||
value={channelName}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setChannelName(e.target.value)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default InputWithSelect;
|
||||
Reference in New Issue
Block a user