+
+ {Routes.map((item: any, i: number) => (
+
+
+
+
+ );
+ };
+
+});
+
+export default Success;
\ No newline at end of file
diff --git a/extension/entry.tsx b/extension/entry.tsx
index 9a3c0854b5..924810b3b2 100644
--- a/extension/entry.tsx
+++ b/extension/entry.tsx
@@ -4,6 +4,7 @@ import $ from 'jquery';
import { C, U, J, S } from 'Lib';
import Popup from './popup';
import Iframe from './iframe';
+import Auth from './auth';
import Util from './lib/util';
import './scss/common.scss';
@@ -38,8 +39,8 @@ window.Anytype = {
window.AnytypeGlobalConfig = {
emojiUrl: J.Extension.clipper.emojiUrl,
menuBorderTop: 16,
- menuBorderBottom: 16,
- flagsMw: { request: false },
+ menuBorderBottom: 16,
+ flagsMw: { request: true },
};
let rootId = '';
@@ -52,6 +53,10 @@ if (Util.isPopup()) {
if (Util.isIframe()) {
rootId = `${J.Extension.clipper.prefix}-iframe`;
component = ;
+} else
+if (Util.isAuth()) {
+ rootId = `${J.Extension.clipper.prefix}-auth`;
+ component = Successfully authorized!
+
- {picture ? 
: ''}
-
+
+ {picture ? (
+
+
+
+ ) : ''}
);
};
renderImage () {
- const { object } = this.props;
-
- this.previewItem = { type: I.FileType.Image, object };
+ const { object, scrollToBottom } = this.props;
+ const { isLoaded } = this.state;
if (!this.src) {
if (object.isTmp && object.file) {
- U.File.loadPreviewBase64(object.file, { type: 'jpg', quality: 99, maxWidth: J.Size.image }, (image: string, param: any) => {
+ U.File.loadPreviewBase64(object.file, { type: 'jpg', quality: 99, maxWidth: J.Size.image }, (image: string) => {
this.src = image;
- this.previewItem.src = image;
$(this.node).find('#image').attr({ 'src': image });
});
this.src = './img/space.svg';
@@ -193,25 +205,29 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component this.refCounter = ref} className="charCounter">{charCounter} / {J.Constant.limit.chat.text}
+
- U.Object.openConfig(author)} />
+ U.Object.openConfig(author)}
+ />
-
node.addClass('hover'),
- onClose: () => node.removeClass('hover'),
+ onOpen: () => {
+ node.addClass('hover');
+ container.addClass('over');
+ },
+ onClose: () => {
+ node.removeClass('hover');
+ container.removeClass('over');
+ },
data: {
noHead: true,
noUpload: true,
diff --git a/src/ts/component/block/dataview.tsx b/src/ts/component/block/dataview.tsx
index 993b6a25c3..ec5253f6a9 100644
--- a/src/ts/component/block/dataview.tsx
+++ b/src/ts/component/block/dataview.tsx
@@ -632,6 +632,8 @@ const BlockDataview = observer(class BlockDataview extends React.Component {
- refGraph.setRootId(object.id);
+ $(window).trigger('updateGraphRoot', { id: object.id });
});
};
};
- if ([ I.ViewType.Calendar ].includes(view.type)) {
+ if (isViewGraph || isViewCalendar) {
U.Object.openConfig(object);
} else {
if (U.Object.isNoteLayout(object.layout)) {
@@ -1437,9 +1441,7 @@ const BlockDataview = observer(class BlockDataview extends React.Component {
const canEdit = this.canCellEdit(relation, record);
if (!canEdit) {
- if (Relation.isUrl(relation.format) && value) {
- Action.openUrl(Relation.checkUrlScheme(relation.format, value));
- return;
+ if (value) {
+ if (Relation.isUrl(relation.format)) {
+ Action.openUrl(Relation.checkUrlScheme(relation.format, value));
+ return;
+ };
+
+ if (Relation.isDate(relation.format)) {
+ U.Object.openDateByTimestamp(relation.relationKey, value, 'config');
+ return;
+ };
};
if (relation.format == I.RelationType.Checkbox) {
@@ -275,6 +282,7 @@ const Cell = observer(class Cell extends React.Component {
blockId: block.id,
value,
relation: observable.box(relation),
+ relationKey: relation.relationKey,
record,
placeholder,
canEdit,
@@ -292,6 +300,7 @@ const Cell = observer(class Cell extends React.Component {
case I.RelationType.Date: {
param.data = Object.assign(param.data, {
value: param.data.value || U.Date.now(),
+ noKeyboard: true,
});
menuId = 'dataviewCalendar';
diff --git a/src/ts/component/block/dataview/controls.tsx b/src/ts/component/block/dataview/controls.tsx
index 88330feaab..042c8c269f 100644
--- a/src/ts/component/block/dataview/controls.tsx
+++ b/src/ts/component/block/dataview/controls.tsx
@@ -121,10 +121,9 @@ const Controls = observer(class Controls extends React.Component {
id="dataviewControls"
className={cn.join(' ')}
>
+ {head}
U.Object.openConfig(author)}>
this.attachmentRefs[item.id] = ref}
key={i}
object={item}
+ subId={subId}
+ scrollToBottom={scrollToBottom}
onRemove={() => this.onAttachmentRemove(item.id)}
onPreview={(preview) => this.onPreview(preview)}
showAsFile={!attachmentsLayout}
@@ -170,10 +175,6 @@ const ChatMessage = observer(class ChatMessage extends React.Component
) : ''}
-
-
{!readonly ? (
@@ -253,14 +254,22 @@ const ChatMessage = observer(class ChatMessage extends React.Component{U.Date.date('H:i', createdAt)}
@@ -151,6 +154,8 @@ const ChatMessage = observer(class ChatMessage extends React.Component onThread(id)}>
- {!isThread ?
0 replies
: ''}
-
- {head}
-
{
let add = false;
- if (sideLeft.hasClass('small')) {
- sideLeft.removeClass('small');
+ if (node.hasClass('small')) {
+ node.removeClass('small');
};
const width = sideLeft.outerWidth() + sideRight.outerWidth();
@@ -571,7 +570,7 @@ const Controls = observer(class Controls extends React.Component {
};
if (add) {
- sideLeft.addClass('small');
+ node.addClass('small');
} else {
S.Menu.closeAll([ 'dataviewViewList' ]);
};
diff --git a/src/ts/component/block/dataview/view/board.tsx b/src/ts/component/block/dataview/view/board.tsx
index 7c07154d36..39465b4b8f 100644
--- a/src/ts/component/block/dataview/view/board.tsx
+++ b/src/ts/component/block/dataview/view/board.tsx
@@ -252,6 +252,13 @@ const ViewBoard = observer(class ViewBoard extends React.Component {
+ C.ObjectCreate(details, flags, templateId, type?.uniqueKey, S.Common.space, (message: any) => {
if (message.error.code) {
return;
};
diff --git a/src/ts/component/block/dataview/view/calendar/item.tsx b/src/ts/component/block/dataview/view/calendar/item.tsx
index e42b334c00..0e5f6bf742 100644
--- a/src/ts/component/block/dataview/view/calendar/item.tsx
+++ b/src/ts/component/block/dataview/view/calendar/item.tsx
@@ -174,9 +174,10 @@ const Item = observer(class Item extends React.Component {
};
onOpenDate () {
- const { d, m, y } = this.props;
+ const { d, m, y, getView } = this.props;
+ const view = getView();
- U.Object.openDateByTimestamp(U.Date.timestamp(y, m, d, 12, 0, 0), 'config');
+ U.Object.openDateByTimestamp(view.groupRelationKey, U.Date.timestamp(y, m, d, 12, 0, 0), 'config');
};
canCreate (): boolean {
diff --git a/src/ts/component/block/dataview/view/grid.tsx b/src/ts/component/block/dataview/view/grid.tsx
index 68b1a43607..07586e12ee 100644
--- a/src/ts/component/block/dataview/view/grid.tsx
+++ b/src/ts/component/block/dataview/view/grid.tsx
@@ -278,6 +278,7 @@ const ViewGrid = observer(class ViewGrid extends React.Component {
node = null;
menuContext = null;
- refSelect = null;
state = {
- isEditing: false,
result: null,
};
constructor (props: Props) {
super(props);
- this.onClick = this.onClick.bind(this);
this.onOpen = this.onOpen.bind(this);
- this.onClose = this.onClose.bind(this);
this.onOver = this.onOver.bind(this);
this.onChange = this.onChange.bind(this);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
+ this.onSelect = this.onSelect.bind(this);
};
render () {
- const { relationKey, rootId, block, getView } = this.props;
- const { isEditing, result } = this.state;
+ const { relationKey, rootId, block } = this.props;
+ const { result } = this.state;
const relation = S.Record.getRelationByKey(relationKey);
- const view = getView();
- if (!relation || !view) {
+ if (!relation) {
return ;
};
- // Subscriptions
- const viewRelation = view.getRelation(relationKey);
- if (!viewRelation || (viewRelation.formulaType == I.FormulaType.None)) {
- return ;
- };
-
- const cn = [ 'cellFoot', `cell-key-${relationKey}` ];
- const sections = U.Menu.getFormulaSections(relationKey);
- const option = Relation.formulaByType(relation.format).find(it => it.id == String(viewRelation.formulaType));
+ const cn = [ 'cellFoot' ];
+ const formulaType = this.getFormulaType();
+ const option: any = this.getOption() || {};
+ const name = option.short || option.name || '';
const subId = S.Record.getSubId(rootId, block.id);
const records = S.Record.getRecords(subId, [ relationKey ], true);
@@ -67,36 +56,15 @@ const FootCell = observer(class FootCell extends React.Component {
ref={ref => this.node = ref}
id={Relation.cellId('foot', relationKey, '')}
className={cn.join(' ')}
- onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
-
+
{
calculate () {
const { rootId, block, relationKey, getView, isInline } = this.props;
const view = getView();
+ if (!view) {
+ return;
+ };
+
const viewRelation = view.getRelation(relationKey);
+ if (!viewRelation) {
+ return;
+ };
+
const subId = isInline ? [ rootId, block.id, 'total' ].join('-') : S.Record.getSubId(rootId, block.id);
const result = Dataview.getFormulaResult(subId, viewRelation);
@@ -126,14 +102,53 @@ const FootCell = observer(class FootCell extends React.Component {
};
};
- setEditing (v: boolean): void {
- this.setState({ isEditing: v });
+ getOption (): any {
+ const { relationKey, getView } = this.props;
+ const view = getView();
+
+ if (!view) {
+ return null;
+ };
+
+ const formulaType = this.getFormulaType();
+ const relation = S.Record.getRelationByKey(relationKey);
+
+ if (!relation) {
+ return null;
+ };
+
+ return Relation.formulaByType(relationKey, relation.format).find(it => it.id == String(formulaType));
};
- onClick (e: any) {
- this.setState({ isEditing: true }, () => {
- window.setTimeout(() => this.refSelect.show(e), 10);
+ onSelect (e: any) {
+ const { relationKey, getView } = this.props;
+ const id = Relation.cellId('foot', relationKey, '');
+ const options = U.Menu.getFormulaSections(relationKey);
+ const formulaType = this.getFormulaType();
+
+ if (formulaType == I.FormulaType.None) {
+ return;
+ };
+
+ S.Menu.closeAll([], () => {
+ S.Menu.open('select', {
+ element: `#${id}`,
+ horizontal: I.MenuDirection.Center,
+ onOpen: this.onOpen,
+ subIds: [ 'select2' ],
+ data: {
+ options: U.Menu.prepareForSelect(options),
+ noScroll: true,
+ noVirtualisation: true,
+ onOver: this.onOver,
+ onSelect: (e: any, item: any) => {
+ this.onChange(item.id);
+ },
+ }
+ });
});
+
+ Preview.tooltipHide();
};
onOpen (context: any): void {
@@ -147,10 +162,6 @@ const FootCell = observer(class FootCell extends React.Component {
analytics.event('ClickGridFormula', { format: relation.format, objectType: object.type });
};
- onClose () {
- $(`.cellKeyHover`).removeClass('cellKeyHover');
- };
-
onOver (e: any, item: any) {
if (!this.menuContext) {
return;
@@ -163,7 +174,7 @@ const FootCell = observer(class FootCell extends React.Component {
const { rootId, relationKey } = this.props;
const relation = S.Record.getRelationByKey(relationKey);
- const options = Relation.formulaByType(relation.format).filter(it => it.section == item.id);
+ const options = Relation.formulaByType(relationKey, relation.format).filter(it => it.section == item.id);
S.Menu.closeAll([ 'select2' ], () => {
S.Menu.open('select2', {
@@ -179,7 +190,6 @@ const FootCell = observer(class FootCell extends React.Component {
onSelect: (e: any, item: any) => {
this.onChange(item.id);
this.menuContext.close();
- this.setEditing(false);
},
}
});
@@ -202,15 +212,49 @@ const FootCell = observer(class FootCell extends React.Component {
};
onMouseEnter (): void {
- const { block, relationKey } = this.props;
+ if (keyboard.isDragging) {
+ return;
+ };
+
+ const formulaType = this.getFormulaType();
+
+ if (formulaType == I.FormulaType.None) {
+ return;
+ };
- if (!keyboard.isDragging) {
- $(`#block-${block.id} .cell-key-${relationKey}`).addClass('cellKeyHover');
+ const node = $(this.node);
+
+ node.addClass('hover');
+
+ const { result } = this.state;
+ if ((result === null) || S.Menu.isOpen()) {
+ return;
+ };
+
+ const option: any = this.getOption() || {};
+ const name = option.short || option.name || '';
+
+ const t = Preview.tooltipCaption(name, result);
+ if (t) {
+ Preview.tooltipShow({ text: t, element: node, typeY: I.MenuDirection.Top });
};
};
onMouseLeave () {
- $('.cellKeyHover').removeClass('cellKeyHover');
+ $(this.node).removeClass('hover');
+ Preview.tooltipHide();
+ };
+
+ getFormulaType (): I.FormulaType {
+ const { relationKey, getView } = this.props;
+ const view = getView();
+
+ if (!view) {
+ return I.FormulaType.None;
+ };
+
+ const viewRelation = view.getRelation(relationKey);
+ return viewRelation ? viewRelation.formulaType : I.FormulaType.None;
};
});
diff --git a/src/ts/component/block/dataview/view/grid/head/cell.tsx b/src/ts/component/block/dataview/view/grid/head/cell.tsx
index dc8cd8a1aa..077c68342e 100644
--- a/src/ts/component/block/dataview/view/grid/head/cell.tsx
+++ b/src/ts/component/block/dataview/view/grid/head/cell.tsx
@@ -58,13 +58,15 @@ const HeadCell = observer(class HeadCell extends React.Component {
onMouseEnter (): void {
const { block, relationKey } = this.props;
- if (!keyboard.isDragging) {
+ if (!keyboard.isDragging && !keyboard.isResizing) {
$(`#block-${block.id} .cell-key-${relationKey}`).addClass('cellKeyHover');
};
};
onMouseLeave () {
- $('.cellKeyHover').removeClass('cellKeyHover');
+ if (!keyboard.isDragging && !keyboard.isResizing) {
+ $('.cellKeyHover').removeClass('cellKeyHover');
+ };
};
onEdit (e: any) {
diff --git a/src/ts/component/block/div.tsx b/src/ts/component/block/div.tsx
index f6043a7dce..de3ada1873 100644
--- a/src/ts/component/block/div.tsx
+++ b/src/ts/component/block/div.tsx
@@ -1,80 +1,59 @@
-import * as React from 'react';
+import React, { forwardRef, KeyboardEvent } from 'react';
import { I, focus } from 'Lib';
import { observer } from 'mobx-react';
-const BlockDiv = observer(class BlockDiv extends React.Component {
+const BlockDiv = observer(forwardRef<{}, I.BlockComponent>((props, ref) => {
- _isMounted = false;
+ const { block, onKeyDown, onKeyUp } = props;
+ const { id, content } = block;
+ const { style } = content;
+ const cn = [ 'wrap', 'focusable', `c${id}` ];
- constructor (props: I.BlockComponent) {
- super(props);
-
- this.onKeyDown = this.onKeyDown.bind(this);
- this.onKeyUp = this.onKeyUp.bind(this);
- this.onFocus = this.onFocus.bind(this);
- };
-
- render () {
- const { block } = this.props;
- const { id, content } = block;
- const { style } = content;
-
- const cn = [ 'wrap', 'focusable', 'c' + id ];
- let inner: any = null;
-
- switch (content.style) {
- case I.DivStyle.Line:
- inner = (
-
- );
- break;
-
- case I.DivStyle.Dot:
- inner = (
- {
- e.persist();
- this.onRelation(e, relationKey);
- }}
+ onClick={e => this.onRelation(e, relationKey)}
>
this.cellRefs.set(id, ref)}
@@ -648,6 +645,7 @@ const BlockFeatured = observer(class BlockFeatured extends React.Component {
+const ContentIcon = forwardRef(({ icon = '' }, ref) => {
- render () {
- const { icon } = this.props;
- return {
+const Block = forwardRef((props, ref) => {
- public static defaultProps = {
- type: I.BlockType.Text,
- style: I.TextStyle.Paragraph,
- align: I.BlockHAlign.Left,
- };
-
- render () {
- const { type, style, align } = this.props;
- const cn = [ 'block', U.Data.blockClass({ type: type, content: { style: style } }), 'align' + align ];
+ const {
+ type = I.BlockType.Text,
+ style = I.TextStyle.Paragraph,
+ align = I.BlockHAlign.Left,
+ } = props;
+ const cn = [ 'block', U.Data.blockClass({ type: type, content: { style: style } }), `align${align}` ];
- let content = null;
+ let content = null;
- switch (type) {
- case I.BlockType.IconPage: {
- content = |
- {isEditing || (result === null) ? (
-
@@ -116,7 +84,15 @@ const FootCell = observer(class FootCell extends React.Component
-
-
-
-
- );
- break;
+ const onKeyDownHandler = (e: KeyboardEvent) => {
+ if (onKeyDown) {
+ onKeyDown(e, '', [], { from: 0, to: 0 }, props);
};
-
- return (
-
- {inner}
-
- );
};
- componentDidMount () {
- this._isMounted = true;
+ const onKeyUpHandler = (e: KeyboardEvent) => {
+ if (onKeyUp) {
+ onKeyUp(e, '', [], { from: 0, to: 0 }, props);
+ };
};
-
- componentWillUnmount () {
- this._isMounted = false;
+
+ const onFocus = () => {
+ focus.set(block.id, { from: 0, to: 0 });
};
-
- onKeyDown (e: any) {
- const { onKeyDown } = this.props;
- if (onKeyDown) {
- onKeyDown(e, '', [], { from: 0, to: 0 }, this.props);
+ let inner: any = null;
+ switch (style) {
+ case I.DivStyle.Line: {
+ inner = ;
+ break;
};
- };
-
- onKeyUp (e: any) {
- const { onKeyUp } = this.props;
- if (onKeyUp) {
- onKeyUp(e, '', [], { from: 0, to: 0 }, this.props);
+ case I.DivStyle.Dot: {
+ inner = (
+
+ {Array(3).fill(null).map((_, i) => )}
+
+ );
+ break;
};
};
- onFocus () {
- focus.set(this.props.block.id, { from: 0, to: 0 });
- };
-
-});
+ return (
+
+ {inner}
+
+ );
+
+}));
export default BlockDiv;
\ No newline at end of file
diff --git a/src/ts/component/block/featured.tsx b/src/ts/component/block/featured.tsx
index 3f9a3309f7..c3ff1d04c7 100644
--- a/src/ts/component/block/featured.tsx
+++ b/src/ts/component/block/featured.tsx
@@ -83,10 +83,7 @@ const BlockFeatured = observer(class BlockFeatured extends React.Component
-
-
-
-
- );
- break;
- };
-
- content = {inner}
;
- break;
+ case I.DivStyle.Dot:
+ inner = (
+
+
+
+
+
+ );
+ break;
};
+
+ content = {inner}
;
+ break;
};
-
- return (
-
-
-
- {
+const ContentLink = forwardRef(({ icon = '', name = '', contentId = '' }, ref) => {
- constructor (props: Props) {
- super(props);
-
- this.onClick = this.onClick.bind(this);
- };
+ return (
+ <>
+
-
- );
- };
-
- onClick (e: any) {
- U.Router.go(`/help/${this.props.contentId}`, {});
- };
-
-};
+});
export default ContentLink;
\ No newline at end of file
diff --git a/src/ts/component/block/help/text.tsx b/src/ts/component/block/help/text.tsx
index 3dc1579655..978ba203ec 100644
--- a/src/ts/component/block/help/text.tsx
+++ b/src/ts/component/block/help/text.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
import { Marker, IconObject } from 'Component';
import { I, U } from 'Lib';
@@ -10,62 +10,59 @@ interface Props {
icon?: string;
};
-class ContentText extends React.Component {
+const ContentText = forwardRef(({
+ text = ' ',
+ style = I.TextStyle.Paragraph,
+ checked = false,
+ color = 'default',
+ icon = '',
+}, ref) => {
- public static defaultProps = {
- text: ' ',
- color: 'default',
- };
-
- render () {
- const { text, style, checked, color, icon } = this.props;
-
- let marker = null;
- let additional = null;
+ let marker = null;
+ let additional = null;
- switch (style) {
- case I.TextStyle.Quote: {
- additional = ;
- break;
- };
+ switch (style) {
+ case I.TextStyle.Quote: {
+ additional = ;
+ break;
+ };
- case I.TextStyle.Callout: {
- additional = {
-
- render (): any {
- const { rootId, readonly } = this.props;
+const BlockIconPage = observer(forwardRef<{}, I.BlockComponent>(({
+ rootId = '',
+ readonly = false,
+}, ref) => {
- return (
- S.Detail.get(rootId, rootId, [])}
- size={96}
- />
- );
- };
+ return (
+ S.Detail.get(rootId, rootId, [])}
+ size={96}
+ />
+ );
-});
+}));
export default BlockIconPage;
\ No newline at end of file
diff --git a/src/ts/component/block/iconUser.tsx b/src/ts/component/block/iconUser.tsx
index 4afca07976..13c49b0190 100644
--- a/src/ts/component/block/iconUser.tsx
+++ b/src/ts/component/block/iconUser.tsx
@@ -1,59 +1,47 @@
-import * as React from 'react';
+import React, { forwardRef, useState, useImperativeHandle } from 'react';
import { observer } from 'mobx-react';
import { IconObject, Loader } from 'Component';
import { I, S, U } from 'Lib';
-interface State {
- isLoading: boolean;
+interface BlockIconUserRefProps {
+ setLoading: (v: boolean) => void;
};
-const BlockIconUser = observer(class BlockIconUser extends React.Component {
+const BlockIconUser = observer(forwardRef(({
+ rootId = '',
+ readonly = false,
+}, ref) => {
- state = {
- isLoading: false,
- };
-
- constructor (props: I.BlockComponent) {
- super(props);
-
- this.onSelect = this.onSelect.bind(this);
- this.onUpload = this.onUpload.bind(this);
- };
+ const [ isLoading, setIsLoading ] = useState(false);
- render (): any {
- const { isLoading } = this.state;
- const { rootId, readonly } = this.props;
-
- return (
- {
onDragStart (e: any) {
e.stopPropagation();
- if (!this._isMounted) {
+ if (!this._isMounted || keyboard.isResizing) {
return;
};
@@ -484,7 +484,7 @@ const Block = observer(class Block extends React.Component {
keyboard.disableSelection(true);
if (selection) {
- if (selection.isSelecting) {
+ if (selection.isSelecting()) {
selection.setIsSelecting(false);
};
@@ -512,15 +512,14 @@ const Block = observer(class Block extends React.Component {
return;
};
+ const offset = element.offset();
+
selection.set(I.SelectType.Block, this.ids);
this.menuOpen({
horizontal: I.MenuDirection.Right,
offsetX: element.outerWidth(),
- recalcRect: () => {
- const offset = element.offset();
- return { x: offset.left, y: keyboard.mouse.page.y, width: element.width(), height: 0 };
- },
+ rect: { x: offset.left, y: keyboard.mouse.page.y, width: element.width(), height: 0 },
});
};
@@ -533,8 +532,7 @@ const Block = observer(class Block extends React.Component {
isContextMenuDisabled ||
readonly ||
(block.isText() && (focused == block.id)) ||
- block.isTable() ||
- block.isDataview()
+ !block.canContextMenu()
) {
return;
};
@@ -559,7 +557,7 @@ const Block = observer(class Block extends React.Component {
};
this.menuOpen({
- recalcRect: () => ({ x: keyboard.mouse.page.x, y: keyboard.mouse.page.y, width: 0, height: 0 })
+ rect: { x: keyboard.mouse.page.x, y: keyboard.mouse.page.y, width: 0, height: 0 },
});
});
};
@@ -1048,13 +1046,13 @@ const Block = observer(class Block extends React.Component {
node = $(node);
const items = node.find(Mark.getTag(I.MarkType.Emoji));
- const { block } = this.props;
- const size = U.Data.emojiParam(block.content.style);
-
if (!items.length) {
return;
};
+ const { block } = this.props;
+ const size = U.Data.emojiParam(block.content.style);
+
items.each((i: number, item: any) => {
item = $(item);
diff --git a/src/ts/component/block/media/file.tsx b/src/ts/component/block/media/file.tsx
index 0f9c638093..8ba48e99d5 100644
--- a/src/ts/component/block/media/file.tsx
+++ b/src/ts/component/block/media/file.tsx
@@ -1,136 +1,107 @@
-import * as React from 'react';
+import React, { forwardRef, KeyboardEvent } from 'react';
import { InputWithFile, Loader, IconObject, Error, ObjectName, Icon } from 'Component';
import { I, S, U, focus, translate, Action, analytics } from 'Lib';
import { observer } from 'mobx-react';
-const BlockFile = observer(class BlockFile extends React.Component {
+const BlockFile = observer(forwardRef<{}, I.BlockComponent>((props, ref) => {
- _isMounted = false;
+ const { rootId, block, readonly, onKeyDown, onKeyUp } = props;
+ const { id, content } = block;
+ const { state, style, targetObjectId } = content;
+ const object = S.Detail.get(rootId, targetObjectId, []);
- constructor (props: I.BlockComponent) {
- super(props);
-
- this.onKeyDown = this.onKeyDown.bind(this);
- this.onKeyUp = this.onKeyUp.bind(this);
- this.onFocus = this.onFocus.bind(this);
- this.onClick = this.onClick.bind(this);
- this.onChangeUrl = this.onChangeUrl.bind(this);
- this.onChangeFile = this.onChangeFile.bind(this);
- };
-
- render () {
- const { rootId, block, readonly } = this.props;
- const { id, content } = block;
- const { state, style, targetObjectId } = content;
- const object = S.Detail.get(rootId, targetObjectId, []);
-
- let element = null;
- if (object.isDeleted) {
- element = (
-
- {state == I.FileState.Error ?
- );
- break;
- };
-
- case I.FileState.Uploading: {
- element = {
+const BlockTableCell = observer(forwardRef<{}, Props>((props, ref) => {
- constructor (props: Props) {
- super(props);
+ const {
+ readonly, block, rowIdx, columnIdx, row, column, onHandleRow, onHandleColumn, onOptions, onCellFocus, onCellBlur, onCellClick, onCellEnter,
+ onCellLeave, onCellKeyDown, onCellKeyUp, onResizeStart, onDragStartColumn, onDragStartRow, onEnterHandle, onLeaveHandle, onCellUpdate
+ } = props;
- this.onMouseDown = this.onMouseDown.bind(this);
- };
+ const { isHeader } = row.content;
+ const cn = [ 'cell', 'column' + column.id ];
+ const cellId = [ row.id, column.id ].join('-');
+ const inner = ;
+ const cnm = [ 'menu' ];
- render () {
- const {
- readonly, block, rowIdx, columnIdx, row, column, onHandleRow, onHandleColumn, onOptions, onCellFocus, onCellBlur, onCellClick, onCellEnter,
- onCellLeave, onCellKeyDown, onCellKeyUp, onResizeStart, onDragStartColumn, onDragStartRow, onEnterHandle, onLeaveHandle, onCellUpdate
- } = this.props;
+ if (block) {
+ cn.push('align-v' + block.vAlign);
- if (!row || !column) {
- return null;
+ if (block.bgColor) {
+ cnm.push(`bgColor bgColor-${block.bgColor}`);
};
+ };
+
+ const Handle = (item: any) => {
+ const cn = [ 'handle' ];
- const { isHeader } = row.content;
- const cn = [ 'cell', 'column' + column.id ];
- const cellId = [ row.id, column.id ].join('-');
- const inner = ;
- const cnm = [ 'menu' ];
+ let onDragStart = null;
+ let onClick = null;
+ let canDrag = true;
- if (block) {
- cn.push('align-v' + block.vAlign);
+ switch (item.type) {
+ case I.BlockType.TableColumn:
+ cn.push('handleColumn canDrag');
- if (block.bgColor) {
- cnm.push(`bgColor bgColor-${block.bgColor}`);
- };
+ onDragStart = e => onDragStartColumn(e, column.id);
+ onClick = e => onHandleColumn(e, item.type, row.id, column.id, cellId);
+ break;
+
+ case I.BlockType.TableRow:
+ cn.push('handleRow');
+ canDrag = !isHeader;
+
+ if (canDrag) {
+ onDragStart = e => onDragStartRow(e, row.id);
+ };
+ onClick = e => onHandleRow(e, item.type, row.id, column.id, cellId);
+ break;
};
- const Handle = (item: any) => {
- const cn = [ 'handle' ];
-
- let onDragStart = null;
- let onClick = null;
- let canDrag = true;
-
- switch (item.type) {
- case I.BlockType.TableColumn:
- cn.push('handleColumn canDrag');
-
- onDragStart = e => onDragStartColumn(e, column.id);
- onClick = e => onHandleColumn(e, item.type, row.id, column.id, cellId);
- break;
-
- case I.BlockType.TableRow:
- cn.push('handleRow');
- canDrag = !isHeader;
-
- if (canDrag) {
- onDragStart = e => onDragStartRow(e, row.id);
- };
- onClick = e => onHandleRow(e, item.type, row.id, column.id, cellId);
- break;
- };
-
- if (canDrag) {
- cn.push('canDrag');
- };
-
- return (
-
- {content}
-
+ };
+
+ return (
+
+
+ );
+
+});
export default Block;
\ No newline at end of file
diff --git a/src/ts/component/block/help/link.tsx b/src/ts/component/block/help/link.tsx
index 3141cf5927..246016e80f 100644
--- a/src/ts/component/block/help/link.tsx
+++ b/src/ts/component/block/help/link.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
import { IconObject } from 'Component';
import { U } from 'Lib';
@@ -8,29 +8,17 @@ interface Props {
contentId?: string;
};
-class ContentLink extends React.Component
+
- );
- };
-
-};
+
+
+ {content}
U.Router.go(`/help/${contentId}`, {})}>
+ {name}
+
+
+ );
- render () {
- const { icon, name } = this.props;
-
- return (
- {name}
-
-
- );
};
-};
+ return (
+
- {marker ?
- {additional}
-
-
+
+ );
+
+});
export default ContentText;
\ No newline at end of file
diff --git a/src/ts/component/block/iconPage.tsx b/src/ts/component/block/iconPage.tsx
index 73209eff7d..f4574f48c1 100644
--- a/src/ts/component/block/iconPage.tsx
+++ b/src/ts/component/block/iconPage.tsx
@@ -1,23 +1,22 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
import { observer } from 'mobx-react';
import { IconObject } from 'Component';
import { I, S } from 'Lib';
-const BlockIconPage = observer(class BlockIconPage extends React.Component
+ {marker ?
+ {additional}
+
+
- {isLoading ? S.Detail.get(rootId, rootId, [])}
- className={readonly ? 'isReadonly' : ''}
- canEdit={!readonly}
- onSelect={this.onSelect}
- onUpload={this.onUpload}
- size={128}
- />
-
- );
+ const onSelect = () => {
+ setIsLoading(true);
+ U.Object.setIcon(rootId, '', '', () => setIsLoading(false));
};
- onSelect () {
- this.setLoading(true);
- U.Object.setIcon(this.props.rootId, '', '', () => this.setLoading(false));
+ const onUpload = (objectId: string) => {
+ setIsLoading(true);
+ U.Object.setIcon(rootId, '', objectId, () => setIsLoading(false));
};
- onUpload (objectId: string) {
- this.setLoading(true);
- U.Object.setIcon(this.props.rootId, '', objectId, () => this.setLoading(false));
- };
-
- setLoading (v: boolean) {
- this.setState({ isLoading: v });
- };
-
-});
+ useImperativeHandle(ref, () => ({
+ setLoading: (v: boolean) => setIsLoading(v),
+ }));
+
+ return (
+
+ {isLoading ? S.Detail.get(rootId, rootId, [])}
+ className={readonly ? 'isReadonly' : ''}
+ canEdit={!readonly}
+ onSelect={onSelect}
+ onUpload={onUpload}
+ size={128}
+ />
+
+ );
+}));
export default BlockIconUser;
\ No newline at end of file
diff --git a/src/ts/component/block/index.tsx b/src/ts/component/block/index.tsx
index 14187a2cbe..9c83aa7f00 100644
--- a/src/ts/component/block/index.tsx
+++ b/src/ts/component/block/index.tsx
@@ -468,7 +468,7 @@ const Block = observer(class Block extends React.Component
-
- );
- } else {
- switch (state) {
- default:
- case I.FileState.Error:
- case I.FileState.Empty: {
- element = (
- {translate('commonDeletedObject')}
-
-
- );
- break;
- };
- };
- };
-
- return (
-
- {element}
-
- );
- };
-
- componentDidMount () {
- this._isMounted = true;
- };
-
- componentWillUnmount () {
- this._isMounted = false;
- };
-
- onKeyDown (e: any) {
- const { onKeyDown } = this.props;
-
+ const onKeyDownHandler = (e: KeyboardEvent) => {
if (onKeyDown) {
- onKeyDown(e, '', [], { from: 0, to: 0 }, this.props);
+ onKeyDown(e, '', [], { from: 0, to: 0 }, props);
};
};
- onKeyUp (e: any) {
- const { onKeyUp } = this.props;
-
+ const onKeyUpHandler = (e: KeyboardEvent) => {
if (onKeyUp) {
- onKeyUp(e, '', [], { from: 0, to: 0 }, this.props);
+ onKeyUp(e, '', [], { from: 0, to: 0 }, props);
};
};
- onFocus () {
- focus.set(this.props.block.id, { from: 0, to: 0 });
+ const onFocus = () => {
+ focus.set(block.id, { from: 0, to: 0 });
};
- onChangeUrl (e: any, url: string) {
- const { rootId, block } = this.props;
+ const onChangeUrl = (e: any, url: string) => {
Action.upload(I.FileType.File, rootId, block.id, url, '');
};
- onChangeFile (e: any, path: string) {
- const { rootId, block } = this.props;
+ const onChangeFile = (e: any, path: string) => {
Action.upload(I.FileType.File, rootId, block.id, '', path);
};
- onClick (e: any) {
+ const onClick = (e: any) => {
if (!e.button) {
- Action.openFile(this.props.block.getTargetObjectId(), analytics.route.block);
+ Action.openFile(block.getTargetObjectId(), analytics.route.block);
+ };
+ };
+
+ let element = null;
+ if (object.isDeleted) {
+ element = (
+
+
+ );
+ } else {
+ switch (state) {
+ default:
+ case I.FileState.Error:
+ case I.FileState.Empty: {
+ element = (
+ <>
+ {state == I.FileState.Error ? {translate('commonDeletedObject')}
+
+
+ );
+ break;
+ };
};
};
-});
+ return (
+
+ {element}
+
+ );
+
+}));
export default BlockFile;
\ No newline at end of file
diff --git a/src/ts/component/block/table/cell.tsx b/src/ts/component/block/table/cell.tsx
index f9344424f7..0b8698e8e4 100644
--- a/src/ts/component/block/table/cell.tsx
+++ b/src/ts/component/block/table/cell.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
import { observer } from 'mobx-react';
import { I, U, J, keyboard } from 'Lib';
import { Icon, Block } from 'Component';
@@ -10,164 +10,152 @@ interface Props extends I.BlockComponentTable {
column: I.Block;
};
-const BlockTableCell = observer(class BlockTableCell extends React.Component onEnterHandle(e, item.type, row.id, column.id)}
- onMouseLeave={e => onLeaveHandle(e)}
- onClick={onClick}
- onDragStart={onDragStart}
- onContextMenu={onClick}
- >
-
-
- );
+ if (canDrag) {
+ cn.push('canDrag');
+ };
+
+ return (
+ onEnterHandle(e, item.type, row.id, column.id)}
+ onMouseLeave={e => onLeaveHandle(e)}
+ onClick={onClick}
+ onDragStart={onDragStart}
+ onContextMenu={onClick}
+ >
+
+
+ );
+ };
+
+ const EmptyBlock = () => {
+ const cn = [ 'block', 'blockText', 'noPlus', 'align0' ];
+ const cv = [ 'value' ];
+
+ if (readonly) {
+ cn.push('isReadonly');
+ cv.push('isReadonly');
};
- const EmptyBlock = () => {
- const cn = [ 'block', 'blockText', 'noPlus', 'align0' ];
- const cv = [ 'value' ];
-
- if (readonly) {
- cn.push('isReadonly');
- cv.push('isReadonly');
- };
-
- return (
-
-
-
-
-
-
-
-
onCellFocus(e, row.id, column.id, cellId)}
- onBlur={e => onCellBlur(e, row.id, column.id, cellId)}
- onDragStart={e => e.preventDefault()}
- />
-
+ return (
+
+
+
+
- );
- };
-
- return (
-
+
+
+
+
onCellFocus(e, row.id, column.id, cellId)}
+ onBlur={e => onCellBlur(e, row.id, column.id, cellId)}
+ onDragStart={e => e.preventDefault()}
+ />
onCellClick(e, row.id, column.id, cellId)}
- onMouseEnter={e => onCellEnter(e, row.id, column.id, cellId)}
- onMouseLeave={e => onCellLeave(e, row.id, column.id, cellId)}
- onMouseDown={this.onMouseDown}
- {...U.Common.dataProps({ 'column-id': column.id })}
- >
- {!rowIdx ? {
- onCellKeyDown(e, row.id, column.id, cellId, text, marks, range, props);
- }}
- onKeyUp={(e: any, text: string, marks: I.Mark[], range: I.TextRange, props: any) => {
- onCellKeyUp(e, row.id, column.id, cellId, text, marks, range, props);
- }}
- onUpdate={() => onCellUpdate(cellId)}
- onFocus={e => onCellFocus(e, row.id, column.id, cellId)}
- onBlur={e => onCellBlur(e, row.id, column.id, cellId)}
- getWrapperWidth={() => J.Size.editor}
- />
- ) : (
-
onResizeStart(e, column.id)} /> : ''}
- onOptions(e, I.BlockType.Text, row.id, column.id, cellId)} />
);
};
- onMouseDown (e: any) {
+ const onMouseDown = () => {
keyboard.disableSelection(true);
$(window).off('mousedown.table-cell').on('mousedown.table-cell', () => keyboard.disableSelection(false));
};
-});
+ return (
+ onCellClick(e, row.id, column.id, cellId)}
+ onMouseEnter={e => onCellEnter(e, row.id, column.id, cellId)}
+ onMouseLeave={e => onCellLeave(e, row.id, column.id, cellId)}
+ onMouseDown={onMouseDown}
+ {...U.Common.dataProps({ 'column-id': column.id })}
+ >
+ {!rowIdx ? {
+ onCellKeyDown(e, row.id, column.id, cellId, text, marks, range, props);
+ }}
+ onKeyUp={(e: any, text: string, marks: I.Mark[], range: I.TextRange, props: any) => {
+ onCellKeyUp(e, row.id, column.id, cellId, text, marks, range, props);
+ }}
+ onUpdate={() => onCellUpdate(cellId)}
+ onFocus={e => onCellFocus(e, row.id, column.id, cellId)}
+ onBlur={e => onCellBlur(e, row.id, column.id, cellId)}
+ getWrapperWidth={() => J.Size.editor}
+ />
+ ) : (
+ {
+const BlockTableRow = observer(forwardRef<{}, Props>((props, ref) => {
- render () {
- const { rootId, block, index, getData } = this.props;
- const { columns } = getData();
- const childrenIds = S.Block.getChildrenIds(rootId, block.id);
- const children = S.Block.getChildren(rootId, block.id);
- const length = childrenIds.length;
- const cn = [ 'row' ];
+ const { rootId, block, index, getData, onRowUpdate } = props;
+ const { columns } = getData();
+ const childrenIds = S.Block.getChildrenIds(rootId, block.id);
+ const children = S.Block.getChildren(rootId, block.id);
+ const length = childrenIds.length;
+ const cn = [ 'row' ];
- if (block.content.isHeader) {
- cn.push('isHeader');
- };
-
- return (
- {
+const BlockTableOfContents = observer(forwardRef<{}, I.BlockComponent>((props, ref) => {
- _isMounted = false;
-
- constructor (props: I.BlockComponent) {
- super(props);
-
- this.onKeyDown = this.onKeyDown.bind(this);
- this.onKeyUp = this.onKeyUp.bind(this);
- this.onFocus = this.onFocus.bind(this);
- };
-
- render () {
- const { block } = this.props;
- const cn = [ 'wrap', 'focusable', 'c' + block.id ];
- const tree = this.getTree();
-
- const Item = (item: any) => {
- return (
- {
const { text, marks, style, checked, color, iconEmoji, iconImage } = content;
const { theme } = S.Common;
const root = S.Block.getLeaf(rootId, rootId);
- const cv: string[] = [ 'value', 'focusable', 'c' + id ];
+ const cn = [ 'flex' ];
+ const cv = [ 'value', 'focusable', 'c' + id ];
+ const checkRtl = keyboard.isRtl || U.Common.checkRtl(text);
let marker: any = null;
let placeholder = translate('placeholderBlock');
@@ -74,6 +76,10 @@ const BlockText = observer(class BlockText extends React.Component {
cv.push('textColor textColor-' + color);
};
+ if (checkRtl) {
+ cn.push('isRtl');
+ };
+
// Subscriptions
for (const mark of marks) {
if ([ I.MarkType.Mention, I.MarkType.Object ].includes(mark.type)) {
@@ -168,7 +174,7 @@ const BlockText = observer(class BlockText extends React.Component {
return (
onResizeStart(e, column.id)} /> : ''}
+ onOptions(e, I.BlockType.Text, row.id, column.id, cellId)} />
+
+ );
+
+}));
export default BlockTableCell;
\ No newline at end of file
diff --git a/src/ts/component/block/table/row.tsx b/src/ts/component/block/table/row.tsx
index b6e949787a..2299c97c2b 100644
--- a/src/ts/component/block/table/row.tsx
+++ b/src/ts/component/block/table/row.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef, useEffect } from 'react';
import { I, S } from 'Lib';
import { observer } from 'mobx-react';
import Cell from './cell';
@@ -7,49 +7,45 @@ interface Props extends I.BlockComponentTable {
onRowUpdate: (rowId: string) => void;
};
-const BlockTableRow = observer(class BlockTableRow extends React.Component
- {columns.map((column: any, i: number) => {
- const child = children.find(it => it.id == [ block.id, column.id ].join('-'));
- return (
- |
- );
- })}
-
- );
+ if (block.content.isHeader) {
+ cn.push('isHeader');
};
- componentDidUpdate () {
- const { onRowUpdate, block } = this.props;
-
+ useEffect(() => {
if (onRowUpdate) {
onRowUpdate(block.id);
};
- };
-
-});
+ });
+
+ return (
+
+ {columns.map((column: any, i: number) => {
+ const child = children.find(it => it.id == [ block.id, column.id ].join('-'));
+ return (
+ |
+ );
+ })}
+
+ );
+
+}));
export default BlockTableRow;
\ No newline at end of file
diff --git a/src/ts/component/block/tableOfContents.tsx b/src/ts/component/block/tableOfContents.tsx
index a642cf6421..d81cdb4944 100644
--- a/src/ts/component/block/tableOfContents.tsx
+++ b/src/ts/component/block/tableOfContents.tsx
@@ -1,81 +1,29 @@
-import * as React from 'react';
+import React, { forwardRef, KeyboardEvent } from 'react';
import { I, S, U, J, focus, translate } from 'Lib';
import { observer } from 'mobx-react';
-const BlockTableOfContents = observer(class BlockTableOfContents extends React.Component this.onClick(e, item.id)}
- style={{ paddingLeft: item.depth * 24 }}
- >
- {item.text}
-
- );
- };
-
- return (
-
- {!tree.length ? (
-
- {tree.map((item: any, i: number) => (
-
- )}
-
- );
- };
-
- componentDidMount () {
- this._isMounted = true;
- };
-
- componentWillUnmount () {
- this._isMounted = false;
- };
-
- onKeyDown (e: any) {
- const { onKeyDown } = this.props;
+ const { rootId, block, isPopup, onKeyDown, onKeyUp } = props;
+ const cn = [ 'wrap', 'focusable', `c${block.id}` ];
+ const onKeyDownHandler = (e: KeyboardEvent) => {
if (onKeyDown) {
- onKeyDown(e, '', [], { from: 0, to: 0 }, this.props);
+ onKeyDown(e, '', [], { from: 0, to: 0 }, props);
};
};
- onKeyUp (e: any) {
- const { onKeyUp } = this.props;
-
+ const onKeyUpHandler = (e: KeyboardEvent) => {
if (onKeyUp) {
- onKeyUp(e, '', [], { from: 0, to: 0 }, this.props);
+ onKeyUp(e, '', [], { from: 0, to: 0 }, props);
};
};
- onFocus () {
- focus.set(this.props.block.id, { from: 0, to: 0 });
+ const onFocus = () => {
+ focus.set(block.id, { from: 0, to: 0 });
};
- getTree () {
- const { rootId } = this.props;
+ const getTree = () => {
const blocks = S.Block.unwrapTree([ S.Block.wrapTree(rootId, rootId) ]).filter(it => it.isTextHeader());
const list: any[] = [];
@@ -107,12 +55,12 @@ const BlockTableOfContents = observer(class BlockTableOfContents extends React.C
text: String(block.content.text || translate('defaultNamePage')),
});
});
+
return list;
};
- onClick (e: any, id: string) {
- const { isPopup } = this.props;
- const node = $('.focusable.c' + id);
+ const onClick = (e: any, id: string) => {
+ const node = $(`.focusable.c${id}`);
if (!node.length) {
return;
@@ -126,7 +74,39 @@ const BlockTableOfContents = observer(class BlockTableOfContents extends React.C
container.scrollTop(y);
};
-
-});
+
+ const Item = (item: any) => (
+ {translate('blockTableOfContentsAdd')}
- ) : (
- onClick(e, item.id)}
+ style={{ paddingLeft: item.depth * 24 }}
+ >
+ {item.text}
+
+ );
+
+ const tree = getTree();
+
+ return (
+
+ {!tree.length ? (
+
+ );
+
+}));
export default BlockTableOfContents;
\ No newline at end of file
diff --git a/src/ts/component/block/text.tsx b/src/ts/component/block/text.tsx
index df112ca0a4..5e5619e03d 100644
--- a/src/ts/component/block/text.tsx
+++ b/src/ts/component/block/text.tsx
@@ -63,7 +63,9 @@ const BlockText = observer(class BlockText extends React.Component{translate('blockTableOfContentsAdd')}
+ ) : (
+ <>
+ {tree.map((item: any, i: number) => (
+ this.node = node}
- className="flex"
+ className={cn.join(' ')}
>
{
const tag = Mark.getTag(I.MarkType.Latex);
const code = Mark.getTag(I.MarkType.Code);
const value = this.refEditable.getHtmlValue();
- const reg = /(^|[^\d<]+)?\$((?:[^$<]|\.)*?)\$([^\d]|$)/gi;
- const regCode = new RegExp(`^${code}`, 'i');
+ const reg = /(^|[^\d<\$]+)?\$((?:[^$<]|\.)*?)\$([^\d>\$]+|$)/gi;
+ const regCode = new RegExp(`^${code}|${code}$`, 'i');
if (!/\$((?:[^$<]|\.)*?)\$/.test(value)) {
return;
};
const match = value.matchAll(reg);
-
const render = (s: string) => {
s = U.Common.fromHtmlSpecialChars(s);
@@ -340,7 +346,17 @@ const BlockText = observer(class BlockText extends React.Component {
const m3 = String(m[3] || '');
// Skip inline code marks
- if (regCode.test(m1)) {
+ if (regCode.test(m1) || regCode.test(m3)) {
+ return;
+ };
+
+ // Skip Brazilian Real
+ if (/R$/.test(m1) || /R$/.test(m2)) {
+ return;
+ };
+
+ // Escaped $ sign
+ if (/\\$/.test(m1) || /\\$/.test(m2)) {
return;
};
@@ -697,6 +713,8 @@ const BlockText = observer(class BlockText extends React.Component {
const oneSymbolBefore = range ? value[range.from - 1] : '';
const twoSymbolBefore = range ? value[range.from - 2] : '';
+ keyboard.setRtl(U.Common.checkRtl(value));
+
if (range) {
isAllowedMenu = isAllowedMenu && (!range.from || (range.from == 1) || [ ' ', '\n', '(', '[', '"', '\'' ].includes(twoSymbolBefore));
};
@@ -1090,7 +1108,7 @@ const BlockText = observer(class BlockText extends React.Component {
};
onSelect () {
- if (keyboard.isContextDisabled) {
+ if (keyboard.isContextDisabled || keyboard.isComposition) {
return;
};
diff --git a/src/ts/component/block/type.tsx b/src/ts/component/block/type.tsx
index 247b216726..f4422e63a8 100644
--- a/src/ts/component/block/type.tsx
+++ b/src/ts/component/block/type.tsx
@@ -180,7 +180,6 @@ const BlockType = observer(class BlockType extends React.Component it.id) },
- { relationKey: 'recommendedLayout', condition: I.FilterCondition.In, value: U.Object.getPageLayouts() },
+ { relationKey: 'recommendedLayout', condition: I.FilterCondition.In, value: U.Object.getPageLayouts().concat(U.Object.getSetLayouts()) },
{ relationKey: 'uniqueKey', condition: I.FilterCondition.NotEqual, value: J.Constant.typeKey.template }
],
onClick: (item: any) => {
diff --git a/src/ts/component/drag/box.tsx b/src/ts/component/drag/box.tsx
index 237ecf4c46..57c6b68dbc 100644
--- a/src/ts/component/drag/box.tsx
+++ b/src/ts/component/drag/box.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { FC, useRef } from 'react';
import { U } from 'Lib';
interface Props {
@@ -6,61 +6,29 @@ interface Props {
onDragEnd(oldIndex: number, newIndex: number): void;
};
-class DragBox extends React.Component {
-
- _isMounted = false;
- node: any = null;
- cache: any = {};
- ox = 0;
- oy = 0;
- oldIndex = -1;
- newIndex = -1;
-
- constructor (props: Props) {
- super(props);
-
- this.onDragStart = this.onDragStart.bind(this);
- };
-
- render () {
- const children = React.Children.map(this.props.children, (child: any) => {
- return React.cloneElement(child, {
- onDragStart: this.onDragStart
- });
- });
+const DragBox: FC = ({ children: initialChildren, onDragEnd }) => {
- return (
- this.node = node}
- className="dragbox"
- >
- {children}
-
- );
- };
-
- componentDidMount () {
- this._isMounted = true;
- };
-
- componentWillUnmount () {
- this._isMounted = false;
- };
+ const nodeRef = useRef(null);
+ const cache = useRef({});
+ const ox = useRef(0);
+ const oy = useRef(0);
+ const oldIndex = useRef(-1);
+ const newIndex = useRef(-1);
- onDragStart (e: any) {
+ const onDragStart = (e: any) => {
e.preventDefault();
e.stopPropagation();
- if (!this._isMounted) {
+ if (!nodeRef.current) {
return;
};
const win = $(window);
- const node = $(this.node);
+ const node = $(nodeRef.current);
const items = node.find('.isDraggable');
const element = $(e.currentTarget);
const clone = element.clone();
- const offset = node.offset();
+ const { left, top } = node.offset();
items.each((i: number, item: any) => {
item = $(item);
@@ -71,7 +39,7 @@ class DragBox extends React.Component {
};
const p = item.position();
- this.cache[id] = {
+ cache.current[id] = {
x: p.left,
y: p.top,
width: item.outerWidth(),
@@ -79,58 +47,57 @@ class DragBox extends React.Component {
};
});
- this.ox = offset.left;
- this.oy = offset.top;
- this.oldIndex = element.data('index');
+ ox.current = left;
+ oy.current = top;
+ oldIndex.current = element.data('index');
node.append(clone);
clone.addClass('isClone');
element.addClass('isDragging');
win.off('mousemove.dragbox mouseup.dragbox');
- win.on('mousemove.dragbox', e => this.onDragMove(e));
- win.on('mouseup.dragbox', e => this.onDragEnd(e));
+ win.on('mousemove.dragbox', e => onDragMove(e));
+ win.on('mouseup.dragbox', e => onDragEndHandler(e));
};
- onDragMove (e: any) {
- if (!this._isMounted) {
+ const onDragMove = (e: any) => {
+ if (!nodeRef.current) {
return;
};
- const node = $(this.node);
+ const node = $(nodeRef.current);
const items = node.find('.isDraggable');
const clone = node.find('.isDraggable.isClone');
const width = clone.outerWidth();
const height = clone.outerHeight();
- const x = e.pageX - this.ox - width / 2;
- const y = e.pageY - this.oy - height / 2;
+ const x = e.pageX - ox.current - width / 2;
+ const y = e.pageY - oy.current - height / 2;
const center = x + width / 2;
- this.newIndex = -1;
+ newIndex.current = -1;
node.find('.isDraggable.isOver').removeClass('isOver left right');
clone.css({ transform: `translate3d(${x}px,${y}px,0px)` });
for (let i = 0; i < items.length; ++i) {
const el = $(items.get(i));
- const rect = this.cache[el.data('id')];
+ const rect = cache.current[el.data('id')];
if (rect && U.Common.rectsCollide({ x: center, y, width: 2, height }, rect)) {
const isLeft = center <= rect.x + rect.width / 2;
- this.newIndex = i;
+ newIndex.current = i;
el.addClass('isOver ' + (isLeft ? 'left' : 'right'));
break;
};
};
};
- onDragEnd (e: any) {
- if (!this._isMounted) {
+ const onDragEndHandler = (e: any) => {
+ if (!nodeRef.current) {
return;
};
- const node = $(this.node);
- const { onDragEnd } = this.props;
+ const node = $(nodeRef.current);
node.find('.isDraggable.isClone').remove();
node.find('.isDraggable.isDragging').removeClass('isDragging');
@@ -138,15 +105,25 @@ class DragBox extends React.Component {
$(window).off('mousemove.dragbox mouseup.dragbox');
- if (this.newIndex >= 0) {
- onDragEnd(this.oldIndex, this.newIndex);
+ if (newIndex.current >= 0) {
+ onDragEnd(oldIndex.current, newIndex.current);
};
- this.cache = {};
- this.oldIndex = -1;
- this.newIndex = -1;
+ cache.current = {};
+ oldIndex.current = -1;
+ newIndex.current = -1;
};
-
+
+ const children = React.Children.map(initialChildren, (child: any) => React.cloneElement(child, { onDragStart }));
+
+ return (
+
+ {children}
+
+ );
};
export default DragBox;
\ No newline at end of file
diff --git a/src/ts/component/drag/layer.tsx b/src/ts/component/drag/layer.tsx
index e76b9f67fc..409674ac91 100644
--- a/src/ts/component/drag/layer.tsx
+++ b/src/ts/component/drag/layer.tsx
@@ -1,93 +1,22 @@
-import * as React from 'react';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import * as ReactDOM from 'react-dom';
import $ from 'jquery';
+import { observer } from 'mobx-react';
import { I, M, S, U, J, keyboard } from 'Lib';
-interface State {
- rootId: string;
- type: I.DropType;
- width: number;
- ids: string[];
-};
-
-class DragLayer extends React.Component {
-
- _isMounted = false;
- node: any = null;
- state = {
- rootId: '',
- type: I.DropType.None,
- width: 0,
- ids: [] as string[],
- };
-
- constructor (props: any) {
- super(props);
-
- this.show = this.show.bind(this);
- this.hide = this.hide.bind(this);
- };
+const DragLayer = observer(forwardRef((_, ref: any) => {
- render () {
- const { width } = this.state;
-
- return (
- {
};
inner.append(wrap);
+
+ node.css({ width });
+ node.find('.block').attr({ id: '' });
+ node.find('.selectionTarget').attr({ id: '' });
};
-
-};
+
+ const hide = () => {
+ $(nodeRef.current).find('#inner').html('');
+ };
+
+ useImperativeHandle(ref, () => ({
+ show,
+ hide,
+ }));
+
+ return (
+ {
-
- node: any = null;
- refLayer: any = null;
- position: I.BlockPosition = I.BlockPosition.None;
- hoverData: any = null;
- canDrop = false;
- init = false;
- top = 0;
- frame = 0;
-
- objects: any = null;
- objectData: Map = new Map();
-
- origin: any = null;
-
- constructor (props: Props) {
- super(props);
-
- this.onDragOver = this.onDragOver.bind(this);
- this.onDragStart = this.onDragStart.bind(this);
- this.onDragEnd = this.onDragEnd.bind(this);
- this.onDropCommon = this.onDropCommon.bind(this);
- this.onDrop = this.onDrop.bind(this);
- };
+interface DragProviderRefProps {
+ onDragStart: (e: any, dropType: I.DropType, ids: string[], component: any) => void;
+ onScroll: () => void;
+};
- render () {
- const { children } = this.props;
-
- return (
- ((props, ref: any) => {
+
+ const { children } = props;
+ const nodeRef = useRef(null);
+ const layerRef = useRef(null);
+ const isInitialised = useRef(false);
+ const position = useRef(I.BlockPosition.None);
+ const hoverData = useRef(null);
+ const canDrop = useRef(false);
+ const top = useRef(0);
+ const frame = useRef(0);
+ const objects = useRef(null);
+ const objectData = useRef(new Map());
+ const origin = useRef(null);
+
+ const initData = () => {
+ if (isInitialised.current) {
return;
};
const isPopup = keyboard.isPopup();
const container = $(isPopup ? '#popupPage-innerWrap' : '#root');
- this.clearState();
- this.init = true;
- this.objects = container.find('.dropTarget.isDroppable');
+ clearState();
+ isInitialised.current = true;
+ objects.current = container.find('.dropTarget.isDroppable');
- this.objects.each((i: number, el: any) => {
+ objects.current.each((i: number, el: any) => {
const item = $(el);
const data = {
id: item.attr('data-id'),
@@ -98,7 +75,7 @@ const DragProvider = observer(class DragProvider extends React.Component
};
};
- this.objectData.set(data.cacheKey, {
+ objectData.current.set(data.cacheKey, {
...data,
obj: item,
index: i,
@@ -114,11 +91,11 @@ const DragProvider = observer(class DragProvider extends React.Component
});
};
- onDropCommon (e: any) {
+ const onDropCommon = (e: any) => {
e.preventDefault();
if (keyboard.isCommonDropDisabled) {
- this.clearState();
+ clearState();
return;
};
@@ -135,17 +112,16 @@ const DragProvider = observer(class DragProvider extends React.Component
const isFileDrop = dataTransfer.files && dataTransfer.files.length;
const last = S.Block.getFirstBlock(rootId, -1, it => it && it.canCreateBlock());
- let position = this.position;
let data: any = null;
let targetId = '';
let target: any = null;
- if (this.hoverData && (this.position != I.BlockPosition.None)) {
- data = this.hoverData;
+ if (hoverData.current && (position.current != I.BlockPosition.None)) {
+ data = hoverData.current;
} else
if (last && isFileDrop) {
- data = this.objectData.get([ I.DropType.Block, last.id ].join('-'));
- position = I.BlockPosition.Bottom;
+ data = objectData.current.get([ I.DropType.Block, last.id ].join('-'));
+ position.current = I.BlockPosition.Bottom;
};
if (data) {
@@ -156,7 +132,7 @@ const DragProvider = observer(class DragProvider extends React.Component
// Last drop zone
if (targetId == 'blockLast') {
targetId = '';
- position = I.BlockPosition.Bottom;
+ position.current = I.BlockPosition.Bottom;
};
// String items drop
@@ -165,7 +141,7 @@ const DragProvider = observer(class DragProvider extends React.Component
C.BlockPaste(rootId, targetId, { from: 0, to: 0 }, [], false, { html }, '');
});
- this.clearState();
+ clearState();
return;
};
@@ -180,43 +156,43 @@ const DragProvider = observer(class DragProvider extends React.Component
console.log('[DragProvider].onDrop paths', paths);
- C.FileDrop(rootId, targetId, position, paths, () => {
- if (target && target.isTextToggle() && (position == I.BlockPosition.InnerFirst)) {
+ C.FileDrop(rootId, targetId, position.current, paths, () => {
+ if (target && target.isTextToggle() && (position.current == I.BlockPosition.InnerFirst)) {
S.Block.toggle(rootId, targetId, true);
};
});
} else
- if (data && this.canDrop && (position != I.BlockPosition.None)) {
- this.onDrop(e, data.dropType, targetId, position);
+ if (data && canDrop && (position.current != I.BlockPosition.None)) {
+ onDrop(e, data.dropType, targetId, position.current);
};
- this.clearState();
+ clearState();
};
- onDragStart (e: any, dropType: I.DropType, ids: string[], component: any) {
+ const onDragStart = (e: any, dropType: I.DropType, ids: string[], component: any) => {
const rootId = keyboard.getRootId();
const isPopup = keyboard.isPopup();
const selection = S.Common.getRef('selectionProvider');
const win = $(window);
- const node = $(this.node);
+ const node = $(nodeRef.current);
const container = U.Common.getScrollContainer(isPopup);
const sidebar = $('#sidebar');
const layer = $('#dragLayer');
const body = $('body');
const dataTransfer = { rootId, dropType, ids, withAlt: e.altKey };
- this.origin = component;
+ origin.current = component;
e.stopPropagation();
focus.clear(true);
console.log('[DragProvider].onDragStart', dropType, ids);
- this.top = container.scrollTop();
- this.refLayer.show(rootId, dropType, ids, component);
- this.setClass(ids);
- this.initData();
- this.unbind();
+ top.current = container.scrollTop();
+ layerRef.current.show(rootId, dropType, ids, component);
+ setClass(ids);
+ initData();
+ unbind();
e.dataTransfer.setDragImage(layer.get(0), 0, 0);
e.dataTransfer.setData('text/plain', JSON.stringify(dataTransfer));
@@ -229,11 +205,11 @@ const DragProvider = observer(class DragProvider extends React.Component
keyboard.disableSelection(true);
Preview.hideAll();
- win.on('drag.drag', e => this.onDrag(e));
- win.on('dragend.drag', e => this.onDragEnd(e));
+ win.on('drag.drag', e => onDrag(e));
+ win.on('dragend.drag', e => onDragEnd(e));
- container.off('scroll.drag').on('scroll.drag', throttle(() => this.onScroll(), 20));
- sidebar.off('scroll.drag').on('scroll.drag', throttle(() => this.onScroll(), 20));
+ container.off('scroll.drag').on('scroll.drag', throttle(() => onScroll(), 20));
+ sidebar.off('scroll.drag').on('scroll.drag', throttle(() => onScroll(), 20));
$('.colResize.active').removeClass('active');
scrollOnMove.onMouseDown(e, isPopup);
@@ -244,7 +220,7 @@ const DragProvider = observer(class DragProvider extends React.Component
selection?.hide();
};
- onDragOver (e: any) {
+ const onDragOver = (e: any) => {
if (keyboard.isCommonDropDisabled) {
return;
};
@@ -252,25 +228,25 @@ const DragProvider = observer(class DragProvider extends React.Component
e.preventDefault();
e.stopPropagation();
- this.initData();
- this.checkNodes(e, e.pageX, e.pageY);
+ initData();
+ checkNodes(e, e.pageX, e.pageY);
};
- onDrag (e: any) {
+ const onDrag = (e: any) => {
scrollOnMove.onMouseMove(e.clientX, e.clientY);
};
- onDragEnd (e: any) {
+ const onDragEnd = (e: any) => {
const isPopup = keyboard.isPopup();
- const node = $(this.node);
+ const node = $(nodeRef.current);
const container = U.Common.getScrollContainer(isPopup);
const sidebar = $('#sidebar');
const body = $('body');
- this.refLayer.hide();
- this.clearState();
- this.clearStyle();
- this.unbind();
+ layerRef.current.hide();
+ clearState();
+ clearStyle();
+ unbind();
keyboard.setDragging(false);
keyboard.disableSelection(false);
@@ -285,21 +261,20 @@ const DragProvider = observer(class DragProvider extends React.Component
scrollOnMove.onMouseUp(e);
};
- onDrop (e: any, targetType: string, targetId: string, position: I.BlockPosition) {
+ const onDrop = (e: any, targetType: string, targetId: string, position: I.BlockPosition) => {
const selection = S.Common.getRef('selectionProvider');
let data: any = {};
- try { data = JSON.parse(e.dataTransfer.getData('text/plain')) || {}; } catch (e) { /**/ };
+ try { data = JSON.parse(e.dataTransfer.getData('text/plain')) || {}; } catch (e) {};
const { rootId, dropType, withAlt } = data;
const ids = data.ids || [];
+ const contextId = rootId;
if (!ids.length) {
return;
};
- const contextId = rootId;
-
let targetContextId = keyboard.getRootId();
let isToggle = false;
@@ -345,7 +320,7 @@ const DragProvider = observer(class DragProvider extends React.Component
case I.DropType.Block: {
// Drop into column is targeting last block
- if (this.hoverData.isTargetCol) {
+ if (hoverData.current.isTargetCol) {
const childrenIds = S.Block.getChildrenIds(targetContextId, targetId);
targetId = childrenIds.length ? childrenIds[childrenIds.length - 1] : '';
@@ -419,12 +394,12 @@ const DragProvider = observer(class DragProvider extends React.Component
switch (position) {
case I.BlockPosition.Top:
case I.BlockPosition.Bottom: {
- if (!this.origin) {
+ if (!origin.current) {
break;
};
// Sort
- const { onRecordDrop } = this.origin;
+ const { onRecordDrop } = origin.current;
if (onRecordDrop) {
onRecordDrop(targetId, ids);
@@ -490,16 +465,16 @@ const DragProvider = observer(class DragProvider extends React.Component
console.log('[DragProvider].onDrop from:', contextId, 'to: ', targetContextId);
};
- onScroll () {
+ const onScroll = () => {
if (keyboard.isDragging) {
- for (const [ key, value ] of this.objectData) {
+ for (const [ key, value ] of objectData.current) {
const { left, top } = value.obj.offset();
- this.objectData.set(key, { ...value, x: left, y: top });
+ objectData.current.set(key, { ...value, x: left, y: top });
};
};
};
- checkNodes (e: any, ex: number, ey: number) {
+ const checkNodes = (e: any, ex: number, ey: number) => {
const dataTransfer = e.dataTransfer || e.originalEvent.dataTransfer;
const isItemDrag = U.Common.getDataTransferItems(dataTransfer.items).length ? true : false;
const isFileDrag = dataTransfer.types.includes('Files');
@@ -512,12 +487,12 @@ const DragProvider = observer(class DragProvider extends React.Component
break;
};
};
- } catch (e) { /**/ };
+ } catch (e) { };
- this.setHoverData(null);
- this.setPosition(I.BlockPosition.None);
+ setHoverData(null);
+ setPosition(I.BlockPosition.None);
- for (const [ key, value ] of this.objectData) {
+ for (const [ key, value ] of objectData.current) {
const { y, height, dropType } = value;
let { x, width } = value;
@@ -527,11 +502,12 @@ const DragProvider = observer(class DragProvider extends React.Component
};
if ((ex >= x) && (ex <= x + width) && (ey >= y) && (ey <= y + height)) {
- this.setHoverData(value);
+ setHoverData(value);
break;
};
};
+ const hd = hoverData.current;
const dropType = String(data.droptype) || '';
const rootId = String(data.rootid) || '';
const ids = data.ids || [];
@@ -552,24 +528,24 @@ const DragProvider = observer(class DragProvider extends React.Component
let col1 = 0;
let col2 = 0;
- if (this.hoverData) {
- this.canDrop = true;
+ if (hd) {
+ canDrop.current = true;
if (!isFileDrag && (dropType == I.DropType.Block)) {
- this.canDrop = this.checkParentIds(ids, this.hoverData.id);
+ canDrop.current = checkParentIds(ids, hd.id);
};
const initVars = () => {
- x = this.hoverData.x;
- y = this.hoverData.y;
- width = this.hoverData.width;
- height = this.hoverData.height;
- isTargetTop = this.hoverData.isTargetTop;
- isTargetBot = this.hoverData.isTargetBot;
- isTargetCol = this.hoverData.isTargetCol;
- isEmptyToggle = this.hoverData.isEmptyToggle;
-
- obj = $(this.hoverData.obj);
+ x = hd.x;
+ y = hd.y;
+ width = hd.width;
+ height = hd.height;
+ isTargetTop = hd.isTargetTop;
+ isTargetBot = hd.isTargetBot;
+ isTargetCol = hd.isTargetCol;
+ isEmptyToggle = hd.isEmptyToggle;
+
+ obj = $(hd.obj);
type = obj.attr('data-type');
style = Number(obj.attr('data-style')) || 0;
canDropMiddle = Number(obj.attr('data-drop-middle')) || 0;
@@ -582,47 +558,47 @@ const DragProvider = observer(class DragProvider extends React.Component
initVars();
if (ex <= col1) {
- this.setPosition(I.BlockPosition.Left);
+ setPosition(I.BlockPosition.Left);
} else
if ((ex > col1) && (ex <= col2)) {
if (ey <= y + height * 0.3) {
- this.setPosition(I.BlockPosition.Top);
+ setPosition(I.BlockPosition.Top);
} else
if (ey >= y + height * 0.7) {
- this.setPosition(I.BlockPosition.Bottom);
+ setPosition(I.BlockPosition.Bottom);
} else {
- this.setPosition(I.BlockPosition.InnerFirst);
+ setPosition(I.BlockPosition.InnerFirst);
};
} else
if (ex > col2) {
- this.setPosition(I.BlockPosition.Right);
+ setPosition(I.BlockPosition.Right);
};
- if (this.position == I.BlockPosition.Bottom) {
- const targetBot = this.objectData.get(this.hoverData.cacheKey + '-bot');
+ if (position.current == I.BlockPosition.Bottom) {
+ const targetBot = objectData.current.get(hd + '-bot');
if (targetBot) {
- this.setHoverData(targetBot);
+ setHoverData(targetBot);
initVars();
};
};
// canDropMiddle flag for restricted objects
- if ((this.position == I.BlockPosition.InnerFirst) && !canDropMiddle) {
- this.recalcPositionY(ey, y, height);
+ if ((position.current == I.BlockPosition.InnerFirst) && !canDropMiddle) {
+ recalcPositionY(ey, y, height);
};
// Recalc position if dataTransfer items are dragged
- if (isItemDrag && (this.position != I.BlockPosition.None)) {
- this.recalcPositionY(ey, y, height);
+ if (isItemDrag && (position.current != I.BlockPosition.None)) {
+ recalcPositionY(ey, y, height);
};
// You can drop vertically on Layout.Row
if ((type == I.BlockType.Layout) && (style == I.LayoutStyle.Row)) {
if (isTargetTop) {
- this.setPosition(I.BlockPosition.Top);
+ setPosition(I.BlockPosition.Top);
};
if (isTargetBot) {
- this.setPosition(I.BlockPosition.Bottom);
+ setPosition(I.BlockPosition.Bottom);
};
};
@@ -636,92 +612,82 @@ const DragProvider = observer(class DragProvider extends React.Component
I.TextStyle.Callout,
I.TextStyle.Quote,
].includes(style) &&
- (this.position == I.BlockPosition.Bottom)
+ (position.current == I.BlockPosition.Bottom)
) {
- this.setPosition(I.BlockPosition.None);
+ setPosition(I.BlockPosition.None);
};
- if (this.position != I.BlockPosition.None) {
+ if (position.current != I.BlockPosition.None) {
// You can only drop inside of menu items
- if (this.hoverData.dropType == I.DropType.Menu) {
- this.setPosition(I.BlockPosition.InnerFirst);
+ if (hd.dropType == I.DropType.Menu) {
+ setPosition(I.BlockPosition.InnerFirst);
- if (rootId == this.hoverData.targetContextId) {
- this.setPosition(I.BlockPosition.None);
+ if (rootId == hd.targetContextId) {
+ setPosition(I.BlockPosition.None);
};
};
- if (isTargetTop || (this.hoverData.id == 'blockLast')) {
- this.setPosition(I.BlockPosition.Top);
+ if (isTargetTop || (hd.id == 'blockLast')) {
+ setPosition(I.BlockPosition.Top);
};
if (isTargetBot || isTargetCol) {
- this.setPosition(I.BlockPosition.Bottom);
+ setPosition(I.BlockPosition.Bottom);
};
if (isEmptyToggle) {
- this.setPosition(I.BlockPosition.InnerFirst);
+ setPosition(I.BlockPosition.InnerFirst);
};
};
- if ((dropType == I.DropType.Record) && (this.hoverData.dropType == I.DropType.Record) && !canDropMiddle) {
- isReversed ? this.recalcPositionX(ex, x, width) : this.recalcPositionY(ey, y, height);
+ if ((dropType == I.DropType.Record) && (hd.dropType == I.DropType.Record) && !canDropMiddle) {
+ isReversed ? recalcPositionX(ex, x, width) : recalcPositionY(ey, y, height);
};
- if (this.hoverData.dropType == I.DropType.Widget) {
- this.recalcPositionY(ey, y, height);
+ if (hd.dropType == I.DropType.Widget) {
+ recalcPositionY(ey, y, height);
if (isTargetTop) {
- this.setPosition(I.BlockPosition.Top);
+ setPosition(I.BlockPosition.Top);
};
if (isTargetBot) {
- this.setPosition(I.BlockPosition.Bottom);
+ setPosition(I.BlockPosition.Bottom);
};
};
};
- if (this.frame) {
- raf.cancel(this.frame);
+ if (frame.current) {
+ raf.cancel(frame.current);
};
- this.frame = raf(() => {
- this.clearStyle();
- if ((this.position != I.BlockPosition.None) && this.canDrop && this.hoverData) {
- obj.addClass('isOver ' + this.getDirectionClass(this.position));
+ frame.current = raf(() => {
+ clearStyle();
+ if ((position.current != I.BlockPosition.None) && canDrop.current && hd) {
+ obj.addClass(`isOver ${getDirectionClass(position.current)}`);
};
});
};
- recalcPositionY = (ey: number, y: number, height: number) => {
- if (ey <= y + height * 0.5) {
- this.setPosition(I.BlockPosition.Top);
- } else
- if (ey >= y + height * 0.5) {
- this.setPosition(I.BlockPosition.Bottom);
- };
+ const recalcPositionY = (ey: number, y: number, height: number) => {
+ setPosition(ey <= y + height * 0.5 ? I.BlockPosition.Top : I.BlockPosition.Bottom);
};
- recalcPositionX = (ex: number, x: number, width: number) => {
- if (ex <= x + width * 0.5) {
- this.setPosition(I.BlockPosition.Top);
- } else
- if (ex >= x + width * 0.5) {
- this.setPosition(I.BlockPosition.Bottom);
- };
+ const recalcPositionX = (ex: number, x: number, width: number) => {
+ setPosition(ex <= x + width * 0.5 ? I.BlockPosition.Top : I.BlockPosition.Bottom);
};
- setClass (ids: string[]) {
+ const setClass = (ids: string[]) => {
$('.block.isDragging').removeClass('isDragging');
for (const id of ids) {
$('#block-' + id).addClass('isDragging');
};
};
- checkParentIds (ids: string[], id: string): boolean {
+ const checkParentIds = (ids: string[], id: string): boolean => {
const parentIds: string[] = [];
- this.getParentIds(id, parentIds);
+ getParentIds(id, parentIds);
for (const dropId of ids) {
if ((dropId == id) || (parentIds.length && parentIds.includes(dropId))) {
@@ -731,7 +697,7 @@ const DragProvider = observer(class DragProvider extends React.Component
return true;
};
- getParentIds (blockId: string, parentIds: string[]) {
+ const getParentIds = (blockId: string, parentIds: string[]) => {
const rootId = keyboard.getRootId();
const item = S.Block.getMapElement(rootId, blockId);
@@ -740,10 +706,10 @@ const DragProvider = observer(class DragProvider extends React.Component
};
parentIds.push(item.parentId);
- this.getParentIds(item.parentId, parentIds);
+ getParentIds(item.parentId, parentIds);
};
- getDirectionClass (dir: I.BlockPosition) {
+ const getDirectionClass = (dir: I.BlockPosition) => {
let c = '';
switch (dir) {
case I.BlockPosition.None: c = ''; break;
@@ -757,35 +723,53 @@ const DragProvider = observer(class DragProvider extends React.Component
return c;
};
- clearStyle () {
+ const clearStyle = () => {
$('.dropTarget.isOver').removeClass('isOver top bottom left right middle');
};
- clearState () {
- if (this.hoverData) {
- this.setHoverData(null);
+ const clearState = () => {
+ if (hoverData.current) {
+ setHoverData(null);
};
- this.clearStyle();
- this.setPosition(I.BlockPosition.None);
+ clearStyle();
+ setPosition(I.BlockPosition.None);
- this.init = false;
- this.objects = null;
- this.objectData.clear();
+ isInitialised.current = false;
+ objects.current = null;
+ objectData.current.clear();
};
- setHoverData (v: any) {
- this.hoverData = v;
+ const setHoverData = (v: any) => {
+ hoverData.current = v;
};
- setPosition (v: I.BlockPosition) {
- this.position = v;
+ const setPosition = (v: I.BlockPosition) => {
+ position.current = v;
};
- unbind () {
+ const unbind = () => {
$(window).off('drag.drag dragend.drag');
};
-});
-
-export default DragProvider;
+ useImperativeHandle(ref, () => ({
+ onDragStart,
+ onScroll,
+ }));
+
+ return (
+ {
+const DropTarget: FC = ({
+ id = '',
+ rootId = '',
+ cacheKey = '',
+ targetContextId = '',
+ dropType = I.DropType.None,
+ type,
+ style = 0,
+ className = '',
+ canDropMiddle = false,
+ isTargetTop = false,
+ isTargetBottom = false,
+ isTargetColumn = false,
+ isReversed = false,
+ children,
+ onClick,
+ onContextMenu,
+}) => {
- public static defaultProps: Props = {
- id: '',
- rootId: '',
- dropType: I.DropType.None,
- };
+ const key = [ dropType, cacheKey || id ];
+ const cn = [ 'dropTarget', 'isDroppable', `root-${rootId}`, `drop-target-${id}`, className ];
- constructor (props: Props) {
- super(props);
-
- this.onClick = this.onClick.bind(this);
+ if (isTargetTop) {
+ cn.push('targetTop');
+ key.push('top');
};
-
- render () {
- const {
- id, rootId, cacheKey, targetContextId, dropType, type, style, children, className, canDropMiddle, isTargetTop, isTargetBottom, isTargetColumn,
- isReversed, onContextMenu,
- } = this.props;
- const key = [ dropType, cacheKey || id ];
- const cn = [ 'dropTarget', 'isDroppable', 'root-' + rootId, 'drop-target-' + id ];
-
- if (className) {
- cn.push(className);
- };
- if (isTargetTop) {
- cn.push('targetTop');
- key.push('top');
- };
- if (isTargetBottom) {
- cn.push('targetBot');
- key.push('bot');
- };
- if (isTargetColumn) {
- cn.push('targetCol');
- key.push('col');
- };
-
- return (
-
- this.refControls = ref}
key="editorControls"
{...this.props}
@@ -188,8 +187,6 @@ const EditorPage = observer(class EditorPage extends React.Component it.isFocusable());
+ } else {
+ block = S.Block.getLeaf(rootId, J.Constant.blockId.title);
+ };
+
if (block && block.getLength()) {
block = null;
};
@@ -376,7 +382,7 @@ const EditorPage = observer(class EditorPage extends React.Component `${it}.${ns}`).join(' '));
container.off(`scroll.${ns}`);
- Renderer.remove('commandEditor');
+ Renderer.remove(`commandEditor`);
};
rebind () {
@@ -416,7 +422,7 @@ const EditorPage = observer(class EditorPage extends React.Component this.resizePage());
container.on(`scroll.${ns}`, e => this.onScroll());
- Renderer.on('commandEditor', (e: any, cmd: string, arg: any) => this.onCommand(cmd, arg));
+ Renderer.on(`commandEditor`, (e: any, cmd: string, arg: any) => this.onCommand(cmd, arg));
};
onMouseMove (e: any) {
@@ -453,7 +459,7 @@ const EditorPage = observer(class EditorPage extends React.Component {
- if (!menuOpen) {
- selection.clear();
- };
-
- ret = true;
- });
-
+ if (idsWithChildren.length) {
// Mark-up
let type = null;
@@ -656,18 +655,28 @@ const EditorPage = observer(class EditorPage extends React.Component {
- C.BlockTextListSetMark(rootId, ids, { type: newType, param, range: { from: 0, to: 0 } }, () => {
- analytics.event('ChangeTextStyle', { type: newType, count: ids.length });
+ C.BlockTextListSetMark(rootId, idsWithChildren, { type: newType, param, range: { from: 0, to: 0 } }, () => {
+ analytics.event('ChangeTextStyle', { type: newType, count: idsWithChildren.length });
});
- }
- }
+ },
+ },
});
} else {
- C.BlockTextListSetMark(rootId, ids, { type, param, range: { from: 0, to: 0 } }, () => {
- analytics.event('ChangeTextStyle', { type, count: ids.length });
+ C.BlockTextListSetMark(rootId, idsWithChildren, { type, param, range: { from: 0, to: 0 } }, () => {
+ analytics.event('ChangeTextStyle', { type, count: idsWithChildren.length });
});
};
};
+ };
+
+ if (ids.length) {
+ keyboard.shortcut('escape', e, () => {
+ if (!menuOpen) {
+ selection.clear();
+ };
+
+ ret = true;
+ });
// Duplicate
keyboard.shortcut(`${cmd}+d`, e, () => {
@@ -1429,12 +1438,13 @@ const EditorPage = observer(class EditorPage extends React.Component {
-
- render () {
- return ;
- };
+const FooterAuthDisclaimer = forwardRef<{}, I.FooterComponent>(() => {
-};
+ return (
+
+ );
-export default FooterAuthDisclaimer;
+});
+
+export default FooterAuthDisclaimer;
\ No newline at end of file
diff --git a/src/ts/component/footer/auth/index.tsx b/src/ts/component/footer/auth/index.tsx
index ece7c03a4f..78314f7efa 100644
--- a/src/ts/component/footer/auth/index.tsx
+++ b/src/ts/component/footer/auth/index.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
import { I, U } from 'Lib';
-class FooterAuthIndex extends React.Component {
-
- render () {
- return {
-
- refChild: any = null;
-
- constructor (props: Props) {
- super(props);
-
- this.onHelp = this.onHelp.bind(this);
- };
+const Footer = forwardRef<{}, Props>((props, ref) => {
- render () {
- const { component, className } = this.props;
- const Component = Components[component] || null;
- const cn = [ 'footer', component, className ];
-
- return (
-
- );
- };
+ const childRef = useRef(null);
+ const { component, className = '' } = props;
+ const Component = Components[component] || null;
+ const cn = [ 'footer', component, className ];
- componentDidMount () {
- sidebar.resizePage(null, false);
- };
-
- componentDidUpdate () {
- sidebar.resizePage(null, false);
- this.refChild.forceUpdate();
- };
-
- onHelp () {
+ const onHelp = () => {
S.Menu.open('help', {
element: '#footer #button-help',
classNameWrap: 'fixed',
@@ -61,6 +33,18 @@ class Footer extends React.Component {
});
};
-};
+ return (
+
+ );
+
+});
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/src/ts/component/footer/main/object.tsx b/src/ts/component/footer/main/object.tsx
index 88da5db8b2..454d6bfd33 100644
--- a/src/ts/component/footer/main/object.tsx
+++ b/src/ts/component/footer/main/object.tsx
@@ -1,61 +1,61 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
import { observer } from 'mobx-react';
import { PieChart } from 'react-minimal-pie-chart';
import { Icon } from 'Component';
import { I, J, S, Preview, translate } from 'Lib';
-const FooterMainEdit = observer(class FooterMainEdit extends React.Component {
-
- render () {
- const { onHelp } = this.props;
- const { show } = S.Progress;
- const theme = S.Common.getThemeClass();
- const current = S.Progress.getCurrent();
- const total = S.Progress.getTotal();
- const percent = Math.round((current / total) * 100);
- const color = J.Theme[theme].progress;
+const FooterMainObject = observer(forwardRef<{}, I.FooterComponent>((props, ref) => {
- return (
- {
+const SNAP = 0.025;
- public static defaultProps = {
- value: 0,
- min: 0,
- max: 1,
- className: '',
- };
-
- value = null;
- ox = 0;
- nw = 0;
- iw = 0;
- node: any = null;
- back: any = null;
- fill: any = null;
- icon: any = null;
-
- constructor (props: Props) {
- super(props);
-
- this.start = this.start.bind(this);
+const DragHorizontal = forwardRef(({
+ id = '',
+ className = '',
+ value: initalValue = 0,
+ snaps = [],
+ strictSnap = false,
+ onStart,
+ onMove,
+ onEnd,
+}, ref) => {
+ let value = initalValue;
+
+ const nodeRef = useRef(null);
+ const iconRef = useRef(null);
+ const backRef = useRef(null);
+ const fillRef = useRef(null);
+ const cn = [ 'input-drag-horizontal', className ];
+
+ const checkValue = (v: number): number => {
+ v = Number(v) || 0;
+ v = Math.max(0, v);
+ v = Math.min(1, v);
+ return v;
};
-
- render () {
- const { id, className } = this.props;
- const cn = [ 'input-drag-horizontal' ];
- if (className) {
- cn.push(className);
- };
-
- return (
- (({
+interface DragVerticalRefProps {
+ getValue: () => number;
+ setValue: (v: number) => void;
+};
+
+const DragVertical = forwardRef(({
id,
className = '',
- value,
+ value: initialValue = 0,
min = 0,
max = 1,
step = 0.01,
onChange,
onMouseLeave,
onMouseEnter,
-}, forwardedRef) => {
+}, ref) => {
const inputRef = useRef(null);
+ const trackRef = useRef(null);
const divRef = useRef(null);
- useImperativeHandle(forwardedRef, () => divRef.current);
+ const setHeight = (v: number) => {
+ $(trackRef.current).css({ height: `${Math.round(v * 72)}px` });
+ };
const handleChange = (e: ChangeEvent, value: string) => {
+ const v = 1 - Number(value) || 0;
+
e.preventDefault();
e.stopPropagation();
+ setHeight(v);
+
if (onChange) {
- onChange(e, 1 - Number(value) || 0);
+ onChange(e, v);
};
};
+ useImperativeHandle(ref, () => ({
+ getValue: () => inputRef.current?.getValue(),
+ setValue: (v: number) => inputRef.current?.setValue(v),
+ }));
+
+ useEffect(() => {
+ setHeight(initialValue);
+ inputRef.current.setValue(initialValue);
+ }, []);
+
return (
{
-
- _isMounted = false;
- node: any = null;
- refPlaceholder = null;
- refEditable = null;
-
- constructor (props: Props) {
- super(props);
-
- this.onInput = this.onInput.bind(this);
- this.onKeyDown = this.onKeyDown.bind(this);
- this.onKeyUp = this.onKeyUp.bind(this);
- this.onFocus = this.onFocus.bind(this);
- this.onBlur = this.onBlur.bind(this);
- this.onPaste = this.onPaste.bind(this);
- this.onCompositionStart = this.onCompositionStart.bind(this);
- this.onCompositionEnd = this.onCompositionEnd.bind(this);
- };
-
- render () {
- const { id, classNameWrap, classNameEditor, classNamePlaceholder, readonly, placeholder, spellcheck, onSelect, onMouseDown, onMouseUp, onDragStart } = this.props;
- const cnw = [ 'editableWrap' ];
- const cne = [ 'editable' ];
- const cnp = [ 'placeholder' ];
-
- if (classNameWrap) {
- cnw.push(classNameWrap);
- };
-
- if (classNameEditor) {
- cne.push(classNameEditor);
- };
-
- if (classNamePlaceholder) {
- cnp.push(classNamePlaceholder);
- };
-
- let editor = null;
- if (readonly) {
- cne.push('isReadonly');
-
- editor = (
-
{marker ? {
onMouseUp={this.onMouseUp}
onInput={this.onInput}
onDragStart={e => e.preventDefault()}
+ onCompositionEnd={this.onKeyUp}
/>
);
@@ -305,15 +312,14 @@ const BlockText = observer(class BlockText extends React.Component this.node = node}
- id="dragLayer"
- className="dragLayer"
- style={{ width }}
- >
-
-
- );
- };
-
- componentDidMount () {
- this._isMounted = true;
- };
-
- componentDidUpdate () {
- if (!this._isMounted) {
- return;
- };
+ const nodeRef = useRef(null);
- const node = $(this.node);
-
- node.find('.block').attr({ id: '' });
- node.find('.selectionTarget').attr({ id: '' });
-
- this.renderContent();
- };
-
- componentWillUnmount () {
- this._isMounted = false;
- };
-
- show (rootId: string, type: I.DropType, ids: string[], component: any, x: number, y: number) {
- if (!this._isMounted) {
- return;
- };
-
+ const show = (rootId: string, type: I.DropType, ids: string[], component: any) => {
const comp = $(ReactDOM.findDOMNode(component));
const rect = (comp.get(0) as Element).getBoundingClientRect();
-
- this.setState({ rootId, type, width: rect.width - J.Size.blockMenu, ids });
- };
-
- hide () {
- if (this._isMounted) {
- this.setState({ rootId: '', type: I.DropType.None, ids: [], width: 0 });
- };
- };
-
- renderContent () {
- const { rootId, type, ids } = this.state;
- const node = $(this.node);
+ const width = rect.width - J.Size.blockMenu;
+ const node = $(nodeRef.current);
const inner = node.find('#inner').html('');
const container = U.Common.getPageContainer(keyboard.isPopup());
const wrap = $('');
-
+
switch (type) {
case I.DropType.Block: {
wrap.addClass('blocks');
@@ -157,8 +86,31 @@ class DragLayer extends React.Component
+
+
+ );
+
+}));
export default DragLayer;
\ No newline at end of file
diff --git a/src/ts/component/drag/provider.tsx b/src/ts/component/drag/provider.tsx
index 269ab591ec..8d0910fb70 100644
--- a/src/ts/component/drag/provider.tsx
+++ b/src/ts/component/drag/provider.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import $ from 'jquery';
import raf from 'raf';
import { observer } from 'mobx-react';
@@ -10,64 +10,41 @@ interface Props {
children?: React.ReactNode;
};
-const OFFSET = 100;
-
-const DragProvider = observer(class DragProvider extends React.Component this.node = node}
- id="dragProvider"
- className="dragProvider"
- onDragOver={this.onDragOver}
- onDrop={this.onDropCommon}
- >
- this.refLayer = ref} />
- {children}
-
- );
- };
+const OFFSET = 100;
- initData () {
- if (this.init) {
+const DragProvider = observer(forwardRef
+
+ );
+
+}));
+
+export default DragProvider;
\ No newline at end of file
diff --git a/src/ts/component/drag/target.tsx b/src/ts/component/drag/target.tsx
index 6403b09c22..d15e327800 100644
--- a/src/ts/component/drag/target.tsx
+++ b/src/ts/component/drag/target.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { FC } from 'react';
import { I, U } from 'Lib';
interface Props {
@@ -20,75 +20,62 @@ interface Props {
onContextMenu?(e: any): void;
};
-class DropTarget extends React.Component
- {children}
-
- );
+ if (isTargetBottom) {
+ cn.push('targetBot');
+ key.push('bot');
};
-
- onClick (e: any) {
- const { onClick } = this.props;
-
- if (onClick) {
- onClick(e);
- };
+ if (isTargetColumn) {
+ cn.push('targetCol');
+ key.push('col');
};
-
+
+ return (
+
+ {children}
+
+ );
};
export default DropTarget;
\ No newline at end of file
diff --git a/src/ts/component/editor/page.tsx b/src/ts/component/editor/page.tsx
index 907ff170ad..1203606422 100644
--- a/src/ts/component/editor/page.tsx
+++ b/src/ts/component/editor/page.tsx
@@ -3,9 +3,8 @@ import $ from 'jquery';
import raf from 'raf';
import { observer } from 'mobx-react';
import { throttle } from 'lodash';
-import { Icon, Loader, Deleted, DropTarget } from 'Component';
+import { Icon, Loader, Deleted, DropTarget, EditorControls } from 'Component';
import { I, C, S, U, J, Key, Preview, Mark, focus, keyboard, Storage, Action, translate, analytics, Renderer, sidebar } from 'Lib';
-import Controls from 'Component/page/elements/head/controls';
import PageHeadEditor from 'Component/page/elements/head/editor';
import Children from 'Component/page/elements/children';
@@ -98,7 +97,7 @@ const EditorPage = observer(class EditorPage extends React.Component{U.Date.date('Y', U.Date.now())}, Anytype
;
- };
+const FooterAuthIndex = forwardRef<{}, I.FooterComponent>(() => {
-};
+ return (
+ {U.Date.date('Y', U.Date.now())}, Anytype
+ );
+
+});
export default FooterAuthIndex;
\ No newline at end of file
diff --git a/src/ts/component/footer/index.tsx b/src/ts/component/footer/index.tsx
index e501e9d63c..48b4872ec3 100644
--- a/src/ts/component/footer/index.tsx
+++ b/src/ts/component/footer/index.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { I, S, sidebar } from 'Lib';
+import React, { forwardRef, useRef } from 'react';
+import { I, S } from 'Lib';
import FooterAuthIndex from './auth';
import FooterAuthDisclaimer from './auth/disclaimer';
@@ -16,42 +16,14 @@ const Components = {
mainObject: FooterMainObject,
};
-class Footer extends React.Component
- {total ? (
-
- ) : ''}
-
-
- );
- };
+ const { onHelp } = props;
+ const { show } = S.Progress;
+ const theme = S.Common.getThemeClass();
+ const skipState = [ I.ProgressState.Done, I.ProgressState.Canceled ];
+ const skipType = [ I.ProgressType.Migrate ];
+ const list = S.Progress.getList(it => !skipType.includes(it.type) && !skipState.includes(it.state));
+ const percent = S.Progress.getPercent(list);
+ const color = J.Theme[theme].progress;
- onTooltipShow (e: any, text: string, caption?: string) {
+ const onTooltipShow = (e: any, text: string, caption?: string) => {
const t = Preview.tooltipCaption(text, caption);
if (t) {
Preview.tooltipShow({ text: t, element: $(e.currentTarget), typeY: I.MenuDirection.Top });
};
};
-});
+ return (
+
+ {percent ? (
+
+ ) : ''}
+
+
+
+ );
+
+}));
-export default FooterMainEdit;
\ No newline at end of file
+export default FooterMainObject;
\ No newline at end of file
diff --git a/src/ts/component/form/drag/horizontal.tsx b/src/ts/component/form/drag/horizontal.tsx
index 0c555cb04b..1a7a2ec691 100644
--- a/src/ts/component/form/drag/horizontal.tsx
+++ b/src/ts/component/form/drag/horizontal.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import $ from 'jquery';
interface Props {
id?: string;
- className: string;
- value: number;
+ className?: string;
+ value?: number;
snaps?: number[];
strictSnap?: boolean;
onStart?(e: any, v: number): void;
@@ -12,172 +12,160 @@ interface Props {
onEnd?(e: any, v: number): void;
};
-const SNAP = 0.025;
+interface DragHorizontalRefProps {
+ getValue(): number;
+ setValue(v: number): void;
+ resize(): void;
+};
-class DragHorizontal extends React.Component this.node = node}
- id={id}
- className={cn.join(' ')}
- onMouseDown={this.start}
- >
-
-
-
- );
- };
-
- componentDidMount () {
- const node = $(this.node);
-
- this.back = node.find('#back');
- this.fill = node.find('#fill');
- this.icon = node.find('#icon');
- this.setValue(this.props.value);
+ const maxWidth = (): number => {
+ return $(nodeRef.current).width() - $(iconRef.current).width();
};
- setValue (v: number) {
- this.move(this.checkValue(v) * this.maxWidth());
+ const setValue = (v: number) => {
+ move(checkValue(v) * maxWidth());
};
-
- getValue () {
- return this.checkValue(this.value);
+
+ const getValue = () => {
+ return checkValue(value);
};
- resize () {
- this.setValue(this.value);
+ const resize = () => {
+ setValue(value);
};
- start (e: any) {
+ const start = (e: any) => {
e.preventDefault();
e.stopPropagation();
- const { onStart, onMove, onEnd } = this.props;
const win = $(window);
- const node = $(this.node);
- const iw = this.icon.width();
+ const node = $(nodeRef.current);
+ const icon = $(iconRef.current);
+ const iw = icon.width();
const ox = node.offset().left;
- this.move(e.pageX - ox - iw / 2);
+ move(e.pageX - ox - iw / 2);
node.addClass('isDragging');
if (onStart) {
- onStart(e, this.value);
+ onStart(e, value);
};
win.off('mousemove.drag touchmove.drag').on('mousemove.drag touchmove.drag', (e: any) => {
- this.move(e.pageX - ox - iw / 2);
+ move(e.pageX - ox - iw / 2);
if (onMove) {
- onMove(e, this.value);
+ onMove(e, value);
};
});
win.off('mouseup.drag touchend.drag').on('mouseup.drag touchend.drag', (e: any) => {
- this.end(e);
+ end(e);
if (onEnd) {
- onEnd(e, this.value);
+ onEnd(e, value);
};
});
};
-
- move (x: number) {
- const { strictSnap } = this.props;
- const snaps = this.props.snaps || [];
- const node = $(this.node);
+
+ const move = (x: number) => {
+ const node = $(nodeRef.current);
+ const icon = $(iconRef.current);
+ const back = $(backRef.current);
+ const fill = $(fillRef.current);
const nw = node.width();
- const iw = this.icon.width() / 2;
- const ib = parseInt(this.icon.css('border-width'));
- const mw = this.maxWidth();
+ const iw = icon.width() / 2;
+ const ib = parseInt(icon.css('border-width'));
+ const mw = maxWidth();
x = Math.max(0, x);
x = Math.min(mw, x);
- this.value = this.checkValue(x / mw);
+ value = checkValue(x / mw);
// Snap
- if (strictSnap && snaps.length && (this.value < snaps[0] / 2)) {
- this.value = 0;
+ if (strictSnap && snaps.length && (value < snaps[0] / 2)) {
+ value = 0;
} else {
const step = 1 / snaps.length;
for (const snap of snaps) {
const d = strictSnap ? step / 2 : SNAP;
- if ((this.value >= snap - d) && (this.value < snap + d)) {
- this.value = snap;
+ if ((value >= snap - d) && (value < snap + d)) {
+ value = snap;
break;
};
};
};
- x = this.value * mw;
+ x = value * mw;
const w = Math.min(nw, x + iw);
- this.icon.css({ left: x });
- this.back.css({ left: (w + iw + ib), width: (nw - w - iw - ib) });
- this.fill.css({ width: (w - ib) });
+ icon.css({ left: x });
+ back.css({ left: (w + iw + ib), width: (nw - w - iw - ib) });
+ fill.css({ width: (w - ib) });
};
-
- end (e) {
+
+ const end = (e) => {
e.preventDefault();
e.stopPropagation();
- const win = $(window);
- const node = $(this.node);
-
- win.off('mousemove.drag touchmove.drag mouseup.drag touchend.drag');
- node.removeClass('isDragging');
+ $(window).off('mousemove.drag touchmove.drag mouseup.drag touchend.drag');
+ $(nodeRef.current).removeClass('isDragging');
};
- maxWidth () {
- const node = $(this.node);
- return node.width() - this.icon.width();
- };
-
- checkValue (v: number): number {
- v = Number(v) || 0;
- v = Math.max(0, v);
- v = Math.min(1, v);
- return v;
- };
-
-};
+ useEffect(() => setValue(initalValue), []);
+
+ useImperativeHandle(ref, () => ({
+ getValue,
+ setValue,
+ resize,
+ }));
+
+ return (
+
-
-
- e.stopPropagation()}
+ >
+
+
+
+ );
+
+});
export default DragHorizontal;
\ No newline at end of file
diff --git a/src/ts/component/form/drag/vertical.tsx b/src/ts/component/form/drag/vertical.tsx
index c27220ab73..23f1e88161 100644
--- a/src/ts/component/form/drag/vertical.tsx
+++ b/src/ts/component/form/drag/vertical.tsx
@@ -1,4 +1,5 @@
-import React, { useRef, useImperativeHandle, forwardRef, ChangeEvent, MouseEvent } from 'react';
+import React, { useRef, useImperativeHandle, forwardRef, ChangeEvent, MouseEvent, useEffect } from 'react';
+import $ from 'jquery';
import { Input } from 'Component';
interface Props {
@@ -13,31 +14,53 @@ interface Props {
onMouseEnter? (e: MouseEvent): void;
};
-const DragVertical = forwardRef
+
+
+ (({
type="range"
className="vertical-range"
ref={inputRef}
- value={String(value)}
+ value={String(initialValue)}
min={min}
max={max}
step={step}
@@ -61,7 +84,10 @@ const DragVertical = forwardRef(({
}}
/>
-
+
);
});
diff --git a/src/ts/component/form/editable.tsx b/src/ts/component/form/editable.tsx
index c8c029cf70..51b88efff0 100644
--- a/src/ts/component/form/editable.tsx
+++ b/src/ts/component/form/editable.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react';
-import raf from 'raf';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { getRange, setRange } from 'selection-ranges';
import { I, U, keyboard, Mark } from 'Lib';
@@ -26,182 +25,118 @@ interface Props {
onCompositionEnd?: (e: any) => void;
};
-class Editable extends React.Component this.refEditable = ref}
- className={cne.join(' ')}
- contentEditable={true}
- suppressContentEditableWarning={true}
- spellCheck={false}
- onMouseUp={onSelect}
- />
- );
- } else {
- editor = (
-
this.refEditable = ref}
- className={cne.join(' ')}
- contentEditable={true}
- suppressContentEditableWarning={true}
- spellCheck={spellcheck}
- onKeyDown={this.onKeyDown}
- onKeyUp={this.onKeyUp}
- onFocus={this.onFocus}
- onBlur={this.onBlur}
- onSelect={onSelect}
- onPaste={this.onPaste}
- onMouseUp={onMouseUp}
- onInput={this.onInput}
- onDragStart={onDragStart}
- onCompositionStart={this.onCompositionStart}
- onCompositionEnd={this.onCompositionEnd}
- />
- );
- };
-
- return (
- (({
+ id = '',
+ classNameWrap = '',
+ classNameEditor = '',
+ classNamePlaceholder = '',
+ readonly = false,
+ placeholder = '',
+ spellcheck = false,
+ maxLength,
+ onSelect,
+ onMouseDown,
+ onMouseUp,
+ onDragStart,
+ onPaste,
+ onInput,
+ onKeyDown,
+ onKeyUp,
+ onFocus,
+ onBlur,
+ onCompositionStart,
+ onCompositionEnd,
+}, ref) => {
+
+ const nodeRef = useRef(null);
+ const placeholderRef = useRef(null);
+ const editableRef = useRef(null);
+ const cnw = [ 'editableWrap', classNameWrap ];
+ const cne = [ 'editable', classNameEditor ];
+ const cnp = [ 'placeholder', classNamePlaceholder ];
+
+ const placeholderCheck = () => {
+ getTextValue() ? placeholderHide() : placeholderShow();
};
- placeholderSet (v: string) {
- $(this.refPlaceholder).text(v);
+ const placeholderSet = (v: string) => {
+ $(placeholderRef.current).text(v);
};
- placeholderHide () {
- $(this.refPlaceholder).hide();
+ const placeholderHide = () => {
+ $(placeholderRef.current).hide();
};
- placeholderShow () {
- $(this.refPlaceholder).show();
+ const placeholderShow = () => {
+ $(placeholderRef.current).show();
};
- setValue (html: string) {
- $(this.refEditable).get(0).innerHTML = U.Common.sanitize(html);
+ const setValue = (html: string) => {
+ $(editableRef.current).get(0).innerHTML = U.Common.sanitize(html);
};
- getTextValue (): string {
- const obj = Mark.cleanHtml($(this.refEditable).html());
+ const getTextValue = (): string => {
+ const obj = Mark.cleanHtml($(editableRef.current).html());
return String(obj.get(0).innerText || '');
};
- getHtmlValue () : string {
- return String($(this.refEditable).html() || '');
+ const getHtmlValue = (): string => {
+ return String($(editableRef.current).html() || '');
};
- getRange (): I.TextRange {
- const range = getRange($(this.refEditable).get(0) as Element);
+ const getRangeHandler = (): I.TextRange => {
+ const range = getRange($(editableRef.current).get(0) as Element);
return range ? { from: range.start, to: range.end } : null;
};
- setRange (range: I.TextRange) {
- if (!range || !this._isMounted) {
+ const setRangeHandler = (range: I.TextRange) => {
+ if (!range) {
return;
};
- const el = $(this.refEditable).get(0);
+ const el = $(editableRef.current).get(0);
el.focus({ preventScroll: true });
setRange(el, { start: range.from, end: range.to });
};
- onPaste (e: any) {
- const { onPaste } = this.props;
+ const onPasteHandler = (e: any) => {
+ placeholderCheck();
if (onPaste) {
onPaste(e);
};
};
- onInput (e: any) {
- const { onInput } = this.props;
-
- this.placeholderCheck();
+ const onInputHandler = (e: any) => {
+ placeholderCheck();
if (onInput) {
onInput(e);
};
};
- onKeyDown (e: any): void {
+ const onKeyDownHandler = (e: any): void => {
// Chinese IME is open
if (keyboard.isComposition) {
return;
};
- const { maxLength, onKeyDown } = this.props;
-
if (maxLength) {
- const text = this.getTextValue();
+ const text = getTextValue();
if ((text.length >= maxLength) && !keyboard.isSpecial(e) && !keyboard.withCommand(e)) {
e.preventDefault();
@@ -213,49 +148,118 @@ class Editable extends React.Component {
};
};
- onKeyUp (e: any): void {
+ const onKeyUpHandler = (e: any): void => {
// Chinese IME is open
if (keyboard.isComposition) {
return;
};
- if (this.props.onKeyUp) {
- this.props.onKeyUp(e);
+ if (onKeyUp) {
+ onKeyUp(e);
};
};
- onFocus (e: any) {
+ const onFocusHandler = (e: any) => {
keyboard.setFocus(true);
- if (this.props.onFocus) {
- this.props.onFocus(e);
+ if (onFocus) {
+ onFocus(e);
};
};
- onBlur (e: any) {
+ const onBlurHandler = (e: any) => {
keyboard.setFocus(false);
- if (this.props.onBlur) {
- this.props.onBlur(e);
+ if (onBlur) {
+ onBlur(e);
};
};
- onCompositionStart (e: any) {
+ const onCompositionStartHandler = (e: any) => {
keyboard.setComposition(true);
- if (this.props.onCompositionStart) {
- this.props.onCompositionStart(e);
+ if (onCompositionStart) {
+ onCompositionStart(e);
};
};
- onCompositionEnd (e: any) {
+ const onCompositionEndHandler = (e: any) => {
keyboard.setComposition(false);
- if (this.props.onCompositionEnd) {
- this.props.onCompositionEnd(e);
+ if (onCompositionEnd) {
+ onCompositionEnd(e);
};
};
-};
+ let editor = null;
+ if (readonly) {
+ cne.push('isReadonly');
+
+ editor = (
+
+ );
+ } else {
+ editor = (
+
+ );
+ };
+
+ useImperativeHandle(ref, () => ({
+ placeholderCheck,
+ placeholderSet,
+ placeholderHide,
+ placeholderShow,
+ setValue,
+ getTextValue,
+ getHtmlValue,
+ getRange: getRangeHandler,
+ setRange: setRangeHandler,
+ getNode: () => $(nodeRef.current),
+ }), []);
+
+ return (
+ = ({
+ onStepChange,
+ onComplete,
+}) => {
+
+ const checkboxTipsRef = useRef(null);
+ const checkboxNewsRef = useRef(null);
+ const emailRef = useRef(null);
+ const buttonRef = useRef(null);
+ const codeRef = useRef(null);
+ const interval = useRef(0);
+ const timeout = useRef(0);
+ const [ step, setStep ] = useState(0);
+ const [ status, setStatus ] = useState('');
+ const [ statusText, setStatusText ] = useState('');
+ const [ countdown, setCountdown ] = useState(0);
+ const [ email, setEmail ] = useState('');
+ const [ subscribeNews, setSubscribeNews ] = useState(false);
+ const [ subscribeTips, setSubscribeTips ] = useState(false);
+ const [ pinDisabled, setPinDisabled ] = useState(false);
+ const [ showCodeSent, setShowCodeSent ] = useState(false);
+
+ let content = null;
+ let descriptionSuffix = 'Description';
+
+ const onCheck = (ref, type: string) => {
+ if (!ref.current) {
+ return;
+ };
+
+ const val = ref.current.getValue();
+
+ ref.current.toggle();
+
+ if (!val) {
+ analytics.event('ClickEmailCollection', { route: 'OnboardingTooltip', step: 1, type });
+ };
+ };
+
+ const setStepHandler = (newStep: number) => {
+ if (step == newStep) {
+ return;
+ };
+
+ setStep(newStep);
+ onStepChange();
+ analytics.event('EmailCollection', { route: 'OnboardingTooltip', step: newStep });
+ };
+
+ const setStatusAndText = (status: string, statusText: string) => {
+ setStatus(status);
+ setStatusText(statusText);
+ };
+
+ const clearStatus = () => {
+ setStatusAndText('', '');
+ };
+
+ const validateEmail = () => {
+ clearStatus();
+
+ window.clearTimeout(timeout.current);
+ timeout.current = window.setTimeout(() => {
+ const value = emailRef.current?.getValue();
+ const isValid = U.Common.checkEmail(value);
+
+ if (value && !isValid) {
+ setStatusAndText('error', translate('errorIncorrectEmail'));
+ };
+
+ buttonRef.current?.setDisabled(!isValid);
+ }, J.Constant.delay.keyboard);
+ };
+
+ const onSubmitEmail = (e: any) => {
+ e.preventDefault();
+
+ if (!buttonRef.current || !emailRef.current) {
+ return;
+ };
+
+ if (buttonRef.current.isDisabled()) {
+ return;
+ };
+
+ analytics.event('ClickEmailCollection', { route: 'OnboardingTooltip', step: 1, type: 'SignUp' });
+
+ setEmail(emailRef.current?.getValue());
+ setSubscribeNews(checkboxNewsRef.current?.getValue());
+ setSubscribeTips(checkboxTipsRef.current?.getValue());
+ };
+
+ const verifyEmail = () => {
+ buttonRef.current?.setLoading(true);
+
+ C.MembershipGetVerificationEmail(email, subscribeNews, subscribeTips, true, (message) => {
+ buttonRef.current?.setLoading(false);
+
+ if (message.error.code) {
+ setStatusAndText('error', message.error.description);
+ return;
+ };
+
+ setStepHandler(1);
+ startCountdown(60);
+ });
+ };
+
+ const onConfirmEmailCode = () => {
+ const code = codeRef.current?.getValue();
+
+ setPinDisabled(true);
+
+ C.MembershipVerifyEmailCode(code, (message) => {
+ if (message.error.code) {
+ setStatusAndText('error', message.error.description);
+ setPinDisabled(false);
+ codeRef.current?.reset();
+ return;
+ };
+
+ setStepHandler(2);
+ });
+ };
+
+ const onResend = (e: any) => {
+ e.preventDefault();
+
+ if (countdown) {
+ return;
+ };
+
+ verifyEmail();
+ analytics.event('ClickEmailCollection', { route: 'OnboardingTooltip', step: 2, type: 'Resend' });
+ };
+
+ const startCountdown = (s: number) => {
+ const { emailConfirmationTime } = S.Common;
+
+ if (!emailConfirmationTime) {
+ S.Common.emailConfirmationTimeSet(U.Date.now());
+ };
+
+ setCountdown(s);
+ setShowCodeSent(true);
+ window.setTimeout(() => setShowCodeSent(false), 2000);
+ };
+
+ const tick = () => {
+ window.clearTimeout(interval.current);
+ interval.current = window.setTimeout(() => setCountdown(countdown => countdown - 1), 1000);
+ };
+
+ const clear = () => {
+ window.clearTimeout(timeout.current);
+ timeout.current = window.setTimeout(() => clearStatus(), 4000);
+ };
+
+ useEffect(() => {
+ buttonRef.current?.setDisabled(true);
+ analytics.event('EmailCollection', { route: 'OnboardingTooltip', step: 1 });
+
+ return () => {
+ window.clearTimeout(timeout.current);
+ window.clearTimeout(interval.current);
+ };
+ });
+
+ useEffect(() => {
+ if (interval.current) {
+ tick();
+ };
+ }, [ showCodeSent ]);
+
+ useEffect(() => {
+ if (status || statusText) {
+ clear();
+ };
+ }, [ status, statusText ]);
+
+ useEffect(() => {
+ if (timeout.current) {
+ clear();
+ };
+ }, [ pinDisabled ]);
+
+ useEffect(() => {
+ if (email) {
+ verifyEmail();
+ };
+ }, [ email, subscribeNews, subscribeTips ]);
+
+ useEffect(() => {
+ if (countdown) {
+ tick();
+ } else {
+ window.clearTimeout(interval.current);
+ S.Common.emailConfirmationTimeSet(0);
+ };
+ }, [ countdown ]);
+
+ switch (step) {
+ case 0: {
+ content = (
+ {
-
- public static defaultProps = {
- className: '',
- inputClassName: '',
- tooltipY: I.MenuDirection.Bottom,
+const Filter = forwardRef(({
+ id = '',
+ className = '',
+ inputClassName = '',
+ icon = '',
+ value = '',
+ placeholder = translate('commonFilterClick'),
+ placeholderFocus = '',
+ tooltip = '',
+ tooltipCaption = '',
+ tooltipX = I.MenuDirection.Center,
+ tooltipY = I.MenuDirection.Bottom,
+ focusOnMount = false,
+ onClick,
+ onFocus,
+ onBlur,
+ onKeyDown,
+ onKeyUp,
+ onChange,
+ onSelect,
+ onClear,
+ onIconClick,
+}, ref) => {
+ const nodeRef = useRef(null);
+ const inputRef = useRef(null);
+ const placeholderRef = useRef(null);
+ const [ isFocused, setIsFocused ] = useState(false);
+ const [ isActive, setIsActive ] = useState(false);
+ const cn = [ 'filter', className ];
+
+ if (isFocused) {
+ cn.push('isFocused');
};
- state = {
- isActive: false,
- };
-
- node: any = null;
- isFocused = false;
- placeholder: any = null;
- ref = null;
-
- constructor (props: Props) {
- super(props);
-
- this.onFocus = this.onFocus.bind(this);
- this.onBlur = this.onBlur.bind(this);
- this.onChange = this.onChange.bind(this);
- this.onClear = this.onClear.bind(this);
- this.onKeyDown = this.onKeyDown.bind(this);
- this.onKeyUp = this.onKeyUp.bind(this);
- this.onInput = this.onInput.bind(this);
+ if (isActive) {
+ cn.push('isActive');
};
-
- render () {
- const { isActive } = this.state;
- const { id, value, icon, tooltip, tooltipCaption, tooltipX, tooltipY, placeholder = translate('commonFilterClick'), className, inputClassName, focusOnMount, onKeyDown, onKeyUp, onClick, onIconClick } = this.props;
- const cn = [ 'filter' ];
-
- if (className) {
- cn.push(className);
- };
- if (isActive) {
- cn.push('isActive');
- };
-
- let iconObj = null;
- if (icon) {
- iconObj = (
- {
};
};
- onBlur (e: any) {
- const { placeholderFocus, placeholder, onBlur } = this.props;
-
- this.isFocused = false;
- this.removeFocusedClass();
+ const onBlurHandler = (e: any) => {
+ setIsFocused(false);
if (placeholderFocus) {
- this.placeholderSet(placeholder);
+ placeholderSet(placeholder);
};
if (onBlur) {
@@ -177,122 +121,161 @@ class Filter extends React.Component {
};
};
- onInput () {
- this.placeholderCheck();
- };
-
- addFocusedClass () {
- this.addClass('isFocused');
- };
-
- removeFocusedClass () {
- this.removeClass('isFocused');
- };
-
- addClass (c: string) {
- $(this.node).addClass(c);
- };
-
- removeClass (c: string) {
- $(this.node).removeClass(c);
- };
-
- setActive (v: boolean) {
- this.setState({ isActive: v });
+ const onSelectHandler = (e: any) => {
+ if (onSelect) {
+ onSelect(e);
+ };
};
- onClear (e: any) {
+ const onClearHandler = (e: any) => {
e.preventDefault();
e.stopPropagation();
- const { onClear } = this.props;
-
- this.ref.setValue('');
- this.ref.focus();
- this.onChange(e, '');
-
+ inputRef.current.setValue('');
+ inputRef.current.focus();
+
+ onChangeHandler(e, '');
if (onClear) {
onClear();
};
};
- onChange (e: any, v: string) {
+ const onChangeHandler = (e: any, v: string) => {
// Chinese IME is open
if (keyboard.isComposition) {
return;
};
- this.checkButton();
+ resize();
- if (this.props.onChange) {
- this.props.onChange(v);
+ if (onChange) {
+ onChange(v);
};
};
- onKeyDown (e: any, v: string): void {
+ const onKeyDownHandler = (e: any, v: string): void => {
// Chinese IME is open
if (keyboard.isComposition) {
return;
};
- if (this.props.onKeyDown) {
- this.props.onKeyDown(e, v);
+ buttonCheck();
+
+ if (onKeyDown) {
+ onKeyDown(e, v);
};
};
- onKeyUp (e: any, v: string): void {
+ const onKeyUpHandler = (e: any, v: string): void => {
// Chinese IME is open
if (keyboard.isComposition) {
return;
};
- if (this.props.onKeyUp) {
- this.props.onKeyUp(e, v);
+ buttonCheck();
+
+ if (onKeyUp) {
+ onKeyUp(e, v);
};
};
- checkButton () {
- $(this.node).toggleClass('active', !!this.getValue());
- this.placeholderCheck();
+ const buttonCheck = () => {
+ $(nodeRef.current).toggleClass('active', Boolean(getValue()));
+ placeholderCheck();
};
- setValue (v: string) {
- this.ref.setValue(v);
- this.checkButton();
+ const getValue = () => {
+ return inputRef.current?.getValue();
};
- getValue () {
- return this.ref.getValue();
+ const getRange = (): I.TextRange => {
+ return inputRef.current.getRange();
};
- getRange () {
- return this.ref.getRange();
+ const setRange = (range: I.TextRange) => {
+ inputRef.current.setRange(range);
};
- setRange (range: I.TextRange) {
- this.ref.setRange(range);
+ const placeholderCheck = () => {
+ getValue() ? placeholderHide() : placeholderShow();
};
- placeholderCheck () {
- this.getValue() ? this.placeholderHide() : this.placeholderShow();
+ const placeholderSet = (v: string) => {
+ $(placeholderRef.current).text(v);
+ };
+
+ const placeholderHide = () => {
+ $(placeholderRef.current).hide();
};
- placeholderSet (v: string) {
- this.placeholder.text(v);
+ const placeholderShow = () => {
+ $(placeholderRef.current).show();
};
-
- placeholderHide () {
- this.placeholder.hide();
+
+ const resize = () => {
+ const ref = $(placeholderRef.current);
+ ref.css({ lineHeight: ref.height() + 'px' });
};
- placeholderShow () {
- this.placeholder.show();
+ const init = () => {
+ buttonCheck();
+ resize();
};
- resize () {
- this.placeholder.css({ lineHeight: this.placeholder.height() + 'px' });
+ useEffect(() => init());
+
+ useImperativeHandle(ref, () => ({
+ focus,
+ blur,
+ setActive: v => setIsActive(v),
+ isFocused: () => isFocused,
+ setValue: (v: string) => inputRef.current.setValue(v),
+ getValue,
+ getRange,
+ setRange,
+ }));
+
+ const val = getValue();
+
+ if (val) {
+ cn.push('active');
};
-};
+ return (
+ (({
};
const focus = () => {
- inputRef.current?.focus({ preventScroll: true })
+ inputRef.current?.focus({ preventScroll: true });
};
- useEffect(() => {
- if (maskOptions && inputRef.current) {
- new Inputmask(maskOptions.mask, maskOptions).mask($(inputRef.current).get(0));
- };
-
- if (focusOnMount && inputRef.current) {
- focus();
- };
-
- return () => {
- if (isFocused.current) {
- keyboard.setFocus(false);
- keyboard.disableSelection(false);
- };
- };
- }, [ maskOptions, focusOnMount ]);
-
- useImperativeHandle(ref, () => ({
- focus,
- blur: () => inputRef.current?.blur(),
- select: () => inputRef.current?.select(),
- setValue: (v: string) => setValue(String(v || '')),
- getValue: () => String(value || ''),
- setType: (v: string) => setInputType(v),
- setError: (hasError: boolean) => $(inputRef.current).toggleClass('withError', hasError),
- getSelectionRect,
- setPlaceholder: (placeholder: string) => $(inputRef.current).attr({ placeholder }),
- setRange: (range: I.TextRange) => {
- callWithTimeout(() => {
- focus();
- inputRef.current?.setSelectionRange(range.from, range.to);
- });
- },
- getRange: (): I.TextRange | null => rangeRef.current,
- }));
-
const handleEvent = (
handler: ((e: any, value: string) => void) | undefined,
- e: React.SyntheticEvent
+ e: SyntheticEvent
) => {
- let val = null;
- if (e.currentTarget) {
- val = e.currentTarget.value;
- } else
- if (e.target) {
- val = String($(e.target).val());
- };
-
- if (val === null) {
- console.log('[Input Event] No value to handle!');
- return;
- };
- handler?.(e, val);
+ handler?.(e, String($(e.target || e.currentTarget).val() || ''));
};
- const handleChange = (e: React.ChangeEvent) => {
+ const handleChange = (e: ChangeEvent) => {
setValue(e.target.value);
handleEvent(onChange, e);
};
- const handleKeyUp = (e: React.KeyboardEvent) => {
- if ($(inputRef.current).hasClass('disabled')) return;
+ const handleKeyUp = (e: KeyboardEvent) => {
+ if ($(inputRef.current).hasClass('disabled')) {
+ return;
+ };
+
handleEvent(onKeyUp, e);
};
- const handleKeyDown = (e: React.KeyboardEvent) => {
- if ($(inputRef.current).hasClass('disabled')) return;
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if ($(inputRef.current).hasClass('disabled')) {
+ return;
+ };
+
handleEvent(onKeyDown, e);
};
- const handleInput = (e: React.FormEvent) => {
+ const handleInput = (e: FormEvent) => {
handleEvent(onInput, e);
};
- const handleFocus = (e: React.FocusEvent) => {
+ const handleFocus = (e: FocusEvent) => {
+ if (readonly) {
+ return;
+ };
+
isFocused.current = true;
addClass('isFocused');
keyboard.setFocus(true);
@@ -185,7 +149,11 @@ const Input = forwardRef(({
handleEvent(onFocus, e);
};
- const handleBlur = (e: React.FocusEvent) => {
+ const handleBlur = (e: FocusEvent) => {
+ if (readonly) {
+ return;
+ };
+
isFocused.current = false;
removeClass('isFocused');
keyboard.setFocus(false);
@@ -193,7 +161,7 @@ const Input = forwardRef(({
handleEvent(onBlur, e);
};
- const handlePaste = (e: React.ClipboardEvent) => {
+ const handlePaste = (e: ClipboardEvent) => {
e.persist();
callWithTimeout(() => {
updateRange(e);
@@ -201,7 +169,7 @@ const Input = forwardRef(({
});
};
- const handleCut = (e: React.ClipboardEvent) => {
+ const handleCut = (e: ClipboardEvent) => {
e.persist();
callWithTimeout(() => {
updateRange(e);
@@ -209,7 +177,7 @@ const Input = forwardRef(({
});
};
- const handleSelect = (e: React.SyntheticEvent) => {
+ const handleSelect = (e: SyntheticEvent) => {
updateRange(e);
handleEvent(onSelect, e);
};
@@ -219,9 +187,11 @@ const Input = forwardRef(({
onCompositionStart?.();
};
- const handleCompositionEnd = () => {
+ const handleCompositionEnd = (e) => {
keyboard.setComposition(false);
onCompositionEnd?.();
+
+ handleChange(e);
};
const addClass = (className: string) => {
@@ -277,6 +247,46 @@ const Input = forwardRef(({
return rect;
};
+ useEffect(() => setValue(initialValue), []);
+
+ useEffect(() => {
+ if (maskOptions && inputRef.current) {
+ new Inputmask(maskOptions.mask, maskOptions).mask($(inputRef.current).get(0));
+ };
+
+ if (focusOnMount && inputRef.current) {
+ focus();
+ };
+
+ return () => {
+ if (isFocused.current) {
+ keyboard.setFocus(false);
+ keyboard.disableSelection(false);
+ };
+ };
+ }, [ maskOptions, focusOnMount ]);
+
+ useEffect(() => onChange?.($.Event('change'), value), [ value ]);
+
+ useImperativeHandle(ref, () => ({
+ focus,
+ blur: () => inputRef.current?.blur(),
+ select: () => inputRef.current?.select(),
+ setValue: (v: string) => setValue(String(v || '')),
+ getValue: () => String(value || ''),
+ setType: (v: string) => setInputType(v),
+ setError: (hasError: boolean) => $(inputRef.current).toggleClass('withError', hasError),
+ getSelectionRect,
+ setPlaceholder: (placeholder: string) => $(inputRef.current).attr({ placeholder }),
+ setRange: (range: I.TextRange) => {
+ callWithTimeout(() => {
+ focus();
+ inputRef.current?.setSelectionRange(range.from, range.to);
+ });
+ },
+ getRange: (): I.TextRange | null => rangeRef.current,
+ }));
+
return (
{
-
- public static defaultProps = {
- withFile: true,
- canResize: true,
- };
-
- _isMounted = false;
- node: any = null;
- state = {
- focused: false,
- size: Size.Full,
- };
- t = 0;
- refUrl: any = null;
-
- constructor (props: Props) {
- super(props);
-
- this.onSubmit = this.onSubmit.bind(this);
- this.onFocus = this.onFocus.bind(this);
- this.onBlur = this.onBlur.bind(this);
- this.onClickFile = this.onClickFile.bind(this);
+const InputWithFile: FC = ({
+ icon = '',
+ textUrl = translate('inputWithFileTextUrl'),
+ textFile = '',
+ withFile = true,
+ accept,
+ block,
+ readonly = false,
+ canResize = true,
+ onChangeUrl,
+ onChangeFile,
+}) => {
+
+ const [ isFocused, setIsFocused ] = useState(false);
+ const [ size, setSize ] = useState(Size.Full);
+ const nodeRef = useRef(null);
+ const urlRef = useRef(null);
+ const timeout = useRef(0);
+ const cn = [ 'inputWithFile', 'resizable' ];
+ const or = ` ${translate('commonOr')} `;
+ const isSmall = size == Size.Small;
+ const isIcon = size == Size.Icon;
+
+ let placeholder = textUrl;
+ let onClick = null;
+
+ if (!withFile) {
+ cn.push('noFile');
};
- render () {
- const { focused, size } = this.state;
- const { icon, textUrl = translate('inputWithFileTextUrl'), textFile, withFile, readonly } = this.props;
- const cn = [ 'inputWithFile', 'resizable' ];
- const or = ` ${translate('commonOr')} `;
- const onBlur = focused ? this.onBlur : null;
- const onFocus = !focused ? this.onFocus : null;
- const isSmall = size == Size.Small;
- const isIcon = size == Size.Icon;
-
- let placeholder = textUrl;
- let onClick = null;
-
- if (!withFile) {
- cn.push('noFile');
- };
-
- if (isSmall) {
- cn.push('isSmall');
- };
-
- if (readonly) {
- cn.push('isReadonly');
- };
-
- if (isIcon) {
- cn.push('isIcon');
- onClick = e => this.onClickFile(e);
- };
-
- if (focused) {
- cn.push('isFocused');
- };
-
- if (withFile && focused) {
- placeholder += or + (!isSmall ? textFile : '');
- };
-
- return (
- {
}, force ? 50 : J.Constant.delay.keyboard);
};
- onClickFile (e: any) {
- const { onChangeFile, accept, readonly } = this.props;
-
+ const onClickFile = (e: any) => {
e.preventDefault();
e.stopPropagation();
@@ -267,11 +162,77 @@ class InputWithFile extends React.Component {
});
};
- onSubmit (e: any) {
+ const onSubmit = (e: any) => {
e.preventDefault();
- this.onChangeUrl(e, true);
+ onChangeUrlHandler(e, true);
};
+
+ const onBlur = isFocused ? onBlurHandler : null;
+ const onFocus = !isFocused ? onFocusHandler : null;
+
+ useEffect(() => {
+ resize();
+ rebind();
+
+ return () => {
+ const { focused } = focus.state;
+
+ unbind();
+
+ if (focused == block.id) {
+ keyboard.setFocus(false);
+ };
+ };
+ }, []);
+
+ useEffect(() => {
+ resize();
+ rebind();
+
+ if (isFocused) {
+ keyboard.setFocus(true);
+ urlRef.current?.focus();
+ focus.set(block.id, { from: 0, to: 0 });
+ };
+
+ }, [ isFocused, size ]);
+ return (
+ {
-
- node: any = null;
- isFocused = false;
- placeholder: any = null;
- ref = null;
-
- constructor (props: Props) {
- super(props);
-
- this.onFocus = this.onFocus.bind(this);
- this.onBlur = this.onBlur.bind(this);
- };
-
- render () {
- const { label } = this.props;
-
- return (
- ((props, ref) => {
+ const {
+ label = '',
+ value = '',
+ readonly = false,
+ onFocus,
+ onBlur,
+ } = props;
+
+ const nodeRef = useRef(null);
+ const inputRef = useRef(null);
+ const [ isFocused, setIsFocused ] = useState(false);
+ const cn = [ 'inputWithLabel' ];
+
+ if (isFocused) {
+ cn.push('isFocused');
};
- focus () {
- this.ref.focus();
+ const focus = () => {
+ inputRef.current?.focus();
};
- blur () {
- this.ref.blur();
+ const blur = () => {
+ inputRef.current?.blur();
};
- setValue (v: string) {
- this.ref.setValue(v);
+ const setValue = (v: string) => {
+ inputRef.current?.setValue(v);
};
- getValue () {
- return this.ref.getValue();
+ const getValue = () => {
+ return inputRef.current?.getValue();
};
- setRange (range: I.TextRange) {
- this.ref.setRange(range);
+ const setRange = (range: I.TextRange) => {
+ inputRef.current?.setRange(range);
};
- onFocus (e: any) {
- const { onFocus, readonly } = this.props;
-
+ const onFocusHandler = (e: any) => {
if (!readonly) {
- this.isFocused = true;
- this.addFocusedClass();
+ setIsFocused(true);
};
if (onFocus) {
@@ -93,12 +72,9 @@ class InputWithLabel extends React.Component {
};
};
- onBlur (e: any) {
- const { onBlur, readonly } = this.props;
-
+ const onBlurHandler = (e: any) => {
if (!readonly) {
- this.isFocused = false;
- this.removeFocusedClass();
+ setIsFocused(false);
};
if (onBlur) {
@@ -106,16 +82,37 @@ class InputWithLabel extends React.Component {
};
};
- addFocusedClass () {
- const node = $(this.node);
- node.addClass('isFocused');
- };
+ useEffect(() => inputRef.current.setValue(value), []);
+
+ useImperativeHandle(ref, () => ({
+ focus,
+ blur,
+ setValue,
+ getValue,
+ setRange,
+ isFocused: () => isFocused,
+ }));
+
+ return (
+ {
-
- public static defaultProps: Props = {
- value: '',
- className: '',
- };
-
- state: State = {
- isHidden: true,
- hasError: false,
- phrase: [],
- };
-
- node = null;
- refEntry = null;
- refPlaceholder = null;
- range = null;
-
- constructor (props: Props) {
- super(props);
-
- this.onSelect = this.onSelect.bind(this);
- this.onClick = this.onClick.bind(this);
- this.onKeyDown = this.onKeyDown.bind(this);
- this.onKeyUp = this.onKeyUp.bind(this);
- this.onPaste = this.onPaste.bind(this);
- this.onFocus = this.onFocus.bind(this);
- this.onBlur = this.onBlur.bind(this);
- this.onToggle = this.onToggle.bind(this);
- };
-
- render () {
- const { readonly, className, onCopy, placeholder } = this.props;
- const { isHidden, hasError, phrase } = this.state;
- const cn = [ 'phraseWrapper', className ];
-
- if (isHidden) {
- cn.push('isHidden');
- };
-
- if (hasError) {
- cn.push('hasError');
- };
-
- if (readonly) {
- cn.push('isReadonly');
- };
-
- const renderWord = (word: string, index: number) => {
- const color = COLORS[index % COLORS.length];
- const cn = isHidden ? `bg bg-${color}` : `textColor textColor-${color}`;
-
- return {word};
- };
-
- let placeholderEl = null;
- if (placeholder) {
- placeholderEl = (
- (({
+ value = '',
+ className = '',
+ readonly = false,
+ isHidden: initialHidden = false,
+ checkPin = false,
+ placeholder = '',
+ onKeyDown,
+ onChange,
+ onToggle,
+ onCopy,
+ onClick,
+}, ref) => {
+
+ const [ isHidden, setIsHidden ] = useState(false);
+ const [ hasError, setHasError ] = useState(false);
+ const [ dummy, setDummy ] = useState(0);
+ const placeholderRef = useRef(null);
+ const entryRef = useRef(null);
+ const range = useRef(null);
+ const phrase = useRef([]);
+ const cn = [ 'phraseWrapper', className ];
+
+ if (isHidden) {
+ cn.push('isHidden');
};
- componentDidMount () {
- const { value, isHidden } = this.props;
-
- this.setState({ isHidden });
- this.setValue(value);
- this.focus();
+ if (hasError) {
+ cn.push('hasError');
};
- componentDidUpdate () {
- this.placeholderCheck();
+ if (readonly) {
+ cn.push('isReadonly');
};
- onClick (e: any) {
- this.focus();
+ const onClickHandler = (e: any) => {
+ focus();
- if (this.props.onClick) {
- this.props.onClick(e);
+ if (onClick) {
+ onClick(e);
};
};
- onKeyDown (e: React.KeyboardEvent) {
- const { onKeyDown } = this.props;
- const entry = $(this.refEntry);
+ const onKeyDownHandler = (e: React.KeyboardEvent) => {
+ const entry = $(entryRef.current);
keyboard.shortcut('space, enter', e, () => {
e.preventDefault();
- this.updateValue();
+ updateValue();
});
keyboard.shortcut('backspace', e, () => {
@@ -173,69 +96,70 @@ class Phrase extends React.Component {
e.preventDefault();
- this.setState(({ phrase }) => {
- phrase.pop();
- return { phrase };
- });
+ phrase.current.pop();
+ setDummy(dummy + 1);
});
- this.placeholderCheck();
+ placeholderCheck();
if (onKeyDown) {
onKeyDown(e);
};
};
- onKeyUp (e: React.KeyboardEvent) {
- this.placeholderCheck();
+ const onKeyUp = (e: React.KeyboardEvent) => {
+ placeholderCheck();
};
- updateValue () {
- const value = this.getEntryValue();
+ const updateValue = () => {
+ const value = getEntryValue();
if (!value.length) {
return;
};
- this.clear();
+ clear();
- this.state.phrase = this.checkValue(this.state.phrase.concat([ value ]));
- this.setState({ phrase: this.state.phrase });
+ phrase.current = checkValue(phrase.current.concat(value.split(' ')));
+ setDummy(dummy + 1);
};
- onPaste (e) {
+ const onPaste = (e) => {
e.preventDefault();
const cb = e.clipboardData || e.originalEvent.clipboardData;
- const text = this.normalizeWhiteSpace(cb.getData('text/plain'));
+ const text = normalizeWhiteSpace(cb.getData('text/plain'));
+
+ clear();
+ phrase.current = checkValue(phrase.current.concat(text.split(' ')));
+
+ if (text) {
+ placeholderHide();
+ };
- this.clear();
- this.setState(({ phrase }) => ({ phrase: this.checkValue(phrase.concat(text.split(' '))) }));
+ setDummy(dummy + 1);
};
- onBlur () {
- this.placeholderCheck();
+ const onBlur = () => {
+ placeholderCheck();
};
- onFocus () {
- this.placeholderCheck();
+ const onFocus = () => {
+ placeholderCheck();
};
- onSelect () {
- const node = $(this.node);
- const entry = node.find('#entry');
+ const onSelect = () => {
+ const entry = $(entryRef.current);
if (entry.length) {
- this.range = getRange(entry.get(0));
+ range.current = getRange(entry.get(0));
};
};
- onToggle () {
- const { checkPin, onToggle } = this.props;
- const { isHidden } = this.state;
+ const onToggleHandler = () => {
const pin = Storage.getPin();
const onSuccess = () => {
- this.setState({ isHidden: !isHidden });
+ setIsHidden(!isHidden);
if (onToggle) {
onToggle(!isHidden);
@@ -249,56 +173,118 @@ class Phrase extends React.Component {
};
};
- checkValue (v: string[]) {
+ const checkValue = (v: string[]) => {
return v.map(it => it.substring(0, J.Constant.count.phrase.letter)).filter(it => it).slice(0, J.Constant.count.phrase.word);
};
- setError (v: boolean) {
- this.setState({ hasError: v });
+ const setError = (v: boolean) => {
+ setHasError(v);
};
- focus () {
- const entry = $(this.refEntry);
+ const focus = () => {
+ if (readonly) {
+ return;
+ };
+
+ const entry = $(entryRef.current);
entry.trigger('focus');
- setRange(entry.get(0), this.range || { start: 0, end: 0 });
+ setRange(entry.get(0), range.current || { start: 0, end: 0 });
};
- clear () {
- $(this.refEntry).text('');
+ const clear = () => {
+ $(entryRef.current).text('');
};
- getEntryValue () {
- return this.normalizeWhiteSpace($(this.refEntry).text()).toLowerCase();
+ const getEntryValue = () => {
+ return normalizeWhiteSpace($(entryRef.current).text()).toLowerCase();
};
- normalizeWhiteSpace = (val: string) => {
+ const normalizeWhiteSpace = (val: string) => {
return String(val || '').replace(/\s\s+/g, ' ').trim() || '';
};
- setValue (value: string) {
- const text = this.normalizeWhiteSpace(value);
- const phrase = text.length ? text.split(' '): [];
+ const setValue = (value: string) => {
+ const text = normalizeWhiteSpace(value);
- this.setState({ phrase });
+ phrase.current = text.length ? text.split(' '): [];
+ setDummy(dummy + 1);
};
- getValue () {
- return this.state.phrase.join(' ').trim().toLowerCase();
+ const getValue = () => {
+ return phrase.current.join(' ').trim().toLowerCase();
};
- placeholderCheck () {
- this.getValue().length || this.getEntryValue() ? this.placeholderHide() : this.placeholderShow();
+ const placeholderCheck = () => {
+ getValue().length || getEntryValue() ? placeholderHide() : placeholderShow();
};
- placeholderHide () {
- $(this.refPlaceholder).hide();
+ const placeholderHide= () => {
+ $(placeholderRef.current).hide();
};
- placeholderShow () {
- $(this.refPlaceholder).show();
+ const placeholderShow = () => {
+ $(placeholderRef.current).show();
};
-};
+ useEffect(() => {
+ setIsHidden(initialHidden);
+ setValue(value);
+ focus();
+ }, []);
+
+ useEffect(() => {
+ placeholderCheck();
+ }, [ phrase ]);
+
+ useImperativeHandle(ref, () => ({
+ setValue,
+ getValue,
+ setError,
+ focus,
+ onToggle: onToggleHandler,
+ }));
+
+ return (
+ {
-
- public static defaultProps = {
- pinLength: 6,
- expectedPin: null,
- focusOnMount: true,
- isVisible: false,
- isNumeric: false,
- };
-
- state = {
- index: 0,
- };
-
- inputRefs = [];
-
- // This timeout is used so that the input boxes first show the inputted value as text, then hides it as password showing (•)
- timeout = 0;
-
- render () {
- const { pinLength, isNumeric, readonly } = this.props;
- const props: any = {
- maxLength: 1,
- onKeyUp: this.onInputKeyUp,
- readonly,
- };
-
- if (isNumeric) {
- props.inputMode = 'numeric';
- };
+const Pin = forwardRef(({
+ isNumeric = false,
+ pinLength = 6,
+ expectedPin = null,
+ focusOnMount = true,
+ isVisible = false,
+ readonly = false,
+ onSuccess = () => {},
+ onError = () => {},
+}, ref) => {
- return (
- {
};
};
- onInputKeyUp = () => {
- const { pinLength } = this.props;
-
- if (this.getValue().length === pinLength) {
- this.check();
+ const onInputKeyUp = () => {
+ if (getValue().length === pinLength) {
+ check();
};
};
- onInputChange = (index: number, value: string) => {
- const { isVisible, isNumeric } = this.props;
- const input = this.inputRefs[index];
- const next = this.inputRefs[index + 1];
+ const onInputChange = (index: number, value: string) => {
+ const input = inputRefs.current[index];
+ const next = inputRefs.current[index + 1];
let newValue = value;
if (isNumeric) {
@@ -196,29 +142,70 @@ class Pin extends React.Component {
};
if (!isVisible) {
- this.timeout = window.setTimeout(() => input.setType('password'), TIMEOUT_DURATION);
+ window.setTimeout(() => input.setType('password'), TIMEOUT_DURATION);
};
};
- async onPaste (e: any, index: number) {
+ const onPaste = async (e: any, index: number) => {
e.preventDefault();
- const { pinLength } = this.props;
const text = await navigator.clipboard.readText();
const value = String(text || '').split('');
for (let i = index; i < pinLength; i++) {
- const input = this.inputRefs[i];
+ const input = inputRefs.current[i];
const char = value[i - index] || '';
input.setValue(char);
input.setType('text');
};
- this.inputRefs[pinLength - 1].focus();
- this.check();
+ inputRefs.current[pinLength - 1].focus();
+ check();
};
-};
+ useImperativeHandle(ref, () => ({
+ clear,
+ reset,
+ focus,
+ getValue,
+ }));
+
+ useEffect(() => {
+ if (focusOnMount) {
+ window.setTimeout(() => focus(), 10);
+ };
+
+ rebind();
+ return () => unbind();
+ }, []);
+
+ const props: any = {
+ maxLength: 1,
+ onKeyUp: onInputKeyUp,
+ readonly,
+ };
+
+ if (isNumeric) {
+ props.inputMode = 'numeric';
+ };
+
+ return (
+ {
-
- public static defaultProps = {
- initial: '',
- noFilter: true,
- showOn: 'click',
- };
-
- _isMounted = false;
- state = {
- value: [],
- options: [] as I.Option[]
- };
-
- constructor (props: Props) {
- super(props);
-
- this.show = this.show.bind(this);
- this.hide = this.hide.bind(this);
+const Select = forwardRef(({
+ id = '',
+ initial = '',
+ className = '',
+ arrowClassName = '',
+ element = '',
+ value: initialValue = [],
+ options: initialOptions = [],
+ noFilter = true,
+ isMultiple = false,
+ showOn = 'click',
+ readonly = false,
+ menuParam = {},
+ onChange,
+}, ref) => {
+ const [ value, setValue ] = useState(initialValue);
+ const [ options, setOptions ] = useState(initialOptions);
+ const cn = [ 'select', className ];
+ const acn = [ 'arrow', arrowClassName ];
+ const current: any[] = [];
+
+ if (className) {
+ cn.push(className);
};
-
- render () {
- const { id, className, arrowClassName, readonly, showOn } = this.props;
- const { options } = this.state;
- const cn = [ 'select' ];
- const acn = [ 'arrow', (arrowClassName ? arrowClassName : '') ];
- const value = Relation.getArrayValue(this.state.value);
- const current: any[] = [];
-
- if (className) {
- cn.push(className);
- };
-
- if (readonly) {
- cn.push('isReadonly');
- };
- value.forEach((id: string) => {
- const option = options.find(item => item.id == id);
- if (option) {
- current.push(option);
- };
- });
-
- if (!current.length && options.length) {
- current.push(options[0]);
- };
-
- let onClick = null;
- let onMouseDown = null;
- let onMouseEnter = null;
-
- if (showOn == 'mouseDown') {
- onMouseDown = this.show;
- };
-
- if (showOn == 'click') {
- onClick = this.show;
- };
-
- if (showOn == 'mouseEnter') {
- onMouseEnter = this.show;
- };
-
- return (
- {
delete(mp.onClose);
};
- const menuParam = Object.assign({
- element,
+ const param = Object.assign({
+ element: el,
noFlipX: true,
onOpen: (context: any) => {
- window.setTimeout(() => $(element).addClass('isFocused'));
+ window.setTimeout(() => $(el).addClass('isFocused'));
if (onOpen) {
onOpen(context);
};
},
onClose: () => {
- window.setTimeout(() => $(element).removeClass('isFocused'));
+ window.setTimeout(() => $(el).removeClass('isFocused'));
if (onClose) {
onClose();
@@ -204,47 +127,97 @@ class Select extends React.Component {
},
}, mp);
- menuParam.data = Object.assign({
+ param.data = Object.assign({
noFilter,
noClose: true,
value,
- options,
+ options: U.Menu.prepareForSelect(options),
onSelect: (e: any, item: any) => {
- let { value } = this.state;
-
if (item.id !== '') {
if (isMultiple) {
- value = value.includes(item.id) ? value.filter(it => it != item.id) : [ ...value, item.id ];
+ val = val.includes(item.id) ? val.filter(it => it != item.id) : [ ...val, item.id ];
} else {
- value = [ item.id ];
+ val = [ item.id ];
};
} else {
- value = [];
+ val = [];
};
- this.setValue(value);
+ setValueHandler(val);
if (onChange) {
- onChange(this.getValue());
+ onChange(getValue(val));
};
if (!isMultiple) {
- this.hide();
+ hide();
} else {
- S.Menu.updateData('select', { value });
+ S.Menu.updateData('select', { value: val });
};
},
}, mp.data || {});
S.Menu.closeAll([ 'select' ], () => {
- S.Menu.open('select', menuParam);
+ S.Menu.open('select', param);
});
};
- hide () {
+ const hide = () => {
S.Menu.close('select');
};
-
-};
+
+ let onClick = null;
+ let onMouseDown = null;
+ let onMouseEnter = null;
+
+ if (showOn == 'mouseDown') {
+ onMouseDown = show;
+ };
+
+ if (showOn == 'click') {
+ onClick = show;
+ };
+
+ if (showOn == 'mouseEnter') {
+ onMouseEnter = show;
+ };
+
+ useEffect(() => {
+ const options = getOptions();
+
+ let val = Relation.getArrayValue(initialValue);
+ if (!val.length && options.length) {
+ val = [ options[0].id ];
+ };
+
+ setValue(val);
+ setOptions(options);
+ }, []);
+
+ useImperativeHandle(ref, () => ({
+ getValue: () => getValue(val),
+ setValue: setValueHandler,
+ setOptions: (options: I.Option[]) => setOptions(options),
+ }));
+
+ return (
+ (({
};
};
- useEffect(() => setValue(initialValue));
+ useEffect(() => setValue(initialValue), []);
useImperativeHandle(ref, () => ({
getValue: () => value,
diff --git a/src/ts/component/form/textarea.tsx b/src/ts/component/form/textarea.tsx
index bd41fe9fec..52d91485ce 100644
--- a/src/ts/component/form/textarea.tsx
+++ b/src/ts/component/form/textarea.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
import $ from 'jquery';
import { keyboard } from 'Lib';
@@ -22,182 +22,150 @@ interface Props {
onPaste?(e: any): void;
};
-interface State {
- value: string;
+interface TextareaRefProps {
+ focus(): void;
+ select(): void;
+ getValue(): string;
+ setError(v: boolean): void;
+ addClass(v: string): void;
+ removeClass(v: string): void;
};
-class Textarea extends React.Component {
-
- public static defaultProps = {
- value: ''
- };
-
- _isMounted = false;
- node: any = null;
- textAreaElement: HTMLTextAreaElement;
-
- state = {
- value: '',
- };
-
- constructor (props: Props) {
- super(props);
-
- this.onChange = this.onChange.bind(this);
- this.onKeyDown = this.onKeyDown.bind(this);
- this.onKeyUp = this.onKeyUp.bind(this);
- this.onInput = this.onInput.bind(this);
- this.onFocus = this.onFocus.bind(this);
- this.onBlur = this.onBlur.bind(this);
- this.onCopy = this.onCopy.bind(this);
- this.onPaste = this.onPaste.bind(this);
- };
-
- render () {
- const { id, name, className, placeholder, rows, autoComplete, readonly, maxLength } = this.props;
- const { value } = this.state;
- const cn = [ 'textarea' ];
-
- if (className) {
- cn.push(className);
+const Textarea = forwardRef(({
+ id = '',
+ name = '',
+ placeholder = '',
+ className = '',
+ rows = null,
+ value: initialValue = '',
+ autoComplete = null,
+ maxLength = null,
+ readonly = false,
+ onChange,
+ onKeyDown,
+ onKeyUp,
+ onInput,
+ onFocus,
+ onBlur,
+ onCopy,
+ onPaste,
+}, ref) => {
+ const [ value, setValue ] = useState(initialValue);
+ const nodeRef = useRef(null);
+ const cn = [ 'textarea' ];
+
+ if (className) {
+ cn.push(className);
+ };
+
+ const onChangeHandler = (e: any) => {
+ setValue(e.target.value);
+ if (onChange) {
+ onChange(e, e.target.value);
};
-
- return (
-
this.node = node}
- className={cnw.join(' ')}
- onMouseDown={onMouseDown}
- >
- {editor}
-
- );
- };
-
- componentDidMount () {
- this._isMounted = true;
- };
-
- componentWillUnmount () {
- this._isMounted = false;
- };
+interface EditableRefProps {
+ placeholderCheck: () => void;
+ placeholderSet: (v: string) => void;
+ placeholderHide: () => void;
+ placeholderShow: () => void;
+ setValue: (html: string) => void;
+ getTextValue: () => string;
+ getHtmlValue: () => string;
+ getRange: () => I.TextRange;
+ setRange: (range: I.TextRange) => void;
+ getNode: () => JQuery;
+};
- placeholderCheck () {
- this.getTextValue() ? this.placeholderHide() : this.placeholderShow();
+const Editable = forwardRef this.refPlaceholder = ref}
- >
- {placeholder}
-
-
+ {editor}
+
+ );
+
+});
export default Editable;
diff --git a/src/ts/component/form/emailCollection.tsx b/src/ts/component/form/emailCollection.tsx
new file mode 100644
index 0000000000..6eeef03651
--- /dev/null
+++ b/src/ts/component/form/emailCollection.tsx
@@ -0,0 +1,292 @@
+import React, { FC, useState, useRef, useEffect } from 'react';
+import { Label, Checkbox, Input, Button, Icon, Pin } from 'Component';
+import { analytics, C, J, S, translate, U } from 'Lib';
+
+interface Props {
+ onStepChange: () => void;
+ onComplete: () => void;
+};
+
+const EmailCollection: FC
+ {placeholder}
+
+
+
+
+ );
+ break;
+ };
+
+ case 1: {
+ content = (
+
+
+ );
+ break;
+ };
+
+ case 2: {
+ descriptionSuffix = 'News';
+ if (subscribeTips) {
+ descriptionSuffix = 'Tips';
+ };
+ if (subscribeTips && subscribeNews) {
+ descriptionSuffix = 'NewsAndTips';
+ };
+
+ content = (
+ {statusText}
: ''}
+
+
+ {showCodeSent ? translate('emailCollectionCodeSent') : translate('popupMembershipResend')}
+ {countdown && !showCodeSent ? U.Common.sprintf(translate('popupMembershipCountdown'), countdown) : ''}
+
+
+
+ );
+ break;
+ };
+ };
+
+ return (
+
+
+
+
+
+
+
+ {content}
+
+ );
+};
+
+export default EmailCollection;
\ No newline at end of file
diff --git a/src/ts/component/form/filter.tsx b/src/ts/component/form/filter.tsx
index 122ff11016..b3b617dead 100644
--- a/src/ts/component/form/filter.tsx
+++ b/src/ts/component/form/filter.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef, useImperativeHandle, useEffect, useState, useRef } from 'react';
import $ from 'jquery';
import { Input, Icon } from 'Component';
import { I, keyboard, translate } from 'Lib';
@@ -27,134 +27,81 @@ interface Props {
onIconClick?(e: any): void;
};
-interface State {
- isActive: boolean;
+interface FilterRefProps {
+ focus(): void;
+ blur(): void;
+ setActive(v: boolean): void;
+ setValue(v: string): void;
+ getValue(): string;
+ getRange(): I.TextRange;
+ setRange(range: I.TextRange): void;
};
-class Filter extends React.Component this.node = node}
- id={id}
- className={cn.join(' ')}
- onClick={onClick}
- >
-
+ let iconObj = null;
+ if (icon) {
+ iconObj = (
+
- {iconObj}
-
-
-
-
- this.ref = ref}
- id="input"
- className={inputClassName}
- value={value}
- focusOnMount={focusOnMount}
- onFocus={this.onFocus}
- onBlur={this.onBlur}
- onChange={this.onChange}
- onKeyDown={this.onKeyDown}
- onKeyUp={this.onKeyUp}
- onInput={() => this.placeholderCheck()}
- onCompositionStart={() => this.placeholderCheck()}
- onCompositionEnd={() => this.placeholderCheck()}
- />
-
-
- {placeholder}
-
+
+ );
+});
export default Filter;
\ No newline at end of file
diff --git a/src/ts/component/form/input.tsx b/src/ts/component/form/input.tsx
index e6147b897a..3aaf0658bb 100644
--- a/src/ts/component/form/input.tsx
+++ b/src/ts/component/form/input.tsx
@@ -1,4 +1,6 @@
-import React, { FC, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import React, {
+ useEffect, useRef, useState, forwardRef, useImperativeHandle, ChangeEvent, SyntheticEvent, KeyboardEvent, FormEvent, FocusEvent, ClipboardEvent
+} from 'react';
import $ from 'jquery';
import Inputmask from 'inputmask';
import { I, keyboard } from 'Lib';
@@ -100,84 +102,46 @@ const Input = forwardRef
+ {iconObj}
+
+
+
+
+ placeholderCheck()}
+ onCompositionStart={() => placeholderCheck()}
+ onCompositionEnd={() => placeholderCheck()}
+ />
+
+
+ {placeholder}
+ this.node = node}
- className={cn.join(' ')}
- onClick={onClick}
- >
- {icon ?
- );
+ if (readonly) {
+ cn.push('isReadonly');
};
- componentDidMount () {
- this._isMounted = true;
- this.resize();
- this.rebind();
+ if (isIcon) {
+ cn.push('isIcon');
+ onClick = e => onClickFile(e);
};
- componentDidUpdate () {
- const { focused } = this.state;
- const { block } = this.props;
-
- this.resize();
- this.rebind();
-
- if (focused) {
- if (this.refUrl) {
- this.refUrl.focus();
- };
- focus.set(block.id, { from: 0, to: 0 });
- };
+ if (isFocused) {
+ cn.push('isFocused');
};
- componentWillUnmount () {
- const { focused } = focus.state;
- const { block } = this.props;
-
- this._isMounted = false;
- this.unbind();
-
- if (focused == block.id) {
- keyboard.setFocus(false);
- };
+ if (withFile && isFocused) {
+ placeholder += or + (!isSmall ? textFile : '');
};
-
- rebind () {
- const { canResize } = this.props;
- if (!this._isMounted || !canResize) {
- return;
+
+ const rebind = () => {
+ if (canResize) {
+ $(nodeRef.current).off('resizeMove').on('resizeMove', () => resize());
};
-
- $(this.node).off('resizeMove').on('resizeMove', (e: any) => this.resize());
};
- unbind () {
- const { canResize } = this.props;
- if (!this._isMounted || !canResize) {
- return;
+ const unbind = () => {
+ if (canResize) {
+ $(nodeRef.current).off('resizeMove');
};
-
- $(this.node).off('resizeMove');
};
- resize () {
- const { canResize } = this.props;
+ const resize = () => {
if (!canResize) {
return;
};
raf(() => {
- if (!this._isMounted) {
+ const node = $(nodeRef.current);
+ if (!node.length) {
return;
};
-
- const node = $(this.node);
+
const rect = (node.get(0) as HTMLInputElement).getBoundingClientRect();
-
- let size = Size.Full;
+
+ let s = Size.Full;
if (rect.width <= SMALL_WIDTH) {
- size = Size.Small;
+ s = Size.Small;
};
if (rect.width <= ICON_WIDTH) {
- size = Size.Icon;
+ s = Size.Icon;
};
-
- if (size != this.state.size) {
- this.setState({ size });
+
+ if (s != size) {
+ setSize(s);
};
});
};
- onFocus (e: any) {
+ const onFocusHandler = (e: any) => {
e.stopPropagation();
- const { readonly } = this.props;
- if (readonly) {
- return;
+ if (!readonly) {
+ setIsFocused(true);
};
- this.setState({ focused: true });
};
- onBlur (e: any) {
+ const onBlurHandler = (e: any) => {
e.stopPropagation();
- this.setState({ focused: false });
+ setIsFocused(false);
};
- focus () {
- this.setState({ focused: true });
- };
-
- onChangeUrl (e: any, force: boolean) {
- const { onChangeUrl, readonly } = this.props;
-
+ const onChangeUrlHandler = (e: any, force: boolean) => {
if (readonly) {
return;
};
- window.clearTimeout(this.t);
- this.t = window.setTimeout(() => {
- if (!this.refUrl) {
+ window.clearTimeout(timeout.current);
+ timeout.current = window.setTimeout(() => {
+ if (!urlRef.current) {
return;
};
- const url = this.refUrl.getValue() || '';
+ const url = String(urlRef.current.getValue() || '');
if (!url) {
return;
};
@@ -250,9 +147,7 @@ class InputWithFile extends React.Component
-
+ if (isSmall) {
+ cn.push('isSmall');
+ };
- {withFile ? (
-
- {!isSmall ? {translate('commonOr')} : ''}
- {textFile}
-
- ) : ''}
-
-
+ {icon ?
+ );
};
export default InputWithFile;
\ No newline at end of file
diff --git a/src/ts/component/form/inputWithLabel.tsx b/src/ts/component/form/inputWithLabel.tsx
index c124b6f66e..f9d85e26e3 100644
--- a/src/ts/component/form/inputWithLabel.tsx
+++ b/src/ts/component/form/inputWithLabel.tsx
@@ -1,7 +1,6 @@
-import * as React from 'react';
-import $ from 'jquery';
-import { Input, Icon, Label } from 'Component';
-import { I, translate } from 'Lib';
+import React, { forwardRef, useRef, useEffect, useState, useImperativeHandle } from 'react';
+import { Input, Label } from 'Component';
+import { I } from 'Lib';
interface Props {
label: string;
@@ -16,76 +15,56 @@ interface Props {
onMouseLeave?(e: any): void;
};
-class InputWithLabel extends React.Component
+
+
+ {withFile ? (
+
+ {!isSmall ? {translate('commonOr')} : ''}
+ {textFile}
+
+ ) : ''}
+
+ this.node = node}
- onClick={() => this.ref.focus()}
- className="inputWithLabel"
- >
-
- );
- };
-
- componentDidMount() {
- const node = $(this.node);
+interface InputWithLabelRefProps {
+ focus(): void;
+ blur(): void;
+ setValue(v: string): void;
+ getValue(): string;
+ setRange(range: I.TextRange): void;
+ isFocused(): boolean;
+};
- this.ref.setValue(this.props.value);
+const InputWithLabel = forwardRef
-
-
- this.ref = ref}
- {...this.props}
- onFocus={this.onFocus}
- onBlur={this.onBlur}
- />
-
-
-
+
+ );
-};
+});
-export default InputWithLabel;
+export default InputWithLabel;
\ No newline at end of file
diff --git a/src/ts/component/form/phrase.tsx b/src/ts/component/form/phrase.tsx
index e62e8fd8ef..0c79c60d2b 100644
--- a/src/ts/component/form/phrase.tsx
+++ b/src/ts/component/form/phrase.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
import $ from 'jquery';
import { getRange, setRange } from 'selection-ranges';
import { Icon } from 'Component';
import { J, S, keyboard, Storage } from 'Lib';
interface Props {
- value: string;
+ value?: string;
className?: string;
readonly?: boolean;
isHidden?: boolean;
@@ -18,10 +18,11 @@ interface Props {
onClick?: (e: any) => void;
};
-interface State {
- phrase: string[];
- isHidden: boolean;
- hasError: boolean;
+interface PhraseRefProps {
+ setValue: (value: string) => void;
+ getValue: () => string;
+ setError: (hasError: boolean) => void;
+ focus: () => void;
};
const COLORS = [
@@ -34,133 +35,55 @@ const COLORS = [
'lime',
];
-class Phrase extends React.Component
+
+
+
- removeFocusedClass () {
- const node = $(this.node);
- node.removeClass('isFocused');
- };
+
+ this.refPlaceholder = ref}
- id="placeholder"
- className="placeholder"
- >
- {placeholder}
-
- );
- };
-
- return (
- this.node = ref}
- className={cn.join(' ')}
- onClick={this.onClick}
- >
-
- );
+const Phrase = forwardRef
- {!phrase.length ? : ''}
- {phrase.map(renderWord)}
- this.refEntry = ref}
- id="entry"
- contentEditable={true}
- suppressContentEditableWarning={true}
- onKeyDown={this.onKeyDown}
- onKeyUp={this.onKeyUp}
- onPaste={this.onPaste}
- onBlur={this.onBlur}
- onFocus={this.onFocus}
- onSelect={this.onSelect}
- >
- {'\n'}
-
-
-
- {placeholderEl}
-
+
+ );
+
+});
export default Phrase;
\ No newline at end of file
diff --git a/src/ts/component/form/pin.tsx b/src/ts/component/form/pin.tsx
index 9860e3dcdc..b2d021f8c1 100644
--- a/src/ts/component/form/pin.tsx
+++ b/src/ts/component/form/pin.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
import sha1 from 'sha1';
import { Input } from 'Component';
import { keyboard } from 'Lib';
@@ -14,141 +14,90 @@ interface Props {
readonly?: boolean;
};
-type State = {
- index: number;
+interface PinRefProps {
+ clear: () => void;
+ reset: () => void;
+ focus: () => void;
+ getValue: () => string;
};
-/**
- * This component provides an input field for a pin code
- */
-
const TIMEOUT_DURATION = 150;
-class Pin extends React.Component
+ {!phrase.current.length ? : ''}
+ {phrase.current.map((item: string, i: number) => {
+ const color = COLORS[i % COLORS.length];
+ const cn = isHidden ? `bg bg-${color}` : `textColor textColor-${color}`;
+ const word = isHidden ? '•'.repeat(item.length) : item;
+
+ return (
+
+ {word}
+
+ );
+ })}
+
+ {'\n'}
+
+
+
+ {placeholder ? {placeholder}
: ''}
+
- {Array(pinLength).fill(null).map((_, i) => (
- this.inputRefs[i] = ref}
- key={i}
- onPaste={e => this.onPaste(e, i)}
- onFocus={() => this.onInputFocus(i)}
- onKeyDown={e => this.onInputKeyDown(e, i)}
- onChange={(_, value) => this.onInputChange(i, value)}
- {...props}
- />
- ))}
-
- );
- };
-
- componentDidMount () {
- if (this.props.focusOnMount) {
- this.focus();
- };
- this.rebind();
- };
+ const inputRefs = useRef([]);
+ const index = useRef(0);
- componentWillUnmount () {
- window.clearTimeout(this.timeout);
- this.unbind();
+ const rebind = () => {
+ unbind();
+ $(window).on('mousedown.pin', e => e.preventDefault());
};
- rebind = () => {
- this.unbind();
- $(window).on('mousedown.pin', e => { e.preventDefault(); });
- };
-
- unbind = () => {
+ const unbind = () => {
$(window).off('mousedown.pin');
};
- focus = () => {
- this.inputRefs[this.state.index].focus();
+ const focus = () => {
+ inputRefs.current[index.current].focus();
};
- onClick = () => {
- this.focus();
+ const onClick = () => {
+ focus();
};
/** triggers when all the pin characters have been entered in, resetting state and calling callbacks */
- check = () => {
- const { expectedPin } = this.props;
- const pin = this.getValue();
+ const check = () => {
+ const pin = getValue();
const success = !expectedPin || (expectedPin === sha1(pin));
- const onSuccess = this.props.onSuccess || (() => {});
- const onError = this.props.onError || (() => {});
success ? onSuccess(pin) : onError();
};
/** returns the pin state stored in the input DOM */
- getValue = () => {
- return this.inputRefs.map((input) => input.getValue()).join('');
+ const getValue = () => {
+ return inputRefs.current.map((input) => input.getValue()).join('');
};
/** sets all the input boxes to empty string */
- clear = () => {
- for (const i in this.inputRefs) {
- this.inputRefs[i].setValue('');
+ const clear = () => {
+ for (const i in inputRefs.current) {
+ inputRefs.current[i].setValue('');
};
};
/** resets state */
- reset () {
- this.setState({ index: 0 }, () => {
- this.clear();
- this.focus();
-
- for (const i in this.inputRefs) {
- this.inputRefs[i].setType('text');
- };
- });
+ const reset = () => {
+ index.current = 0;
+ clear();
+ focus();
+
+ for (const i in inputRefs.current) {
+ inputRefs.current[i].setType('text');
+ };
};
// Input subcomponent methods
- onInputFocus = (index: number) => {
- this.setState({ index });
+ const onInputFocus = (idx: number) => {
+ index.current = idx;
};
- onInputKeyDown = (e, index: number) => {
- const { isNumeric } = this.props;
- const prev = this.inputRefs[index - 1];
+ const onInputKeyDown = (e, index: number) => {
+ const current = inputRefs.current[index];
+ const prev = inputRefs.current[index - 1];
if (prev) {
keyboard.shortcut('backspace', e, () => {
- prev.setValue('');
+ current.setValue('');
prev.setType('text');
prev.focus();
});
@@ -161,18 +110,15 @@ class Pin extends React.Component
+ {Array(pinLength).fill(null).map((_, i) => (
+ inputRefs.current[i] = ref}
+ key={i}
+ onPaste={e => onPaste(e, i)}
+ onFocus={() => onInputFocus(i)}
+ onKeyDown={e => onInputKeyDown(e, i)}
+ onChange={(_, value) => onInputChange(i, value)}
+ {...props}
+ />
+ ))}
+
+ );
+
+});
-export default Pin;
+export default Pin;
\ No newline at end of file
diff --git a/src/ts/component/form/select.tsx b/src/ts/component/form/select.tsx
index f61f1a4a76..fac21b5ccd 100644
--- a/src/ts/component/form/select.tsx
+++ b/src/ts/component/form/select.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React, { forwardRef, useState, useEffect, useImperativeHandle, MouseEvent } from 'react';
import $ from 'jquery';
-import { I, S, Relation } from 'Lib';
+import { I, S, U, Relation } from 'Lib';
import { Icon, MenuItemVertical } from 'Component';
interface Props {
@@ -11,7 +11,7 @@ interface Props {
element?: string;
value: any;
options: I.Option[];
- noFilter: boolean;
+ noFilter?: boolean;
isMultiple?: boolean;
showOn?: string;
readonly?: boolean;
@@ -19,159 +19,82 @@ interface Props {
onChange? (id: any): void;
};
-interface State {
- value: string[];
- options: I.Option[];
+interface SelectRefProps {
+ getValue: () => any;
+ setValue: (v: any) => void;
+ setOptions: (options: I.Option[]) => void;
};
-class Select extends React.Component
- {current ? (
-
- {current.map((item: any, i: number) => (
-
- ) : ''}
-
- );
+ if (readonly) {
+ cn.push('isReadonly');
};
-
- componentDidMount () {
- this._isMounted = true;
- const options = this.getOptions();
-
- let value = Relation.getArrayValue(this.props.value);
- if (!value.length && options.length) {
- value = [ options[0].id ];
+ let val = Relation.getArrayValue(value);
+ val.forEach((id: string) => {
+ const option = options.find(item => item.id == id);
+ if (option) {
+ current.push(option);
};
+ });
- this.setState({ value, options });
- };
-
- componentWillUnmount () {
- this._isMounted = false;
+ if (!current.length && options.length) {
+ current.push(options[0]);
};
- getOptions () {
- const { initial } = this.props;
- const options = [];
+ const getOptions = () => {
+ const ret = [];
if (initial) {
- options.push({ id: '', name: initial, isInitial: true });
+ ret.push({ id: '', name: initial, isInitial: true });
};
- for (const option of this.props.options) {
- options.push(option);
+ for (const option of initialOptions) {
+ ret.push(option);
};
-
- return options;
- };
-
- setOptions (options: any[]) {
- this.setState({ options });
+ return ret;
};
- getValue (): any {
- const { isMultiple } = this.props;
- const value = Relation.getArrayValue(this.state.value);
-
- return isMultiple ? value : value[0];
+ const getValue = (val: any): any => {
+ return isMultiple ? val : (val.length ? val[0] : '');
};
-
- setValue (v: any) {
- const value = Relation.getArrayValue(v);
- if (this._isMounted) {
- this.state.value = value;
- this.setState({ value });
- };
+ const setValueHandler = (v: any) => {
+ setValue(Relation.getArrayValue(v));
};
- show (e: React.MouseEvent) {
+ const show = (e: MouseEvent) => {
e.stopPropagation();
- const { id, onChange, noFilter, isMultiple, readonly } = this.props;
- const { value, options } = this.state;
- const elementId = `#select-${id}`;
- const element = this.props.element || elementId;
-
if (readonly) {
return;
};
- const mp = this.props.menuParam || {};
+ const el = element || `#select-${id}`;
+ const mp = menuParam || {};
let onOpen = null;
let onClose = null;
@@ -185,18 +108,18 @@ class Select extends React.Component
+ {current ? (
+ <>
+ {current.map((item: any, i: number) => (
+
+ );
+});
export default Select;
\ No newline at end of file
diff --git a/src/ts/component/form/switch.tsx b/src/ts/component/form/switch.tsx
index 4b085a4580..62aef6301b 100644
--- a/src/ts/component/form/switch.tsx
+++ b/src/ts/component/form/switch.tsx
@@ -46,7 +46,7 @@ const Switch = forwardRef