Cleanup Form-Field
- avoid declaring components inside the body function of parent components https://dev.to/borasvm/react-create-component-inside-a-component-456b
This commit is contained in:
Rafael
Thomas Zarebczan
parent
ba5d96bb71
commit
1f367c641e
5 changed files with 324 additions and 195 deletions
52
ui/component/common/form-components/common.jsx
Normal file
52
ui/component/common/form-components/common.jsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import Button from 'component/button';
|
||||
|
||||
type CountInfoProps = {
|
||||
charCount?: number,
|
||||
textAreaMaxLength?: number,
|
||||
};
|
||||
|
||||
export const CountInfo = (countInfoProps: CountInfoProps) => {
|
||||
const { charCount, textAreaMaxLength } = countInfoProps;
|
||||
|
||||
// Ideally, the character count should (and can) be appended to the
|
||||
// SimpleMDE's "options::status" bar. However, I couldn't figure out how
|
||||
// to pass the current value to it's callback, nor query the current
|
||||
// text length from the callback. So, we'll use our own widget.
|
||||
const hasCharCount = charCount !== undefined && charCount >= 0;
|
||||
|
||||
return (
|
||||
hasCharCount &&
|
||||
textAreaMaxLength !== undefined && (
|
||||
<span className="comment__char-count-mde">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
type QuickActionProps = {
|
||||
label?: string,
|
||||
quickActionHandler?: (any) => any,
|
||||
};
|
||||
|
||||
export const QuickAction = (quickActionProps: QuickActionProps) => {
|
||||
const { label, quickActionHandler } = quickActionProps;
|
||||
|
||||
return label && quickActionHandler ? (
|
||||
<div className="form-field__quick-action">
|
||||
<Button button="link" onClick={quickActionHandler} label={label} />
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
type LabelProps = {
|
||||
name: string,
|
||||
label?: any,
|
||||
errorMessage?: any,
|
||||
};
|
||||
|
||||
export const Label = (labelProps: LabelProps) => {
|
||||
const { name, label, errorMessage } = labelProps;
|
||||
|
||||
return <label htmlFor={name}>{errorMessage ? <span className="error__text">{errorMessage}</span> : label}</label>;
|
||||
};
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
// @flow
|
||||
import 'easymde/dist/easymde.min.css';
|
||||
|
||||
import { FF_MAX_CHARS_DEFAULT } from 'constants/form-field';
|
||||
import { openEditorMenu, stopContextMenu } from 'util/context-menu';
|
||||
import { lazyImport } from 'util/lazyImport';
|
||||
import Button from 'component/button';
|
||||
import MarkdownPreview from 'component/common/markdown-preview';
|
||||
import React from 'react';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
import SimpleMDE from 'react-simplemde-editor';
|
||||
import type { ElementRef, Node } from 'react';
|
||||
import Drawer from '@mui/material/Drawer';
|
||||
import CommentSelectors from 'component/commentCreate/comment-selectors';
|
||||
import type { ElementRef } from 'react';
|
||||
import { InputSimple, BlockWrapWrapper } from './input-simple';
|
||||
import { InputSelect } from './input-select';
|
||||
import { CountInfo, QuickAction, Label } from './common';
|
||||
import { TextareaWrapper } from './slim-input-field';
|
||||
|
||||
// prettier-ignore
|
||||
const TextareaWithSuggestions = lazyImport(() => import('component/textareaWithSuggestions' /* webpackChunkName: "suggestions" */));
|
||||
|
|
@ -29,7 +31,7 @@ type Props = {
|
|||
hideSuggestions?: boolean,
|
||||
inputButton?: React$Node,
|
||||
isLivestream?: boolean,
|
||||
label?: string | Node,
|
||||
label?: any,
|
||||
labelOnLeft: boolean,
|
||||
max?: number,
|
||||
min?: number,
|
||||
|
|
@ -124,122 +126,119 @@ export class FormField extends React.PureComponent<Props, State> {
|
|||
|
||||
const errorMessage = typeof error === 'object' ? error.message : error;
|
||||
|
||||
// Ideally, the character count should (and can) be appended to the
|
||||
// SimpleMDE's "options::status" bar. However, I couldn't figure out how
|
||||
// to pass the current value to it's callback, nor query the current
|
||||
// text length from the callback. So, we'll use our own widget.
|
||||
const hasCharCount = charCount !== undefined && charCount >= 0;
|
||||
const countInfo = hasCharCount && textAreaMaxLength !== undefined && (
|
||||
<span className="comment__char-count-mde">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
|
||||
);
|
||||
const wrapperProps = { type, helper };
|
||||
const labelProps = { name, label };
|
||||
const countInfoProps = { charCount, textAreaMaxLength };
|
||||
const quickActionProps = { label: quickActionLabel, quickActionHandler };
|
||||
const inputSimpleProps = { name, label, ...inputProps };
|
||||
const inputSelectProps = { name, error, label, children, ...inputProps };
|
||||
|
||||
const Wrapper = blockWrap
|
||||
? ({ children: innerChildren }) => <fieldset-section class="radio">{innerChildren}</fieldset-section>
|
||||
: ({ children: innerChildren }) => <span className="radio">{innerChildren}</span>;
|
||||
switch (type) {
|
||||
case 'radio':
|
||||
return (
|
||||
<FormFieldWrapper {...wrapperProps}>
|
||||
<BlockWrapWrapper blockWrap={blockWrap}>
|
||||
<InputSimple {...inputSimpleProps} type="radio" />
|
||||
</BlockWrapWrapper>
|
||||
</FormFieldWrapper>
|
||||
);
|
||||
case 'checkbox':
|
||||
return (
|
||||
<FormFieldWrapper {...wrapperProps}>
|
||||
<div className="checkbox">
|
||||
<InputSimple {...inputSimpleProps} type="checkbox" />
|
||||
</div>
|
||||
</FormFieldWrapper>
|
||||
);
|
||||
case 'range':
|
||||
return (
|
||||
<FormFieldWrapper {...wrapperProps}>
|
||||
<div className="range">
|
||||
<InputSimple {...inputSimpleProps} type="range" />
|
||||
</div>
|
||||
</FormFieldWrapper>
|
||||
);
|
||||
case 'select':
|
||||
return (
|
||||
<FormFieldWrapper {...wrapperProps}>
|
||||
<InputSelect {...inputSelectProps} />
|
||||
</FormFieldWrapper>
|
||||
);
|
||||
case 'select-tiny':
|
||||
return (
|
||||
<FormFieldWrapper {...wrapperProps}>
|
||||
<InputSelect {...inputSelectProps} className="select--slim" />
|
||||
</FormFieldWrapper>
|
||||
);
|
||||
case 'markdown':
|
||||
const handleEvents = { contextmenu: openEditorMenu };
|
||||
|
||||
const quickAction =
|
||||
quickActionLabel && quickActionHandler ? (
|
||||
<div className="form-field__quick-action">
|
||||
<Button button="link" onClick={quickActionHandler} label={quickActionLabel} />
|
||||
</div>
|
||||
) : null;
|
||||
const getInstance = (editor) => {
|
||||
// SimpleMDE max char check
|
||||
editor.codemirror.on('beforeChange', (instance, changes) => {
|
||||
if (textAreaMaxLength && changes.update) {
|
||||
var str = changes.text.join('\n');
|
||||
var delta = str.length - (instance.indexFromPos(changes.to) - instance.indexFromPos(changes.from));
|
||||
|
||||
const inputSimple = (type: string) => (
|
||||
<>
|
||||
<input id={name} type={type} {...inputProps} />
|
||||
<label htmlFor={name}>{label}</label>
|
||||
</>
|
||||
);
|
||||
if (delta <= 0) return;
|
||||
|
||||
const inputSelect = (selectClass: string) => (
|
||||
<fieldset-section class={selectClass}>
|
||||
{(label || errorMessage) && (
|
||||
<label htmlFor={name}>{errorMessage ? <span className="error__text">{errorMessage}</span> : label}</label>
|
||||
)}
|
||||
<select id={name} {...inputProps}>
|
||||
{children}
|
||||
</select>
|
||||
</fieldset-section>
|
||||
);
|
||||
delta = instance.getValue().length + delta - textAreaMaxLength;
|
||||
if (delta > 0) {
|
||||
str = str.substr(0, str.length - delta);
|
||||
changes.update(changes.from, changes.to, str.split('\n'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const input = () => {
|
||||
switch (type) {
|
||||
case 'radio':
|
||||
return <Wrapper>{inputSimple('radio')}</Wrapper>;
|
||||
case 'checkbox':
|
||||
return <div className="checkbox">{inputSimple('checkbox')}</div>;
|
||||
case 'range':
|
||||
return <div>{inputSimple('range')}</div>;
|
||||
case 'select':
|
||||
return inputSelect('');
|
||||
case 'select-tiny':
|
||||
return inputSelect('select--slim');
|
||||
case 'markdown':
|
||||
const handleEvents = { contextmenu: openEditorMenu };
|
||||
// "Create Link (Ctrl-K)": highlight URL instead of label:
|
||||
editor.codemirror.on('changes', (instance, changes) => {
|
||||
try {
|
||||
// Grab the last change from the buffered list. I assume the
|
||||
// buffered one ('changes', instead of 'change') is more efficient,
|
||||
// and that "Create Link" will always end up last in the list.
|
||||
const lastChange = changes[changes.length - 1];
|
||||
if (lastChange.origin === '+input') {
|
||||
// https://github.com/Ionaru/easy-markdown-editor/blob/8fa54c496f98621d5f45f57577ce630bee8c41ee/src/js/easymde.js#L765
|
||||
const EASYMDE_URL_PLACEHOLDER = '(https://)';
|
||||
|
||||
const getInstance = (editor) => {
|
||||
// SimpleMDE max char check
|
||||
editor.codemirror.on('beforeChange', (instance, changes) => {
|
||||
if (textAreaMaxLength && changes.update) {
|
||||
var str = changes.text.join('\n');
|
||||
var delta = str.length - (instance.indexFromPos(changes.to) - instance.indexFromPos(changes.from));
|
||||
// The URL placeholder is always placed last, so just look at the
|
||||
// last text in the array to also cover the multi-line case:
|
||||
const urlLineText = lastChange.text[lastChange.text.length - 1];
|
||||
|
||||
if (delta <= 0) return;
|
||||
if (urlLineText.endsWith(EASYMDE_URL_PLACEHOLDER) && urlLineText !== '[]' + EASYMDE_URL_PLACEHOLDER) {
|
||||
const from = lastChange.from;
|
||||
const to = lastChange.to;
|
||||
const isSelectionMultiline = lastChange.text.length > 1;
|
||||
const baseIndex = isSelectionMultiline ? 0 : from.ch;
|
||||
|
||||
delta = instance.getValue().length + delta - textAreaMaxLength;
|
||||
if (delta > 0) {
|
||||
str = str.substr(0, str.length - delta);
|
||||
changes.update(changes.from, changes.to, str.split('\n'));
|
||||
// Everything works fine for the [Ctrl-K] case, but for the
|
||||
// [Button] case, this handler happens before the original
|
||||
// code, thus our change got wiped out.
|
||||
// Add a small delay to handle that case.
|
||||
setTimeout(() => {
|
||||
instance.setSelection(
|
||||
{ line: to.line, ch: baseIndex + urlLineText.lastIndexOf('(') + 1 },
|
||||
{ line: to.line, ch: baseIndex + urlLineText.lastIndexOf(')') }
|
||||
);
|
||||
}, 25);
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (e) {} // Do nothing (revert to original behavior)
|
||||
});
|
||||
};
|
||||
|
||||
// "Create Link (Ctrl-K)": highlight URL instead of label:
|
||||
editor.codemirror.on('changes', (instance, changes) => {
|
||||
try {
|
||||
// Grab the last change from the buffered list. I assume the
|
||||
// buffered one ('changes', instead of 'change') is more efficient,
|
||||
// and that "Create Link" will always end up last in the list.
|
||||
const lastChange = changes[changes.length - 1];
|
||||
if (lastChange.origin === '+input') {
|
||||
// https://github.com/Ionaru/easy-markdown-editor/blob/8fa54c496f98621d5f45f57577ce630bee8c41ee/src/js/easymde.js#L765
|
||||
const EASYMDE_URL_PLACEHOLDER = '(https://)';
|
||||
|
||||
// The URL placeholder is always placed last, so just look at the
|
||||
// last text in the array to also cover the multi-line case:
|
||||
const urlLineText = lastChange.text[lastChange.text.length - 1];
|
||||
|
||||
if (urlLineText.endsWith(EASYMDE_URL_PLACEHOLDER) && urlLineText !== '[]' + EASYMDE_URL_PLACEHOLDER) {
|
||||
const from = lastChange.from;
|
||||
const to = lastChange.to;
|
||||
const isSelectionMultiline = lastChange.text.length > 1;
|
||||
const baseIndex = isSelectionMultiline ? 0 : from.ch;
|
||||
|
||||
// Everything works fine for the [Ctrl-K] case, but for the
|
||||
// [Button] case, this handler happens before the original
|
||||
// code, thus our change got wiped out.
|
||||
// Add a small delay to handle that case.
|
||||
setTimeout(() => {
|
||||
instance.setSelection(
|
||||
{ line: to.line, ch: baseIndex + urlLineText.lastIndexOf('(') + 1 },
|
||||
{ line: to.line, ch: baseIndex + urlLineText.lastIndexOf(')') }
|
||||
);
|
||||
}, 25);
|
||||
}
|
||||
}
|
||||
} catch (e) {} // Do nothing (revert to original behavior)
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
return (
|
||||
<FormFieldWrapper {...wrapperProps}>
|
||||
<div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
|
||||
<fieldset-section>
|
||||
<div className="form-field__two-column">
|
||||
<div>
|
||||
<label htmlFor={name}>{label}</label>
|
||||
<Label {...labelProps} />
|
||||
</div>
|
||||
{quickAction}
|
||||
|
||||
<QuickAction {...quickActionProps} />
|
||||
</div>
|
||||
|
||||
<SimpleMDE
|
||||
{...inputProps}
|
||||
id={name}
|
||||
|
|
@ -255,17 +254,20 @@ export class FormField extends React.PureComponent<Props, State> {
|
|||
},
|
||||
}}
|
||||
/>
|
||||
{countInfo}
|
||||
|
||||
<CountInfo {...countInfoProps} />
|
||||
</fieldset-section>
|
||||
</div>
|
||||
);
|
||||
case 'textarea':
|
||||
const closeSelector =
|
||||
setShowSelectors && showSelectors
|
||||
? () => setShowSelectors({ tab: showSelectors.tab || undefined, open: false })
|
||||
: () => {};
|
||||
</FormFieldWrapper>
|
||||
);
|
||||
case 'textarea':
|
||||
const closeSelector =
|
||||
setShowSelectors && showSelectors
|
||||
? () => setShowSelectors({ tab: showSelectors.tab || undefined, open: false })
|
||||
: () => {};
|
||||
|
||||
return (
|
||||
return (
|
||||
<FormFieldWrapper {...wrapperProps}>
|
||||
<fieldset-section>
|
||||
<TextareaWrapper
|
||||
isDrawerOpen={Boolean(this.state.drawerOpen)}
|
||||
|
|
@ -277,11 +279,13 @@ export class FormField extends React.PureComponent<Props, State> {
|
|||
slimInputButtonRef={slimInputButtonRef}
|
||||
tipModalOpen={tipModalOpen}
|
||||
>
|
||||
{(!slimInput || this.state.drawerOpen) && (label || quickAction) && (
|
||||
{(!slimInput || this.state.drawerOpen) && label && (
|
||||
<div className="form-field__two-column">
|
||||
<label htmlFor={name}>{label}</label>
|
||||
{quickAction}
|
||||
{countInfo}
|
||||
<Label {...labelProps} />
|
||||
|
||||
<QuickAction {...quickActionProps} />
|
||||
|
||||
<CountInfo {...countInfoProps} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -328,94 +332,48 @@ export class FormField extends React.PureComponent<Props, State> {
|
|||
)}
|
||||
</TextareaWrapper>
|
||||
</fieldset-section>
|
||||
);
|
||||
default:
|
||||
const inputElement = <input type={type} id={name} {...inputProps} ref={this.input} />;
|
||||
const inner = inputButton ? (
|
||||
<input-submit>
|
||||
{inputElement}
|
||||
{inputButton}
|
||||
</input-submit>
|
||||
) : (
|
||||
inputElement
|
||||
);
|
||||
</FormFieldWrapper>
|
||||
);
|
||||
default:
|
||||
const inputElementProps = { type, name, ref: this.input, ...inputProps };
|
||||
|
||||
return (
|
||||
return (
|
||||
<FormFieldWrapper {...wrapperProps}>
|
||||
<fieldset-section>
|
||||
{(label || errorMessage) && (
|
||||
<label htmlFor={name}>
|
||||
{errorMessage ? <span className="error__text">{errorMessage}</span> : label}
|
||||
</label>
|
||||
)}
|
||||
{prefix && <label htmlFor={name}>{prefix}</label>}
|
||||
{inner}
|
||||
</fieldset-section>
|
||||
);
|
||||
}
|
||||
};
|
||||
{(label || errorMessage) && <Label {...labelProps} errorMessage={errorMessage} />}
|
||||
|
||||
return (
|
||||
<>
|
||||
{type && input()}
|
||||
{helper && <div className="form-field__help">{helper}</div>}
|
||||
</>
|
||||
);
|
||||
{prefix && <label htmlFor={name}>{prefix}</label>}
|
||||
|
||||
{inputButton ? (
|
||||
<input-submit>
|
||||
<input {...inputElementProps} />
|
||||
{inputButton}
|
||||
</input-submit>
|
||||
) : (
|
||||
<input {...inputElementProps} />
|
||||
)}
|
||||
</fieldset-section>
|
||||
</FormFieldWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FormField;
|
||||
|
||||
type TextareaWrapperProps = {
|
||||
slimInput?: boolean,
|
||||
slimInputButtonRef?: any,
|
||||
children: Node,
|
||||
isDrawerOpen: boolean,
|
||||
showSelectors?: boolean,
|
||||
commentSelectorsProps?: any,
|
||||
tipModalOpen?: boolean,
|
||||
toggleDrawer: () => void,
|
||||
closeSelector?: () => void,
|
||||
type WrapperProps = {
|
||||
type?: string,
|
||||
children?: any,
|
||||
helper?: any,
|
||||
};
|
||||
|
||||
function TextareaWrapper(wrapperProps: TextareaWrapperProps) {
|
||||
const {
|
||||
children,
|
||||
slimInput,
|
||||
slimInputButtonRef,
|
||||
isDrawerOpen,
|
||||
commentSelectorsProps,
|
||||
showSelectors,
|
||||
tipModalOpen,
|
||||
toggleDrawer,
|
||||
closeSelector,
|
||||
} = wrapperProps;
|
||||
const FormFieldWrapper = (wrapperProps: WrapperProps) => {
|
||||
const { type, children, helper } = wrapperProps;
|
||||
|
||||
function handleCloseAll() {
|
||||
toggleDrawer();
|
||||
if (closeSelector) closeSelector();
|
||||
}
|
||||
|
||||
return slimInput ? (
|
||||
!isDrawerOpen ? (
|
||||
<div ref={slimInputButtonRef} role="button" onClick={toggleDrawer}>
|
||||
{children}
|
||||
</div>
|
||||
) : (
|
||||
<Drawer
|
||||
className="comment-create--drawer"
|
||||
anchor="bottom"
|
||||
open
|
||||
onClose={handleCloseAll}
|
||||
// The Modal tries to enforce focus when open and doesn't allow clicking or changing any
|
||||
// other input boxes, so in this case it is disabled when trying to type in a custom tip
|
||||
ModalProps={{ disableEnforceFocus: tipModalOpen }}
|
||||
>
|
||||
{children}
|
||||
|
||||
{showSelectors && <CommentSelectors closeSelector={closeSelector} {...commentSelectorsProps} />}
|
||||
</Drawer>
|
||||
)
|
||||
) : (
|
||||
<>{children}</>
|
||||
return (
|
||||
<>
|
||||
{type && children}
|
||||
{helper && <div className="form-field__help">{helper}</div>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
25
ui/component/common/form-components/input-select.jsx
Normal file
25
ui/component/common/form-components/input-select.jsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import { Label } from './common';
|
||||
|
||||
type InputSelectProps = {
|
||||
name: string,
|
||||
className?: string,
|
||||
label?: any,
|
||||
errorMessage?: any,
|
||||
children?: any,
|
||||
};
|
||||
|
||||
export const InputSelect = (inputSelectProps: InputSelectProps) => {
|
||||
const { name, className, errorMessage, label, children, ...inputProps } = inputSelectProps;
|
||||
|
||||
return (
|
||||
<fieldset-section class={className || ''}>
|
||||
{(label || errorMessage) && <Label name={name} label={label} errorMessage={errorMessage} />}
|
||||
|
||||
<select id={name} {...inputProps}>
|
||||
{children}
|
||||
</select>
|
||||
</fieldset-section>
|
||||
);
|
||||
};
|
||||
35
ui/component/common/form-components/input-simple.jsx
Normal file
35
ui/component/common/form-components/input-simple.jsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import { Label } from './common';
|
||||
|
||||
type InputSimpleProps = {
|
||||
name: string,
|
||||
type: string,
|
||||
label?: any,
|
||||
};
|
||||
|
||||
export const InputSimple = (inputSimpleProps: InputSimpleProps) => {
|
||||
const { name, type, label, ...inputProps } = inputSimpleProps;
|
||||
|
||||
return (
|
||||
<>
|
||||
<input id={name} type={type} {...inputProps} />
|
||||
<Label name={name} label={label} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
type BlockWrapProps = {
|
||||
blockWrap: boolean,
|
||||
children?: any,
|
||||
};
|
||||
|
||||
export const BlockWrapWrapper = (blockWrapProps: BlockWrapProps) => {
|
||||
const { blockWrap, children } = blockWrapProps;
|
||||
|
||||
return blockWrap ? (
|
||||
<fieldset-section class="radio">{children}</fieldset-section>
|
||||
) : (
|
||||
<span className="radio">{children}</span>
|
||||
);
|
||||
};
|
||||
59
ui/component/common/form-components/slim-input-field.jsx
Normal file
59
ui/component/common/form-components/slim-input-field.jsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import Drawer from '@mui/material/Drawer';
|
||||
import CommentSelectors from 'component/commentCreate/comment-selectors';
|
||||
|
||||
type TextareaWrapperProps = {
|
||||
slimInput?: boolean,
|
||||
slimInputButtonRef?: any,
|
||||
children: any,
|
||||
isDrawerOpen: boolean,
|
||||
showSelectors?: boolean,
|
||||
commentSelectorsProps?: any,
|
||||
tipModalOpen?: boolean,
|
||||
toggleDrawer: () => void,
|
||||
closeSelector?: () => void,
|
||||
};
|
||||
|
||||
export const TextareaWrapper = (wrapperProps: TextareaWrapperProps) => {
|
||||
const {
|
||||
children,
|
||||
slimInput,
|
||||
slimInputButtonRef,
|
||||
isDrawerOpen,
|
||||
commentSelectorsProps,
|
||||
showSelectors,
|
||||
tipModalOpen,
|
||||
toggleDrawer,
|
||||
closeSelector,
|
||||
} = wrapperProps;
|
||||
|
||||
function handleCloseAll() {
|
||||
toggleDrawer();
|
||||
if (closeSelector) closeSelector();
|
||||
}
|
||||
|
||||
return slimInput ? (
|
||||
!isDrawerOpen ? (
|
||||
<div ref={slimInputButtonRef} role="button" onClick={toggleDrawer}>
|
||||
{children}
|
||||
</div>
|
||||
) : (
|
||||
<Drawer
|
||||
className="comment-create--drawer"
|
||||
anchor="bottom"
|
||||
open
|
||||
onClose={handleCloseAll}
|
||||
// The Modal tries to enforce focus when open and doesn't allow clicking or changing any
|
||||
// other input boxes, so in this case it is disabled when trying to type in a custom tip
|
||||
ModalProps={{ disableEnforceFocus: tipModalOpen }}
|
||||
>
|
||||
{children}
|
||||
|
||||
{showSelectors && <CommentSelectors closeSelector={closeSelector} {...commentSelectorsProps} />}
|
||||
</Drawer>
|
||||
)
|
||||
) : (
|
||||
children
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue