@mwater/visualization 5.4.1 → 5.4.3

package/src/datagrids/CellEditor.tsx

@@ -0,0 +1,354 @@
+import _ from "lodash"
+import React, { useState, ChangeEvent, useCallback } from "react"
+import { EnumValue, LiteralType, ExprUtils, Schema, DataSource } from "@mwater/expressions"
+import { RenderCellEditorProps } from "@mwater/react-library/lib/GridComponent"
+import ReactSelect from "react-select"
+import DatePicker from "react-datepicker"
+import "react-datepicker/dist/react-datepicker.css"
+import moment, { Moment } from "moment"
+import { IdLiteralComponent } from "@mwater/expressions-ui"
+
+/** Determine if type can be edited */
+export function canEditType(type: LiteralType) {
+  return ["text", "number", "enum", "enumset", "boolean", "date", "datetime", "id", "id[]"].includes(type)
+}
+
+/** Cell editor for a cell of the grid */
+export const CellEditor = (props: {
+  type: LiteralType
+  enumValues?: EnumValue[]
+  idTable?: string
+  initialValue: any
+  editorOptions: RenderCellEditorProps
+  /** Update the cell value. Returns true if successful, false if cancelled */
+  updateCellValue: (value: any) => Promise<boolean>
+  locale?: string
+  schema: Schema
+  dataSource: DataSource
+}) => {
+  const editorOptions = props.editorOptions
+  const [value, setValue] = useState(props.initialValue)
+  const [valid, setValid] = useState(true)
+
+  // Hook save function
+  editorOptions.setSaveEdit(() => {
+    if (!valid) {
+      return Promise.resolve(false)
+    }
+    if (value == props.initialValue) {
+      return Promise.resolve(true)
+    }
+    return props.updateCellValue(value)
+  })
+
+  if (editorOptions.saving) {
+    return (
+      <div style={{ backgroundColor: "#EEE", width: editorOptions.width, height: editorOptions.height, padding: 10 }}>
+        <i className="fa fa-spinner fa-spin" />
+      </div>
+    )
+  }
+
+  if (props.type == "text") {
+    return (
+      <input
+        type="text"
+        value={value || ""}
+        className="form-control"
+        onChange={(ev) => {
+          setValue(ev.target.value || null)
+        }}
+        onKeyDown={(ev) => {
+          if (ev.keyCode == 13) {
+            editorOptions.onEndEdit()
+          }
+        }}
+        style={{ height: editorOptions.height }}
+        ref={(node) => {
+          if (node) {
+            setTimeout(() => {
+              if (node) {
+                node.focus()
+              }
+            }, 0)
+          }
+        }}
+      />
+    )
+  }
+
+  if (props.type == "number") {
+    return (
+      <NumberInput
+        value={value}
+        onChange={setValue}
+        onValid={setValid}
+        height={editorOptions.height}
+        onEnter={editorOptions.onEndEdit}
+      />
+    )
+  }
+
+  if (props.type == "enum") {
+    return <EnumEditor value={value} onChange={setValue} enumValues={props.enumValues!} locale={props.locale} />
+  }
+
+  if (props.type == "enumset") {
+    return <EnumsetEditor value={value} onChange={setValue} enumValues={props.enumValues!} locale={props.locale} />
+  }
+
+  if (props.type == "boolean") {
+    return <BooleanEditor value={value} onChange={setValue} />
+  }
+
+  if (props.type == "date") {
+    return <DateEditor value={value} onChange={setValue} locale={props.locale} />
+  }
+
+  if (props.type == "datetime") {
+    return <DatetimeEditor value={value} onChange={setValue} locale={props.locale} />
+  }
+
+  if (props.type == "id") {
+    return (
+      <IdLiteralComponent
+        schema={props.schema}
+        dataSource={props.dataSource}
+        idTable={props.idTable!}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  }
+
+  if (props.type == "id[]") {
+    return (
+      <IdLiteralComponent
+        schema={props.schema}
+        dataSource={props.dataSource}
+        idTable={props.idTable!}
+        value={value}
+        onChange={setValue}
+        multi
+      />
+    )
+  }
+
+  // if (props.type == "geometry") {
+  //   const str = value.type == "Point" ? `${value.coordinates[1].toFixed(6)} ${value.coordinates[0].toFixed(6)}` : value.type
+  //   return <div className="custom-table-grid-cell-text">
+  //     { str }
+  //   </div>
+  // }
+
+  // TODO
+  // text[]
+  // image
+  // imagelist
+  // json
+
+  return <div />
+}
+
+/** Number input that calls onChange when number is valid and updates valid status */
+const NumberInput = (props: {
+  value: number | null
+  height: number
+  onChange: (value: number | null) => void
+  onValid: (valid: boolean) => void
+  onEnter: () => void
+}) => {
+  const [str, setStr] = useState(props.value != null ? props.value + "" : "")
+
+  const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    const text = ev.target.value
+    setStr(text)
+    if (!text) {
+      props.onChange(null)
+      props.onValid(true)
+    } else {
+      const num = parseFloat(text)
+      if (!isNaN(num)) {
+        props.onChange(num)
+        props.onValid(true)
+      } else {
+        props.onValid(false)
+      }
+    }
+  }
+
+  return (
+    <input
+      type="number"
+      value={str}
+      className="form-control"
+      onChange={handleChange}
+      style={{ height: props.height }}
+      onKeyDown={(ev) => {
+        if (ev.keyCode == 13) {
+          props.onEnter()
+        }
+      }}
+      ref={(node) => {
+        if (node) {
+          setTimeout(() => {
+            if (node) {
+              node.focus()
+            }
+          }, 0)
+        }
+      }}
+    />
+  )
+}
+
+/** Editor for an enum value */
+const EnumEditor = (props: {
+  value: any
+  onChange: (value: any) => void
+  enumValues: EnumValue[]
+  locale?: string
+}) => {
+  const options = props.enumValues.map((v) => ({ label: ExprUtils.localizeString(v.name, props.locale), value: v.id }))
+  return (
+    <ReactSelect
+      options={options}
+      isClearable={true}
+      onChange={(opt: any) => props.onChange(opt ? (opt as any).value : null)}
+      value={options.find((opt: any) => opt.value == props.value) || null}
+      styles={{
+        // Keep menu above modal
+        menu: (style) => ({ ...style, zIndex: 2000 })
+      }}
+      ref={(node) => {
+        if (node) {
+          setTimeout(() => {
+            if (node) {
+              node.focus()
+            }
+          }, 0)
+        }
+      }}
+    />
+  )
+}
+
+/** Editor for an enumset value */
+const EnumsetEditor = (props: {
+  value: any
+  onChange: (value: any) => void
+  enumValues: EnumValue[]
+  locale?: string
+}) => {
+  const options = props.enumValues.map((v) => ({ label: ExprUtils.localizeString(v.name, props.locale), value: v.id }))
+
+  const value = _.map(props.value || [], (v) => _.find(options, (o) => o.value == v)) || []
+
+  return (
+    <ReactSelect
+      options={options}
+      isClearable={true}
+      isMulti={true}
+      onChange={(opt: any) => {
+        props.onChange(opt && opt.length > 0 ? _.pluck(opt, "value") : null)
+      }}
+      value={value as any}
+      styles={{
+        // Keep menu above modal
+        menu: (style) => ({ ...style, zIndex: 2000 })
+      }}
+      ref={(node) => {
+        if (node) {
+          setTimeout(() => {
+            if (node) {
+              node.focus()
+            }
+          }, 0)
+        }
+      }}
+    />
+  )
+}
+
+/** Editor for a boolean value */
+const BooleanEditor = (props: { value: any; onChange: (value: any) => void }) => {
+  const options = [
+    { label: T`True`, value: true },
+    { label: T`False`, value: false }
+  ]
+
+  return (
+    <ReactSelect
+      options={options}
+      isClearable={true}
+      onChange={(opt: any) => props.onChange(opt ? (opt as any).value : null)}
+      value={options.find((opt) => opt.value == props.value) || null}
+      styles={{
+        // Keep menu above modal
+        menu: (style) => ({ ...style, zIndex: 2000 })
+      }}
+      ref={(node) => {
+        if (node) {
+          setTimeout(() => {
+            if (node) {
+              node.focus()
+            }
+          }, 0)
+        }
+      }}
+    />
+  )
+}
+
+/** Editor for a date */
+const DateEditor = (props: { value: any; onChange: (value: any) => void; locale?: string }) => {
+  const momentDate = props.value ? moment(props.value, "YYYY-MM-DD") : null
+
+  const handleChange = useCallback(
+    (value: Moment) => {
+      props.onChange(value ? value.format("YYYY-MM-DD") : null)
+    },
+    [props.onChange]
+  )
+
+  return (
+    <div style={{ padding: 2 }}>
+      <DatePicker
+        isClearable={true}
+        selected={momentDate}
+        onChange={handleChange}
+        dateFormat="YYYY-MM-DD"
+        className="form-control"
+        locale={props.locale}
+      />
+    </div>
+  )
+}
+
+/** Editor for a date */
+const DatetimeEditor = (props: { value: any; onChange: (value: any) => void; locale?: string }) => {
+  const momentDate = props.value ? moment(props.value, moment.ISO_8601) : null
+
+  const handleChange = useCallback(
+    (value: Moment) => {
+      props.onChange(value ? value.toISOString() : null)
+    },
+    [props.onChange]
+  )
+
+  return (
+    <div style={{ padding: 2 }}>
+      <DatePicker
+        fixedHeight={true}
+        isClearable={true}
+        selected={momentDate}
+        onChange={handleChange}
+        dateFormat="YYYY-MM-DD HH:mm"
+        className="form-control"
+        showTimeSelect={true}
+        timeFormat="HH:mm"
+        locale={props.locale}
+      />
+    </div>
+  )
+}