ywana-core8 0.0.907 → 0.0.909

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.907",
+  "version": "0.0.909",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain/TablePage.js

@@ -458,7 +458,10 @@ export const TableEditor = (props) => {
                             format: field.format,
                             item: field.item ? field.item : [],
                             onChange: field.id === "checked" ? checkOne : field.editable ? change : null,     /* checked has it´s own handler */
-                            options
+                            options,
+                            sortable: field.sortable || false,
+                            filterable: field.filterable || false,
+                            resizable: field.resizable || false,
                         }
                     }),
                 rows: groups[groupName]

package/src/widgets/calendar/Calendar.css

@@ -1,10 +1,11 @@
 
 .calendar { 
-    margin: 0rem;
+    margin: 1rem;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    padding: .5rem;
+    padding: 0rem;
+
 }
 
 .calendar>nav {
@@ -26,6 +27,7 @@
 
 .calendar>header {
     border: solid 1px var(--divider-color);
+    border-top: 0px;
     border-width: 1px 1px 0 0px;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
@@ -45,9 +47,9 @@
 }
 
 .week-day-cell {
-    border-left: solid 1px var(--divider-color);
+    border: solid 0px var(--divider-color);
     padding: 2px;
-    text-align: center;
+    text-align: right;
     min-width: 5rem;
 }
 
@@ -58,11 +60,17 @@
     text-align: right;
     min-height: 5rem;
     min-width: 5rem;
+    font-weight: 400;
 }
 
 .day-cell.today>header {
-    background-color: var(--primary-color-lighter);
-    padding: .3rem
+    border-bottom: solid 2px var(--primary-color);
+    padding: .3rem;
+    font-weight: 600;
+}
+
+.day-cell.other-month {
+    color: var(--text-color-lighter);
 }
 
 .day-cell:hover {

package/src/widgets/calendar/Calendar.js

@@ -41,7 +41,7 @@ export const Calendar = (props) => {
 
     function today() {
         const today = moment()
-        setPosition(today)  
+        setPosition(today)
     }
 
     if (!position) return "..."
@@ -56,11 +56,17 @@ export const Calendar = (props) => {
     const days = Array.from(range.by('days'))
 
     const cells = days.map(day => {
-        const dayEvents = events.filter(event => {
-            const eventDate = moment(event.date, "YYYY-MM-DD")
-            return eventDate.isSame(day, 'day')
+
+        const eventsOfDay = events.filter(event => {
+            console.log(event.date, day.format("YYYY-MM-DD"))
+            const eventDay = moment(event.date)
+            return eventDay.isSame(day, 'day')
         })
-        return { day, events: dayEvents }
+
+        return {
+            day,
+            events: eventsOfDay
+        }
     })
 
     return (
@@ -68,7 +74,7 @@ export const Calendar = (props) => {
             <nav>
                 <label> {monthName} {year}</label>
                 <Button icon="chevron_left" raised action={prev} />
-                <Button label="Hoy" outlined action={today}/>
+                <Button label="Hoy" outlined action={today} />
                 <Button icon="chevron_right" raised action={next} />
             </nav>
             <header>
@@ -81,7 +87,7 @@ export const Calendar = (props) => {
                 <div className='week-day-cell'>Dom</div>
             </header>
             <main>
-                {cells.map(cell => <DayCell cell={cell} >{children}</DayCell>)}
+                {cells.map(cell => <DayCell key={cell.day} cell={cell} >{children}</DayCell>)}
             </main>
         </div>
     )
@@ -89,11 +95,12 @@ export const Calendar = (props) => {
 
 const DayCell = (props) => {
     const { cell = [], children } = props
-    const {day, events} = cell
+    const { day, events } = cell
     const todayStyle = day.isSame(moment(), 'day') ? 'today' : ''
+    const sameMonthStyle = day.isSame(moment(), 'month') ? '' : 'other-month'
 
     return (
-        <div className={`day-cell ${todayStyle}`}>
+        <div className={`day-cell ${todayStyle} ${sameMonthStyle}`}>
             <header>
                 {day.format("DD")}
             </header>

package/src/widgets/calendar/Calendar.test.js

@@ -6,9 +6,9 @@ const CalendarTest = (prop) => {
 
     const events = [
         { id: 1, date: "2022-05-26", title: 'Event 1' },
-        { id: 1, date: "2022-05-27", title: 'Event 1' },
-        { id: 1, date: "2022-05-28", title: 'Event 1' },
-        { id: 1, date: "2022-05-29", title: 'Event 1' },
+        { id: 2, date: "2023-12-26", title: 'Event 2' },
+        { id: 3, date: "2023-12-07", title: 'Event 3' },
+
     ]
 
     return (
@@ -22,7 +22,7 @@ const CustomEvent = (props) => {
     const { event } = props
     return (
         <div className="custom-event" onClick={() => alert("!xxx")}>
-           C {event.title}
+           {event.title}
         </div>
     )
 }

package/src/widgets/image/ImageComparator.js

@@ -0,0 +1,80 @@
+import React, {useState, useEffect} from 'react';
+
+function CompareImages({ images, orientation, zoom }) {
+    const [image1, setImage1] = useState(null);
+    const [image2, setImage2] = useState(null);
+    const [curtain, setCurtain] = useState({
+      position: orientation === "vertical" ? "50%" : "33.3333%",
+      width: orientation === "vertical" ? 0 : 1,
+    });
+    const [zoomFactor, setZoomFactor] = useState(zoom);
+  
+    useEffect(() => {
+      setImage1(images[0]);
+      setImage2(images[1]);
+    }, [images]);
+  
+    const handleZoom = (event) => {
+      setZoomFactor(event.deltaY / 10);
+    };
+  
+    const handleMove = (event) => {
+      const { x, y } = event.touches[0] || event.clientX;
+      setCurtain({
+        position: orientation === "vertical" ? y / window.innerHeight : x / window.innerWidth,
+        width: orientation === "vertical" ? 0 : 1 - curtain.position,
+      });
+    };
+  
+    return (
+      <div style={{ width: "100%", height: "100%" }}>
+        <div style={{ width: "100%", height: "100%" }}>
+          <div style={{ width: "50%" }}>
+            <img src={image1} style={{ zoom: zoomFactor }} />
+          </div>
+          <div style={{ width: "50%" }}>
+            <img src={image2} style={{ zoom: zoomFactor }} />
+          </div>
+        </div>
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: 1,
+            pointerEvents: "none",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              width: curtain.width,
+              height: curtain.height,
+              top: curtain.position * window.innerHeight,
+              left: curtain.position * window.innerWidth,
+              backgroundColor: "black",
+              opacity: 0.5,
+            }}
+          ></div>
+        </div>
+      </div>
+    );
+  }
+  
+
+  const CompareImagesTest = () => {
+    return (
+      <div style={{ width: "100%", height: "100%" }}>
+        <CompareImages
+          images={[
+            "https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?size=626&ext=jpg&ga=GA1.1.1546980028.1702080000&semt=sph",
+            "https://t4.ftcdn.net/jpg/06/68/30/09/360_F_668300949_oDIKoExgMgVETBk9MuJicJ0MTrMHhTDW.jpg",
+          ]}
+          orientation="vertical"
+          zoom={1}
+        />
+      </div>
+    );
+  }

package/src/widgets/planner/Planner.test.js

@@ -51,6 +51,7 @@ const PlannerTest = (prop) => {
             navigation={true} 
             //onSelectCell={console.log}
             //onChange={(data) => console.log('D&D', data)}
+            config = {{ range: "week" }}
         >
 
         </Planner>