feat: rearrange posts
This commit is contained in:
Nevo David
parent
9329f1fedd
commit
5dc0dae924
|
|
@ -1,6 +1,13 @@
|
|||
'use client';
|
||||
|
||||
import React, {FC, MouseEventHandler, useCallback, useEffect, useState} from 'react';
|
||||
import React, {
|
||||
FC,
|
||||
Fragment,
|
||||
MouseEventHandler,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import dayjs from 'dayjs';
|
||||
import { Integrations } from '@gitroom/frontend/components/launches/calendar.context';
|
||||
import clsx from 'clsx';
|
||||
|
|
@ -29,6 +36,7 @@ import { v4 as uuidv4 } from 'uuid';
|
|||
import { useSWRConfig } from 'swr';
|
||||
import { useToaster } from '@gitroom/react/toaster/toaster';
|
||||
import { postSelector } from '@gitroom/frontend/components/post-url-selector/post.url.selector';
|
||||
import { UpDownArrow } from '@gitroom/frontend/components/launches/up.down.arrow';
|
||||
|
||||
export const AddEditModal: FC<{
|
||||
date: dayjs.Dayjs;
|
||||
|
|
@ -125,6 +133,31 @@ export const AddEditModal: FC<{
|
|||
[value]
|
||||
);
|
||||
|
||||
const changePosition = useCallback(
|
||||
(index: number) => (type: 'up' | 'down') => {
|
||||
if (type === 'up' && index !== 0) {
|
||||
setValue((prev) => {
|
||||
const temp = prev[index];
|
||||
prev[index] = prev[index - 1];
|
||||
prev[index - 1] = temp;
|
||||
return [...prev];
|
||||
});
|
||||
} else if (
|
||||
type === 'down' &&
|
||||
value.length !== 0 &&
|
||||
value.length !== index + 1
|
||||
) {
|
||||
setValue((prev) => {
|
||||
const temp = prev[index];
|
||||
prev[index] = prev[index + 1];
|
||||
prev[index + 1] = temp;
|
||||
return [...prev];
|
||||
});
|
||||
}
|
||||
},
|
||||
[value]
|
||||
);
|
||||
|
||||
// Delete post
|
||||
const deletePost = useCallback(
|
||||
(index: number) => async () => {
|
||||
|
|
@ -159,12 +192,15 @@ export const AddEditModal: FC<{
|
|||
// sometimes it's easier to click escape to close
|
||||
useKeypress('Escape', askClose);
|
||||
|
||||
const postNow = useCallback(((e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const postNow = useCallback(
|
||||
((e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
return schedule('now')();
|
||||
}) as MouseEventHandler<HTMLDivElement>, []);
|
||||
return schedule('now')();
|
||||
}) as MouseEventHandler<HTMLDivElement>,
|
||||
[]
|
||||
);
|
||||
|
||||
// function to send to the server and save
|
||||
const schedule = useCallback(
|
||||
|
|
@ -281,63 +317,77 @@ export const AddEditModal: FC<{
|
|||
<>
|
||||
<div>You are in global editing mode</div>
|
||||
{value.map((p, index) => (
|
||||
<>
|
||||
<Fragment key={`edit_${index}`}>
|
||||
<div>
|
||||
<MDEditor
|
||||
key={`edit_${index}`}
|
||||
height={value.length > 1 ? 150 : 250}
|
||||
commands={[
|
||||
...commands
|
||||
.getCommands()
|
||||
.filter((f) => f.name !== 'image'),
|
||||
newImage,
|
||||
postSelector(date),
|
||||
]}
|
||||
value={p.content}
|
||||
preview="edit"
|
||||
// @ts-ignore
|
||||
onChange={changeValue(index)}
|
||||
/>
|
||||
{showError && (!p.content || p.content.length < 6) && (
|
||||
<div className="my-[5px] text-[#F97066] text-[12px] font-[500]">
|
||||
The post should be at least 6 characters long
|
||||
</div>
|
||||
)}
|
||||
<div className="flex">
|
||||
<div className="flex gap-[4px]">
|
||||
<div className="flex-1">
|
||||
<MultiMediaComponent
|
||||
label="Attachments"
|
||||
description=""
|
||||
value={p.image}
|
||||
name="image"
|
||||
onChange={changeImage(index)}
|
||||
<MDEditor
|
||||
height={value.length > 1 ? 150 : 250}
|
||||
commands={[
|
||||
...commands
|
||||
.getCommands()
|
||||
.filter((f) => f.name !== 'image'),
|
||||
newImage,
|
||||
postSelector(date),
|
||||
]}
|
||||
value={p.content}
|
||||
preview="edit"
|
||||
// @ts-ignore
|
||||
onChange={changeValue(index)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex bg-[#121b2c] rounded-br-[8px] text-[#F97066]">
|
||||
{value.length > 1 && (
|
||||
<div
|
||||
className="flex cursor-pointer gap-[4px] justify-center items-center flex-1"
|
||||
onClick={deletePost(index)}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11.8125 2.625H9.625V2.1875C9.625 1.8394 9.48672 1.50556 9.24058 1.25942C8.99444 1.01328 8.6606 0.875 8.3125 0.875H5.6875C5.3394 0.875 5.00556 1.01328 4.75942 1.25942C4.51328 1.50556 4.375 1.8394 4.375 2.1875V2.625H2.1875C2.07147 2.625 1.96019 2.67109 1.87814 2.75314C1.79609 2.83519 1.75 2.94647 1.75 3.0625C1.75 3.17853 1.79609 3.28981 1.87814 3.37186C1.96019 3.45391 2.07147 3.5 2.1875 3.5H2.625V11.375C2.625 11.6071 2.71719 11.8296 2.88128 11.9937C3.04538 12.1578 3.26794 12.25 3.5 12.25H10.5C10.7321 12.25 10.9546 12.1578 11.1187 11.9937C11.2828 11.8296 11.375 11.6071 11.375 11.375V3.5H11.8125C11.9285 3.5 12.0398 3.45391 12.1219 3.37186C12.2039 3.28981 12.25 3.17853 12.25 3.0625C12.25 2.94647 12.2039 2.83519 12.1219 2.75314C12.0398 2.67109 11.9285 2.625 11.8125 2.625ZM5.25 2.1875C5.25 2.07147 5.29609 1.96019 5.37814 1.87814C5.46019 1.79609 5.57147 1.75 5.6875 1.75H8.3125C8.42853 1.75 8.53981 1.79609 8.62186 1.87814C8.70391 1.96019 8.75 2.07147 8.75 2.1875V2.625H5.25V2.1875ZM10.5 11.375H3.5V3.5H10.5V11.375ZM6.125 5.6875V9.1875C6.125 9.30353 6.07891 9.41481 5.99686 9.49686C5.91481 9.57891 5.80353 9.625 5.6875 9.625C5.57147 9.625 5.46019 9.57891 5.37814 9.49686C5.29609 9.41481 5.25 9.30353 5.25 9.1875V5.6875C5.25 5.57147 5.29609 5.46019 5.37814 5.37814C5.46019 5.29609 5.57147 5.25 5.6875 5.25C5.80353 5.25 5.91481 5.29609 5.99686 5.37814C6.07891 5.46019 6.125 5.57147 6.125 5.6875ZM8.75 5.6875V9.1875C8.75 9.30353 8.70391 9.41481 8.62186 9.49686C8.53981 9.57891 8.42853 9.625 8.3125 9.625C8.19647 9.625 8.08519 9.57891 8.00314 9.49686C7.92109 9.41481 7.875 9.30353 7.875 9.1875V5.6875C7.875 5.57147 7.92109 5.46019 8.00314 5.37814C8.08519 5.29609 8.19647 5.25 8.3125 5.25C8.42853 5.25 8.53981 5.29609 8.62186 5.37814C8.70391 5.46019 8.75 5.57147 8.75 5.6875Z"
|
||||
fill="#F97066"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px] font-[500] pr-[10px]">
|
||||
Delete Post
|
||||
|
||||
{showError &&
|
||||
(!p.content || p.content.length < 6) && (
|
||||
<div className="my-[5px] text-[#F97066] text-[12px] font-[500]">
|
||||
The post should be at least 6 characters long
|
||||
</div>
|
||||
)}
|
||||
<div className="flex">
|
||||
<div className="flex-1">
|
||||
<MultiMediaComponent
|
||||
label="Attachments"
|
||||
description=""
|
||||
value={p.image}
|
||||
name="image"
|
||||
onChange={changeImage(index)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex bg-[#121b2c] rounded-br-[8px] text-[#F97066]">
|
||||
{value.length > 1 && (
|
||||
<div
|
||||
className="flex cursor-pointer gap-[4px] justify-center items-center flex-1"
|
||||
onClick={deletePost(index)}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11.8125 2.625H9.625V2.1875C9.625 1.8394 9.48672 1.50556 9.24058 1.25942C8.99444 1.01328 8.6606 0.875 8.3125 0.875H5.6875C5.3394 0.875 5.00556 1.01328 4.75942 1.25942C4.51328 1.50556 4.375 1.8394 4.375 2.1875V2.625H2.1875C2.07147 2.625 1.96019 2.67109 1.87814 2.75314C1.79609 2.83519 1.75 2.94647 1.75 3.0625C1.75 3.17853 1.79609 3.28981 1.87814 3.37186C1.96019 3.45391 2.07147 3.5 2.1875 3.5H2.625V11.375C2.625 11.6071 2.71719 11.8296 2.88128 11.9937C3.04538 12.1578 3.26794 12.25 3.5 12.25H10.5C10.7321 12.25 10.9546 12.1578 11.1187 11.9937C11.2828 11.8296 11.375 11.6071 11.375 11.375V3.5H11.8125C11.9285 3.5 12.0398 3.45391 12.1219 3.37186C12.2039 3.28981 12.25 3.17853 12.25 3.0625C12.25 2.94647 12.2039 2.83519 12.1219 2.75314C12.0398 2.67109 11.9285 2.625 11.8125 2.625ZM5.25 2.1875C5.25 2.07147 5.29609 1.96019 5.37814 1.87814C5.46019 1.79609 5.57147 1.75 5.6875 1.75H8.3125C8.42853 1.75 8.53981 1.79609 8.62186 1.87814C8.70391 1.96019 8.75 2.07147 8.75 2.1875V2.625H5.25V2.1875ZM10.5 11.375H3.5V3.5H10.5V11.375ZM6.125 5.6875V9.1875C6.125 9.30353 6.07891 9.41481 5.99686 9.49686C5.91481 9.57891 5.80353 9.625 5.6875 9.625C5.57147 9.625 5.46019 9.57891 5.37814 9.49686C5.29609 9.41481 5.25 9.30353 5.25 9.1875V5.6875C5.25 5.57147 5.29609 5.46019 5.37814 5.37814C5.46019 5.29609 5.57147 5.25 5.6875 5.25C5.80353 5.25 5.91481 5.29609 5.99686 5.37814C6.07891 5.46019 6.125 5.57147 6.125 5.6875ZM8.75 5.6875V9.1875C8.75 9.30353 8.70391 9.41481 8.62186 9.49686C8.53981 9.57891 8.42853 9.625 8.3125 9.625C8.19647 9.625 8.08519 9.57891 8.00314 9.49686C7.92109 9.41481 7.875 9.30353 7.875 9.1875V5.6875C7.875 5.57147 7.92109 5.46019 8.00314 5.37814C8.08519 5.29609 8.19647 5.25 8.3125 5.25C8.42853 5.25 8.53981 5.29609 8.62186 5.37814C8.70391 5.46019 8.75 5.57147 8.75 5.6875Z"
|
||||
fill="#F97066"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px] font-[500] pr-[10px]">
|
||||
Delete Post
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<UpDownArrow
|
||||
isUp={index !== 0}
|
||||
isDown={
|
||||
value.length !== 0 && value.length !== index + 1
|
||||
}
|
||||
onChange={changePosition(index)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -363,7 +413,7 @@ export const AddEditModal: FC<{
|
|||
<div>Add post</div>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
</Fragment>
|
||||
))}
|
||||
</>
|
||||
) : null}
|
||||
|
|
@ -411,7 +461,10 @@ export const AddEditModal: FC<{
|
|||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<div onClick={postNow} className="hidden group-hover:flex hover:flex flex-col justify-center absolute left-0 top-[100%] w-full h-[40px] bg-[#B91C1C] border border-tableBorder">
|
||||
<div
|
||||
onClick={postNow}
|
||||
className="hidden group-hover:flex hover:flex flex-col justify-center absolute left-0 top-[100%] w-full h-[40px] bg-[#B91C1C] border border-tableBorder"
|
||||
>
|
||||
Post now
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
'use client';
|
||||
|
||||
import {
|
||||
import React, {
|
||||
FC,
|
||||
Fragment,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
|
|
@ -25,6 +26,7 @@ import { createPortal } from 'react-dom';
|
|||
import clsx from 'clsx';
|
||||
import { newImage } from '@gitroom/frontend/components/launches/helpers/new.image.component';
|
||||
import { postSelector } from '@gitroom/frontend/components/post-url-selector/post.url.selector';
|
||||
import { UpDownArrow } from '@gitroom/frontend/components/launches/up.down.arrow';
|
||||
|
||||
// Simple component to change back to settings on after changing tab
|
||||
export const SetTab: FC<{ changeTab: () => void }> = (props) => {
|
||||
|
|
@ -150,6 +152,31 @@ export const withProvider = (
|
|||
[InPlaceValue]
|
||||
);
|
||||
|
||||
const changePosition = useCallback(
|
||||
(index: number) => (type: 'up' | 'down') => {
|
||||
if (type === 'up' && index !== 0) {
|
||||
setInPlaceValue((prev) => {
|
||||
const temp = prev[index];
|
||||
prev[index] = prev[index - 1];
|
||||
prev[index - 1] = temp;
|
||||
return [...prev];
|
||||
});
|
||||
} else if (
|
||||
type === 'down' &&
|
||||
InPlaceValue.length !== 0 &&
|
||||
InPlaceValue.length !== index + 1
|
||||
) {
|
||||
setInPlaceValue((prev) => {
|
||||
const temp = prev[index];
|
||||
prev[index] = prev[index + 1];
|
||||
prev[index + 1] = temp;
|
||||
return [...prev];
|
||||
});
|
||||
}
|
||||
},
|
||||
[InPlaceValue]
|
||||
);
|
||||
|
||||
// Delete post
|
||||
const deletePost = useCallback(
|
||||
(index: number) => async () => {
|
||||
|
|
@ -243,63 +270,76 @@ export const withProvider = (
|
|||
</div>
|
||||
)}
|
||||
{InPlaceValue.map((val, index) => (
|
||||
<>
|
||||
<Fragment key={`edit_inner_${index}`}>
|
||||
<div>
|
||||
<MDEditor
|
||||
key={`edit_inner_${index}`}
|
||||
height={InPlaceValue.length > 1 ? 200 : 250}
|
||||
value={val.content}
|
||||
commands={[
|
||||
...commands
|
||||
.getCommands()
|
||||
.filter((f) => f.name !== 'image'),
|
||||
newImage,
|
||||
postSelector(date),
|
||||
]}
|
||||
preview="edit"
|
||||
// @ts-ignore
|
||||
onChange={changeValue(index)}
|
||||
/>
|
||||
{(!val.content || val.content.length < 6) && (
|
||||
<div className="my-[5px] text-[#F97066] text-[12px] font-[500]">
|
||||
The post should be at least 6 characters long
|
||||
</div>
|
||||
)}
|
||||
<div className="flex">
|
||||
<div className="flex gap-[4px]">
|
||||
<div className="flex-1">
|
||||
<MultiMediaComponent
|
||||
label="Attachments"
|
||||
description=""
|
||||
name="image"
|
||||
value={val.image}
|
||||
onChange={changeImage(index)}
|
||||
<MDEditor
|
||||
height={InPlaceValue.length > 1 ? 200 : 250}
|
||||
value={val.content}
|
||||
commands={[
|
||||
...commands
|
||||
.getCommands()
|
||||
.filter((f) => f.name !== 'image'),
|
||||
newImage,
|
||||
postSelector(date),
|
||||
]}
|
||||
preview="edit"
|
||||
// @ts-ignore
|
||||
onChange={changeValue(index)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex bg-[#121b2c] rounded-br-[8px] text-[#F97066]">
|
||||
{InPlaceValue.length > 1 && (
|
||||
<div
|
||||
className="flex cursor-pointer gap-[4px] justify-center items-center flex-1"
|
||||
onClick={deletePost(index)}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11.8125 2.625H9.625V2.1875C9.625 1.8394 9.48672 1.50556 9.24058 1.25942C8.99444 1.01328 8.6606 0.875 8.3125 0.875H5.6875C5.3394 0.875 5.00556 1.01328 4.75942 1.25942C4.51328 1.50556 4.375 1.8394 4.375 2.1875V2.625H2.1875C2.07147 2.625 1.96019 2.67109 1.87814 2.75314C1.79609 2.83519 1.75 2.94647 1.75 3.0625C1.75 3.17853 1.79609 3.28981 1.87814 3.37186C1.96019 3.45391 2.07147 3.5 2.1875 3.5H2.625V11.375C2.625 11.6071 2.71719 11.8296 2.88128 11.9937C3.04538 12.1578 3.26794 12.25 3.5 12.25H10.5C10.7321 12.25 10.9546 12.1578 11.1187 11.9937C11.2828 11.8296 11.375 11.6071 11.375 11.375V3.5H11.8125C11.9285 3.5 12.0398 3.45391 12.1219 3.37186C12.2039 3.28981 12.25 3.17853 12.25 3.0625C12.25 2.94647 12.2039 2.83519 12.1219 2.75314C12.0398 2.67109 11.9285 2.625 11.8125 2.625ZM5.25 2.1875C5.25 2.07147 5.29609 1.96019 5.37814 1.87814C5.46019 1.79609 5.57147 1.75 5.6875 1.75H8.3125C8.42853 1.75 8.53981 1.79609 8.62186 1.87814C8.70391 1.96019 8.75 2.07147 8.75 2.1875V2.625H5.25V2.1875ZM10.5 11.375H3.5V3.5H10.5V11.375ZM6.125 5.6875V9.1875C6.125 9.30353 6.07891 9.41481 5.99686 9.49686C5.91481 9.57891 5.80353 9.625 5.6875 9.625C5.57147 9.625 5.46019 9.57891 5.37814 9.49686C5.29609 9.41481 5.25 9.30353 5.25 9.1875V5.6875C5.25 5.57147 5.29609 5.46019 5.37814 5.37814C5.46019 5.29609 5.57147 5.25 5.6875 5.25C5.80353 5.25 5.91481 5.29609 5.99686 5.37814C6.07891 5.46019 6.125 5.57147 6.125 5.6875ZM8.75 5.6875V9.1875C8.75 9.30353 8.70391 9.41481 8.62186 9.49686C8.53981 9.57891 8.42853 9.625 8.3125 9.625C8.19647 9.625 8.08519 9.57891 8.00314 9.49686C7.92109 9.41481 7.875 9.30353 7.875 9.1875V5.6875C7.875 5.57147 7.92109 5.46019 8.00314 5.37814C8.08519 5.29609 8.19647 5.25 8.3125 5.25C8.42853 5.25 8.53981 5.29609 8.62186 5.37814C8.70391 5.46019 8.75 5.57147 8.75 5.6875Z"
|
||||
fill="#F97066"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px] font-[500] pr-[10px]">
|
||||
Delete Post
|
||||
</div>
|
||||
{(!val.content || val.content.length < 6) && (
|
||||
<div className="my-[5px] text-[#F97066] text-[12px] font-[500]">
|
||||
The post should be at least 6 characters long
|
||||
</div>
|
||||
)}
|
||||
<div className="flex">
|
||||
<div className="flex-1">
|
||||
<MultiMediaComponent
|
||||
label="Attachments"
|
||||
description=""
|
||||
name="image"
|
||||
value={val.image}
|
||||
onChange={changeImage(index)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex bg-[#121b2c] rounded-br-[8px] text-[#F97066]">
|
||||
{InPlaceValue.length > 1 && (
|
||||
<div
|
||||
className="flex cursor-pointer gap-[4px] justify-center items-center flex-1"
|
||||
onClick={deletePost(index)}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11.8125 2.625H9.625V2.1875C9.625 1.8394 9.48672 1.50556 9.24058 1.25942C8.99444 1.01328 8.6606 0.875 8.3125 0.875H5.6875C5.3394 0.875 5.00556 1.01328 4.75942 1.25942C4.51328 1.50556 4.375 1.8394 4.375 2.1875V2.625H2.1875C2.07147 2.625 1.96019 2.67109 1.87814 2.75314C1.79609 2.83519 1.75 2.94647 1.75 3.0625C1.75 3.17853 1.79609 3.28981 1.87814 3.37186C1.96019 3.45391 2.07147 3.5 2.1875 3.5H2.625V11.375C2.625 11.6071 2.71719 11.8296 2.88128 11.9937C3.04538 12.1578 3.26794 12.25 3.5 12.25H10.5C10.7321 12.25 10.9546 12.1578 11.1187 11.9937C11.2828 11.8296 11.375 11.6071 11.375 11.375V3.5H11.8125C11.9285 3.5 12.0398 3.45391 12.1219 3.37186C12.2039 3.28981 12.25 3.17853 12.25 3.0625C12.25 2.94647 12.2039 2.83519 12.1219 2.75314C12.0398 2.67109 11.9285 2.625 11.8125 2.625ZM5.25 2.1875C5.25 2.07147 5.29609 1.96019 5.37814 1.87814C5.46019 1.79609 5.57147 1.75 5.6875 1.75H8.3125C8.42853 1.75 8.53981 1.79609 8.62186 1.87814C8.70391 1.96019 8.75 2.07147 8.75 2.1875V2.625H5.25V2.1875ZM10.5 11.375H3.5V3.5H10.5V11.375ZM6.125 5.6875V9.1875C6.125 9.30353 6.07891 9.41481 5.99686 9.49686C5.91481 9.57891 5.80353 9.625 5.6875 9.625C5.57147 9.625 5.46019 9.57891 5.37814 9.49686C5.29609 9.41481 5.25 9.30353 5.25 9.1875V5.6875C5.25 5.57147 5.29609 5.46019 5.37814 5.37814C5.46019 5.29609 5.57147 5.25 5.6875 5.25C5.80353 5.25 5.91481 5.29609 5.99686 5.37814C6.07891 5.46019 6.125 5.57147 6.125 5.6875ZM8.75 5.6875V9.1875C8.75 9.30353 8.70391 9.41481 8.62186 9.49686C8.53981 9.57891 8.42853 9.625 8.3125 9.625C8.19647 9.625 8.08519 9.57891 8.00314 9.49686C7.92109 9.41481 7.875 9.30353 7.875 9.1875V5.6875C7.875 5.57147 7.92109 5.46019 8.00314 5.37814C8.08519 5.29609 8.19647 5.25 8.3125 5.25C8.42853 5.25 8.53981 5.29609 8.62186 5.37814C8.70391 5.46019 8.75 5.57147 8.75 5.6875Z"
|
||||
fill="#F97066"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[12px] font-[500] pr-[10px]">
|
||||
Delete Post
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<UpDownArrow
|
||||
isUp={index !== 0}
|
||||
isDown={
|
||||
InPlaceValue.length !== 0 &&
|
||||
InPlaceValue.length !== index + 1
|
||||
}
|
||||
onChange={changePosition(index)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -325,7 +365,7 @@ export const withProvider = (
|
|||
<div>Add post</div>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</EditorWrapper>,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import { FC, useCallback } from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const Arrow: FC<{ flip: boolean }> = (props) => {
|
||||
const { flip } = props;
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
style={{ transform: flip ? 'rotate(180deg)' : '' }}
|
||||
>
|
||||
<path
|
||||
d="M13.354 6.35378L8.35403 11.3538C8.30759 11.4003 8.25245 11.4372 8.19175 11.4623C8.13105 11.4875 8.06599 11.5004 8.00028 11.5004C7.93457 11.5004 7.86951 11.4875 7.80881 11.4623C7.74811 11.4372 7.69296 11.4003 7.64653 11.3538L2.64653 6.35378C2.55271 6.25996 2.5 6.13272 2.5 6.00003C2.5 5.86735 2.55271 5.7401 2.64653 5.64628C2.74035 5.55246 2.8676 5.49976 3.00028 5.49976C3.13296 5.49976 3.26021 5.55246 3.35403 5.64628L8.00028 10.2932L12.6465 5.64628C12.693 5.59983 12.7481 5.56298 12.8088 5.53784C12.8695 5.5127 12.9346 5.49976 13.0003 5.49976C13.066 5.49976 13.131 5.5127 13.1917 5.53784C13.2524 5.56298 13.3076 5.59983 13.354 5.64628C13.4005 5.69274 13.4373 5.74789 13.4625 5.80859C13.4876 5.86928 13.5006 5.93434 13.5006 6.00003C13.5006 6.06573 13.4876 6.13079 13.4625 6.19148C13.4373 6.25218 13.4005 6.30733 13.354 6.35378Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export const UpDownArrow: FC<{
|
||||
isUp: boolean;
|
||||
isDown: boolean;
|
||||
onChange: (type: 'up' | 'down') => void;
|
||||
}> = (props) => {
|
||||
const { isUp, isDown, onChange } = props;
|
||||
|
||||
const changePosition = useCallback(
|
||||
(type: 'up' | 'down') => () => {
|
||||
onChange(type);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
onClick={changePosition('up')}
|
||||
className={clsx(
|
||||
'outline-none rounded-tl-[20px] rounded-tr-[20px] w-[24px] h-[24px] flex justify-center items-center',
|
||||
isUp
|
||||
? 'bg-input hover:bg-seventh cursor-pointer'
|
||||
: 'bg-[#0F1524] pointer-events-none text-[#1F2941]'
|
||||
)}
|
||||
>
|
||||
<Arrow flip={true} />
|
||||
</button>
|
||||
<button
|
||||
onClick={changePosition('down')}
|
||||
className={clsx(
|
||||
'outline-none rounded-bl-[20px] rounded-br-[20px] w-[24px] h-[24px] flex justify-center items-center',
|
||||
isDown
|
||||
? 'bg-input hover:bg-seventh cursor-pointer'
|
||||
: 'bg-[#0F1524] pointer-events-none text-[#1F2941]'
|
||||
)}
|
||||
>
|
||||
<Arrow flip={false} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue