Custom date picker and custom component improvements

demo/package.json

@@ -6,28 +6,29 @@
  "dependencies": {
  "@chakra-ui/icons": "^2.1.1",
  "@chakra-ui/react": "^2.8.2",
- "@emotion/react": "^11.11.1",
+ "@emotion/react": "^11.11.3",
  "@emotion/styled": "^11.11.0",
- "@testing-library/jest-dom": "^6.1.4",
- "@testing-library/react": "^14.1.0",
- "@testing-library/user-event": "^14.5.1",
- "@types/jest": "^29.5.8",
- "@types/node": "^20.9.0",
- "@types/react": "^18.2.37",
- "@types/react-dom": "^18.2.15",
- "firebase": "^9.22.1",
- "framer-motion": "^10.16.5",
- "json-edit-react": "^1.2.0",
+ "@testing-library/jest-dom": "^6.3.0",
+ "@testing-library/react": "^14.1.2",
+ "@testing-library/user-event": "^14.5.2",
+ "@types/jest": "^29.5.11",
+ "@types/node": "^20.11.6",
+ "@types/react": "^18.2.48",
+ "@types/react-dom": "^18.2.18",
+ "firebase": "^10.7.2",
+ "framer-motion": "^11.0.3",
+ "json-edit-react": "^1.2.1",
  "just-clone": "^6.2.0",
  "just-compare": "^2.3.0",
  "react": "^18.2.0",
+ "react-datepicker": "^5.0.0",
  "react-dom": "^18.2.0",
  "react-firebase-hooks": "^5.1.1",
- "react-icons": "^4.12.0",
+ "react-icons": "^5.0.1",
  "react-scripts": "5.0.1",
- "typescript": "^5.2.2",
+ "typescript": "^5.3.3",
  "use-undo": "^1.1.1",
- "web-vitals": "^3.5.0"
+ "web-vitals": "^3.5.2"
  },
  "scripts": {
  "start": "rimraf ./src/json-edit-react && mkdir ./src/json-edit-react && mkdir ./src/json-edit-react/src && concurrently --kill-others-on-fail \"PORT=3008 react-scripts start\" \"nodemon watch.js\"",
@@ -65,8 +66,8 @@
  },
  "devDependencies": {
  "concurrently": "^8.2.2",
- "gh-pages": "^6.0.0",
+ "gh-pages": "^6.1.1",
  "node-fetch": "^3.3.2",
- "nodemon": "^3.0.1"
+ "nodemon": "^3.0.3"
  }
 }

demo/src/App.tsx

@@ -1,10 +1,8 @@
+import DatePicker from 'react-datepicker'
+import 'react-datepicker/dist/react-datepicker.css'
+
 import React, { useEffect, useRef } from 'react'
-/* Local version */
-// import { JsonEditor, themes, ThemeName, Theme, ThemeInput } from './json-edit-react/src'
-/* npm version */
-import { JsonEditor, themes, ThemeName, Theme, ThemeInput } from 'json-edit-react'
-/* Local built version */
-// import { JsonEditor, themes, ThemeName, Theme, ThemeInput } from './package'
+import { JsonEditor, themes, ThemeName, Theme, ThemeInput } from './JsonEditImport'
 import { FaNpm, FaExternalLinkAlt, FaGithub } from 'react-icons/fa'
 import { BiReset } from 'react-icons/bi'
 import { AiOutlineCloudUpload } from 'react-icons/ai'

demo/src/JsonEditImport.ts

@@ -0,0 +1,46 @@
+/* Local version */
+import {
+ JsonEditor,
+ themes,
+ Theme,
+ ThemeName,
+ ThemeInput,
+ CustomNodeProps,
+ CustomNodeDefinition,
+ FilterFunction,
+} from './json-edit-react/src'
+
+/* npm version */
+// import {
+// JsonEditor,
+// themes,
+// ThemeName,
+// Theme,
+// ThemeInput,
+// CustomNodeProps,
+// CustomNodeDefinition,
+// FilterFunction,
+// } from 'json-edit-react'
+
+/* Local built version */
+// import {
+// JsonEditor,
+// themes,
+// ThemeName,
+// Theme,
+// ThemeInput,
+// CustomNodeProps,
+// CustomNodeDefinition,
+// FilterFunction,
+// } from './package'
+
+export {
+ JsonEditor,
+ themes,
+ type Theme,
+ type ThemeName,
+ type ThemeInput,
+ type CustomNodeProps,
+ type CustomNodeDefinition,
+ type FilterFunction,
+}

demo/src/customComponents/DateTimePicker.tsx

@@ -0,0 +1,96 @@
+/**
+ * An example Custom Component:
+ * https://github.com/CarlosNZ/json-edit-react#custom-nodes
+ *
+ * A date/time picker which can be configure to show (using the
+ * CustomNodeDefinitions at the bottom of this file) when an ISO date/time
+ * string is present in the JSON data, and present a Date picker interface
+ * rather than requiring the user to edit the ISO string directly.
+ */
+
+import React from 'react'
+import DatePicker from 'react-datepicker'
+import { Button } from '@chakra-ui/react'
+import { CustomNodeProps, CustomNodeDefinition } from '../JsonEditImport'
+
+// Styles
+import 'react-datepicker/dist/react-datepicker.css'
+// For better matching with Chakra-UI
+import './style.css'
+
+export const DateTimePicker: React.FC<CustomNodeProps> = ({
+ value,
+ setValue,
+ handleEdit,
+ handleCancel,
+ handleKeyPress,
+ isEditing,
+ setIsEditing,
+ styles,
+ customProps,
+}) => {
+ const { dateFormat = 'MMM d, yyyy h:mm aa', showTimeSelect = true } = customProps ?? {}
+
+ const date = new Date(value as string)
+
+ return isEditing ? (
+ // Picker only shows up when "editing". Due to the `showOnView: false` in
+ // the definition below, this component will not show at all when viewing
+ // (and so will show raw ISO strings). However, we've defined an alternative
+ // here too, when showOnView == true, in which case the date/time string is
+ // shown as a localised date/time.
+ <DatePicker
+ // Check to prevent invalid date (from previous data value) crashing the
+ // component
+ selected={isNaN(date as any) ? null : date}
+ showTimeSelect={showTimeSelect}
+ dateFormat={dateFormat}
+ onChange={(date: Date) => setValue(date.toISOString())}
+ open={true}
+ onKeyDown={handleKeyPress}
+ >
+ <div style={{ display: 'flex', gap: 20 }}>
+ {/* These buttons are not really necessary -- you can either use the
+ standard Ok/Cancel icons, or keyboard Enter/Esc, but shown for demo
+ purposes */}
+ <Button
+ color={styles.container.backgroundColor}
+ backgroundColor={styles.iconOk.color}
+ onClick={handleEdit}
+ >
+ OK
+ </Button>
+ <Button
+ color={styles.container.backgroundColor}
+ backgroundColor={styles.iconCancel.color}
+ onClick={handleCancel}
+ >
+ Cancel
+ </Button>
+ </div>
+ </DatePicker>
+ ) : (
+ <div
+ // Double-click behaviour same as standard elements
+ onDoubleClick={() => setIsEditing(true)}
+ className="jer-value-string"
+ style={styles.string}
+ >
+ "{new Date(value as string).toLocaleDateString()}"
+ </div>
+ )
+}
+
+// Definition for custom node behaviour
+export const dateNodeDefinition: CustomNodeDefinition = {
+ // Condition is a regex to match ISO strings
+ condition: ({ value }) =>
+ typeof value === 'string' &&
+ /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}[\d\.]*(Z?|[\+-][\d:]+)$/.test(value),
+ element: DateTimePicker, // the component defined above
+ showOnView: false,
+ showOnEdit: true,
+ name: 'Date', // shown in the Type selector menu
+ showInTypesSelector: true,
+ defaultValue: new Date().toISOString(), // when instantiated, default to the current date/time
+}

demo/src/customComponents/style.css

@@ -0,0 +1,102 @@
+/* Styles to make Date picker more like Chakra-UI
+ From https://github.com/chakra-ui/chakra-ui/issues/580#issuecomment-653527951
+*/
+
+.react-datepicker {
+ font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+ sans-serif;
+ overflow: hidden;
+}
+
+react-datepicker__navigation--next--with-time:not(
+ .react-datepicker__navigation--next--with-today-button
+ ) {
+ right: 90px;
+}
+
+/* .react-datepicker__navigation--previous,
+.react-datepicker__navigation--next {
+ height: 8px;
+} */
+
+.react-datepicker__navigation--previous {
+ border-right-color: #cbd5e0;
+
+ &:hover {
+ border-right-color: #a0aec0;
+ }
+}
+
+.react-datepicker__navigation--next {
+ border-left-color: #cbd5e0;
+
+ &:hover {
+ border-left-color: #a0aec0;
+ }
+}
+
+.react-datepicker-wrapper,
+.react-datepicker__input-container {
+ display: block;
+}
+
+.react-datepicker__input-container input {
+ padding-left: 1em;
+ padding-right: 1em;
+ color: darkslategrey;
+}
+
+.react-datepicker__header {
+ border-radius: 0;
+ background: #f7fafc;
+}
+
+.react-datepicker,
+.react-datepicker__header,
+.react-datepicker__time-container {
+ border-color: #e2e8f0;
+}
+
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
+ font-size: inherit;
+ font-weight: 600;
+}
+
+.react-datepicker__time-container
+ .react-datepicker__time
+ .react-datepicker__time-box
+ ul.react-datepicker__time-list
+ li.react-datepicker__time-list-item {
+ margin: 0 1px 0 0;
+ height: auto;
+ padding: 7px 10px;
+
+ &:hover {
+ background: #edf2f7;
+ }
+}
+
+.react-datepicker__day:hover {
+ background: #edf2f7;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--in-range,
+.react-datepicker__month-text--selected,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__time-container
+ .react-datepicker__time
+ .react-datepicker__time-box
+ ul.react-datepicker__time-list
+ li.react-datepicker__time-list-item--selected {
+ background: #3182ce;
+ font-weight: normal;
+
+ &:hover {
+ background: #2a69ac;
+ }
+}