yarn lint:js --fix
This commit is contained in:
parent
e8ead6e960
commit
35c916293e
10 changed files with 65 additions and 65 deletions
|
@ -46,7 +46,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
|
|
||||||
getFirstIndex = () => {
|
getFirstIndex = () => {
|
||||||
return this.props.autoSelect ? 0 : -1;
|
return this.props.autoSelect ? 0 : -1;
|
||||||
}
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
suggestionsHidden: true,
|
suggestionsHidden: true,
|
||||||
|
@ -76,7 +76,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
if (this.props.onChange) {
|
if (this.props.onChange) {
|
||||||
this.props.onChange(e);
|
this.props.onChange(e);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
|
onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
|
||||||
const { suggestions, menu, disabled } = this.props;
|
const { suggestions, menu, disabled } = this.props;
|
||||||
|
@ -145,15 +145,15 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
if (this.props.onKeyDown) {
|
if (this.props.onKeyDown) {
|
||||||
this.props.onKeyDown(e);
|
this.props.onKeyDown(e);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
onBlur = () => {
|
onBlur = () => {
|
||||||
this.setState({ suggestionsHidden: true, focused: false });
|
this.setState({ suggestionsHidden: true, focused: false });
|
||||||
}
|
};
|
||||||
|
|
||||||
onFocus = () => {
|
onFocus = () => {
|
||||||
this.setState({ focused: true });
|
this.setState({ focused: true });
|
||||||
}
|
};
|
||||||
|
|
||||||
onSuggestionClick: React.EventHandler<React.MouseEvent | React.TouchEvent> = (e) => {
|
onSuggestionClick: React.EventHandler<React.MouseEvent | React.TouchEvent> = (e) => {
|
||||||
const index = Number(e.currentTarget?.getAttribute('data-index'));
|
const index = Number(e.currentTarget?.getAttribute('data-index'));
|
||||||
|
@ -161,7 +161,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
|
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
|
||||||
this.input?.focus();
|
this.input?.focus();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
};
|
||||||
|
|
||||||
componentDidUpdate(prevProps: IAutosuggestInput, prevState: any) {
|
componentDidUpdate(prevProps: IAutosuggestInput, prevState: any) {
|
||||||
const { suggestions } = this.props;
|
const { suggestions } = this.props;
|
||||||
|
@ -172,7 +172,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
|
|
||||||
setInput = (c: HTMLInputElement) => {
|
setInput = (c: HTMLInputElement) => {
|
||||||
this.input = c;
|
this.input = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
renderSuggestion = (suggestion: AutoSuggestion, i: number) => {
|
renderSuggestion = (suggestion: AutoSuggestion, i: number) => {
|
||||||
const { selectedSuggestion } = this.state;
|
const { selectedSuggestion } = this.state;
|
||||||
|
@ -209,21 +209,21 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
{inner}
|
{inner}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
handleMenuItemAction = (item: MenuItem | null, e: React.MouseEvent | React.KeyboardEvent) => {
|
handleMenuItemAction = (item: MenuItem | null, e: React.MouseEvent | React.KeyboardEvent) => {
|
||||||
this.onBlur();
|
this.onBlur();
|
||||||
if (item?.action) {
|
if (item?.action) {
|
||||||
item.action(e);
|
item.action(e);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleMenuItemClick = (item: MenuItem | null): React.MouseEventHandler => {
|
handleMenuItemClick = (item: MenuItem | null): React.MouseEventHandler => {
|
||||||
return e => {
|
return e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.handleMenuItemAction(item, e);
|
this.handleMenuItemAction(item, e);
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
|
|
||||||
renderMenu = () => {
|
renderMenu = () => {
|
||||||
const { menu, suggestions } = this.props;
|
const { menu, suggestions } = this.props;
|
||||||
|
|
|
@ -64,7 +64,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
||||||
}
|
}
|
||||||
|
|
||||||
this.props.onChange(e);
|
this.props.onChange(e);
|
||||||
}
|
};
|
||||||
|
|
||||||
onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
|
onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
|
||||||
const { suggestions, disabled } = this.props;
|
const { suggestions, disabled } = this.props;
|
||||||
|
@ -122,7 +122,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
||||||
}
|
}
|
||||||
|
|
||||||
this.props.onKeyDown(e);
|
this.props.onKeyDown(e);
|
||||||
}
|
};
|
||||||
|
|
||||||
onBlur = () => {
|
onBlur = () => {
|
||||||
this.setState({ suggestionsHidden: true, focused: false });
|
this.setState({ suggestionsHidden: true, focused: false });
|
||||||
|
@ -130,7 +130,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
||||||
if (this.props.onBlur) {
|
if (this.props.onBlur) {
|
||||||
this.props.onBlur();
|
this.props.onBlur();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
onFocus = () => {
|
onFocus = () => {
|
||||||
this.setState({ focused: true });
|
this.setState({ focused: true });
|
||||||
|
@ -138,14 +138,14 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
||||||
if (this.props.onFocus) {
|
if (this.props.onFocus) {
|
||||||
this.props.onFocus();
|
this.props.onFocus();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
onSuggestionClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
|
onSuggestionClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
|
||||||
const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index') as any);
|
const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index') as any);
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
|
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
|
||||||
this.textarea?.focus();
|
this.textarea?.focus();
|
||||||
}
|
};
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps: IAutosuggesteTextarea, nextState: any) {
|
shouldComponentUpdate(nextProps: IAutosuggesteTextarea, nextState: any) {
|
||||||
// Skip updating when only the lastToken changes so the
|
// Skip updating when only the lastToken changes so the
|
||||||
|
@ -169,14 +169,14 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
||||||
|
|
||||||
setTextarea: React.Ref<HTMLTextAreaElement> = (c) => {
|
setTextarea: React.Ref<HTMLTextAreaElement> = (c) => {
|
||||||
this.textarea = c;
|
this.textarea = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
onPaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
|
onPaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
|
||||||
if (e.clipboardData && e.clipboardData.files.length === 1) {
|
if (e.clipboardData && e.clipboardData.files.length === 1) {
|
||||||
this.props.onPaste(e.clipboardData.files);
|
this.props.onPaste(e.clipboardData.files);
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
renderSuggestion = (suggestion: string | Emoji, i: number) => {
|
renderSuggestion = (suggestion: string | Emoji, i: number) => {
|
||||||
const { selectedSuggestion } = this.state;
|
const { selectedSuggestion } = this.state;
|
||||||
|
@ -208,7 +208,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
||||||
{inner}
|
{inner}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
setPortalPosition() {
|
setPortalPosition() {
|
||||||
if (!this.textarea) {
|
if (!this.textarea) {
|
||||||
|
|
|
@ -64,7 +64,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
|
||||||
if (this.node && !this.node.contains(e.target as Node)) {
|
if (this.node && !this.node.contains(e.target as Node)) {
|
||||||
this.props.onClose();
|
this.props.onClose();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
document.addEventListener('click', this.handleDocumentClick, false);
|
document.addEventListener('click', this.handleDocumentClick, false);
|
||||||
|
@ -84,11 +84,11 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
|
||||||
|
|
||||||
setRef: React.RefCallback<HTMLDivElement> = c => {
|
setRef: React.RefCallback<HTMLDivElement> = c => {
|
||||||
this.node = c;
|
this.node = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
setFocusRef: React.RefCallback<HTMLAnchorElement> = c => {
|
setFocusRef: React.RefCallback<HTMLAnchorElement> = c => {
|
||||||
this.focusedItem = c;
|
this.focusedItem = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
handleKeyDown = (e: KeyboardEvent) => {
|
handleKeyDown = (e: KeyboardEvent) => {
|
||||||
if (!this.node) return;
|
if (!this.node) return;
|
||||||
|
@ -127,13 +127,13 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleItemKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
|
handleItemKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
|
||||||
if (e.key === 'Enter' || e.key === ' ') {
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
this.handleClick(e);
|
this.handleClick(e);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = e => {
|
handleClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = e => {
|
||||||
const i = Number(e.currentTarget.getAttribute('data-index'));
|
const i = Number(e.currentTarget.getAttribute('data-index'));
|
||||||
|
@ -152,7 +152,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
action(e);
|
action(e);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleMiddleClick: React.EventHandler<React.MouseEvent> = e => {
|
handleMiddleClick: React.EventHandler<React.MouseEvent> = e => {
|
||||||
const i = Number(e.currentTarget.getAttribute('data-index'));
|
const i = Number(e.currentTarget.getAttribute('data-index'));
|
||||||
|
@ -166,13 +166,13 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
middleClick(e);
|
middleClick(e);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleAuxClick: React.EventHandler<React.MouseEvent> = e => {
|
handleAuxClick: React.EventHandler<React.MouseEvent> = e => {
|
||||||
if (e.button === 1) {
|
if (e.button === 1) {
|
||||||
this.handleMiddleClick(e);
|
this.handleMiddleClick(e);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
renderItem(option: MenuItem | null, i: number): JSX.Element {
|
renderItem(option: MenuItem | null, i: number): JSX.Element {
|
||||||
if (option === null) {
|
if (option === null) {
|
||||||
|
@ -303,7 +303,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
|
||||||
|
|
||||||
onOpen(this.state.id, this.handleItemClick, placement, e.type !== 'click');
|
onOpen(this.state.id, this.handleItemClick, placement, e.type !== 'click');
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleClose = () => {
|
handleClose = () => {
|
||||||
if (this.activeElement && this.activeElement === this.target) {
|
if (this.activeElement && this.activeElement === this.target) {
|
||||||
|
@ -314,13 +314,13 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
|
||||||
if (this.props.onClose) {
|
if (this.props.onClose) {
|
||||||
this.props.onClose(this.state.id);
|
this.props.onClose(this.state.id);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleMouseDown: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = () => {
|
handleMouseDown: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = () => {
|
||||||
if (!this.state.open) {
|
if (!this.state.open) {
|
||||||
this.activeElement = document.activeElement;
|
this.activeElement = document.activeElement;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleButtonKeyDown: React.EventHandler<React.KeyboardEvent> = (e) => {
|
handleButtonKeyDown: React.EventHandler<React.KeyboardEvent> = (e) => {
|
||||||
switch (e.key) {
|
switch (e.key) {
|
||||||
|
@ -329,7 +329,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
|
||||||
this.handleMouseDown(e);
|
this.handleMouseDown(e);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleKeyPress: React.EventHandler<React.KeyboardEvent<HTMLButtonElement>> = (e) => {
|
handleKeyPress: React.EventHandler<React.KeyboardEvent<HTMLButtonElement>> = (e) => {
|
||||||
switch (e.key) {
|
switch (e.key) {
|
||||||
|
@ -340,7 +340,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleItemClick: React.EventHandler<React.MouseEvent> = e => {
|
handleItemClick: React.EventHandler<React.MouseEvent> = e => {
|
||||||
const i = Number(e.currentTarget.getAttribute('data-index'));
|
const i = Number(e.currentTarget.getAttribute('data-index'));
|
||||||
|
@ -358,21 +358,21 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
|
||||||
} else if (to) {
|
} else if (to) {
|
||||||
this.props.history?.push(to);
|
this.props.history?.push(to);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
setTargetRef: React.RefCallback<HTMLButtonElement> = c => {
|
setTargetRef: React.RefCallback<HTMLButtonElement> = c => {
|
||||||
this.target = c;
|
this.target = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
findTarget = () => {
|
findTarget = () => {
|
||||||
return this.target;
|
return this.target;
|
||||||
}
|
};
|
||||||
|
|
||||||
componentWillUnmount = () => {
|
componentWillUnmount = () => {
|
||||||
if (this.state.id === this.props.openDropdownId) {
|
if (this.state.id === this.props.openDropdownId) {
|
||||||
this.handleClose();
|
this.handleClose();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children, dropdownMenuStyle } = this.props;
|
const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children, dropdownMenuStyle } = this.props;
|
||||||
|
|
|
@ -28,7 +28,7 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
|
||||||
onReact: () => { },
|
onReact: () => { },
|
||||||
onUnfocus: () => { },
|
onUnfocus: () => { },
|
||||||
visible: false,
|
visible: false,
|
||||||
}
|
};
|
||||||
|
|
||||||
node?: HTMLDivElement = undefined;
|
node?: HTMLDivElement = undefined;
|
||||||
|
|
||||||
|
@ -38,7 +38,7 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
|
||||||
if (focused && (!e.currentTarget || !e.currentTarget.classList.contains('emoji-react-selector__emoji'))) {
|
if (focused && (!e.currentTarget || !e.currentTarget.classList.contains('emoji-react-selector__emoji'))) {
|
||||||
onUnfocus();
|
onUnfocus();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
_selectPreviousEmoji = (i: number): void => {
|
_selectPreviousEmoji = (i: number): void => {
|
||||||
if (!this.node) return;
|
if (!this.node) return;
|
||||||
|
@ -85,7 +85,7 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
|
||||||
onUnfocus();
|
onUnfocus();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleReact = (emoji: string) => (): void => {
|
handleReact = (emoji: string) => (): void => {
|
||||||
const { onReact, focused, onUnfocus } = this.props;
|
const { onReact, focused, onUnfocus } = this.props;
|
||||||
|
@ -95,7 +95,7 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
|
||||||
if (focused) {
|
if (focused) {
|
||||||
onUnfocus();
|
onUnfocus();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handlers = {
|
handlers = {
|
||||||
open: () => { },
|
open: () => { },
|
||||||
|
@ -103,7 +103,7 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
|
||||||
|
|
||||||
setRef = (c: HTMLDivElement): void => {
|
setRef = (c: HTMLDivElement): void => {
|
||||||
this.node = c;
|
this.node = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { visible, focused, allowedEmoji, onReact } = this.props;
|
const { visible, focused, allowedEmoji, onReact } = this.props;
|
||||||
|
|
|
@ -42,7 +42,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
|
||||||
error: undefined,
|
error: undefined,
|
||||||
componentStack: undefined,
|
componentStack: undefined,
|
||||||
browser: undefined,
|
browser: undefined,
|
||||||
}
|
};
|
||||||
|
|
||||||
textarea: HTMLTextAreaElement | null = null;
|
textarea: HTMLTextAreaElement | null = null;
|
||||||
|
|
||||||
|
@ -71,7 +71,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
setTextareaRef: React.RefCallback<HTMLTextAreaElement> = c => {
|
setTextareaRef: React.RefCallback<HTMLTextAreaElement> = c => {
|
||||||
this.textarea = c;
|
this.textarea = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
handleCopy: React.MouseEventHandler = () => {
|
handleCopy: React.MouseEventHandler = () => {
|
||||||
if (!this.textarea) return;
|
if (!this.textarea) return;
|
||||||
|
@ -80,12 +80,12 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
|
||||||
this.textarea.setSelectionRange(0, 99999);
|
this.textarea.setSelectionRange(0, 99999);
|
||||||
|
|
||||||
document.execCommand('copy');
|
document.execCommand('copy');
|
||||||
}
|
};
|
||||||
|
|
||||||
getErrorText = (): string => {
|
getErrorText = (): string => {
|
||||||
const { error, componentStack } = this.state;
|
const { error, componentStack } = this.state;
|
||||||
return error + componentStack;
|
return error + componentStack;
|
||||||
}
|
};
|
||||||
|
|
||||||
clearCookies: React.MouseEventHandler = (e) => {
|
clearCookies: React.MouseEventHandler = (e) => {
|
||||||
localStorage.clear();
|
localStorage.clear();
|
||||||
|
@ -96,7 +96,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
unregisterSw().then(goHome).catch(goHome);
|
unregisterSw().then(goHome).catch(goHome);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { browser, hasError } = this.state;
|
const { browser, hasError } = this.state;
|
||||||
|
|
|
@ -15,10 +15,10 @@ const hex2rgba = (hex: string, alpha = 1) => {
|
||||||
|
|
||||||
export default class Visualizer {
|
export default class Visualizer {
|
||||||
|
|
||||||
tickSize: number
|
tickSize: number;
|
||||||
canvas?: HTMLCanvasElement
|
canvas?: HTMLCanvasElement;
|
||||||
context?: CanvasRenderingContext2D
|
context?: CanvasRenderingContext2D;
|
||||||
analyser?: AnalyserNode
|
analyser?: AnalyserNode;
|
||||||
|
|
||||||
constructor(tickSize: number) {
|
constructor(tickSize: number) {
|
||||||
this.tickSize = tickSize;
|
this.tickSize = tickSize;
|
||||||
|
|
|
@ -32,14 +32,14 @@ class Bundle extends React.PureComponent<BundleProps, BundleState> {
|
||||||
onFetch: noop,
|
onFetch: noop,
|
||||||
onFetchSuccess: noop,
|
onFetchSuccess: noop,
|
||||||
onFetchFail: noop,
|
onFetchFail: noop,
|
||||||
}
|
};
|
||||||
|
|
||||||
static cache = new Map
|
static cache = new Map;
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
mod: undefined,
|
mod: undefined,
|
||||||
forceRender: false,
|
forceRender: false,
|
||||||
}
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.load(this.props);
|
this.load(this.props);
|
||||||
|
@ -91,7 +91,7 @@ class Bundle extends React.PureComponent<BundleProps, BundleState> {
|
||||||
this.setState({ mod: null });
|
this.setState({ mod: null });
|
||||||
onFetchFail(error);
|
onFetchFail(error);
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { loading: Loading, error: Error, children, renderDelay } = this.props;
|
const { loading: Loading, error: Error, children, renderDelay } = this.props;
|
||||||
|
|
|
@ -26,7 +26,7 @@ class ImageLoader extends React.PureComponent<IImageLoader> {
|
||||||
loading: true,
|
loading: true,
|
||||||
error: false,
|
error: false,
|
||||||
width: null,
|
width: null,
|
||||||
}
|
};
|
||||||
|
|
||||||
removers: EventRemover[] = [];
|
removers: EventRemover[] = [];
|
||||||
canvas: HTMLCanvasElement | null = null;
|
canvas: HTMLCanvasElement | null = null;
|
||||||
|
@ -87,7 +87,7 @@ class ImageLoader extends React.PureComponent<IImageLoader> {
|
||||||
image.addEventListener('load', handleLoad);
|
image.addEventListener('load', handleLoad);
|
||||||
image.src = previewSrc || '';
|
image.src = previewSrc || '';
|
||||||
this.removers.push(removeEventListeners);
|
this.removers.push(removeEventListeners);
|
||||||
})
|
});
|
||||||
|
|
||||||
clearPreviewCanvas() {
|
clearPreviewCanvas() {
|
||||||
if (this.canvas && this.canvasContext) {
|
if (this.canvas && this.canvasContext) {
|
||||||
|
@ -129,7 +129,7 @@ class ImageLoader extends React.PureComponent<IImageLoader> {
|
||||||
setCanvasRef = (c: HTMLCanvasElement) => {
|
setCanvasRef = (c: HTMLCanvasElement) => {
|
||||||
this.canvas = c;
|
this.canvas = c;
|
||||||
if (c) this.setState({ width: c.offsetWidth });
|
if (c) this.setState({ width: c.offsetWidth });
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { alt, src, width, height, onClick } = this.props;
|
const { alt, src, width, height, onClick } = this.props;
|
||||||
|
|
|
@ -105,16 +105,16 @@ export default class ModalRoot extends React.PureComponent<IModalRoot> {
|
||||||
|
|
||||||
renderLoading = (modalId: string) => () => {
|
renderLoading = (modalId: string) => () => {
|
||||||
return !['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].includes(modalId) ? <ModalLoading /> : null;
|
return !['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].includes(modalId) ? <ModalLoading /> : null;
|
||||||
}
|
};
|
||||||
|
|
||||||
renderError: React.ComponentType<{ onRetry: (props?: BundleProps) => void }> = (props) => {
|
renderError: React.ComponentType<{ onRetry: (props?: BundleProps) => void }> = (props) => {
|
||||||
return <BundleModalError {...props} onClose={this.onClickClose} />;
|
return <BundleModalError {...props} onClose={this.onClickClose} />;
|
||||||
}
|
};
|
||||||
|
|
||||||
onClickClose = (_?: ModalType) => {
|
onClickClose = (_?: ModalType) => {
|
||||||
const { onClose, type } = this.props;
|
const { onClose, type } = this.props;
|
||||||
onClose(type);
|
onClose(type);
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { type, props } = this.props;
|
const { type, props } = this.props;
|
||||||
|
|
|
@ -31,7 +31,7 @@ class ZoomableImage extends React.PureComponent<IZoomableImage> {
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
scale: MIN_SCALE,
|
scale: MIN_SCALE,
|
||||||
}
|
};
|
||||||
|
|
||||||
container: HTMLDivElement | null = null;
|
container: HTMLDivElement | null = null;
|
||||||
image: HTMLImageElement | null = null;
|
image: HTMLImageElement | null = null;
|
||||||
|
@ -54,7 +54,7 @@ class ZoomableImage extends React.PureComponent<IZoomableImage> {
|
||||||
const [p1, p2] = Array.from(e.touches);
|
const [p1, p2] = Array.from(e.touches);
|
||||||
|
|
||||||
this.lastDistance = getDistance(p1, p2);
|
this.lastDistance = getDistance(p1, p2);
|
||||||
}
|
};
|
||||||
|
|
||||||
handleTouchMove = (e: TouchEvent) => {
|
handleTouchMove = (e: TouchEvent) => {
|
||||||
if (!this.container) return;
|
if (!this.container) return;
|
||||||
|
@ -78,7 +78,7 @@ class ZoomableImage extends React.PureComponent<IZoomableImage> {
|
||||||
this.zoom(scale, midpoint);
|
this.zoom(scale, midpoint);
|
||||||
|
|
||||||
this.lastDistance = distance;
|
this.lastDistance = distance;
|
||||||
}
|
};
|
||||||
|
|
||||||
zoom(nextScale: number, midpoint: Point) {
|
zoom(nextScale: number, midpoint: Point) {
|
||||||
if (!this.container) return;
|
if (!this.container) return;
|
||||||
|
@ -107,15 +107,15 @@ class ZoomableImage extends React.PureComponent<IZoomableImage> {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
const handler = this.props.onClick;
|
const handler = this.props.onClick;
|
||||||
if (handler) handler(e);
|
if (handler) handler(e);
|
||||||
}
|
};
|
||||||
|
|
||||||
setContainerRef = (c: HTMLDivElement) => {
|
setContainerRef = (c: HTMLDivElement) => {
|
||||||
this.container = c;
|
this.container = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
setImageRef = (c: HTMLImageElement) => {
|
setImageRef = (c: HTMLImageElement) => {
|
||||||
this.image = c;
|
this.image = c;
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { alt, src } = this.props;
|
const { alt, src } = this.props;
|
||||||
|
|
Loading…
Reference in a new issue