-
+
@@ -43,3 +34,10 @@ export default function DelayBlock(props) {
);
}
+
+DelayBlock.propTypes = {
+ eventsHandler: PropTypes.func.isRequired,
+ data: PropTypes.object.isRequired,
+ index: PropTypes.number.isRequired,
+ actionHandler: PropTypes.func.isRequired,
+};
diff --git a/client/src/features/editors/list/DelayBlock.module.css b/client/src/features/editors/DelayBlock/DelayBlock.module.css
similarity index 100%
rename from client/src/features/editors/list/DelayBlock.module.css
rename to client/src/features/editors/DelayBlock/DelayBlock.module.css
diff --git a/client/src/features/editors/list/EventBlock.jsx b/client/src/features/editors/EventBlock/EventBlock.jsx
similarity index 64%
rename from client/src/features/editors/list/EventBlock.jsx
rename to client/src/features/editors/EventBlock/EventBlock.jsx
index bc047f2f4..261370e61 100644
--- a/client/src/features/editors/list/EventBlock.jsx
+++ b/client/src/features/editors/EventBlock/EventBlock.jsx
@@ -5,17 +5,17 @@ import { Draggable } from 'react-beautiful-dnd';
import EventTimes from 'common/components/eventTimes/EventTimes';
import EventTimesVertical from 'common/components/eventTimes/EventTimesVertical';
import EditableText from 'common/input/EditableText';
-import ActionButtons from './ActionButtons';
+import ActionButtons from '../list/ActionButtons';
import PublicIconBtn from 'common/components/buttons/PublicIconBtn';
import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
import { millisToMinutes } from 'common/utils/dateConfig';
import style from './EventBlock.module.css';
-import { SelectCollapse, HandleCollapse } from 'app/context/collapseAtom';
+import { HandleCollapse, SelectCollapse } from 'app/context/collapseAtom';
import { useAtom } from 'jotai';
+import PropTypes from 'prop-types';
const ExpandedBlock = (props) => {
- const { provided, data, eventIndex, next, delay, delayValue, actionHandler } =
- props;
+ const { provided, data, eventIndex, next, delay, delayValue, previousEnd, actionHandler } = props;
const oscid = data.id.length > 4 ? '...' : data.id;
@@ -28,14 +28,12 @@ const ExpandedBlock = (props) => {
return (
<>
-
+
Next
- {delayValue != null && (
- + {delayValue}
- )}
+ {delayValue != null && + {delayValue}}
{
timeEnd={data.timeEnd}
duration={duration}
delay={delay}
+ previousEnd={previousEnd}
className={style.time}
/>
@@ -53,25 +52,19 @@ const ExpandedBlock = (props) => {
label='Title'
defaultValue={data.title}
placeholder='Add Title'
- submitHandler={(v) =>
- actionHandler('update', { field: 'title', value: v })
- }
+ submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
/>
- actionHandler('update', { field: 'presenter', value: v })
- }
+ submitHandler={(v) => actionHandler('update', { field: 'presenter', value: v })}
/>
- actionHandler('update', { field: 'subtitle', value: v })
- }
+ submitHandler={(v) => actionHandler('update', { field: 'subtitle', value: v })}
/>
{
placeholder='Add Note'
style={{ color: '#d69e2e' }}
maxchar={160}
- submitHandler={(v) =>
- actionHandler('update', { field: 'note', value: v })
- }
+ submitHandler={(v) => actionHandler('update', { field: 'note', value: v })}
/>
{`/ontime/goto ${eventIndex + 1} << OSC >> /ontime/gotoid ${oscid}`}
@@ -89,38 +80,43 @@ const ExpandedBlock = (props) => {
);
};
+ExpandedBlock.propTypes = {
+ provided: PropTypes.any.isRequired,
+ data: PropTypes.object.isRequired,
+ eventIndex: PropTypes.number.isRequired,
+ next: PropTypes.bool.isRequired,
+ delay: PropTypes.number,
+ delayValue: PropTypes.number,
+ previousEnd: PropTypes.number.isRequired,
+ actionHandler: PropTypes.func.isRequired,
+};
+
const CollapsedBlock = (props) => {
- const { provided, data, next, delay, delayValue, actionHandler } = props;
+ const { provided, data, next, delay, delayValue, previousEnd, actionHandler } = props;
return (
<>
-
+
Next
- {delayValue != null && (
- + {delayValue}
- )}
+ {delayValue != null && + {delayValue}}
@@ -128,33 +124,32 @@ const CollapsedBlock = (props) => {
label='Title'
defaultValue={data.title}
placeholder='Add Title'
- submitHandler={(v) =>
- actionHandler('update', { field: 'title', value: v })
- }
+ submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
/>
);
};
+CollapsedBlock.propTypes = {
+ provided: PropTypes.any.isRequired,
+ data: PropTypes.object.isRequired,
+ next: PropTypes.bool.isRequired,
+ delay: PropTypes.any,
+ delayValue: PropTypes.any,
+ previousEnd: PropTypes.number.isRequired,
+ actionHandler: PropTypes.func.isRequired,
+};
+
export default function EventBlock(props) {
- const { data, selected, delay, index, eventIndex, actionHandler } = props;
- const [collapsed] = useAtom(
- useMemo(() => SelectCollapse(data.id), [data.id])
- );
+ const { data, selected, delay, index, eventIndex, previousEnd, actionHandler } = props;
+ const [collapsed] = useAtom(useMemo(() => SelectCollapse(data.id), [data.id]));
const [, setCollapsed] = useAtom(HandleCollapse);
- // TODO: should this go inside useEffect()
- // Would I then need to add this to state?
const isSelected = selected ? style.active : '';
const isCollapsed = collapsed ? style.collapsed : style.expanded;
const classSelect = `${style.event} ${isCollapsed} ${isSelected}`;
@@ -169,11 +164,7 @@ export default function EventBlock(props) {
return (
{(provided) => (
-
+
) : (
@@ -196,6 +188,7 @@ export default function EventBlock(props) {
next={props.next}
delay={delay}
delayValue={delayValue}
+ previousEnd={previousEnd}
actionHandler={actionHandler}
/>
)}
@@ -204,3 +197,13 @@ export default function EventBlock(props) {
);
}
+
+EventBlock.propTypes = {
+ data: PropTypes.object.isRequired,
+ selected: PropTypes.bool.isRequired,
+ delay: PropTypes.number,
+ index: PropTypes.number.isRequired,
+ eventIndex: PropTypes.number.isRequired,
+ previousEnd: PropTypes.number.isRequired,
+ actionHandler: PropTypes.func.isRequired,
+};
diff --git a/client/src/features/editors/list/EventBlock.module.css b/client/src/features/editors/EventBlock/EventBlock.module.css
similarity index 100%
rename from client/src/features/editors/list/EventBlock.module.css
rename to client/src/features/editors/EventBlock/EventBlock.module.css
diff --git a/client/src/features/editors/list/ActionButtons.jsx b/client/src/features/editors/list/ActionButtons.jsx
index 6035a00ec..2e8b1a029 100644
--- a/client/src/features/editors/list/ActionButtons.jsx
+++ b/client/src/features/editors/list/ActionButtons.jsx
@@ -1,6 +1,7 @@
import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
import { IconButton } from '@chakra-ui/button';
-import { FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
+import { FiClock, FiMinusCircle, FiPlus } from 'react-icons/fi';
+import { Tooltip } from '@chakra-ui/tooltip';
export default function ActionButtons(props) {
const { showAdd, showDelay, showBlock, actionHandler } = props;
@@ -12,16 +13,18 @@ export default function ActionButtons(props) {
return (