From 4daf6b4d9afc87ddbb4beacf4edceb317414b1dc Mon Sep 17 00:00:00 2001
From: Yannis Barlas <yannisbarlas@gmail.com>
Date: Tue, 29 Sep 2020 14:28:44 +0300
Subject: [PATCH] fix select when on notes surface
---
.eslintrc.js | 7 +-
.../src/components/Button.js | 17 +---
.../src/components/ImageUpload.js | 13 +--
.../src/components/tables/CreateTable.js | 89 +++++--------------
.../src/ui/buttons/Dropdown.js | 5 +-
.../src/NoteService/Note.js | 2 +-
.../DisplayText.js | 11 +--
7 files changed, 37 insertions(+), 107 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index 816f4b09f..0b9660367 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,7 +22,8 @@ eslint.parserOptions = {
};
eslint.rules = {
- 'sort-keys': 'off',
+ 'class-methods-use-this': [1, { exceptMethods: ['run', 'enable', 'active'] }],
+ // 'import/no-named-as-default': 0,
'import/no-extraneous-dependencies': [
'error',
{
@@ -30,8 +31,6 @@ eslint.rules = {
},
],
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
- 'class-methods-use-this': [1, { exceptMethods: ['run', 'enable', 'active'] }],
-
'react/prop-types': [
2,
{
@@ -45,7 +44,7 @@ eslint.rules = {
],
},
],
- // 'import/no-named-as-default': 0,
+ 'sort-keys': 'off',
};
module.exports = eslint;
diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index 4f6fe323b..7f6ec04c5 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -1,22 +1,7 @@
import React, { useContext } from 'react';
-// import styled from 'styled-components';
-// import { ButtonStyles } from 'wax-prosemirror-themes';
import { WaxContext } from 'wax-prosemirror-core';
import MenuButton from '../ui/buttons/MenuButton';
-// const ButtonStyled = styled.button`
-// ${ButtonStyles};
-// opacity: ${props => (props.select ? 1 : 0.4)};
-// pointer-events: ${props => (props.select ? 'default' : 'none')};
-// color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
-// background-color: ${props =>
-// props.isActive ? props.theme.colorPrimary : 'transparent'};
-// &:hover {
-// background-color: ${props =>
-// props.isActive ? props.theme.colorPrimary : 'transparent'};
-// }
-// `;
-
const Button = ({ view = {}, item }) => {
const { active, enable, icon, label, onlyOnMain, run, select, title } = item;
@@ -37,7 +22,7 @@ const Button = ({ view = {}, item }) => {
const isActive = active && active(state);
const isDisabled =
- enable && !enable(state) && select && select(view.state, activeViewId);
+ enable && !enable(state) && !(select && select(view.state, activeViewId));
return (
<MenuButton
diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js
index 48e78c931..f34fca7bc 100644
--- a/wax-prosemirror-components/src/components/ImageUpload.js
+++ b/wax-prosemirror-components/src/components/ImageUpload.js
@@ -5,19 +5,12 @@ import styled from 'styled-components';
import MenuButton from '../ui/buttons/MenuButton';
-const UploadImage = styled.div`
- /* opacity: ${props => (props.select ? 1 : 0.4)};
- pointer-events: ${props => (props.select ? 'default' : 'none')};
- display: inline-flex;
- padding: 0px 10px; */
-
+const Wrapper = styled.div`
input {
display: none;
}
`;
-// TO DO -- select should be done with MenuButton's disabled prop
-
const ImageUpload = ({ item, fileUpload, view }) => {
const { activeViewId } = useContext(WaxContext);
@@ -25,7 +18,7 @@ const ImageUpload = ({ item, fileUpload, view }) => {
const handleMouseDown = () => inputRef.current.click();
return (
- <UploadImage>
+ <Wrapper>
<label htmlFor="file-upload">
<MenuButton
active={false}
@@ -42,7 +35,7 @@ const ImageUpload = ({ item, fileUpload, view }) => {
type="file"
/>
</label>
- </UploadImage>
+ </Wrapper>
);
};
export default ImageUpload;
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 2285e7200..aaac04e05 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,90 +1,43 @@
-/* eslint react/prop-types: 0 */
import React, { useState, useContext } from 'react';
-// import styled from 'styled-components';
-// import { ButtonStyles } from 'wax-prosemirror-themes';
import { WaxContext } from 'wax-prosemirror-core';
import Dropdown from '../../ui/buttons/Dropdown';
import InsertTableTool from '../../ui/tables/InsertTableTool';
-// const ButtonStyled = styled.button`
-// ${ButtonStyles};
-// opacity: ${props => (props.select ? 1 : 0.4)};
-// pointer-events: ${props => (props.select ? 'default' : 'none')};
-// color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
-// background-color: ${props =>
-// props.isActive ? props.theme.colorPrimary : 'transparent'};
-// &:hover {
-// background-color: ${props =>
-// props.isActive ? props.theme.colorPrimary : 'transparent'};
-// }
-// `;
-
-// const InsertTableToolContainer = styled.div`
-// display: block !important;
-// height: auto;
-// top: 53px;
-// left: 556px;
-// position: absolute;
-// `;
-
const CreateTable = ({ view = {}, item }) => {
const {
view: { main },
- // activeViewId,
+ activeViewId,
} = useContext(WaxContext);
if (item.onlyOnMain) {
view = main;
}
+ const [showTool, setShowTool] = useState(false);
+ const toggleShowTool = () => setShowTool(!showTool);
+
const { state, dispatch } = view;
- const [isTableToolDisplayed, setTableToolDisplay] = useState(false);
+ const { enable, icon, run, select, title } = item;
+
+ const dropComponent = (
+ <InsertTableTool
+ onGridSelect={colRows => {
+ run(colRows, state, dispatch);
+ }}
+ />
+ );
- // const CreateButton = (
- // <ButtonStyled
- // type="button"
- // isActive={isTableToolDisplayed}
- // title={item.title}
- // disabled={item.enable && !item.enable(view.state)}
- // onMouseDown={e => {
- // e.preventDefault();
- // setTableToolDisplay(!isTableToolDisplayed);
- // }}
- // select={item.select && item.select(view.state, activeViewId)}
- // >
- // {item.content}
- // </ButtonStyled>
- // );
- // return isTableToolDisplayed ? (
- // <>
- // {CreateButton}
- // <InsertTableToolContainer>
- // <InsertTableTool
- // onGridSelect={colRows => {
- // item.run(colRows, state, dispatch);
- // }}
- // />
- // </InsertTableToolContainer>
- // </>
- // ) : (
- // <>{CreateButton}</>
- // );
+ const isDisabled =
+ enable && !enable(state) && !(select && select(state, activeViewId));
- // select pending
return (
<Dropdown
- active={isTableToolDisplayed}
- dropComponent={
- <InsertTableTool
- onGridSelect={colRows => {
- item.run(colRows, state, dispatch);
- }}
- />
- }
- iconName={item.icon}
- disabled={item.enable && !item.enable(view.state)}
- onClick={() => setTableToolDisplay(!isTableToolDisplayed)}
- title={item.title}
+ active={showTool}
+ dropComponent={dropComponent}
+ iconName={icon}
+ disabled={isDisabled}
+ onClick={toggleShowTool}
+ title={title}
/>
);
};
diff --git a/wax-prosemirror-components/src/ui/buttons/Dropdown.js b/wax-prosemirror-components/src/ui/buttons/Dropdown.js
index 241820d81..617302671 100644
--- a/wax-prosemirror-components/src/ui/buttons/Dropdown.js
+++ b/wax-prosemirror-components/src/ui/buttons/Dropdown.js
@@ -17,7 +17,7 @@ const DropWrapper = styled.div`
`;
const Dropdown = props => {
- const { className, dropComponent, iconName, label, title } = props;
+ const { className, disabled, dropComponent, iconName, label, title } = props;
const [isOpen, setIsOpen] = useState(false);
@@ -27,6 +27,7 @@ const Dropdown = props => {
<Wrapper className={className}>
<MenuButton
active={isOpen}
+ disabled={disabled}
iconName={iconName}
label={label}
onMouseDown={() => setIsOpen(!isOpen)}
@@ -39,6 +40,7 @@ const Dropdown = props => {
};
Dropdown.propTypes = {
+ disabled: PropTypes.bool,
dropComponent: PropTypes.node.isRequired,
iconName: PropTypes.string,
label: PropTypes.string,
@@ -46,6 +48,7 @@ Dropdown.propTypes = {
};
Dropdown.defaultProps = {
+ disabled: false,
iconName: null,
label: null,
title: null,
diff --git a/wax-prosemirror-services/src/NoteService/Note.js b/wax-prosemirror-services/src/NoteService/Note.js
index 861390959..4614ba2d1 100644
--- a/wax-prosemirror-services/src/NoteService/Note.js
+++ b/wax-prosemirror-services/src/NoteService/Note.js
@@ -36,7 +36,7 @@ class Note extends Tools {
get enable() {
return state => {
- return true;
+ return false;
};
}
}
diff --git a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
index df6bb97bf..481200f5b 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
@@ -33,13 +33,10 @@ class DisplayText extends ToolGroup {
icon: 'title',
component: (
<BlockLevelTools
- groups={this._toolGroups[0].groups.map(group => {
- console.log(group);
- return {
- groupName: group.title.props.title,
- items: group._tools,
- };
- })}
+ groups={this._toolGroups[0].groups.map(group => ({
+ groupName: group.title.props.title,
+ items: group._tools,
+ }))}
view={view}
/>
),
--
GitLab