{(provided) => (
@@ -40,11 +28,15 @@ export default function DelayBlock(props) {
-
+
)}
diff --git a/client/src/features/editors/list/DelayBlock.module.css b/client/src/features/editors/list/DelayBlock.module.css
new file mode 100644
index 000000000..a1b226c98
--- /dev/null
+++ b/client/src/features/editors/list/DelayBlock.module.css
@@ -0,0 +1,66 @@
+/* ============= COMMON ============= */
+
+.delay {
+ margin: 0.2em 0;
+ padding: 0.2em 0.5em;
+
+ width: 100%;
+ border-radius: 8px;
+ font-size: 15px;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+
+ display: grid;
+ grid-template-columns: 2em 1fr auto;
+ grid-template-areas: 'drag inpt btns';
+ justify-content: center;
+ align-content: center;
+ align-items: baseline;
+ gap: 0.5em;
+
+ background-color: #ecc94b;
+ background: linear-gradient(
+ 180deg,
+ rgba(214, 158, 46, 0.4) 0%,
+ rgba(236, 201, 75, 0.4) 20%,
+ rgba(214, 158, 46, 0.07) 21%
+ );
+}
+
+/* ================ DRAG ================ */
+
+.drag {
+ grid-area: drag;
+ color: rgba(255, 255, 255, 0.67);
+ align-self: center;
+}
+
+/* =============== INPUT ================ */
+
+.input {
+ grid-area: inpt;
+}
+
+/* ============== ACTION ================ */
+
+.actionOverlay {
+ grid-area: btns;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: center;
+ align-self: flex-start;
+ padding-top: 0.2em;
+ gap: 0.5em;
+ opacity: 0.8;
+ transition: linear 0.1s;
+}
+
+.delay:hover > .actionOverlay {
+ opacity: 1;
+ transition: linear 0.1s;
+}
+
+/* NA */
+.actionOverlay:hover {
+ opacity: 1;
+}
diff --git a/client/src/features/editors/list/EventBlock copy.jsx b/client/src/features/editors/list/EventBlock copy.jsx
new file mode 100644
index 000000000..e5b9926d8
--- /dev/null
+++ b/client/src/features/editors/list/EventBlock copy.jsx
@@ -0,0 +1,188 @@
+import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { showErrorToast } from '../../../common/helpers/toastManager';
+import { Draggable } from 'react-beautiful-dnd';
+import EventTimes from '../../../common/components/eventTimes/EventTimes';
+// import common from './Block.module.css';
+import style from './EventBlock.module.css';
+import EditableText from '../../../common/input/EditableText';
+import DelayValue from '../../../common/input/DelayValue';
+import ActionButtons from './ActionButtons';
+import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
+
+const areEqual = (prevProps, nextProps) => {
+ return (
+ prevProps.data.revision === nextProps.data.revision &&
+ prevProps.selected === nextProps.selected &&
+ prevProps.next === nextProps.next &&
+ prevProps.index === nextProps.index &&
+ prevProps.delay === nextProps.delay
+ );
+};
+
+const EventBlock = (props) => {
+ const { data, selected, next, delay, index, eventsHandler } = props;
+
+ const [more, setMore] = useState(true);
+ const [visible, setVisible] = useState(data.isPublic || false);
+
+ // Set visibility indicator
+ useEffect(() => {
+ setVisible(data.isPublic);
+ }, [data.isPublic]);
+
+ // Create / delete new events
+ const actionHandler = (action) => {
+ switch (action) {
+ case 'event':
+ eventsHandler('add', { type: 'event', order: index + 1 });
+ break;
+ case 'delay':
+ eventsHandler('add', { type: 'delay', order: index + 1 });
+ break;
+ case 'block':
+ eventsHandler('add', { type: 'block', order: index + 1 });
+ break;
+ case 'delete':
+ eventsHandler('delete', data.id);
+ break;
+ default:
+ break;
+ }
+ };
+
+ // Update data in fields
+ const updateValues = (field, value) => {
+ // validate field
+ if (field in data) {
+ // create object with new field
+ const newData = { id: data.id, [field]: value };
+
+ // request update in parent
+ eventsHandler('patch', newData);
+ } else {
+ showErrorToast('Field Error: ' + field);
+ }
+ };
+
+ const handleTitleSubmit = (v) => {
+ updateValues('title', v);
+ };
+
+ const handleSubtitleSubmit = (v) => {
+ updateValues('subtitle', v);
+ };
+
+ const handlePresenterSubmit = (v) => {
+ updateValues('presenter', v);
+ };
+
+ const handleNoteSubmit = (v) => {
+ updateValues('note', v);
+ };
+
+ const handleVisibleToggle = useCallback(() => {
+ const viz = !data.isPublic || !visible;
+ updateValues('isPublic', viz);
+ }, [data.isPublic, visible, updateValues]);
+
+ // TODO: inside useEffect()
+ const isSelected = selected ? style.active : '';
+ const isExpanded = more ? style.expanded : style.collapsed;
+ const classSelect = ` ${style.event} ${isExpanded} ${isSelected}`;
+
+ return (
+
+ {(provided) => (
+
+
+
+
+
+
+ {more &&
Start Time
}
+ {more &&
End Time
}
+ {more &&
Duration
}
+
+
+ {more ? (
+
+
+
+
+
+
+ ) : (
+
+
+
+ )}
+
setMore(!more)}>
+ {more ? : }
+
+
+
+
+ Next
+ {delayValue != null && (
+ + {delayValue}
+ )}
+
+
+
+
+
+
+
+ actionHandler('update', { field: 'title', value: v })
+ }
+ />
+
+ actionHandler('update', { field: 'presenter', value: v })
+ }
+ />
+
+ actionHandler('update', { field: 'subtitle', value: v })
+ }
+ />
+
+ actionHandler('update', { field: 'note', value: v })
+ }
+ />
+
+ props.setExpanded(false)}
+ />
+
+
+ );
+};
+
+const CollapsedBlock = (props) => {
+ const { provided, data, next, delay, delayValue, actionHandler } = props;
+
+ return (
+ <>
+
+
+
+
+
+ Next
+ {delayValue != null && (
+ + {delayValue}
+ )}
+
+
+
+
+ actionHandler('update', { field: 'title', value: v })
+ }
+ />
+
+ props.setExpanded(true)}
+ />
+
+
+ );
+};
+
const EventBlock = (props) => {
- const { data, selected, next, delay, index, eventsHandler } = props;
+ const { data, selected, delay, index, actionHandler } = props;
- const [more, setMore] = useState(true);
- const [visible, setVisible] = useState(data.isPublic || false);
+ const [expanded, setExpanded] = useState(true);
- // Set visibility indicator
- useEffect(() => {
- setVisible(data.isPublic);
- }, [data.isPublic]);
+ // TODO: should this go inside useEffect()
+ // Would I then need to add this to state?
+ const isSelected = selected ? style.active : '';
+ const isExpanded = expanded ? style.expanded : style.collapsed;
+ const classSelect = `${style.event} ${isExpanded} ${isSelected}`;
- const updateValues = (field, value) => {
- // validate field
- if (field in data) {
- // create object with new field
- const newData = { id: data.id, [field]: value };
-
- // request update in parent
- eventsHandler('patch', newData);
- } else {
- showErrorToast('Field Error: ' + field);
- }
- };
-
- const addHandler = () => {
- eventsHandler('add', { type: 'event', order: index + 1 });
- };
- const delayHandler = () => {
- eventsHandler('add', { type: 'delay', order: index + 1 });
- };
- const blockHandler = () => {
- eventsHandler('add', { type: 'block', order: index + 1 });
- };
- const deleteHandler = () => {
- eventsHandler('delete', data.id);
- };
-
- const handleTitleSubmit = (v) => {
- updateValues('title', v);
- };
-
- const handleSubtitleSubmit = (v) => {
- updateValues('subtitle', v);
- };
-
- const handlePresenterSubmit = (v) => {
- updateValues('presenter', v);
- };
-
- const handleNoteSubmit = (v) => {
- updateValues('note', v);
- };
-
- const handleVisibleToggle = () => {
- let viz = !data.isPublic || !visible;
- updateValues('isPublic', viz);
- };
+ // Calculate delay in min
+ const delayValue = delay > 0 ? millisToMinutes(delay) : null;
return (
{(provided) => (
-
-
-
-
-
-
- {more ? (
-
-
-
-
-
-
- ) : (
-
-
-
- )}
-
setMore(!more)}>
- {more ? : }
-
-
-
+ )}