Merge pull request #34 from revolist/568-revogrid

#568  Enhance Datepicker Positioning Based on Screen Edge

Author: revolist

lib/editor.ts

@@ -53,6 +53,10 @@ export class ColumnEditor implements EditorBase {
     );
   }
 
+  private isDate(value: any): value is Date {
+    return Object.prototype.toString.call(value) === '[object Date]' && !isNaN(value.getTime());
+  }
+
   disconnectedCallback() {
     this.calendar?.hide();
     this.revoFloat?.remove();
@@ -66,6 +70,9 @@ export class ColumnEditor implements EditorBase {
       const model = this.editCell.model || {};
       val = model[this.editCell?.prop] || '';
     }
+    if (this.isDate(val)) {
+      val = val.toISOString().split('T')[0];
+    }
 
     return h('div', { class: 'revo-holder' }, [
       h(
@@ -83,10 +90,17 @@ export class ColumnEditor implements EditorBase {
             ...this.data.column,
             ref: (e: HTMLDuetDatePickerElement) => (this.calendar = e),
             value: val,
+
             onDuetChange: ({
               detail: { value, valueAsDate },
             }: CustomEvent<DateChangeEvent>) =>
               this.saveCallback(this.data.column.valueAsDate ? valueAsDate : value),
+            onDuetOpen: () => {
+              const { bottom } = this.revoFloat?.getBoundingClientRect() || {};
+              const { clientHeight } = document.body;
+              const position = bottom + 300 > clientHeight ? 'top' : 'bottom';
+              this.calendar?.setAttribute('position', position);
+            },
           }),
         ],
       ),

lib/renderer.ts

@@ -22,11 +22,10 @@ const svg = `<svg aria-hidden="true" viewBox="0 0 21 21" xmlns="http://www.w3.or
 
 export const ColumnRenderer = (
   h: HyperFunc<VNode>,
-  { model, prop }: ColumnDataSchemaModel,
-): VNode[] => {
-  let val = model[prop];
+  { value }: ColumnDataSchemaModel,
+) => {
   return [
-    h('div', { class: { 'cell-value-wrapper': true } }, [val]),
+    h('div', { class: { 'cell-value-wrapper': true } }, value?.toString()),
     h('button', {
       class: { calendar: true },
       innerHTML: svg,

lib/style.css

@@ -11,6 +11,11 @@
     font-size: 14px;
 }
 
+.revo-float duet-date-picker[position="top"] .duet-date__dialog {
+    top: inherit;
+    bottom: 100%;
+}
+
 .revo-float .duet-date {
     height: 100%;
     display: flex;
@@ -51,9 +56,8 @@ revogr-data .calendar {
     opacity: .5;
     text-align: center;
     background-color: transparent;
-
-    svg {
-        width: 14px;
-        vertical-align: middle;
-    }
+}
+revogr-data .calendar svg {
+    width: 14px;
+    vertical-align: middle;
 }

package-lock.json

@@ -51,7 +51,8 @@
   "license": "MIT",
   "devDependencies": {
     "@duetds/date-picker": "^1.4.0",
-    "@revolist/revogrid": "^4.10.1",
+    "@faker-js/faker": "^9.0.1",
+    "@revolist/revogrid": "^4.10.8",
     "@types/lodash": "^4.14.149",
     "lodash": "4.17.20",
     "typescript": "^5.2.2",

package.json

@@ -1,36 +1,28 @@
 import './style.css';
 import { defineCustomElements } from '@revolist/revogrid/loader';
 import Plugin from '@revolist/revogrid-column-date';
+import { makeData } from './makeData';
 
 defineCustomElements();
 
 const app = document.querySelector('#app');
 const grid = document.createElement('revo-grid');
 
 const COLUMN_TYPE_DATE = 'date';
-
+grid.theme = 'compact';
 // define columns
 grid.columns = [
-  { name: 'A', prop: 'name', size: 250 },
+  { name: 'Last Name', prop: 'lastName', size: 200 },
   {
-    name: 'B',
-    prop: 'date',
+    name: 'Birthday',
+    prop: 'birthday',
     size: 150,
+    valueAsDate: true,
     // provide column type format
     columnType: COLUMN_TYPE_DATE,
   },
 ];
-grid.source = [
-  {
-    name: 'Mark',
-    date: '2020-08-24',
-  },
-  {
-    name: 'Kate',
-    date: '2020-08-24',
-  },
-];
-
+grid.source = makeData(120);
 // define formats
 grid.columnTypes = {
   [COLUMN_TYPE_DATE]: new Plugin(),

src/index.ts

@@ -0,0 +1,52 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  avatar: string
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  birthday: string
+  status: 'relationship' | 'complicated' | 'single'
+  subRows?: Person[]
+}
+
+const range = (len: number) => {
+  const arr: number[] = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (): Person => {
+  return {
+    avatar: faker.image.avatar(),
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    birthday: faker.date.birthdate().toISOString().split('T')[0],
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0]!,
+  }
+}
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
+    return range(len).map((): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

src/makeData.ts

@@ -1,4 +1,4 @@
-html {
+html, body {
   height: 100%;
   width: 100%;
   padding: 0;
@@ -12,3 +12,11 @@ html {
   width: 10px;
   height: 10px;
 }
+
+#app {
+  height: 100%;
+}
+
+revo-grid {
+  height: 100%;
+}