@tactics/toddle-styleguide 2.0.0 → 2.0.2

package/index.tsx

@@ -81,6 +81,7 @@ import { ContextLabel } from './src/components/molecules/context-label/context-l
 import { Count } from './src/components/atoms/count/count.component';
 import { Amount } from './src/components/molecules/amount/amount.component';
 import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
+import { TimetableEditorStaff } from './src/components/organisms/timetable-editor/timetable-editor-staff.component';
 import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
 import { InlineNotice } from './src/components/molecules/inline-notice/inline-notice.component';
 import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
@@ -187,6 +188,7 @@ export {
   Count,
   Amount,
   TimetableEditor,
+  TimetableEditorStaff,
   TimeSlotRecord,
   TimeSlotSequence,
   InlineError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/organisms/timetable-editor/timetable-editor-staff.component.tsx

@@ -0,0 +1,53 @@
+import React, { useContext, useEffect, useState } from "react"
+import { View } from "react-native";
+import { TimeSlotRecord } from "../../../models/time-slot-record";
+import { TimeSlotSequence } from "../../../models/time-slot-sequence";
+import { TimetableEditWrapper } from "./components/timetable-edit-wrapper";
+import { TimetableEditState } from "../../../types/timetable-edit.enum";
+import { ThemeCtx } from "../../../context/theme.context";
+import { Stylesheet } from "./timetable-editor.styles";
+
+interface TimetableEditorProps {
+    sequence: TimeSlotSequence;
+    onChange: (seq: TimeSlotSequence) => void;
+}
+
+export const TimetableEditorStaff = ({sequence, onChange}: TimetableEditorProps) => {
+    const context = useContext(ThemeCtx);
+    const styles = Stylesheet(context);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [activeEditState, setActiveEditState] = useState(TimetableEditState.NONE);
+    const [first, setFrist] = useState<TimeSlotRecord>(sequence.first);
+    const [second, setSecond] = useState<TimeSlotRecord>(sequence.second);
+
+    useEffect(() => {
+        const newSeq = TimeSlotSequence.fromEmpty();
+        newSeq.first.start = first.start;
+        newSeq.first.end = first.end;
+        newSeq.second.start = second.start;
+        newSeq.second.end = second.end;
+        newSeq.third.start = TimeSlotRecord.fromEmpty().start
+        newSeq.third.end = TimeSlotRecord.fromEmpty().end;
+
+        onChange(newSeq);
+    }, [first, second])
+
+    return (
+        <View style={styles.rootContainer}>
+            <TimetableEditWrapper
+                index={1}
+                record={first}
+                onUpdate={(seq) => {setFrist(TimeSlotRecord.fromRecord(seq))}}
+                editState={activeIndex === 1 ? activeEditState : TimetableEditState.NONE}
+                onPressTag={(val,index) => { setActiveIndex(index); setActiveEditState(val);}}
+            />
+            <TimetableEditWrapper
+                index={2}
+                record={second}
+                onUpdate={(seq) => {setSecond(TimeSlotRecord.fromRecord(seq))}}
+                editState={activeIndex === 2 ? activeEditState : TimetableEditState.NONE}
+                onPressTag={(val,index) => { setActiveIndex(index); setActiveEditState(val);}}
+            />
+        </View>
+    );
+}