Add datepicker

mui · Dec 29, 2022 · a368ada · a368ada
1 parent f9d3367
commit a368ada
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 24 deletions.
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -266,12 +266,20 @@ function RenderedNodeContent({ node, childNodeGroups, Component }: RenderedNodeC
 
         const handler = (param: any) => {
           const bindingId = `${nodeId}.props.${key}`;
-          const value = argType.onChangeHandler ? argType.onChangeHandler(param) : param;
+
+          const defaultValues = _.mapValues(argTypes, ({ defaultValue }) => defaultValue);
+          const propsValues = _.mapValues(node.props, ({ value }) => value);
+          const props = {
+            ...defaultValues,
+            ...propsValues,
+          };
+
+          const value = argType.onChangeHandler ? argType.onChangeHandler(param, props) : param;
           setControlledBinding(bindingId, { value });
         };
         return [argType.onChangeProp, handler];
       }),
-    [argTypes, nodeId, setControlledBinding],
+    [argTypes, nodeId, setControlledBinding, node.props],
   );
 
   const navigateToPage = usePageNavigator();

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx
@@ -49,11 +49,13 @@ export default function BindableEditor<V>({
   );
 
   const initConstValue = React.useCallback(() => {
+    let constValue = liveBinding?.value;
+
     if (value?.type === 'const') {
-      return value.value;
+      constValue = value.value;
     }
 
-    return liveBinding?.value;
+    return constValue;
   }, [liveBinding, value]);
 
   const constValue = React.useMemo(initConstValue, [value, initConstValue]);

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
@@ -90,26 +90,20 @@ function ComponentPropsEditor<P extends object>({
           <Typography variant="overline" className={classes.sectionHeading}>
             Layout:
           </Typography>
-          {hasLayoutHorizontalControls ? (
-            <div className={classes.control}>
-              <NodeAttributeEditor
-                node={node}
-                namespace="layout"
-                name="horizontalAlign"
-                argType={layoutBoxArgTypes.horizontalAlign}
-              />
-            </div>
-          ) : null}
-          {hasLayoutVerticalControls ? (
-            <div className={classes.control}>
-              <NodeAttributeEditor
-                node={node}
-                namespace="layout"
-                name="verticalAlign"
-                argType={layoutBoxArgTypes.verticalAlign}
-              />
-            </div>
-          ) : null}
+
+          <div className={classes.control}>
+            <NodeAttributeEditor
+              node={node}
+              namespace="layout"
+              name={hasLayoutHorizontalControls ? 'horizontalAlign' : 'verticalAlign'}
+              argType={
+                hasLayoutHorizontalControls
+                  ? layoutBoxArgTypes.horizontalAlign
+                  : layoutBoxArgTypes.verticalAlign
+              }
+            />
+          </div>
+
           <Divider sx={{ mt: 1 }} />
         </React.Fragment>
       ) : null}

diff --git a/packages/toolpad-app/src/toolpadComponents/index.tsx b/packages/toolpad-app/src/toolpadComponents/index.tsx
@@ -32,6 +32,7 @@ const INTERNAL_COMPONENTS = new Map<string, ToolpadComponentDefinition>([
   ['Image', { displayName: 'Image', builtIn: 'Image' }],
   ['DataGrid', { displayName: 'Data grid', builtIn: 'DataGrid' }],
   ['TextField', { displayName: 'Text field', builtIn: 'TextField' }],
+  ['DatePicker', { displayName: 'Date picker', builtIn: 'DatePicker' }],
   ['Text', { displayName: 'Text', builtIn: 'Text' }],
   ['Select', { displayName: 'Select', builtIn: 'Select' }],
   ['Paper', { displayName: 'Paper', builtIn: 'Paper' }],

diff --git a/packages/toolpad-components/src/DatePicker.tsx b/packages/toolpad-components/src/DatePicker.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+
+import { TextField } from '@mui/material';
+
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { createComponent } from '@mui/toolpad-core';
+import { Dayjs } from 'dayjs';
+
+export interface Props extends DesktopDatePickerProps<string, Dayjs> {
+  format: string;
+  separator: string;
+  fullWidth: boolean;
+  variant: 'outlined' | 'filled' | 'standard';
+  size: 'small' | 'medium';
+  sx: any;
+}
+
+const resolveFormat = (format: string, separator: string) => format.replaceAll(' ', separator);
+
+function DatePicker(props: Props) {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs as any}>
+      <DesktopDatePicker
+        inputFormat={resolveFormat(props.format, props.separator)}
+        {...props}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            fullWidth={props.fullWidth}
+            variant={props.variant}
+            size={props.size}
+            sx={props.sx}
+          />
+        )}
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default createComponent(DatePicker, {
+  argTypes: {
+    value: {
+      typeDef: { type: 'string' },
+      onChangeProp: 'onChange',
+      onChangeHandler: (newValue: Dayjs, { format, separator }: Props) => {
+        return newValue.format(resolveFormat(format, separator));
+      },
+      defaultValue: '',
+      defaultValueProp: 'defaultValue',
+    },
+    format: {
+      typeDef: {
+        type: 'string',
+        enum: ['DD MM YYYY', 'YYYY MM DD', 'MM DD YYYY'],
+      },
+      defaultValue: 'YYYY MM DD',
+    },
+    separator: {
+      typeDef: {
+        type: 'string',
+        enum: ['-', '/', ' '],
+      },
+      defaultValue: '-',
+    },
+    // @ts-ignore no idea why it complains even though it's done exactly same as TextField
+    defaultValue: {
+      typeDef: { type: 'string' },
+      defaultValue: '',
+    },
+    label: {
+      typeDef: { type: 'string' },
+    },
+    variant: {
+      typeDef: { type: 'string', enum: ['outlined', 'filled', 'standard'] },
+      defaultValue: 'outlined',
+    },
+    size: {
+      typeDef: { type: 'string', enum: ['small', 'medium'] },
+      defaultValue: 'small',
+    },
+    fullWidth: {
+      typeDef: { type: 'boolean' },
+    },
+    disabled: {
+      typeDef: { type: 'boolean' },
+    },
+    sx: {
+      typeDef: { type: 'object' },
+    },
+  },
+});
diff --git a/packages/toolpad-components/src/index.tsx b/packages/toolpad-components/src/index.tsx
@@ -18,5 +18,7 @@ export { default as Paper } from './Paper.js';
 
 export { default as Image } from './Image.js';
 
+export { default as DatePicker } from './DatePicker.js';
+
 export { CUSTOM_COLUMN_TYPES, NUMBER_FORMAT_PRESETS, inferColumns, parseColumns } from './DataGrid';
 export type { SerializableGridColumn, SerializableGridColumns, NumberFormat } from './DataGrid';