From 74678e8fc739ed311560af70c8a476298d9cfc7f Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 23 Feb 2023 13:16:44 +0200
Subject: [PATCH] add drop down icon
---
.../src/components/icons/icons.js | 6 ++
.../TablesService/components/TableDropDown.js | 68 ++++++++-----------
2 files changed, 35 insertions(+), 39 deletions(-)
diff --git a/wax-prosemirror-core/src/components/icons/icons.js b/wax-prosemirror-core/src/components/icons/icons.js
index dab653f10..ce490d2a9 100644
--- a/wax-prosemirror-core/src/components/icons/icons.js
+++ b/wax-prosemirror-core/src/components/icons/icons.js
@@ -484,4 +484,10 @@ export default {
<path d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M18 11H13L14.81 9.19A3.94 3.94 0 0 0 12 8A4 4 0 1 0 15.86 13H17.91A6 6 0 1 1 12 6A5.91 5.91 0 0 1 16.22 7.78L18 6Z" />{' '}
</Svg>
),
+ expand: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Expand</title>
+ <path d="M7 10l5 5 5-5z" />{' '}
+ </Svg>
+ ),
};
diff --git a/wax-prosemirror-services/src/TablesService/components/TableDropDown.js b/wax-prosemirror-services/src/TablesService/components/TableDropDown.js
index 432e9bbfc..e53a3fbb5 100644
--- a/wax-prosemirror-services/src/TablesService/components/TableDropDown.js
+++ b/wax-prosemirror-services/src/TablesService/components/TableDropDown.js
@@ -1,9 +1,16 @@
/* eslint-disable react/jsx-props-no-spreading */
/* eslint react/prop-types: 0 */
-import React, { useMemo, useContext, useState, useEffect } from 'react';
+import React, {
+ useMemo,
+ useContext,
+ useState,
+ useEffect,
+ useRef,
+ createRef,
+} from 'react';
import styled from 'styled-components';
import * as tablesFn from 'prosemirror-tables';
-import { WaxContext } from 'wax-prosemirror-core';
+import { WaxContext, Icon } from 'wax-prosemirror-core';
const Wrapper = styled.div`
opacity: ${props => (props.disabled ? '0.4' : '1')};
@@ -14,9 +21,15 @@ const DropDownButton = styled.button`
background: #fff;
border: none;
color: #000;
+ cursor: pointer;
display: flex;
position: relative;
width: 160px;
+
+ span {
+ position: relative;
+ top: 2px;
+ }
`;
const DropDownMenu = styled.div`
@@ -26,7 +39,7 @@ const DropDownMenu = styled.div`
border: 1px solid #ddd;
border-radius: 0.25rem;
box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%);
- margin: 0.8rem auto auto;
+ margin: 10px auto auto;
position: fixed;
width: 170px;
z-index: 2;
@@ -42,6 +55,12 @@ const DropDownMenu = styled.div`
}
`;
+const StyledIcon = styled(Icon)`
+ height: 18px;
+ width: 18px;
+ margin-left: auto;
+`;
+
const TableDropDown = ({ item }) => {
const dropDownOptions = [
{ label: 'Add column before', value: 'addColumnBefore' },
@@ -59,16 +78,16 @@ const TableDropDown = ({ item }) => {
];
const { activeView } = useContext(WaxContext);
- const [selectedOption, setSelectedOption] = useState('');
- const itemRefs = React.useRef([]);
+ const itemRefs = useRef([]);
const [isOpen, setIsOpen] = useState(false);
const isDisabled = !item.select(activeView.state);
- useEffect(() => {}, [selectedOption]);
+ useEffect(() => {
+ if (isDisabled) setIsOpen(false);
+ }, [isDisabled]);
const openCloseMenu = e => {
// e.preventDefault();
-
if (!isDisabled) setIsOpen(!isOpen);
};
@@ -117,15 +136,14 @@ const TableDropDown = ({ item }) => {
tabIndex="0"
type="button"
>
- Table Options
+ <span>Table Options</span> <StyledIcon name="expand" />
</DropDownButton>
<DropDownMenu
role="menu"
style={{ visibility: isOpen ? 'visible' : 'hidden' }}
>
{dropDownOptions.map((option, index) => {
- itemRefs.current[index] =
- itemRefs.current[index] || React.createRef();
+ itemRefs.current[index] = itemRefs.current[index] || createRef();
return (
<span
key={option.value}
@@ -135,7 +153,6 @@ const TableDropDown = ({ item }) => {
activeView.dispatch,
tablesFn[option.value],
);
- setSelectedOption(option.value);
setTimeout(() => {
activeView.focus();
@@ -154,37 +171,10 @@ const TableDropDown = ({ item }) => {
</DropDownMenu>
</Wrapper>
),
- [isDisabled, isOpen, selectedOption],
+ [isDisabled, isOpen],
);
return TableDropDownComponent;
-
- // const TableDropDownComponent = useMemo(
- // () => (
- // <Wrapper>
- // <DropdownStyled
- // onChange={option => {
- // item.run(
- // activeView.state,
- // activeView.dispatch,
- // tablesFn[option.value],
- // );
- // setSelectedOption(option.value);
-
- // setTimeout(() => {
- // activeView.focus();
- // });
- // }}
- // options={appliedDropDownOptions}
- // placeholder="Table Options"
- // select={isDisabled}
- // />
- // </Wrapper>
- // ),
- // [isDisabled, selectedOption, appliedDropDownOptions],
- // );
-
- // return TableDropDownComponent;
};
export default TableDropDown;
--
GitLab